From 81c99fde166fae60e445749ce5366002d12e8dc2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 Jan 2025 20:39:02 +0530
Subject: [PATCH] fix: use fieldname & fieldtype instead of name & type in
 fields layout

---
 .../crm_fields_layout/crm_fields_layout.py    |  28 +--
 .../Controls/GridRowFieldsModal.vue           |   6 +-
 frontend/src/components/FieldLayout.vue       | 171 +++++++++++-------
 frontend/src/components/FieldLayoutEditor.vue |  22 +--
 .../src/components/Modals/ContactModal.vue    |  10 +-
 .../src/components/Modals/DataFieldsModal.vue |  10 +-
 frontend/src/components/Modals/DealModal.vue  |  10 +-
 frontend/src/components/Modals/LeadModal.vue  |  10 +-
 .../components/Modals/OrganizationModal.vue   |   6 +-
 .../src/components/Modals/QuickEntryModal.vue |   6 +-
 .../src/components/Modals/SidePanelModal.vue  |   2 +-
 frontend/src/components/SidePanelLayout.vue   |  12 +-
 12 files changed, 146 insertions(+), 147 deletions(-)

diff --git a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
index 525d11b0..395aef60 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
@@ -14,7 +14,7 @@ class CRMFieldsLayout(Document):
 
 
 @frappe.whitelist()
-def get_fields_layout(doctype: str, type: str, no_reactivity=False):
+def get_fields_layout(doctype: str, type: str):
 	tabs = []
 	layout = None
 
@@ -51,22 +51,8 @@ def get_fields_layout(doctype: str, type: str, no_reactivity=False):
 				for field in column.get("fields") if column.get("fields") else []:
 					field = next((f for f in fields if f.fieldname == field), None)
 					if field:
-						field = {
-							"label": _(field.label),
-							"name": field.fieldname,
-							"type": field.fieldtype,
-							"options": getOptions(field),
-							"mandatory": field.reqd,
-							"read_only": field.read_only,
-							"placeholder": field.get("placeholder"),
-							"filters": field.get("link_filters"),
-							"hidden": field.get("hidden"),
-							"depends_on": "" if no_reactivity else field.get("depends_on"),
-							"mandatory_depends_on": ""
-							if no_reactivity
-							else field.get("mandatory_depends_on"),
-						}
-						column["fields"][column.get("fields").index(field["name"])] = field
+						field = field.as_dict()
+						column["fields"][column.get("fields").index(field["fieldname"])] = field
 
 	return tabs or []
 
@@ -134,11 +120,3 @@ def get_default_layout(doctype: str):
 			tabs[-1]["sections"][-1]["columns"][-1]["fields"].append(field.fieldname)
 
 	return tabs
-
-
-def getOptions(field):
-	if field.fieldtype == "Select" and field.options:
-		field.options = field.options.split("\n")
-		field.options = [{"label": _(option), "value": option} for option in field.options]
-		field.options.insert(0, {"label": "", "value": ""})
-	return field.options
diff --git a/frontend/src/components/Controls/GridRowFieldsModal.vue b/frontend/src/components/Controls/GridRowFieldsModal.vue
index e5e95354..4776f601 100644
--- a/frontend/src/components/Controls/GridRowFieldsModal.vue
+++ b/frontend/src/components/Controls/GridRowFieldsModal.vue
@@ -36,7 +36,7 @@
             :tabs="tabs.data"
             :doctype="_doctype"
           />
-          <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
+          <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" :preview="true"/>
         </div>
       </div>
     </template>
@@ -103,9 +103,7 @@ function saveChanges() {
     tab.sections.forEach((section) => {
       section.columns.forEach((column) => {
         if (!column.fields) return
-        column.fields = column.fields.map(
-          (field) => field.fieldname || field.name,
-        )
+        column.fields = column.fields.map((field) => field.fieldname)
       })
     })
   })
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 033d59d7..e3e581c0 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -51,43 +51,43 @@
                 >
                   {{ column.label }}
                 </div>
-                <template v-for="field in column.fields" :key="field.name">
+                <template v-for="field in column.fields" :key="field.fieldname">
                   <div v-if="field.visible" class="field">
                     <div
-                      v-if="field.type != 'Check'"
+                      v-if="field.fieldtype != 'Check'"
                       class="mb-2 text-sm text-ink-gray-5"
                     >
                       {{ __(field.label) }}
                       <span
