From 1389b92a348c9ba2b90c8ad5880cb56310af6d02 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Jan 2025 19:57:15 +0530
Subject: [PATCH] fix: hide section if section.hidden is true, also hide first
 sections border top using css

---
 frontend/src/components/FieldLayout.vue | 427 ++++++++++++------------
 1 file changed, 216 insertions(+), 211 deletions(-)

diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 82b05fc7..38c30339 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -15,239 +15,240 @@
         !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
       "
     >
-      <div class="overflow-hidden" :class="{ 'my-4 sm:my-6': hasTabs }">
-        <div
-          v-for="(section, i) in tab.sections"
-          :key="section.label"
-          class="section"
-        >
-          <div
-            v-if="i != 0"
-            class="w-full"
-            :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
-          />
-          <Section
-            class="text-lg font-medium"
-            :class="{ 'px-3 sm:px-5': hasTabs }"
-            :label="section.label"
-            :hideLabel="section.hideLabel || !section.label"
-            :opened="section.opened"
-            :collapsible="section.collapsible"
-            collapseIconPosition="right"
-          >
+      <div
+        class="sections overflow-hidden"
+        :class="{ 'my-4 sm:my-6': hasTabs }"
+      >
+        <template v-for="section in tab.sections" :key="section.name">
+          <div v-if="!section.hidden" class="section" :data-name="section.name">
             <div
-              class="column flex gap-4"
-              :class="[
-                {
-                  'px-3 sm:px-5': hasTabs,
-                  'mt-6': section.label && !section.hideLabel,
-                },
-              ]"
+              class="w-full section-border"
+              :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
+            />
+            <Section
+              class="text-lg font-medium"
+              :class="{ 'px-3 sm:px-5': hasTabs }"
+              :label="section.label"
+              :hideLabel="section.hideLabel || !section.label"
+              :opened="section.opened"
+              :collapsible="section.collapsible"
+              collapseIconPosition="right"
             >
               <div
-                class="flex flex-col gap-4 w-full"
-                v-for="column in section.columns"
-                :key="column.name"
+                class="flex gap-4"
+                :class="[
+                  {
+                    'px-3 sm:px-5': hasTabs,
+                    'mt-6': section.label && !section.hideLabel,
+                  },
+                ]"
               >
                 <div
-                  v-if="column.label && !column.hideLabel"
-                  class="text-ink-gray-9 max-w-fit text-base"
+                  class="column flex flex-col gap-4 w-full"
+                  v-for="column in section.columns"
+                  :key="column.name"
+                  :data-name="column.name"
                 >
-                  {{ column.label }}
-                </div>
-                <div v-for="field in column.fields" :key="field.name">
-                  <div class="settings-field">
-                    <div
-                      v-if="field.type != 'Check'"
-                      class="mb-2 text-sm text-ink-gray-5"
-                    >
-                      {{ __(field.label) }}
-                      <span
-                        class="text-ink-red-3"
-                        v-if="
-                          field.mandatory ||
-                          (field.mandatory_depends_on &&
-                            field.mandatory_via_depends_on)
-                        "
-                        >*</span
-                      >
-                    </div>
-                    <FormControl
-                      v-if="field.read_only && field.type !== 'Check'"
-                      type="text"
-                      :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
-                      :disabled="true"
-                    />
-                    <Grid
-                      v-else-if="field.type === 'Table'"
-                      v-model="data[field.name]"
-                      :doctype="field.options"
-                      :parentDoctype="doctype"
-                    />
-                    <FormControl
-                      v-else-if="field.type === 'Select'"
-                      type="select"
-                      class="form-control"
-                      :class="field.prefix ? 'prefix' : ''"
-                      :options="field.options"
-                      v-model="data[field.name]"
-                      :placeholder="getPlaceholder(field)"
-                    >
-                      <template v-if="field.prefix" #prefix>
-                        <IndicatorIcon :class="field.prefix" />
-                      </template>
-                    </FormControl>
-                    <div
-                      v-else-if="field.type == 'Check'"
-                      class="flex items-center gap-2"
-                    >
-                      <FormControl
-                        class="form-control"
-                        type="checkbox"
-                        v-model="data[field.name]"
-                        @change="(e) => (data[field.name] = e.target.checked)"
-                        :disabled="Boolean(field.read_only)"
-                      />
-                      <label
-                        class="text-sm text-ink-gray-5"
-                        @click="
-                          () => {
-                            if (!Boolean(field.read_only)) {
-                              data[field.name] = !data[field.name]
-                            }
-                          }
-                        "
+                  <div
+                    v-if="column.label && !column.hideLabel"
+                    class="text-ink-gray-9 max-w-fit text-base"
+                  >
+                    {{ column.label }}
+                  </div>
+                  <div v-for="field in column.fields" :key="field.name">
+                    <div class="settings-field">
+                      <div
+                        v-if="field.type != 'Check'"
+                        class="mb-2 text-sm text-ink-gray-5"
                       >
                         {{ __(field.label) }}
