fix: send tabs instead of sections to FieldLayout component and render Tabs if exists
This commit is contained in:
Shariq Ansari
parent
851449bbc3
commit
38565a14f6
@ -2,6 +2,7 @@
|
||||
# For license information, please see license.txt
|
||||
|
||||
import json
|
||||
|
||||
import frappe
|
||||
from frappe import _
|
||||
from frappe.model.document import Document
|
||||
@ -10,46 +11,54 @@ from frappe.model.document import Document
|
||||
class CRMFieldsLayout(Document):
|
||||
pass
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_fields_layout(doctype: str, type: str):
|
||||
sections = []
|
||||
tabs = []
|
||||
if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
|
||||
layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
|
||||
else:
|
||||
return []
|
||||
|
||||
if layout.layout:
|
||||
sections = json.loads(layout.layout)
|
||||
tabs = json.loads(layout.layout)
|
||||
|
||||
has_tabs = tabs[0].get("sections") if tabs and tabs[0] else False
|
||||
|
||||
if not has_tabs:
|
||||
tabs = [{"no_tabs": True, "sections": tabs}]
|
||||
|
||||
allowed_fields = []
|
||||
for section in sections:
|
||||
if not section.get("fields"):
|
||||
continue
|
||||
allowed_fields.extend(section.get("fields"))
|
||||
for tab in tabs:
|
||||
for section in tab.get("sections"):
|
||||
if not section.get("fields"):
|
||||
continue
|
||||
allowed_fields.extend(section.get("fields"))
|
||||
|
||||
fields = frappe.get_meta(doctype).fields
|
||||
fields = [field for field in fields if field.fieldname in allowed_fields]
|
||||
|
||||
for section in 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:
|
||||
if field.fieldtype == "Select" and field.options:
|
||||
field.options = field.options.split("\n")
|
||||
field.options = [{"label": _(option), "value": option} for option in field.options]
|
||||
field.options.insert(0, {"label": "", "value": ""})
|
||||
field = {
|
||||
"label": _(field.label),
|
||||
"name": field.fieldname,
|
||||
"type": field.fieldtype,
|
||||
"options": field.options,
|
||||
"mandatory": field.reqd,
|
||||
"placeholder": field.get("placeholder"),
|
||||
"filters": field.get("link_filters")
|
||||
}
|
||||
section["fields"][section.get("fields").index(field["name"])] = field
|
||||
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:
|
||||
if field.fieldtype == "Select" and field.options:
|
||||
field.options = field.options.split("\n")
|
||||
field.options = [{"label": _(option), "value": option} for option in field.options]
|
||||
field.options.insert(0, {"label": "", "value": ""})
|
||||
field = {
|
||||
"label": _(field.label),
|
||||
"name": field.fieldname,
|
||||
"type": field.fieldtype,
|
||||
"options": field.options,
|
||||
"mandatory": field.reqd,
|
||||
"placeholder": field.get("placeholder"),
|
||||
"filters": field.get("link_filters"),
|
||||
}
|
||||
section["fields"][section.get("fields").index(field["name"])] = field
|
||||
|
||||
return sections or []
|
||||
return tabs or []
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
@ -59,11 +68,13 @@ def save_fields_layout(doctype: str, type: str, layout: str):
|
||||
else:
|
||||
doc = frappe.new_doc("CRM Fields Layout")
|
||||
|
||||
doc.update({
|
||||
"dt": doctype,
|
||||
"type": type,
|
||||
"layout": layout,
|
||||
})
|
||||
doc.update(
|
||||
{
|
||||
"dt": doctype,
|
||||
"type": type,
|
||||
"layout": layout,
|
||||
}
|
||||
)
|
||||
doc.save(ignore_permissions=True)
|
||||
|
||||
return doc.layout
|
||||
|
||||
@ -31,16 +31,8 @@
|
||||
<LoadingIndicator class="h-6 w-6" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col gap-3 border border-outline-gray-1 rounded-lg"
|
||||
>
|
||||
<FieldLayout
|
||||
v-if="sections.data"
|
||||
:sections="sections.data"
|
||||
:data="data.doc"
|
||||
:allowTabs="true"
|
||||
/>
|
||||
<div v-else>
|
||||
<FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data.doc" />
|
||||
</div>
|
||||
<DataFieldsModal
|
||||
v-if="showDataFieldsModal"
|
||||
@ -98,7 +90,7 @@ const data = createDocumentResource({
|
||||
},
|
||||
})
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['DataFields', props.doctype],
|
||||
params: { doctype: props.doctype, type: 'Data Fields' },
|
||||
|
||||
@ -1,180 +1,209 @@
|
||||
<template>
|
||||
<div class="flex flex-col" :class="{ 'my-4 sm:my-6': allowTabs }">
|
||||
<div
|
||||
v-for="(section, i) in sections"
|
||||
:key="section.label"
|
||||
class="section first:border-t-0 border-outline-gray-modals first:pt-0"
|
||||
<div
|
||||
class="flex flex-col"
|
||||
:class="{
|
||||
'border border-outline-gray-1 rounded-lg': hasTabs,
|
||||
'border-outline-gray-modals': modal && hasTabs,
|
||||
}"
|
||||
>
|
||||
<Tabs
|
||||
v-model="tabIndex"
|
||||
class="!h-full"
|
||||
:tabs="tabs"
|
||||
v-slot="{ tab }"
|
||||
:tablistClass="
|
||||
!hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="!section.hideBorder && i != 0"
|
||||
class="h-px w-full border-t my-5"
|
||||
/>
|
||||
<Section
|
||||
class="text-lg font-medium"
|
||||
:class="{ 'px-3 sm:px-5': allowTabs }"
|
||||
:label="section.label"
|
||||
:hideLabel="section.hideLabel"
|
||||
:opened="section.opened"
|
||||
:collapsible="section.collapsible"
|
||||
collapseIconPosition="right"
|
||||
>
|
||||
<div :class="{ 'my-4 sm:my-6': hasTabs }">
|
||||
<div
|
||||
class="grid gap-4 mt-6"
|
||||
:class="[gridClass(section.columns), { 'px-3 sm:px-5': allowTabs }]"
|
||||
v-for="(section, i) in tab.sections"
|
||||
:key="section.label"
|
||||
class="section"
|
||||
>
|
||||
<div v-for="field in section.fields" :key="field.name">
|
||||
<div
|
||||
v-if="i != 0"
|
||||
class="w-full"
|
||||
:class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
|
||||
/>
|
||||
<Section
|
||||
class="text-lg font-medium"
|
||||
:class="{ 'px-3 sm:px-5': hasTabs }"
|
||||
:label="section.label"
|
||||
:hideLabel="section.hideLabel"
|
||||
:opened="section.opened"
|
||||
:collapsible="section.collapsible"
|
||||
collapseIconPosition="right"
|
||||
>
|
||||
<div
|
||||
class="settings-field"
|
||||
v-if="
|
||||
(field.type == 'Check' ||
|
||||
(field.read_only && data[field.name]) ||
|
||||
!field.read_only ||
|
||||
!field.hidden) &&
|
||||
(!field.depends_on || field.display_via_depends_on)
|
||||
"
|
||||
class="grid gap-4"
|
||||
:class="[
|
||||
gridClass(section.columns),
|
||||
{ 'px-3 sm:px-5': hasTabs },
|
||||
{ 'mt-6': !section.hideLabel },
|
||||
]"
|
||||
>
|
||||
<div
|
||||
v-if="field.type != 'Check'"
|
||||
class="mb-2 text-sm text-ink-gray-5"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span
|
||||
class="text-ink-red-3"
|
||||
<div v-for="field in section.fields" :key="field.name">
|
||||
<div
|
||||
class="settings-field"
|
||||
v-if="
|
||||
field.mandatory ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
(field.type == 'Check' ||
|
||||
(field.read_only && data[field.name]) ||
|
||||
!field.read_only ||
|
||||
!field.hidden) &&
|
||||
(!field.depends_on || field.display_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"
|
||||
/>
|
||||
<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="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"
|
||||
: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>
|
||||
<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"
|
||||
/>
|
||||
<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="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"
|
||||
: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
|
||||
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'].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
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<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'].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
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -186,19 +215,24 @@ import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { getFormat } from '@/utils'
|
||||
import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
|
||||
import { Tabs, Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const { getUser } = usersStore()
|
||||
|
||||
const props = defineProps({
|
||||
sections: Array,
|
||||
tabs: Array,
|
||||
data: Object,
|
||||
allowTabs: {
|
||||
modal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const hasTabs = computed(() => !props.tabs[0].no_tabs)
|
||||
|
||||
const tabIndex = ref(0)
|
||||
|
||||
function gridClass(columns) {
|
||||
columns = columns || 3
|
||||
let griColsMap = {
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sections.data">
|
||||
<FieldLayout :sections="sections.data" :data="_address" />
|
||||
<div v-if="tabs.data">
|
||||
<FieldLayout :tabs="tabs.data" :data="_address" />
|
||||
<ErrorMessage class="mt-2" :message="error" />
|
||||
</div>
|
||||
</div>
|
||||
@ -106,7 +106,7 @@ const dialogOptions = computed(() => {
|
||||
return { title, size, actions }
|
||||
})
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['QuickEntry', 'Address'],
|
||||
params: { doctype: 'Address', type: 'Quick Entry' },
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
<FieldLayout
|
||||
v-else-if="filteredSections.length"
|
||||
:sections="filteredSections"
|
||||
:tabs="filteredSections"
|
||||
:data="_contact"
|
||||
/>
|
||||
</div>
|
||||
@ -245,7 +245,7 @@ const detailFields = computed(() => {
|
||||
return details.filter((detail) => detail.value)
|
||||
})
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['QuickEntry', 'Contact'],
|
||||
params: { doctype: 'Contact', type: 'Quick Entry' },
|
||||
@ -253,7 +253,7 @@ const sections = createResource({
|
||||
})
|
||||
|
||||
const filteredSections = computed(() => {
|
||||
let allSections = sections.data || []
|
||||
let allSections = tabs.data?.[0]?.sections || []
|
||||
if (!allSections.length) return []
|
||||
|
||||
allSections.forEach((s) => {
|
||||
@ -276,7 +276,7 @@ const filteredSections = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
return allSections
|
||||
return [{ no_tabs: true, sections: allSections }]
|
||||
})
|
||||
|
||||
const dirty = computed(() => {
|
||||
|
||||
@ -29,13 +29,13 @@
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="sections?.data">
|
||||
<div v-if="tabs?.data">
|
||||
<FieldLayoutEditor
|
||||
v-if="!preview"
|
||||
:sections="sections.data"
|
||||
:sections="tabs.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<FieldLayout v-else :sections="sections.data" :data="{}" />
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -77,20 +77,20 @@ function getParams() {
|
||||
return { doctype: _doctype.value, type: 'Data Fields' }
|
||||
}
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['DataFieldsModal', _doctype.value],
|
||||
params: getParams(),
|
||||
onSuccess(data) {
|
||||
sections.originalData = JSON.parse(JSON.stringify(data))
|
||||
tabs.originalData = JSON.parse(JSON.stringify(data))
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => sections?.data,
|
||||
() => tabs?.data,
|
||||
() => {
|
||||
dirty.value =
|
||||
JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
|
||||
JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
@ -99,18 +99,21 @@ onMounted(() => useDebounceFn(reload, 100)())
|
||||
|
||||
function reload() {
|
||||
nextTick(() => {
|
||||
sections.params = getParams()
|
||||
sections.reload()
|
||||
tabs.params = getParams()
|
||||
tabs.reload()
|
||||
})
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
let _sections = JSON.parse(JSON.stringify(sections.data))
|
||||
_sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
let _tabs = JSON.parse(JSON.stringify(tabs.data))
|
||||
_tabs.forEach((tab) => {
|
||||
if (!tab.sections) return
|
||||
tab.sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
})
|
||||
})
|
||||
loading.value = true
|
||||
call(
|
||||
@ -118,7 +121,7 @@ function saveChanges() {
|
||||
{
|
||||
doctype: _doctype.value,
|
||||
type: 'Data Fields',
|
||||
layout: JSON.stringify(_sections),
|
||||
layout: JSON.stringify(_tabs),
|
||||
},
|
||||
).then(() => {
|
||||
loading.value = false
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="h-px w-full border-t my-5" />
|
||||
<FieldLayout
|
||||
v-if="filteredSections.length"
|
||||
:sections="filteredSections"
|
||||
:tabs="filteredSections"
|
||||
:data="deal"
|
||||
/>
|
||||
<ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
|
||||
@ -100,28 +100,30 @@ const isDealCreating = ref(false)
|
||||
const chooseExistingContact = ref(false)
|
||||
const chooseExistingOrganization = ref(false)
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['QuickEntry', 'CRM Deal'],
|
||||
params: { doctype: 'CRM Deal', type: 'Quick Entry' },
|
||||
auto: true,
|
||||
transform: (data) => {
|
||||
return data.forEach((section) => {
|
||||
section.fields.forEach((field) => {
|
||||
if (field.name == 'status') {
|
||||
field.type = 'Select'
|
||||
field.options = dealStatuses.value
|
||||
field.prefix = getDealStatus(deal.status).iconColorClass
|
||||
} else if (field.name == 'deal_owner') {
|
||||
field.type = 'User'
|
||||
}
|
||||
transform: (_tabs) => {
|
||||
return _tabs.forEach((tab) => {
|
||||
tab.sections.forEach((section) => {
|
||||
section.fields.forEach((field) => {
|
||||
if (field.name == 'status') {
|
||||
field.type = 'Select'
|
||||
field.options = dealStatuses.value
|
||||
field.prefix = getDealStatus(deal.status).iconColorClass
|
||||
} else if (field.name == 'deal_owner') {
|
||||
field.type = 'User'
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const filteredSections = computed(() => {
|
||||
let allSections = sections.data || []
|
||||
let allSections = tabs.data?.[0]?.sections || []
|
||||
if (!allSections.length) return []
|
||||
|
||||
let _filteredSections = []
|
||||
@ -159,7 +161,7 @@ const filteredSections = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
return _filteredSections
|
||||
return [{ no_tabs: true, sections: _filteredSections }]
|
||||
})
|
||||
|
||||
const dealStatuses = computed(() => {
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FieldLayout v-if="sections.data" :sections="sections.data" :data="lead" />
|
||||
<FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="lead" />
|
||||
<ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
|
||||
</div>
|
||||
</div>
|
||||
@ -63,21 +63,23 @@ const router = useRouter()
|
||||
const error = ref(null)
|
||||
const isLeadCreating = ref(false)
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['QuickEntry', 'CRM Lead'],
|
||||
params: { doctype: 'CRM Lead', type: 'Quick Entry' },
|
||||
auto: true,
|
||||
transform: (data) => {
|
||||
return data.forEach((section) => {
|
||||
section.fields.forEach((field) => {
|
||||
if (field.name == 'status') {
|
||||
field.type = 'Select'
|
||||
field.options = leadStatuses.value
|
||||
field.prefix = getLeadStatus(lead.status).iconColorClass
|
||||
} else if (field.name == 'lead_owner') {
|
||||
field.type = 'User'
|
||||
}
|
||||
transform: (_tabs) => {
|
||||
return _tabs.forEach((tab) => {
|
||||
tab.sections.forEach((section) => {
|
||||
section.fields.forEach((field) => {
|
||||
if (field.name == 'status') {
|
||||
field.type = 'Select'
|
||||
field.options = leadStatuses.value
|
||||
field.prefix = getLeadStatus(lead.status).iconColorClass
|
||||
} else if (field.name == 'lead_owner') {
|
||||
field.type = 'User'
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
</div>
|
||||
<FieldLayout
|
||||
v-else-if="filteredSections.length"
|
||||
:sections="filteredSections"
|
||||
:tabs="filteredSections"
|
||||
:data="_organization"
|
||||
/>
|
||||
</div>
|
||||
@ -241,7 +241,7 @@ const fields = computed(() => {
|
||||
return details.filter((field) => field.value)
|
||||
})
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['QuickEntry', 'CRM Organization'],
|
||||
params: { doctype: 'CRM Organization', type: 'Quick Entry' },
|
||||
@ -249,7 +249,7 @@ const sections = createResource({
|
||||
})
|
||||
|
||||
const filteredSections = computed(() => {
|
||||
let allSections = sections.data || []
|
||||
let allSections = tabs.data?.[0]?.sections || []
|
||||
if (!allSections.length) return []
|
||||
|
||||
allSections.forEach((s) => {
|
||||
@ -272,7 +272,7 @@ const filteredSections = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
return allSections
|
||||
return [{ no_tabs: true, sections: allSections }]
|
||||
})
|
||||
|
||||
watch(
|
||||
|
||||
@ -35,13 +35,13 @@
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="sections?.data">
|
||||
<div v-if="tabs?.data">
|
||||
<FieldLayoutEditor
|
||||
v-if="!preview"
|
||||
:sections="sections.data"
|
||||
:sections="tabs.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<FieldLayout v-else :sections="sections.data" :data="{}" />
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -83,20 +83,20 @@ function getParams() {
|
||||
return { doctype: _doctype.value, type: 'Quick Entry' }
|
||||
}
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['QuickEntryModal', _doctype.value],
|
||||
params: getParams(),
|
||||
onSuccess(data) {
|
||||
sections.originalData = JSON.parse(JSON.stringify(data))
|
||||
tabs.originalData = JSON.parse(JSON.stringify(data))
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => sections?.data,
|
||||
() => tabs?.data,
|
||||
() => {
|
||||
dirty.value =
|
||||
JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
|
||||
JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
@ -105,18 +105,21 @@ onMounted(() => useDebounceFn(reload, 100)())
|
||||
|
||||
function reload() {
|
||||
nextTick(() => {
|
||||
sections.params = getParams()
|
||||
sections.reload()
|
||||
tabs.params = getParams()
|
||||
tabs.reload()
|
||||
})
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
let _sections = JSON.parse(JSON.stringify(sections.data))
|
||||
_sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
let _tabs = JSON.parse(JSON.stringify(tabs.data))
|
||||
_tabs.forEach((tab) => {
|
||||
if (!tab.sections) return
|
||||
tab.sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
})
|
||||
})
|
||||
loading.value = true
|
||||
call(
|
||||
@ -124,7 +127,7 @@ function saveChanges() {
|
||||
{
|
||||
doctype: _doctype.value,
|
||||
type: 'Quick Entry',
|
||||
layout: JSON.stringify(_sections),
|
||||
layout: JSON.stringify(_tabs),
|
||||
},
|
||||
).then(() => {
|
||||
loading.value = false
|
||||
|
||||
@ -29,18 +29,20 @@
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="sections.data" class="flex gap-4">
|
||||
<div v-if="tabs.data?.[0]?.sections" class="flex gap-4">
|
||||
<SidePanelLayoutEditor
|
||||
class="flex flex-1 flex-col pr-2"
|
||||
:sections="sections.data"
|
||||
:sections="tabs.data[0].sections"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<div v-if="preview" class="flex flex-1 flex-col border rounded">
|
||||
<div
|
||||
v-for="(section, i) in sections.data"
|
||||
v-for="(section, i) in tabs.data[0].sections"
|
||||
:key="section.label"
|
||||
class="flex flex-col py-1.5 px-1"
|
||||
:class="{ 'border-b': i !== sections.data?.length - 1 }"
|
||||
:class="{
|
||||
'border-b': i !== tabs.data[0].sections?.length - 1,
|
||||
}"
|
||||
>
|
||||
<Section
|
||||
class="p-2"
|
||||
@ -106,20 +108,20 @@ function getParams() {
|
||||
return { doctype: _doctype.value, type: 'Side Panel' }
|
||||
}
|
||||
|
||||
const sections = createResource({
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['SidePanel', _doctype.value],
|
||||
params: getParams(),
|
||||
onSuccess(data) {
|
||||
sections.originalData = JSON.parse(JSON.stringify(data))
|
||||
tabs.originalData = JSON.parse(JSON.stringify(data))
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => sections?.data,
|
||||
() => tabs?.data,
|
||||
() => {
|
||||
dirty.value =
|
||||
JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
|
||||
JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
@ -128,18 +130,20 @@ onMounted(() => useDebounceFn(reload, 100)())
|
||||
|
||||
function reload() {
|
||||
nextTick(() => {
|
||||
sections.params = getParams()
|
||||
sections.reload()
|
||||
tabs.params = getParams()
|
||||
tabs.reload()
|
||||
})
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
let _sections = JSON.parse(JSON.stringify(sections.data))
|
||||
_sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields
|
||||
.map((field) => field.fieldname || field.name)
|
||||
.filter(Boolean)
|
||||
let _tabs = JSON.parse(JSON.stringify(tabs.data))
|
||||
_tabs.forEach((tab) => {
|
||||
tab.sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields
|
||||
.map((field) => field.fieldname || field.name)
|
||||
.filter(Boolean)
|
||||
})
|
||||
})
|
||||
loading.value = true
|
||||
call(
|
||||
@ -147,7 +151,7 @@ function saveChanges() {
|
||||
{
|
||||
doctype: _doctype.value,
|
||||
type: 'Side Panel',
|
||||
layout: JSON.stringify(_sections),
|
||||
layout: JSON.stringify(_tabs),
|
||||
},
|
||||
).then(() => {
|
||||
loading.value = false
|
||||
|
||||
@ -12,11 +12,7 @@
|
||||
/>
|
||||
</h2>
|
||||
<div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
|
||||
<FieldLayout
|
||||
v-if="data?.doc && sections"
|
||||
:sections="sections"
|
||||
:data="data.doc"
|
||||
/>
|
||||
<FieldLayout v-if="data?.doc && tabs" :tabs="tabs" :data="data.doc" />
|
||||
<ErrorMessage class="mt-2" :message="error" />
|
||||
</div>
|
||||
<div v-else class="flex flex-1 items-center justify-center">
|
||||
@ -98,7 +94,7 @@ const data = createDocumentResource({
|
||||
},
|
||||
})
|
||||
|
||||
const sections = computed(() => {
|
||||
const tabs = computed(() => {
|
||||
if (!fields.data) return []
|
||||
let _sections = []
|
||||
let fieldsData = fields.data
|
||||
@ -138,7 +134,7 @@ const sections = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
return _sections
|
||||
return [{ no_tabs: true, sections: _sections }]
|
||||
})
|
||||
|
||||
function update() {
|
||||
@ -148,7 +144,8 @@ function update() {
|
||||
}
|
||||
|
||||
function validateMandatoryFields() {
|
||||
for (let section of sections.value) {
|
||||
if (!tabs.value) return false
|
||||
for (let section of tabs.value[0].sections) {
|
||||
for (let field of section.fields) {
|
||||
if (
|
||||
(field.mandatory ||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user