-                        class="text-ink-red-3"
                         v-if="
-                          field.mandatory ||
+                          field.reqd ||
                           (field.mandatory_depends_on &&
                             field.mandatory_via_depends_on)
                         "
+                        class="text-ink-red-3"
                         >*</span
                       >
                     </div>
                     <FormControl
-                      v-if="field.read_only && field.type !== 'Check'"
+                      v-if="field.read_only && field.fieldtype !== 'Check'"
                       type="text"
                       :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
+                      v-model="data[field.fieldname]"
                       :disabled="true"
                     />
                     <Grid
-                      v-else-if="field.type === 'Table'"
-                      v-model="data[field.name]"
+                      v-else-if="field.fieldtype === 'Table'"
+                      v-model="data[field.fieldname]"
                       :doctype="field.options"
                       :parentDoctype="doctype"
                     />
                     <FormControl
-                      v-else-if="field.type === 'Select'"
+                      v-else-if="field.fieldtype === 'Select'"
                       type="select"
                       class="form-control"
                       :class="field.prefix ? 'prefix' : ''"
                       :options="field.options"
-                      v-model="data[field.name]"
+                      v-model="data[field.fieldname]"
                       :placeholder="getPlaceholder(field)"
                     >
                       <template v-if="field.prefix" #prefix>
@@ -95,14 +95,16 @@
                       </template>
                     </FormControl>
                     <div
-                      v-else-if="field.type == 'Check'"
+                      v-else-if="field.fieldtype == '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)"
+                        v-model="data[field.fieldname]"
+                        @change="
+                          (e) => (data[field.fieldname] = e.target.checked)
+                        "
                         :disabled="Boolean(field.read_only)"
                       />
                       <label
@@ -110,7 +112,7 @@
                         @click="
                           () => {
                             if (!Boolean(field.read_only)) {
-                              data[field.name] = !data[field.name]
+                              data[field.fieldname] = !data[field.fieldname]
                             }
                           }
                         "
@@ -121,21 +123,24 @@
                         >
                       </label>
                     </div>
-                    <div class="flex gap-1" v-else-if="field.type === 'Link'">
+                    <div
+                      class="flex gap-1"
+                      v-else-if="field.fieldtype === 'Link'"
+                    >
                       <Link
                         class="form-control flex-1 truncate"
-                        :value="data[field.name]"
+                        :value="data[field.fieldname]"
                         :doctype="field.options"
                         :filters="field.filters"
-                        @change="(v) => (data[field.name] = v)"
+                        @change="(v) => (data[field.fieldname] = v)"
                         :placeholder="getPlaceholder(field)"
                         :onCreate="field.create"
                       />
                       <Button
-                        v-if="data[field.name] && field.edit"
+                        v-if="data[field.fieldname] && field.edit"
                         class="shrink-0"
                         :label="__('Edit')"
-                        @click="field.edit(data[field.name])"
+                        @click="field.edit(data[field.fieldname])"
                       >
                         <template #prefix>
                           <EditIcon class="h-4 w-4" />
@@ -144,19 +149,19 @@
                     </div>
 
                     <Link
-                      v-else-if="field.type === 'User'"
+                      v-else-if="field.fieldtype === 'User'"
                       class="form-control"
-                      :value="getUser(data[field.name]).full_name"
+                      :value="getUser(data[field.fieldname]).full_name"
                       :doctype="field.options"
                       :filters="field.filters"
-                      @change="(v) => (data[field.name] = v)"
+                      @change="(v) => (data[field.fieldname] = v)"
                       :placeholder="getPlaceholder(field)"
                       :hideMe="true"
                     >
                       <template #prefix>
                         <UserAvatar
                           class="mr-2"
-                          :user="data[field.name]"
+                          :user="data[field.fieldname]"
                           size="sm"
                         />
                       </template>
@@ -176,17 +181,17 @@
                       </template>
                     </Link>
                     <DateTimePicker
-                      v-else-if="field.type === 'Datetime'"
-                      v-model="data[field.name]"
+                      v-else-if="field.fieldtype === 'Datetime'"
+                      v-model="data[field.fieldname]"
                       icon-left=""
                       :formatter="(date) => getFormat(date, '', true, true)"
                       :placeholder="getPlaceholder(field)"
                       input-class="border-none"
                     />
                     <DatePicker
