fix: render tabs, sections & columns

This commit is contained in:
Shariq Ansari 2024-12-31 19:32:51 +05:30
parent 4b51801f75
commit 16d49c4b9d
3 changed files with 229 additions and 201 deletions

View File

@ -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",

View File

@ -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 []

View File

@ -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 },
{ '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="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(
(field) =>
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,
)
!field.hidden
) {
return field
}
})
return column
})
return section
})
return tab