fix: render tabs, sections & columns
This commit is contained in:
Shariq Ansari
parent
4b51801f75
commit
16d49c4b9d
@ -37,7 +37,7 @@
|
|||||||
"fieldname": "layout",
|
"fieldname": "layout",
|
||||||
"fieldtype": "Code",
|
"fieldtype": "Code",
|
||||||
"label": "Layout",
|
"label": "Layout",
|
||||||
"options": "JS"
|
"options": "JSON"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"fieldname": "column_break_post",
|
"fieldname": "column_break_post",
|
||||||
@ -46,7 +46,7 @@
|
|||||||
],
|
],
|
||||||
"index_web_pages_for_search": 1,
|
"index_web_pages_for_search": 1,
|
||||||
"links": [],
|
"links": [],
|
||||||
"modified": "2024-12-29 12:58:54.280569",
|
"modified": "2024-12-31 19:06:24.679782",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "FCRM",
|
"module": "FCRM",
|
||||||
"name": "CRM Fields Layout",
|
"name": "CRM Fields Layout",
|
||||||
|
|||||||
@ -34,29 +34,31 @@ def get_fields_layout(doctype: str, type: str):
|
|||||||
allowed_fields = []
|
allowed_fields = []
|
||||||
for tab in tabs:
|
for tab in tabs:
|
||||||
for section in tab.get("sections"):
|
for section in tab.get("sections"):
|
||||||
if not section.get("fields"):
|
for column in section.get("columns"):
|
||||||
continue
|
if not column.get("fields"):
|
||||||
allowed_fields.extend(section.get("fields"))
|
continue
|
||||||
|
allowed_fields.extend(column.get("fields"))
|
||||||
|
|
||||||
fields = frappe.get_meta(doctype).fields
|
fields = frappe.get_meta(doctype).fields
|
||||||
fields = [field for field in fields if field.fieldname in allowed_fields]
|
fields = [field for field in fields if field.fieldname in allowed_fields]
|
||||||
|
|
||||||
for tab in tabs:
|
for tab in tabs:
|
||||||
for section in tab.get("sections"):
|
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 []:
|
||||||
field = next((f for f in fields if f.fieldname == field), None)
|
for field in column.get("fields") if column.get("fields") else []:
|
||||||
if field:
|
field = next((f for f in fields if f.fieldname == field), None)
|
||||||
field = {
|
if field:
|
||||||
"label": _(field.label),
|
field = {
|
||||||
"name": field.fieldname,
|
"label": _(field.label),
|
||||||
"type": field.fieldtype,
|
"name": field.fieldname,
|
||||||
"options": getOptions(field),
|
"type": field.fieldtype,
|
||||||
"mandatory": field.reqd,
|
"options": getOptions(field),
|
||||||
"read_only": field.read_only,
|
"mandatory": field.reqd,
|
||||||
"placeholder": field.get("placeholder"),
|
"read_only": field.read_only,
|
||||||
"filters": field.get("link_filters"),
|
"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 []
|
return tabs or []
|
||||||
|
|
||||||
|
|||||||
@ -36,196 +36,213 @@
|
|||||||
collapseIconPosition="right"
|
collapseIconPosition="right"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="grid gap-4"
|
class="column flex gap-4"
|
||||||
:class="[
|
: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
|
||||||
<div class="settings-field">
|
class="flex flex-col gap-4 w-full"
|
||||||
<div
|
v-for="column in section.columns"
|
||||||
v-if="field.type != 'Check'"
|
:key="column.name"
|
||||||
class="mb-2 text-sm text-ink-gray-5"
|
>
|
||||||
>
|
<div
|
||||||
{{ __(field.label) }}
|
v-if="!column.hideLabel || !column.label"
|
||||||
<span
|
class="text-ink-gray-9 max-w-fit text-base"
|
||||||
class="text-ink-red-3"
|
>
|
||||||
v-if="
|
{{ column.label }}
|
||||||
field.mandatory ||
|
</div>
|
||||||
(field.mandatory_depends_on &&
|
<div v-for="field in column.fields" :key="field.name">
|
||||||
field.mandatory_via_depends_on)
|
<div class="settings-field">
|
||||||
"
|
<div
|
||||||
>*</span
|
v-if="field.type != 'Check'"
|
||||||
>
|
class="mb-2 text-sm text-ink-gray-5"
|
||||||
</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) }}
|
{{ __(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
|
>*</span
|
||||||
>
|
>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
<FormControl
|
||||||
<div class="flex gap-1" v-else-if="field.type === 'Link'">
|
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
|
<Link
|
||||||
class="form-control flex-1 truncate"
|
v-else-if="field.type === 'User'"
|
||||||
:value="data[field.name]"
|
class="form-control"
|
||||||
|
:value="getUser(data[field.name]).full_name"
|
||||||
:doctype="field.options"
|
:doctype="field.options"
|
||||||
:filters="field.filters"
|
:filters="field.filters"
|
||||||
@change="(v) => (data[field.name] = v)"
|
@change="(v) => (data[field.name] = v)"
|
||||||
:placeholder="getPlaceholder(field)"
|
:placeholder="getPlaceholder(field)"
|
||||||
:onCreate="field.create"
|
:hideMe="true"
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
v-if="data[field.name] && field.edit"
|
|
||||||
class="shrink-0"
|
|
||||||
:label="__('Edit')"
|
|
||||||
@click="field.edit(data[field.name])"
|
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<EditIcon class="h-4 w-4" />
|
<UserAvatar
|
||||||
|
class="mr-2"
|
||||||
|
:user="data[field.name]"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
</template>
|
</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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -272,14 +289,23 @@ const hasTabs = computed(() => !props.tabs[0].no_tabs)
|
|||||||
const _tabs = computed(() => {
|
const _tabs = computed(() => {
|
||||||
return props.tabs.map((tab) => {
|
return props.tabs.map((tab) => {
|
||||||
tab.sections = tab.sections.map((section) => {
|
tab.sections = tab.sections.map((section) => {
|
||||||
section.fields = section.fields.filter(
|
section.columns = section.columns.map((column) => {
|
||||||
(field) =>
|
column.fields = column.fields.map((field) => {
|
||||||
(field.type == 'Check' ||
|
if (field.type == 'Link' && field.options == 'User') {
|
||||||
(field.read_only && props.data[field.name]) ||
|
field.type = 'User'
|
||||||
!field.read_only) &&
|
}
|
||||||
(!field.depends_on || field.display_via_depends_on) &&
|
if (
|
||||||
!field.hidden,
|
(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 section
|
||||||
})
|
})
|
||||||
return tab
|
return tab
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user