From 16d49c4b9df6dbb536226d6d67a9b55a4f9591a4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Dec 2024 19:32:51 +0530
Subject: [PATCH] fix: render tabs, sections & columns

---
 .../crm_fields_layout/crm_fields_layout.json  |   4 +-
 .../crm_fields_layout/crm_fields_layout.py    |  36 +-
 frontend/src/components/FieldLayout.vue       | 390 ++++++++++--------
 3 files changed, 229 insertions(+), 201 deletions(-)

diff --git a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
index 7094e58d..ef784e79 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
+++ b/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",
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 23552e5c..bdd41568 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
@@ -34,29 +34,31 @@ 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"):
-				continue
-			allowed_fields.extend(section.get("fields"))
+			for column in section.get("columns"):
+				if not column.get("fields"):
+					continue
+				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 []:
-				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"),
-					}
-					section["fields"][section.get("fields").index(field["name"])] = field
+			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 = {
+							"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"),
+						}
+						column["fields"][column.get("fields").index(field["name"])] = field
 
 	return tabs or []
 
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index fa75b303..2da46961 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -36,196 +36,213 @@
             collapseIconPosition="right"
           >
             <div
-              class="grid gap-4"
+              class="column flex gap-4"
               :class="[
-                gridClass(section.columns),
-                { 'px-3 sm:px-5': hasTabs },
-                { 'mt-6': !section.hideLabel },
+                {
+                  'px-3 sm:px-5': hasTabs,
+                  'mt-6': !section.hideLabel || !section.label,
+                },
               ]"
             >
-              <div v-for="field in section.fields" :key="field.name">
-                <div class="settings-field">
-                  <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]
-                          }
-                        }
-                      "
+              <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'"
+                      class="mb-2 text-sm text-ink-gray-5"
                     >
                       {{ __(field.label) }}
-                      <span class="text-ink-red-3" v-if="field.mandatory"
+                      <span
+                        class="text-ink-red-3"
+                        v-if="
+                          field.mandatory ||
+                          (field.mandatory_depends_on &&
+                            field.mandatory_via_depends_on)
+                        "
                         >*</span
                       >
-                    </label>
-                  </div>
-                  <div class="flex gap-1" v-else-if="field.type === 'Link'">
+                    </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>
+
                     <Link
-                      class="form-control flex-1 truncate"
-                      :value="data[field.name]"
+                      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)"
-                      :onCreate="field.create"
-                    />
-                    <Button
-                      v-if="data[field.name] && field.edit"
-                      class="shrink-0"
-                      :label="__('Edit')"
-                      @click="field.edit(data[field.name])"
+                      :hideMe="true"
                     >
                       <template #prefix>
-                        <EditIcon class="h-4 w-4" />
+                        <UserAvatar
+                          class="mr-2"
+                          :user="data[field.name]"
+                          size="sm"
+                        />
                       </template>
-                    </Button>
+                      <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>
-
-                  <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>
             </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(
-        (field) =>
-          (field.type == 'Check' ||
-            (field.read_only && props.data[field.name]) ||
-            !field.read_only) &&
-          (!field.depends_on || field.display_via_depends_on) &&
-          !field.hidden,
-      )
+      section.columns = section.columns.map((column) => {
+        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
+          ) {
+            return field
+          }
+        })
+        return column
+      })
       return section
     })
     return tab