fix: render fields in side panel, quick entry & data tab in new format

crm/api/doc.py

@@ -593,7 +593,8 @@ def get_sidebar_fields(doctype, name):
 
 	for section in layout:
 		section["name"] = section.get("name") or section.get("label")
-		for field in section.get("fields") if section.get("fields") else []:
+		for column in section.get("columns") if section.get("columns") else []:
+			for field in column.get("fields") if column.get("fields") else []:
 				field_obj = next((f for f in fields if f.fieldname == field), None)
 				if field_obj:
 					if field_obj.permlevel > 0:
@@ -603,7 +604,7 @@ def get_sidebar_fields(doctype, name):
 							field_obj.read_only = 1
 						if not field_has_read_access and not field_has_write_access:
 							field_obj.hidden = 1
-				section["fields"][section.get("fields").index(field)] = get_field_obj(field_obj)
+					column["fields"][column.get("fields").index(field)] = get_field_obj(field_obj)
 
 	fields_meta = {}
 	for field in fields:

frontend/src/components/Controls/GridRowFieldsModal.vue

@@ -101,12 +101,14 @@ function saveChanges() {
   _tabs.forEach((tab) => {
     if (!tab.sections) return
     tab.sections.forEach((section) => {
-      if (!section.fields) return
+      section.columns.forEach((column) => {
-      section.fields = section.fields.map(
+        if (!column.fields) return
+        column.fields = column.fields.map(
           (field) => field.fieldname || field.name,
         )
       })
     })
+  })
   loading.value = true
   call(
     'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',

frontend/src/components/Modals/ContactModal.vue

@@ -125,13 +125,15 @@ const tabs = createResource({
   transform: (_tabs) => {
     return _tabs.forEach((tab) => {
       tab.sections.forEach((section) => {
-        section.fields.forEach((field) => {
+        section.columns.forEach((column) => {
+          column.fields.forEach((field) => {
             if (field.type === 'Table') {
               _contact.value[field.name] = []
             }
           })
         })
       })
+    })
   },
 })
 

frontend/src/components/Modals/DataFieldsModal.vue

@@ -101,12 +101,14 @@ function saveChanges() {
   _tabs.forEach((tab) => {
     if (!tab.sections) return
     tab.sections.forEach((section) => {
-      if (!section.fields) return
+      section.columns.forEach((column) => {
-      section.fields = section.fields.map(
+        if (!column.fields) return
+        column.fields = column.fields.map(
           (field) => field.fieldname || field.name,
         )
       })
     })
+  })
   loading.value = true
   call(
     'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',

frontend/src/components/Modals/DealModal.vue

@@ -109,7 +109,8 @@ const tabs = createResource({
   transform: (_tabs) => {
     return _tabs.forEach((tab) => {
       tab.sections.forEach((section) => {
-        section.fields.forEach((field) => {
+        section.columns.forEach((column) => {
+          column.fields.forEach((field) => {
             if (field.name == 'status') {
               field.type = 'Select'
               field.options = dealStatuses.value
@@ -124,6 +125,7 @@ const tabs = createResource({
           })
         })
       })
+    })
   },
 })
 

frontend/src/components/Modals/LeadModal.vue

@@ -71,7 +71,8 @@ const tabs = createResource({
   transform: (_tabs) => {
     return _tabs.forEach((tab) => {
       tab.sections.forEach((section) => {
-        section.fields.forEach((field) => {
+        section.columns.forEach((column) => {
+          column.fields.forEach((field) => {
             if (field.name == 'status') {
               field.type = 'Select'
               field.options = leadStatuses.value
@@ -86,6 +87,7 @@ const tabs = createResource({
           })
         })
       })
+    })
   },
 })
 

frontend/src/components/Modals/OrganizationModal.vue

@@ -124,13 +124,15 @@ const tabs = createResource({
   transform: (_tabs) => {
     return _tabs.forEach((tab) => {
       tab.sections.forEach((section) => {
-        section.fields.forEach((field) => {
+        section.columns.forEach((column) => {
+          column.fields.forEach((field) => {
             if (field.type === 'Table') {
               _organization.value[field.name] = []
             }
           })
         })
       })
+    })
   },
 })
 

frontend/src/components/Modals/QuickEntryModal.vue

@@ -99,12 +99,14 @@ function saveChanges() {
   _tabs.forEach((tab) => {
     if (!tab.sections) return
     tab.sections.forEach((section) => {
-      if (!section.fields) return
+      section.columns.forEach((column) => {
-      section.fields = section.fields.map(
+        if (!column.fields) return
+        column.fields = column.fields.map(
           (field) => field.fieldname || field.name,
         )
       })
     })
+  })
   loading.value = true
   call(
     'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',

frontend/src/components/Modals/SidePanelModal.vue

@@ -51,7 +51,7 @@
                 :opened="section.opened"
               >
                 <SidePanelLayout
-                  :fields="section.fields"
+                  :fields="section.columns[0].fields"
                   :isLastSection="i == section.data?.length - 1"
                   v-model="data"
                 />
@@ -129,12 +129,14 @@ function saveChanges() {
   let _tabs = JSON.parse(JSON.stringify(tabs.data))
   _tabs.forEach((tab) => {
     tab.sections.forEach((section) => {
-      if (!section.fields) return
+      section.columns.forEach((column) => {
-      section.fields = section.fields
+        if (!column.fields) return
+        column.fields = column.fields
           .map((field) => field.fieldname || field.name)
           .filter(Boolean)
       })
     })
+  })
   loading.value = true
   call(
     'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',

frontend/src/pages/Contact.vue

@@ -139,8 +139,8 @@
                 </Button>
               </template>
               <SidePanelLayout
-                v-if="section.fields"
+                v-if="section.columns?.[0].fields"
-                :fields="section.fields"
+                :fields="section.columns[0].fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
                 doctype="Contact"
                 v-model="contact.data"
@@ -377,13 +377,12 @@ const fieldsLayout = createResource({
 
 function getParsedFields(data) {
   return data.map((section) => {
-    return {
+    section.columns = section.columns.map((column) => {
-      ...section,
+      column.fields = column.fields.map((field) => {
-      fields: computed(() =>
-        section.fields.map((field) => {
         if (field.name === 'email_id') {
           return {
             ...field,
+            read_only: false,
             type: 'dropdown',
             options:
               contact.data?.email_ids?.map((email) => {
@@ -415,8 +414,7 @@ function getParsedFields(data) {
                     contact.data.email_ids = contact.data.email_ids.filter(
                       (email) => email.name !== option.name,
                     )
-                      !isNew &&
+                    !isNew && (await deleteOption('Contact Email', option.name))
-                        (await deleteOption('Contact Email', option.name))
                     if (_contact.value.email_id === option.value) {
                       if (contact.data.email_ids.length === 0) {
                         _contact.value.email_id = ''
@@ -441,6 +439,7 @@ function getParsedFields(data) {
         } else if (field.name === 'mobile_no') {
           return {
             ...field,
+            read_only: false,
             type: 'dropdown',
             options:
               contact.data?.phone_nos?.map((phone) => {
@@ -472,8 +471,7 @@ function getParsedFields(data) {
                     contact.data.phone_nos = contact.data.phone_nos.filter(
                       (phone) => phone.name !== option.name,
                     )
-                      !isNew &&
+                    !isNew && (await deleteOption('Contact Phone', option.name))
-                        (await deleteOption('Contact Phone', option.name))
                     if (_contact.value.actual_mobile_no === option.value) {
                       if (contact.data.phone_nos.length === 0) {
                         _contact.value.actual_mobile_no = ''
@@ -516,9 +514,10 @@ function getParsedFields(data) {
         } else {
           return field
         }
-        }),
+      })
-      ),
+      return column
-    }
+    })
+    return section
   })
 }
 

frontend/src/pages/Deal.vue

@@ -168,8 +168,8 @@
                 </Button>
               </template>
               <SidePanelLayout
-                v-if="section.fields"
+                v-if="section.columns?.[0].fields"
-                :fields="section.fields"
+                :fields="section.columns[0].fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
                 doctype="CRM Deal"
                 v-model="deal.data"
@@ -611,7 +611,7 @@ const fieldsLayout = createResource({
 function getParsedFields(sections) {
   sections.forEach((section) => {
     if (section.name == 'contacts_section') return
-    section.fields.forEach((field) => {
+    section.columns[0].fields.forEach((field) => {
       if (field.name == 'organization') {
         field.create = (value, close) => {
           _organization.value.organization_name = value

frontend/src/pages/Lead.vue

@@ -183,7 +183,7 @@
               :opened="section.opened"
             >
               <SidePanelLayout
-                :fields="section.fields"
+                :fields="section.columns[0].fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
                 v-model="lead.data"
                 @update="updateField"

frontend/src/pages/MobileContact.vue

@@ -143,7 +143,7 @@
               >
                 <Section :label="section.label" :opened="section.opened">
                   <SidePanelLayout
-                    :fields="section.fields"
+                    :fields="section.columns[0].fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"
                     doctype="Contact"
                     v-model="contact.data"
@@ -357,10 +357,8 @@ const fieldsLayout = createResource({
 
 function getParsedFields(data) {
   return data.map((section) => {
-    return {
+    section.columns = section.columns.map((column) => {
-      ...section,
+      column.fields = column.fields.map((field) => {
-      fields: computed(() =>
-        section.fields.map((field) => {
         if (field.name === 'email_id') {
           return {
             ...field,
@@ -395,8 +393,7 @@ function getParsedFields(data) {
                     contact.data.email_ids = contact.data.email_ids.filter(
                       (email) => email.name !== option.name,
                     )
-                      !isNew &&
+                    !isNew && (await deleteOption('Contact Email', option.name))
-                        (await deleteOption('Contact Email', option.name))
                     if (_contact.value.email_id === option.value) {
                       if (contact.data.email_ids.length === 0) {
                         _contact.value.email_id = ''
@@ -452,8 +449,7 @@ function getParsedFields(data) {
                     contact.data.phone_nos = contact.data.phone_nos.filter(
                       (phone) => phone.name !== option.name,
                     )
-                      !isNew &&
+                    !isNew && (await deleteOption('Contact Phone', option.name))
-                        (await deleteOption('Contact Phone', option.name))
                     if (_contact.value.actual_mobile_no === option.value) {
                       if (contact.data.phone_nos.length === 0) {
                         _contact.value.actual_mobile_no = ''
@@ -496,9 +492,10 @@ function getParsedFields(data) {
         } else {
           return field
         }
-        }),
+      })
-      ),
+      return column
-    }
+    })
+    return section
   })
 }
 

frontend/src/pages/MobileDeal.vue

@@ -99,8 +99,8 @@
                   </div>
                 </template>
                 <SidePanelLayout
-                  v-if="section.fields"
+                  v-if="section.columns?.[0].fields"
-                  :fields="section.fields"
+                  :fields="section.columns[0].fields"
                   :isLastSection="i == fieldsLayout.data.length - 1"
                   doctype="CRM Deal"
                   v-model="deal.data"
@@ -289,7 +289,7 @@ import {
   Tabs,
   Breadcrumbs,
   call,
-  usePageMeta
+  usePageMeta,
 } from 'frappe-ui'
 import { ref, computed, h, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -511,7 +511,7 @@ const fieldsLayout = createResource({
 function getParsedFields(sections) {
   sections.forEach((section) => {
     if (section.name == 'contacts_section') return
-    section.fields.forEach((field) => {
+    section.columns[0].fields.forEach((field) => {
       if (field.name == 'organization') {
         field.create = (value, close) => {
           _organization.value.organization_name = value

frontend/src/pages/MobileLead.vue

@@ -76,7 +76,7 @@
             >
               <Section :label="section.label" :opened="section.opened">
                 <SidePanelLayout
-                  :fields="section.fields"
+                  :fields="section.columns[0].fields"
                   :isLastSection="i == fieldsLayout.data.length - 1"
                   v-model="lead.data"
                   @update="updateField"

frontend/src/pages/MobileOrganization.vue

@@ -125,8 +125,9 @@
               >
                 <Section :label="section.label" :opened="section.opened">
                   <SidePanelLayout
+                    v-if="section.columns?.[0].fields"
                     v-model="organization.doc"
-                    :fields="section.fields"
+                    :fields="section.columns[0].fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"
                     doctype="CRM Organization"
                     @update="updateField"
@@ -335,10 +336,8 @@ const fieldsLayout = createResource({
 
 function getParsedFields(data) {
   return data.map((section) => {
-    return {
+    section.columns = section.columns.map((column) => {
-      ...section,
+      column.fields = column.fields.map((field) => {
-      fields: computed(() =>
-        section.fields.map((field) => {
         if (field.name === 'address') {
           return {
             ...field,
@@ -359,9 +358,10 @@ function getParsedFields(data) {
         } else {
           return field
         }
-        }),
+      })
-      ),
+      return column
-    }
+    })
+    return section
   })
 }
 

frontend/src/pages/Organization.vue

@@ -124,9 +124,9 @@
                 </Button>
               </template>
               <SidePanelLayout
-                v-if="section.fields"
+                v-if="section.columns?.[0].fields"
                 v-model="organization.doc"
-                :fields="section.fields"
+                :fields="section.columns[0].fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
                 doctype="CRM Organization"
                 @update="updateField"
@@ -377,10 +377,8 @@ const fieldsLayout = createResource({
 
 function getParsedFields(data) {
   return data.map((section) => {
-    return {
+    section.columns = section.columns.map((column) => {
-      ...section,
+      column.fields = column.fields.map((field) => {
-      fields: computed(() =>
-        section.fields.map((field) => {
         if (field.name === 'address') {
           return {
             ...field,
@@ -401,9 +399,10 @@ function getParsedFields(data) {
         } else {
           return field
         }
-        }),
+      })
-      ),
+      return column
-    }
+    })
+    return section
   })
 }