fix: render tabs, sections & columns

crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json

@@ -37,7 +37,7 @@
    "fieldname": "layout",
    "fieldtype": "Code",
    "label": "Layout",
-   "options": "JS"
+   "options": "JSON"
   },
   {
    "fieldname": "column_break_post",
@@ -46,7 +46,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-12-29 12:58:54.280569",
+ "modified": "2024-12-31 19:06:24.679782",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Fields Layout",

crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py

@@ -34,16 +34,18 @@ def get_fields_layout(doctype: str, type: str):
 	allowed_fields = []
 	for tab in tabs:
 		for section in tab.get("sections"):
-			if not section.get("fields"):
+			for column in section.get("columns"):
+				if not column.get("fields"):
 					continue
-			allowed_fields.extend(section.get("fields"))
+				allowed_fields.extend(column.get("fields"))
 
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldname in allowed_fields]
 
 	for tab in tabs:
 		for section in tab.get("sections"):
-			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 = next((f for f in fields if f.fieldname == field), None)
 					if field:
 						field = {
@@ -56,7 +58,7 @@ def get_fields_layout(doctype: str, type: str):
 							"placeholder": field.get("placeholder"),
 							"filters": field.get("link_filters"),
 						}
-					section["fields"][section.get("fields").index(field["name"])] = field
+						column["fields"][column.get("fields").index(field["name"])] = field
 
 	return tabs or []
 

frontend/src/components/FieldLayout.vue

@@ -36,14 +36,26 @@
             collapseIconPosition="right"
           >
             <div
-              class="grid gap-4"
+              class="column flex gap-4"
               :class="[
-                gridClass(section.columns),
+                {
-                { 'px-3 sm:px-5': hasTabs },
+                  'px-3 sm:px-5': hasTabs,
-                { 'mt-6': !section.hideLabel },
+                  'mt-6': !section.hideLabel || !section.label,
+                },
               ]"
             >
-              <div v-for="field in section.fields" :key="field.name">
+              <div
+                class="flex flex-col gap-4 w-full"
+                v-for="column in section.columns"
+                :key="column.name"
+              >
+                <div
+                  v-if="!column.hideLabel || !column.label"
+                  class="text-ink-gray-9 max-w-fit text-base"
+                >
+                  {{ column.label }}
+                </div>
+                <div v-for="field in column.fields" :key="field.name">
                   <div class="settings-field">
                     <div
                       v-if="field.type != 'Check'"
@@ -153,7 +165,11 @@
                         />
                       </template>
                       <template #item-prefix="{ option }">
-                      <UserAvatar class="mr-2" :user="option.value" size="sm" />
+                        <UserAvatar
+                          class="mr-2"
+                          :user="option.value"
+                          size="sm"
+                        />
                       </template>
                       <template #item-label="{ option }">
                         <Tooltip :text="option.value">
@@ -229,6 +245,7 @@
                   </div>
                 </div>
               </div>
+            </div>
           </Section>
         </div>
       </div>
@@ -272,14 +289,23 @@ const hasTabs = computed(() => !props.tabs[0].no_tabs)
 const _tabs = computed(() => {
   return props.tabs.map((tab) => {
     tab.sections = tab.sections.map((section) => {
-      section.fields = section.fields.filter(
+      section.columns = section.columns.map((column) => {
-        (field) =>
+        column.fields = column.fields.map((field) => {
+          if (field.type == 'Link' && field.options == 'User') {
+            field.type = 'User'
+          }
+          if (
             (field.type == 'Check' ||
               (field.read_only && props.data[field.name]) ||
               !field.read_only) &&
             (!field.depends_on || field.display_via_depends_on) &&
-          !field.hidden,
+            !field.hidden
-      )
+          ) {
+            return field
+          }
+        })
+        return column
+      })
       return section
     })
     return tab