From 878003909a75827347fcf85063b7900ac7ea0139 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 5 Dec 2024 17:58:21 +0530
Subject: [PATCH] fix: use Section component in Data tab

---
 frontend/src/components/Fields.vue | 296 +++++++++++++++--------------
 1 file changed, 153 insertions(+), 143 deletions(-)

diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index 98d86e14..ca297936 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -1,173 +1,183 @@
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col my-4 sm:my-6">
     <div
-      v-for="section in sections"
+      v-for="(section, i) in sections"
       :key="section.label"
       class="section first:border-t-0 border-outline-gray-modals first:pt-0"
-      :class="section.hideBorder ? '' : 'border-t pt-4'"
     >
       <div
-        v-if="!section.hideLabel"
-        class="flex h-7 mb-3 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
+        v-if="!section.hideBorder && i != 0"
+        class="h-px w-full border-t my-5"
+      />
+      <Section
+        class="text-lg font-medium px-3 sm:px-5"
+        :label="section.label"
+        :hideLabel="section.hideLabel"
+        :opened="section.opened"
+        collapseIconPosition="right"
       >
-        {{ section.label }}
-      </div>
-      <div class="grid gap-4" :class="gridClass(section.columns)">
-        <div v-for="field in section.fields" :key="field.name">
-          <div
-            class="settings-field"
-            v-if="
-              (field.type == 'Check' ||
-                (field.read_only && data[field.name]) ||
-                !field.read_only ||
-                !field.hidden) &&
-              (!field.depends_on || field.display_via_depends_on)
-            "
-          >
+        <div
+          class="grid gap-4 mt-6 px-3 sm:px-5"
+          :class="gridClass(section.columns)"
+        >
+          <div v-for="field in section.fields" :key="field.name">
             <div
-              v-if="field.type != 'Check'"
-              class="mb-2 text-sm text-ink-gray-5"
+              class="settings-field"
+              v-if="
+                (field.type == 'Check' ||
+                  (field.read_only && data[field.name]) ||
+                  !field.read_only ||
+                  !field.hidden) &&
+                (!field.depends_on || field.display_via_depends_on)
+              "
             >
-              {{ __(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"
-            />
-            <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="data[field.name] = !data[field.name]"
+              <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>
-              </label>
-            </div>
-            <div class="flex gap-1" v-else-if="field.type === 'Link'">
+                <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"
+              />
+              <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="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"
+                  :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"
-                :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'].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
+                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'].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
-              type="text"
-              :placeholder="getPlaceholder(field)"
-              v-model="data[field.name]"
-              :disabled="Boolean(field.read_only)"
-            />
           </div>
         </div>
-      </div>
+      </Section>
     </div>
   </div>
 </template>
 
 <script setup>
+import Section from '@/components/Section.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'