-                        <span class="text-ink-red-3" v-if="field.mandatory"
+                        <span
+                          class="text-ink-red-3"
+                          v-if="
+                            field.mandatory ||
+                            (field.mandatory_depends_on &&
+                              field.mandatory_via_depends_on)
+                          "
                           >*</span
                         >
-                      </label>
-                    </div>
-                    <div class="flex gap-1" v-else-if="field.type === 'Link'">
+                      </div>
+                      <FormControl
+                        v-if="field.read_only && field.type !== 'Check'"
+                        type="text"
+                        :placeholder="getPlaceholder(field)"
+                        v-model="data[field.name]"
+                        :disabled="true"
+                      />
+                      <Grid
+                        v-else-if="field.type === 'Table'"
+                        v-model="data[field.name]"
+                        :doctype="field.options"
+                        :parentDoctype="doctype"
+                      />
+                      <FormControl
+                        v-else-if="field.type === 'Select'"
+                        type="select"
+                        class="form-control"
+                        :class="field.prefix ? 'prefix' : ''"
+                        :options="field.options"
+                        v-model="data[field.name]"
+                        :placeholder="getPlaceholder(field)"
+                      >
+                        <template v-if="field.prefix" #prefix>
+                          <IndicatorIcon :class="field.prefix" />
+                        </template>
+                      </FormControl>
+                      <div
+                        v-else-if="field.type == 'Check'"
+                        class="flex items-center gap-2"
+                      >
+                        <FormControl
+                          class="form-control"
+                          type="checkbox"
+                          v-model="data[field.name]"
+                          @change="(e) => (data[field.name] = e.target.checked)"
+                          :disabled="Boolean(field.read_only)"
+                        />
+                        <label
+                          class="text-sm text-ink-gray-5"
+                          @click="
+                            () => {
+                              if (!Boolean(field.read_only)) {
+                                data[field.name] = !data[field.name]
+                              }
+                            }
+                          "
+                        >
+                          {{ __(field.label) }}
+                          <span class="text-ink-red-3" v-if="field.mandatory"
+                            >*</span
+                          >
+                        </label>
+                      </div>
+                      <div class="flex gap-1" v-else-if="field.type === 'Link'">
+                        <Link
+                          class="form-control flex-1 truncate"
+                          :value="data[field.name]"
+                          :doctype="field.options"
+                          :filters="field.filters"
+                          @change="(v) => (data[field.name] = v)"
+                          :placeholder="getPlaceholder(field)"
+                          :onCreate="field.create"
+                        />
+                        <Button
+                          v-if="data[field.name] && field.edit"
+                          class="shrink-0"
+                          :label="__('Edit')"
+                          @click="field.edit(data[field.name])"
+                        >
+                          <template #prefix>
+                            <EditIcon class="h-4 w-4" />
+                          </template>
+                        </Button>
+                      </div>
+
                       <Link
-                        class="form-control flex-1 truncate"
-                        :value="data[field.name]"
+                        v-else-if="field.type === 'User'"
+                        class="form-control"
+                        :value="getUser(data[field.name]).full_name"
                         :doctype="field.options"
                         :filters="field.filters"
                         @change="(v) => (data[field.name] = v)"
                         :placeholder="getPlaceholder(field)"
-                        :onCreate="field.create"
-                      />
-                      <Button
-                        v-if="data[field.name] && field.edit"
-                        class="shrink-0"
-                        :label="__('Edit')"
-                        @click="field.edit(data[field.name])"
+                        :hideMe="true"
                       >
                         <template #prefix>
-                          <EditIcon class="h-4 w-4" />
+                          <UserAvatar
+                            class="mr-2"
+                            :user="data[field.name]"
+                            size="sm"
+                          />
                         </template>
