From 12b93c9a74c6d24fb7ae9d411bf27b364a0f3260 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 Jan 2025 11:21:26 +0530
Subject: [PATCH] fix: reactive field layout

---
 frontend/src/components/FieldLayout.vue       | 436 +++++++++---------
 .../src/components/Modals/SidePanelModal.vue  |   2 +-
 frontend/src/components/Section.vue           |  10 +-
 frontend/src/pages/Contact.vue                |   6 +-
 frontend/src/pages/Deal.vue                   |   2 +-
 frontend/src/pages/Lead.vue                   |   2 +-
 frontend/src/pages/Organization.vue           |   6 +-
 7 files changed, 236 insertions(+), 228 deletions(-)

diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 0ac58d67..0d7e60ac 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -26,8 +26,15 @@
               :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
             />
             <Section
-              class="text-lg font-medium"
-              :class="{ 'px-3 sm:px-5': hasTabs }"
+              class="flex gap-4 text-lg font-medium"
+              :class="{
+                'px-3 sm:px-5': hasTabs,
+                'mt-6': section.label && !section.hideLabel,
+              }"
+              :labelClass="[
+                'text-lg font-medium',
+                { 'px-3 sm:px-5': hasTabs },
+              ]"
               :label="section.label"
               :hideLabel="section.hideLabel || !section.label"
               :opened="section.opened"
@@ -35,216 +42,215 @@
               collapseIconPosition="right"
             >
               <div
-                class="flex gap-4"
-                :class="[
-                  {
-                    'px-3 sm:px-5': hasTabs,
-                    'mt-6': section.label && !section.hideLabel,
-                  },
-                ]"
+                class="column flex flex-col gap-4 w-full"
+                v-for="column in section.columns"
+                :key="column.name"
+                :data-name="column.name"
               >
                 <div
-                  class="column flex flex-col gap-4 w-full"
-                  v-for="column in section.columns"
-                  :key="column.name"
-                  :data-name="column.name"
+                  v-if="column.label && !column.hideLabel"
+                  class="text-ink-gray-9 max-w-fit text-base"
                 >
+                  {{ column.label }}
+                </div>
+                <template v-for="field in column.fields" :key="field.name">
                   <div
-                    v-if="column.label && !column.hideLabel"
-                    class="text-ink-gray-9 max-w-fit text-base"
+                    v-if="
+                      (field.type == 'Check' ||
+                        (field.read_only && data[field.name]) ||
+                        !field.read_only) &&
+                      (!field.depends_on || field.display_via_depends_on) &&
+                      !field.hidden
+                    "
+                    class="field"
                   >
-                    {{ 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"
+                    <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]
+                            }
+                          }
+                        "
                       >
                         {{ __(field.label) }}
-                        <span
-                          class="text-ink-red-3"
-                          v-if="
-                            field.mandatory ||
-                            (field.mandatory_depends_on &&
-                              field.mandatory_via_depends_on)
-                          "
+                        <span class="text-ink-red-3" v-if="field.mandatory"
                           >*</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]
