From b4e4273810e050055d998bfe6fe0862d23e7a2c0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 Jan 2025 19:47:38 +0530
Subject: [PATCH] fix: use fieldname & fieldtype instead of name & type in side
 panel

---
 crm/api/doc.py                                |  24 +-
 .../crm_fields_layout/crm_fields_layout.py    |   1 +
 frontend/src/components/SidePanelLayout.vue   | 215 +++++++++++-------
 .../src/components/SidePanelLayoutEditor.vue  |   2 +-
 frontend/src/pages/Contact.vue                |  10 +-
 frontend/src/pages/Deal.vue                   |   2 +-
 frontend/src/pages/Organization.vue           |   2 +-
 7 files changed, 144 insertions(+), 112 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 8696cf7c..aa704a3d 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -614,29 +614,19 @@ def get_sidebar_fields(doctype, name):
 
 
 def get_field_obj(field):
-	obj = {
-		"label": field.label,
-		"type": field.fieldtype,
-		"name": field.fieldname,
-		"hidden": field.hidden,
-		"reqd": field.reqd,
-		"read_only": field.read_only,
-		"options": field.options,
-		"all_properties": field,
-	}
-
-	obj["placeholder"] = field.get("placeholder") or "Add " + field.label + "..."
+	field = field.as_dict()
+	field["placeholder"] = field.get("placeholder") or "Add " + field.label + "..."
 
 	if field.fieldtype == "Link":
-		obj["placeholder"] = field.get("placeholder") or "Select " + field.label + "..."
+		field["placeholder"] = field.get("placeholder") or "Select " + field.label + "..."
 	elif field.fieldtype == "Select" and field.options:
-		obj["placeholder"] = field.get("placeholder") or "Select " + field.label + "..."
-		obj["options"] = [{"label": option, "value": option} for option in field.options.split("\n")]
+		field["placeholder"] = field.get("placeholder") or "Select " + field.label + "..."
+		field["options"] = [{"label": option, "value": option} for option in field.options.split("\n")]
 
 	if field.read_only:
-		obj["tooltip"] = "This field is read only and cannot be edited."
+		field["tooltip"] = "This field is read only and cannot be edited."
 
-	return obj
+	return field
 
 
 def get_assigned_users(doctype, name, default_assigned_to=None):
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 514e2ad5..525d11b0 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
@@ -60,6 +60,7 @@ def get_fields_layout(doctype: str, type: str, no_reactivity=False):
 							"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
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 375a5040..b24ccfed 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -56,7 +56,7 @@
               >
                 <template
                   v-for="field in section.columns[0].fields || []"
-                  :key="field.name"
+                  :key="field.fieldname"
                 >
                   <div
                     v-if="field.visible"
@@ -79,15 +79,15 @@
                         <div
                           v-if="
                             field.read_only &&
-                            !['Check', 'Dropdown'].includes(field.type)
+                            !['Check', 'Dropdown'].includes(field.fieldtype)
                           "
                           class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
                         >
                           <Tooltip :text="__(field.tooltip)">
-                            <div>{{ data[field.name] }}</div>
+                            <div>{{ data[field.fieldname] }}</div>
                           </Tooltip>
                         </div>
-                        <div v-else-if="field.type === 'Dropdown'">
+                        <div v-else-if="field.fieldtype === 'Dropdown'">
                           <NestedPopover>
                             <template #target="{ open }">
                               <Button
@@ -149,12 +149,16 @@
                           </NestedPopover>
                         </div>
                         <FormControl
-                          v-else-if="field.type == 'Check'"
+                          v-else-if="field.fieldtype == 'Check'"
                           class="form-control"
                           type="checkbox"
-                          v-model="data[field.name]"
+                          v-model="data[field.fieldname]"
                           @change.stop="
-                            emit('update', field.name, $event.target.checked)
+                            emit(
+                              'update',
+                              field.fieldname,
+                              $event.target.checked,
+                            )
                           "
                           :disabled="Boolean(field.read_only)"
                         />