-                      v-else-if="field.type === 'Date'"
+                      v-else-if="field.fieldtype === 'Date'"
                       icon-left=""
-                      v-model="data[field.name]"
+                      v-model="data[field.fieldname]"
                       :formatter="(date) => getFormat(date, '', true)"
                       :placeholder="getPlaceholder(field)"
                       input-class="border-none"
@@ -194,48 +199,48 @@
                     <FormControl
                       v-else-if="
                         ['Small Text', 'Text', 'Long Text', 'Code'].includes(
-                          field.type,
+                          field.fieldtype,
                         )
                       "
                       type="textarea"
                       :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
+                      v-model="data[field.fieldname]"
                     />
                     <FormControl
-                      v-else-if="['Int'].includes(field.type)"
+                      v-else-if="['Int'].includes(field.fieldtype)"
                       type="number"
                       :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
+                      v-model="data[field.fieldname]"
                     />
                     <FormControl
-                      v-else-if="field.type === 'Percent'"
+                      v-else-if="field.fieldtype === 'Percent'"
                       type="text"
-                      :value="getFormattedPercent(field.name, data)"
+                      :value="getFormattedPercent(field.fieldname, data)"
                       :placeholder="getPlaceholder(field)"
                       :disabled="Boolean(field.read_only)"
-                      @change="data[field.name] = flt($event.target.value)"
+                      @change="data[field.fieldname] = flt($event.target.value)"
                     />
                     <FormControl
-                      v-else-if="field.type === 'Float'"
+                      v-else-if="field.fieldtype === 'Float'"
                       type="text"
-                      :value="getFormattedFloat(field.name, data)"
+                      :value="getFormattedFloat(field.fieldname, data)"
                       :placeholder="getPlaceholder(field)"
                       :disabled="Boolean(field.read_only)"
-                      @change="data[field.name] = flt($event.target.value)"
+                      @change="data[field.fieldname] = flt($event.target.value)"
                     />
                     <FormControl
-                      v-else-if="field.type === 'Currency'"
+                      v-else-if="field.fieldtype === 'Currency'"
                       type="text"
-                      :value="getFormattedCurrency(field.name, data)"
+                      :value="getFormattedCurrency(field.fieldname, data)"
                       :placeholder="getPlaceholder(field)"
                       :disabled="Boolean(field.read_only)"
-                      @change="data[field.name] = flt($event.target.value)"
+                      @change="data[field.fieldname] = flt($event.target.value)"
                     />
                     <FormControl
                       v-else
                       type="text"
                       :placeholder="getPlaceholder(field)"
-                      v-model="data[field.name]"
+                      v-model="data[field.fieldname]"
                       :disabled="Boolean(field.read_only)"
                     />
                   </div>
@@ -274,6 +279,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
@@ -291,43 +300,67 @@ const _tabs = computed(() => {
     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'
-          }
-          let _field = {
-            ...field,
-            display_via_depends_on: evaluateDependsOnValue(
-              field.depends_on,
-              props.data,
-            ),
-            mandatory_via_depends_on: evaluateDependsOnValue(
-              field.mandatory_depends_on,
-              props.data,
-            ),
-          }
-          _field.visible = isFieldVisible(_field)
-          return _field
+          return parsedField(field)
         })
         return column
       })
-      section.visible = section.columns.some((column) =>
-        column.fields.some((field) => field.visible),
-      )
-
-      // to handle special case
-      if (section.hidden) {
-        section.visible = false
-      }
-      return section
+      return parsedSection(section)
     })
     return tab
   })
 })
 