-                              }
-                            }
-                          "
-                        >
-                          {{ __(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>
-
+                      </label>
+                    </div>
+                    <div class="flex gap-1" v-else-if="field.type === 'Link'">
                       <Link
-                        v-else-if="field.type === 'User'"
-                        class="form-control"
-                        :value="getUser(data[field.name]).full_name"
+                        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)"
-                        :hideMe="true"
+                        :onCreate="field.create"
+                      />
+                      <Button
+                        v-if="data[field.name] && field.edit"
+                        class="shrink-0"
+                        :label="__('Edit')"
+                        @click="field.edit(data[field.name])"
                       >
                         <template #prefix>
-                          <UserAvatar
-                            class="mr-2"
-                            :user="data[field.name]"
-                            size="sm"
-                          />
+                          <EditIcon class="h-4 w-4" />
                         </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)"
-                      />
+                      </Button>
                     </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>
+                </template>
               </div>
             </Section>
           </div>
@@ -295,32 +301,22 @@ const _tabs = computed(() => {
   return props.tabs.map((tab) => {
     tab.sections = tab.sections.map((section) => {
       section.columns = section.columns.map((column) => {
-        column.fields = column.fields
-          .map((field) => {
-            if (field.type == 'Link' && field.options == 'User') {
-              field.type = 'User'
-            }
-            return {
-              ...field,
-              display_via_depends_on: evaluateDependsOnValue(
-                field.depends_on,
-                props.data,
-              ),
-              mandatory_via_depends_on: evaluateDependsOnValue(
-                field.mandatory_depends_on,
-                props.data,
-              ),
-            }
-          })
-          .filter((field) => {
-            return (
-              (field.type == 'Check' ||
-                (field.read_only && props.data[field.name]) ||
-                !field.read_only) &&
-              (!field.depends_on || field.display_via_depends_on) &&
-              !field.hidden
-            )
-          })
+        column.fields = column.fields.map((field) => {
+          if (field.type == 'Link' && field.options == 'User') {
+            field.type = 'User'
+          }
+          return {
+            ...field,
+            display_via_depends_on: evaluateDependsOnValue(
+              field.depends_on,
+              props.data,
+            ),
+            mandatory_via_depends_on: evaluateDependsOnValue(
+              field.mandatory_depends_on,
+              props.data,
+            ),
+          }
+        })
         return column
       })
       return section
@@ -352,7 +348,7 @@ const getPlaceholder = (field) => {
   display: none;
 }
 
-.section:has(.settings-field) {
+.section:has(.field) {
   display: block;
 }
 
diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
index 29130a01..e4f674d4 100644
--- a/frontend/src/components/Modals/SidePanelModal.vue
+++ b/frontend/src/components/Modals/SidePanelModal.vue
@@ -46,7 +46,7 @@
               }"
             >
               <Section
-                class="p-2"
+                labelClass="p-2"
                 :label="section.label"
                 :opened="section.opened"
               >
diff --git a/frontend/src/components/Section.vue b/frontend/src/components/Section.vue
index ec07996f..dcdae8a0 100644
--- a/frontend/src/components/Section.vue
+++ b/frontend/src/components/Section.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-      <div v-if="!hide" class="flex items-center justify-between">
+      <div v-if="!hide" class="column-header flex items-center justify-between">
         <div
           class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
-          v-bind="$attrs"
+          :class="labelClass"
           @click="collapsible && toggle()"
         >
           <FeatherIcon
@@ -34,7 +34,7 @@
       enter-from-class="max-h-0 overflow-hidden"
       leave-to-class="max-h-0 overflow-hidden"
     >
-      <div v-show="opened">
+      <div class="columns" v-bind="$attrs" v-show="opened">
         <slot v-bind="{ opened, open, close, toggle }" />
       </div>
     </transition>
@@ -64,6 +64,10 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  labelClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
 })
 
 const hide = ref(props.hideLabel)
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 418bfc46..7b7ea3b5 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -127,7 +127,11 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :label="section.label" :opened="section.opened">
+            <Section
+              labelClass="px-2 font-semibold"
+              :label="section.label"
+              :opened="section.opened"
+            >
               <template #actions>
                 <Button
                   v-if="i == 0 && isManager()"
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index d2097c1b..6e870ca9 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -125,7 +125,7 @@
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section
-              class="px-2 font-semibold"
+              labelClass="px-2 font-semibold"
               :label="section.label"
               :opened="section.opened"
             >
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index af6cca2f..714221e0 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -178,7 +178,7 @@
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section
-              class="px-2 font-semibold"
+              labelClass="px-2 font-semibold"
               :label="section.label"
               :opened="section.opened"
             >
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 0b4d63ac..a71edd66 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -112,7 +112,11 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :label="section.label" :opened="section.opened">
+            <Section
+              labelClass="px-2 font-semibold"
+              :label="section.label"
+              :opened="section.opened"
+            >
               <template #actions>
                 <Button
                   v-if="i == 0 && isManager()"