@@ -165,45 +169,47 @@
                               'Text',
                               'Long Text',
                               'Code',
-                            ].includes(field.type)
+                            ].includes(field.fieldtype)
                           "
                           class="form-control"
                           type="textarea"
-                          :value="data[field.name]"
+                          :value="data[field.fieldname]"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="
-                            emit('update', field.name, $event.target.value)
+                            emit('update', field.fieldname, $event.target.value)
                           "
                         />
                         <FormControl
-                          v-else-if="field.type === 'Select'"
+                          v-else-if="field.fieldtype === 'Select'"
                           class="form-control cursor-pointer [&_select]:cursor-pointer truncate"
                           type="select"
-                          v-model="data[field.name]"
+                          v-model="data[field.fieldname]"
                           :options="field.options"
                           :placeholder="field.placeholder"
                           @change.stop="
-                            emit('update', field.name, $event.target.value)
+                            emit('update', field.fieldname, $event.target.value)
                           "
                         />
                         <Link
-                          v-else-if="field.type === 'User'"
+                          v-else-if="field.fieldtype === 'User'"
                           class="form-control"
                           :value="
-                            data[field.name] &&
-                            getUser(data[field.name]).full_name
+                            data[field.fieldname] &&
+                            getUser(data[field.fieldname]).full_name
                           "
                           doctype="User"
                           :filters="field.filters"
-                          @change="(data) => emit('update', field.name, data)"
+                          @change="
+                            (data) => emit('update', field.fieldname, data)
+                          "
                           :placeholder="'Select' + ' ' + field.label + '...'"
                           :hideMe="true"
                         >
-                          <template v-if="data[field.name]" #prefix>
+                          <template v-if="data[field.fieldname]" #prefix>
                             <UserAvatar
                               class="mr-1.5"
-                              :user="data[field.name]"
+                              :user="data[field.fieldname]"
                               size="sm"
                             />
                           </template>
@@ -223,117 +229,135 @@
                           </template>
                         </Link>
                         <Link
-                          v-else-if="field.type === 'Link'"
+                          v-else-if="field.fieldtype === 'Link'"
                           class="form-control select-text"
-                          :value="data[field.name]"
+                          :value="data[field.fieldname]"
                           :doctype="field.options"
                           :filters="field.filters"
                           :placeholder="field.placeholder"
-                          @change="(data) => emit('update', field.name, data)"
+                          @change="
+                            (data) => emit('update', field.fieldname, data)
+                          "
                           :onCreate="field.create"
                         />
                         <div
-                          v-else-if="field.type === 'Datetime'"
+                          v-else-if="field.fieldtype === 'Datetime'"
                           class="form-control"
                         >
                           <DateTimePicker
                             icon-left=""
-                            :value="data[field.name]"
+                            :value="data[field.fieldname]"
                             :formatter="
                               (date) => getFormat(date, '', true, true)
                             "
                             :placeholder="field.placeholder"
                             placement="left-start"
-                            @change="(data) => emit('update', field.name, data)"
+                            @change="
+                              (data) => emit('update', field.fieldname, data)
+                            "
                           />
                         </div>
                         <div
-                          v-else-if="field.type === 'Date'"
+                          v-else-if="field.fieldtype === 'Date'"
                           class="form-control"
                         >
                           <DatePicker
                             icon-left=""
-                            :value="data[field.name]"
+                            :value="data[field.fieldname]"
                             :formatter="(date) => getFormat(date, '', true)"
                             :placeholder="field.placeholder"
                             placement="left-start"
-                            @change="(data) => emit('update', field.name, data)"
+                            @change="
+                              (data) => emit('update', field.fieldname, data)
+                            "
                           />
                         </div>
                         <FormControl
-                          v-else-if="field.type === 'Percent'"
+                          v-else-if="field.fieldtype === 'Percent'"
                           class="form-control"
                           type="text"