+function parsedField(field) {
+  if (field.fieldtype == 'Select' && typeof field.options === 'string') {
+    field.options = field.options.split('\n').map((option) => {
+      return { label: option, value: option }
+    })
+
+    if (field.options[0].value !== '') {
+      field.options.unshift({ label: '', value: '' })
+    }
+  }
+
+  if (field.fieldtype === 'Link' && field.options === 'User') {
+    field.options = field.options
+    field.fieldtype = 'User'
+  }
+
+  let _field = {
+    ...field,
+    filters: field.link_filters && JSON.parse(field.link_filters),
+    placeholder: field.placeholder || field.label,
+    display_via_depends_on: evaluateDependsOnValue(
+      field.depends_on,
+      props.data,
+    ),
+    mandatory_via_depends_on: evaluateDependsOnValue(
+      field.mandatory_depends_on,
+      props.data,
+    ),
+  }
+
+  _field.visible = isFieldVisible(_field)
+  return _field
+}
+
+function parsedSection(section) {
+  section.visible = section.columns.some((column) =>
+    column.fields.some((field) => field.visible),
+  )
+
+  // to handle special case
+  if (section.hidden) {
+    section.visible = false
+  }
+  return section
+}
+
 function isFieldVisible(field) {
+  if (props.preview) return true
   return (
-    (field.type == 'Check' ||
-      (field.read_only && props.data[field.name]) ||
+    (field.fieldtype == 'Check' ||
+      (field.read_only && props.data[field.fieldname]) ||
       !field.read_only) &&
     (!field.depends_on || field.display_via_depends_on) &&
     !field.hidden
@@ -344,7 +377,7 @@ const getPlaceholder = (field) => {
   if (field.placeholder) {
     return __(field.placeholder)
   }
-  if (['Select', 'Link'].includes(field.type)) {
+  if (['Select', 'Link'].includes(field.fieldtype)) {
     return __('Select {0}', [__(field.label)])
   } else {
     return __('Enter {0}', [__(field.label)])
diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index 926d81e5..5dcff8e5 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -132,7 +132,7 @@
                   <Draggable
                     :list="column.fields"
                     group="fields"
-                    item-key="name"
+                    item-key="fieldname"
                     class="flex flex-col gap-1.5"
                     handle=".cursor-grab"
                   >
@@ -282,7 +282,7 @@ const fields = createResource({
 
     return data.filter((field) => {
       return (
-        !existingFields.find((f) => f.name === field.fieldname) &&
+        !existingFields.find((f) => f.fieldname === field.fieldname) &&
         !restrictedFields.includes(field.fieldname)
       )
     })
@@ -305,23 +305,7 @@ function addTab() {
 
 function addField(column, field) {
   if (!field) return
-  if (field.fieldtype === 'Select') {
-    field.options = field.options.split('\n')
-    field.options = field.options.map((option) => {
-      return { label: option, value: option }
-    })
-    if (field.options[0].value !== '') {
-      field.options.unshift({ label: '', value: '' })
-    }
-  }
-  let newFieldObj = {
-    ...field,
-    name: field.fieldname,
-    type: field.fieldtype,
-    depends_on: '',
-    mandatory_depends_on: '',
-  }
-  column.fields.push(newFieldObj)
+  column.fields.push(field)
 }
 
 function getTabOptions(tab) {
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 151dad98..e7be7622 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -123,11 +123,11 @@ const tabs = createResource({
       tab.sections.forEach((section) => {
         section.columns.forEach((column) => {
           column.fields.forEach((field) => {
-            if (field.name == 'email_id') {
+            if (field.fieldname == 'email_id') {
               field.read_only = false
-            } else if (field.name == 'mobile_no') {
+            } else if (field.fieldname == 'mobile_no') {
               field.read_only = false
-            } else if (field.name == 'address') {
+            } else if (field.fieldname == 'address') {
               field.create = (value, close) => {
                 _contact.value.address = value
                 emit('openAddressModal')
@@ -138,8 +138,8 @@ const tabs = createResource({
                 emit('openAddressModal', address)
                 show.value = false
               }
-            } else if (field.type === 'Table') {
-              _contact.value[field.name] = []
+            } else if (field.fieldtype === 'Table') {
+              _contact.value[field.fieldname] = []
             }
           })
         })
diff --git a/frontend/src/components/Modals/DataFieldsModal.vue b/frontend/src/components/Modals/DataFieldsModal.vue
index 8278fbec..3c4a6ec0 100644
--- a/frontend/src/components/Modals/DataFieldsModal.vue
+++ b/frontend/src/components/Modals/DataFieldsModal.vue
@@ -36,7 +36,13 @@
             :tabs="tabs.data"
             :doctype="_doctype"
           />
-          <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
+          <FieldLayout
+            v-else
+            :tabs="tabs.data"
+            :data="{}"
+            :modal="true"
+            :preview="true"
+          />
         </div>
       </div>
     </template>
@@ -66,7 +72,7 @@ const dirty = ref(false)
 const preview = ref(false)
 
 function getParams() {
-  return { doctype: _doctype.value, type: 'Data Fields', no_reactivity: 1 }
+  return { doctype: _doctype.value, type: 'Data Fields' }
 }
 
 const tabs = createResource({
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index ba166854..80d2e9ec 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -160,16 +160,14 @@ const tabs = createResource({
             hasContactSections.value = true
           }
           column.fields.forEach((field) => {
-            if (field.name == 'status') {
-              field.type = 'Select'
+            if (field.fieldname == 'status') {
+              field.fieldtype = 'Select'
               field.options = dealStatuses.value
               field.prefix = getDealStatus(deal.status).iconColorClass
-            } else if (field.name == 'deal_owner') {
-              field.type = 'User'
             }
 
-            if (field.type === 'Table') {
-              deal[field.name] = []
+            if (field.fieldtype === 'Table') {
+              deal[field.fieldname] = []
             }
           })
         })
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 08f0ccad..ed27c5ef 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -73,16 +73,14 @@ const tabs = createResource({
       tab.sections.forEach((section) => {
         section.columns.forEach((column) => {
           column.fields.forEach((field) => {
-            if (field.name == 'status') {
-              field.type = 'Select'
+            if (field.fieldname == 'status') {
+              field.fieldtype = 'Select'
               field.options = leadStatuses.value
               field.prefix = getLeadStatus(lead.status).iconColorClass
-            } else if (field.name == 'lead_owner') {
-              field.type = 'User'
             }
 
-            if (field.type === 'Table') {
-              lead[field.name] = []
+            if (field.fieldtype === 'Table') {
+              lead[field.fieldname] = []
             }
           })
         })
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 4a3a14ed..d4b8ca95 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -121,7 +121,7 @@ const tabs = createResource({
       tab.sections.forEach((section) => {
         section.columns.forEach((column) => {
           column.fields.forEach((field) => {
-            if (field.name == 'address') {
+            if (field.fieldname == 'address') {
               field.create = (value, close) => {
                 _organization.value.address = value
                 emit('openAddressModal')
@@ -132,8 +132,8 @@ const tabs = createResource({
                 emit('openAddressModal', address)
                 show.value = false
               }
-            } else if (field.type === 'Table') {
-              _organization.value[field.name] = []
+            } else if (field.fieldtype === 'Table') {
+              _organization.value[field.fieldname] = []
             }
           })
         })
diff --git a/frontend/src/components/Modals/QuickEntryModal.vue b/frontend/src/components/Modals/QuickEntryModal.vue
index 88fd1401..2b61dc7e 100644
--- a/frontend/src/components/Modals/QuickEntryModal.vue
+++ b/frontend/src/components/Modals/QuickEntryModal.vue
@@ -36,7 +36,7 @@
             :tabs="tabs.data"
             :doctype="_doctype"
           />
-          <FieldLayout v-else :tabs="tabs.data" :data="{}" />
+          <FieldLayout v-else :tabs="tabs.data" :data="{}" :preview="true" />
         </div>
       </div>
     </template>
@@ -101,9 +101,7 @@ function saveChanges() {
     tab.sections.forEach((section) => {
       section.columns.forEach((column) => {
         if (!column.fields) return
-        column.fields = column.fields.map(
-          (field) => field.fieldname || field.name,
-        )
+        column.fields = column.fields.map((field) => field.fieldname)
       })
     })
   })
diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
index adc0a7fe..d352b44f 100644
--- a/frontend/src/components/Modals/SidePanelModal.vue
+++ b/frontend/src/components/Modals/SidePanelModal.vue
@@ -126,7 +126,7 @@ function saveChanges() {
       section.columns.forEach((column) => {
         if (!column.fields) return
         column.fields = column.fields
-          .map((field) => field.fieldname || field.name)
+          .map((field) => field.fieldname)
           .filter(Boolean)
       })
     })
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index b24ccfed..4e42f54a 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -67,9 +67,15 @@
                         class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
                       >
                         <span>{{ __(field.label) }}</span>
-                        <span class="text-ink-red-3">{{
-                          field.reqd ? ' *' : ''
-                        }}</span>
+                        <span
+                          v-if="
+                            field.reqd ||
+                            (field.mandatory_depends_on &&
+                              field.mandatory_via_depends_on)
+                          "
+                          class="text-ink-red-3"
+                          >*</span
+                        >
                       </div>
                     </Tooltip>
                     <div class="flex items-center justify-between w-[65%]">