-                      </Button>
+                        <template #item-prefix="{ option }">
+                          <UserAvatar
+                            class="mr-2"
+                            :user="option.value"
+                            size="sm"
+                          />
+                        </template>
+                        <template #item-label="{ option }">
+                          <Tooltip :text="option.value">
+                            <div class="cursor-pointer">
+                              {{ getUser(option.value).full_name }}
+                            </div>
+                          </Tooltip>
+                        </template>
+                      </Link>
+                      <DateTimePicker
+                        v-else-if="field.type === 'Datetime'"
+                        v-model="data[field.name]"
+                        icon-left=""
+                        :formatter="(date) => getFormat(date, '', true, true)"
+                        :placeholder="getPlaceholder(field)"
+                        input-class="border-none"
+                      />
+                      <DatePicker
+                        v-else-if="field.type === 'Date'"
+                        icon-left=""
+                        v-model="data[field.name]"
+                        :formatter="(date) => getFormat(date, '', true)"
+                        :placeholder="getPlaceholder(field)"
+                        input-class="border-none"
+                      />
+                      <FormControl
+                        v-else-if="
+                          ['Small Text', 'Text', 'Long Text', 'Code'].includes(
+                            field.type,
+                          )
+                        "
+                        type="textarea"
+                        :placeholder="getPlaceholder(field)"
+                        v-model="data[field.name]"
+                      />
+                      <FormControl
+                        v-else-if="['Int'].includes(field.type)"
+                        type="number"
+                        :placeholder="getPlaceholder(field)"
+                        v-model="data[field.name]"
+                      />
+                      <FormControl
+                        v-else-if="field.type === 'Percent'"
+                        type="text"
+                        :value="getFormattedPercent(field.name, data)"
+                        :placeholder="getPlaceholder(field)"
+                        :disabled="Boolean(field.read_only)"
+                        @change="data[field.name] = flt($event.target.value)"
+                      />
+                      <FormControl
+                        v-else-if="field.type === 'Float'"
+                        type="text"
+                        :value="getFormattedFloat(field.name, data)"
+                        :placeholder="getPlaceholder(field)"
+                        :disabled="Boolean(field.read_only)"
+                        @change="data[field.name] = flt($event.target.value)"
+                      />
+                      <FormControl
+                        v-else-if="field.type === 'Currency'"
+                        type="text"
+                        :value="getFormattedCurrency(field.name, data)"
+                        :placeholder="getPlaceholder(field)"
+                        :disabled="Boolean(field.read_only)"
+                        @change="data[field.name] = flt($event.target.value)"
+                      />
+                      <FormControl
+                        v-else
+                        type="text"
+                        :placeholder="getPlaceholder(field)"
+                        v-model="data[field.name]"
+                        :disabled="Boolean(field.read_only)"
+                      />
                     </div>
-
-                    <Link
-                      v-else-if="field.type === 'User'"
-                      class="form-control"
-                      :value="getUser(data[field.name]).full_name"
-                      :doctype="field.options"
-                      :filters="field.filters"
-                      @change="(v) => (data[field.name] = v)"
-                      :placeholder="getPlaceholder(field)"
-                      :hideMe="true"
-                    >
-                      <template #prefix>
-                        <UserAvatar
-                          class="mr-2"
-                          :user="data[field.name]"
-                          size="sm"
-                        />
-                      </template>
-                      <template #item-prefix="{ option }">
-                        <UserAvatar
-                          class="mr-2"
-                          :user="option.value"
-                          size="sm"
-                        />
-                      </template>
-                      <template #item-label="{ option }">
-                        <Tooltip :text="option.value">
-                          <div class="cursor-pointer">
-                            {{ getUser(option.value).full_name }}
-                          </div>
-                        </Tooltip>
-                      </template>
-                    </Link>
-                    <DateTimePicker
-                      v-else-if="field.type === 'Datetime'"
-                      v-model="data[field.name]"
-                      icon-left=""
-                      :formatter="(date) => getFormat(date, '', true, true)"
-                      :placeholder="getPlaceholder(field)"
-                      input-class="border-none"
-                    />
-                    <DatePicker
-                      v-else-if="field.type === 'Date'"
-                      icon-left=""
-                      v-model="data[field.name]"
-                      :formatter="(date) => getFormat(date, '', true)"
-                      :placeholder="getPlaceholder(field)"
-                      input-class="border-none"
-                    />
-                    <FormControl
-                      v-else-if="
-                        ['Small Text', 'Text', 'Long Text', 'Code'].includes(
-                          field.type,
-                        )
-                      "
-                      type="textarea"
-                      :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
-                    />
-                    <FormControl
-                      v-else-if="['Int'].includes(field.type)"
-                      type="number"
-                      :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
-                    />
-                    <FormControl
-                      v-else-if="field.type === 'Percent'"
-                      type="text"
-                      :value="getFormattedPercent(field.name, data)"
-                      :placeholder="getPlaceholder(field)"
-                      :disabled="Boolean(field.read_only)"
-                      @change="data[field.name] = flt($event.target.value)"
-                    />
-                    <FormControl
-                      v-else-if="field.type === 'Float'"
-                      type="text"
-                      :value="getFormattedFloat(field.name, data)"
-                      :placeholder="getPlaceholder(field)"
-                      :disabled="Boolean(field.read_only)"
-                      @change="data[field.name] = flt($event.target.value)"
-                    />
-                    <FormControl
-                      v-else-if="field.type === 'Currency'"
-                      type="text"
-                      :value="getFormattedCurrency(field.name, data)"
-                      :placeholder="getPlaceholder(field)"
-                      :disabled="Boolean(field.read_only)"
-                      @change="data[field.name] = flt($event.target.value)"
-                    />
-                    <FormControl
-                      v-else
-                      type="text"
-                      :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
-                      :disabled="Boolean(field.read_only)"
-                    />
                   </div>
                 </div>
               </div>
-            </div>
-          </Section>
-        </div>
+            </Section>
+          </div>
+        </template>
       </div>
     </Tabs>
   </div>
@@ -344,4 +345,8 @@ const getPlaceholder = (field) => {
 .section:has(.settings-field) {
   display: block;
 }
+
+.sections .section:first-of-type .section-border {
+  display: none;
+}
 </style>