-                          :value="getFormattedPercent(field.name, data)"
+                          :value="getFormattedPercent(field.fieldname, data)"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="
-                            emit('update', field.name, flt($event.target.value))
+                            emit(
+                              'update',
+                              field.fieldname,
+                              flt($event.target.value),
+                            )
                           "
                         />
                         <FormControl
-                          v-else-if="field.type === 'Int'"
+                          v-else-if="field.fieldtype === 'Int'"
                           class="form-control"
                           type="number"
-                          v-model="data[field.name]"
+                          v-model="data[field.fieldname]"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="
-                            emit('update', field.name, $event.target.value)
+                            emit('update', field.fieldname, $event.target.value)
                           "
                         />
                         <FormControl
-                          v-else-if="field.type === 'Float'"
+                          v-else-if="field.fieldtype === 'Float'"
                           class="form-control"
                           type="text"
-                          :value="getFormattedFloat(field.name, data)"
+                          :value="getFormattedFloat(field.fieldname, data)"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="
-                            emit('update', field.name, flt($event.target.value))
+                            emit(
+                              'update',
+                              field.fieldname,
+                              flt($event.target.value),
+                            )
                           "
                         />
                         <FormControl
-                          v-else-if="field.type === 'Currency'"
+                          v-else-if="field.fieldtype === 'Currency'"
                           class="form-control"
                           type="text"
-                          :value="getFormattedCurrency(field.name, data)"
+                          :value="getFormattedCurrency(field.fieldname, data)"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="
-                            emit('update', field.name, flt($event.target.value))
+                            emit(
+                              'update',
+                              field.fieldname,
+                              flt($event.target.value),
+                            )
                           "
                         />
                         <FormControl
                           v-else
                           class="form-control"
                           type="text"
-                          :value="data[field.name]"
+                          :value="data[field.fieldname]"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="
-                            emit('update', field.name, $event.target.value)
+                            emit('update', field.fieldname, $event.target.value)
                           "
                         />
                       </div>
                       <div class="ml-1">
                         <ArrowUpRightIcon
                           v-if="
-                            field.type === 'Link' &&
+                            field.fieldtype === 'Link' &&
                             field.link &&
-                            data[field.name]
+                            data[field.fieldname]
                           "
                           class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
-                          @click.stop="field.link(data[field.name])"
+                          @click.stop="field.link(data[field.fieldname])"
                         />
                         <EditIcon
                           v-if="
-                            field.type === 'Link' &&
+                            field.fieldtype === 'Link' &&
                             field.edit &&
-                            data[field.name]
+                            data[field.fieldname]
                           "
                           class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
-                          @click.stop="field.edit(data[field.name])"
+                          @click.stop="field.edit(data[field.fieldname])"
                         />
                       </div>
                     </div>
@@ -398,56 +422,73 @@ const _sections = computed(() => {
   if (!props.sections?.length) return []
   let editButtonAdded = false
   return props.sections.map((section) => {
-    let isContactSection = section.name == 'contacts_section'
-
     if (section.columns?.length) {
       section.columns[0].fields = section.columns[0].fields.map((field) => {
-        let df = field?.all_properties || {}
-        if (field.type === 'Link' && df.options === 'User') {
-          field.options = df.options
-          field.type = 'User'
-        }
-        let _field = {
-          ...field,
-          depends_on: df.depends_on,
-          mandatory_depends_on: df.mandatory_depends_on,
-          display_via_depends_on: evaluateDependsOnValue(
-            df.depends_on,
-            data.value,
-          ),
-          mandatory_via_depends_on: evaluateDependsOnValue(
-            df.mandatory_depends_on,
-            data.value,
-          ),
-          filters: df.link_filters && JSON.parse(df.link_filters),
-          placeholder: field.placeholder || field.label,
-        }
-        _field.visible = isFieldVisible(_field)
-        return _field
+        return parsedField(field)
       })
     }
-
-    section.showEditButton = !(
-      !isManager() ||
-      isContactSection ||
-      editButtonAdded
-    )
-    if (section.showEditButton) {
+    let _section = parsedSection(section, editButtonAdded)
+    if (_section.showEditButton) {
       editButtonAdded = true
     }
-
-    section.visible =
-      isContactSection ||
-      section.columns?.[0].fields.filter((f) => f.visible).length
-
-    return section
+    return _section
   })
 })
 
+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,
+      data.value,
+    ),
+    mandatory_via_depends_on: evaluateDependsOnValue(
+      field.mandatory_depends_on,
+      data.value,
+    ),
+  }
+
+  _field.visible = isFieldVisible(_field)
+  return _field
+}
+
+function parsedSection(section, editButtonAdded) {
+  let isContactSection = section.name == 'contacts_section'
+  section.showEditButton = !(
+    !isManager() ||
+    isContactSection ||
+    editButtonAdded
+  )
+
+  section.visible =
+    isContactSection ||
+    section.columns?.[0].fields.filter((f) => f.visible).length
+
+  return section
+}
+
 function isFieldVisible(field) {
+  if (props.preview) return true
   return (
-    (field.type == 'Check' ||
-      (field.read_only && data.value[field.name]) ||
+    (field.fieldtype == 'Check' ||
+      (field.read_only && data.value[field.fieldname]) ||
       !field.read_only) &&
     (!field.depends_on || field.display_via_depends_on) &&
     !field.hidden
diff --git a/frontend/src/components/SidePanelLayoutEditor.vue b/frontend/src/components/SidePanelLayoutEditor.vue
index 1a44907d..7b277db7 100644
--- a/frontend/src/components/SidePanelLayoutEditor.vue
+++ b/frontend/src/components/SidePanelLayoutEditor.vue
@@ -56,7 +56,7 @@
             <Draggable
               :list="section.columns?.[0].fields || []"
               group="fields"
-              item-key="name"
+              item-key="fieldname"
               class="flex flex-col gap-1.5"
               handle=".cursor-grab"
             >
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index f82789e3..b2035d48 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -347,11 +347,11 @@ function getParsedSections(_sections) {
   return _sections.map((section) => {
     section.columns = section.columns.map((column) => {
       column.fields = column.fields.map((field) => {
-        if (field.name === 'email_id') {
+        if (field.fieldname === 'email_id') {
           return {
             ...field,
             read_only: false,
-            type: 'Dropdown',
+            fieldtype: 'Dropdown',
             options:
               contact.data?.email_ids?.map((email) => {
                 return {
@@ -404,11 +404,11 @@ function getParsedSections(_sections) {
               })
             },
           }
-        } else if (field.name === 'mobile_no') {
+        } else if (field.fieldname === 'mobile_no') {
           return {
             ...field,
             read_only: false,
-            type: 'Dropdown',
+            fieldtype: 'Dropdown',
             options:
               contact.data?.phone_nos?.map((phone) => {
                 return {
@@ -462,7 +462,7 @@ function getParsedSections(_sections) {
               })
             },
           }
-        } else if (field.name === 'address') {
+        } else if (field.fieldname === 'address') {
           return {
             ...field,
             create: (value, close) => {
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 25a1c607..6c5ac9b7 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -541,7 +541,7 @@ function getParsedSections(_sections) {
   _sections.forEach((section) => {
     if (section.name == 'contacts_section') return
     section.columns[0].fields.forEach((field) => {
-      if (field.name == 'organization') {
+      if (field.fieldname == 'organization') {
         field.create = (value, close) => {
           _organization.value.organization_name = value
           showOrganizationModal.value = true
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 9553203a..7e6954d2 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -347,7 +347,7 @@ function getParsedSections(_sections) {
   return _sections.map((section) => {
     section.columns = section.columns.map((column) => {
       column.fields = column.fields.map((field) => {
-        if (field.name === 'address') {
+        if (field.fieldname === 'address') {
           return {
             ...field,
             create: (value, close) => {