fix: use fieldname & fieldtype instead of name & type in fields layout
This commit is contained in:
Shariq Ansari
parent
b4e4273810
commit
81c99fde16
@ -14,7 +14,7 @@ class CRMFieldsLayout(Document):
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_fields_layout(doctype: str, type: str, no_reactivity=False):
|
||||
def get_fields_layout(doctype: str, type: str):
|
||||
tabs = []
|
||||
layout = None
|
||||
|
||||
@ -51,22 +51,8 @@ def get_fields_layout(doctype: str, type: str, no_reactivity=False):
|
||||
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"),
|
||||
"hidden": field.get("hidden"),
|
||||
"depends_on": "" if no_reactivity else field.get("depends_on"),
|
||||
"mandatory_depends_on": ""
|
||||
if no_reactivity
|
||||
else field.get("mandatory_depends_on"),
|
||||
}
|
||||
column["fields"][column.get("fields").index(field["name"])] = field
|
||||
field = field.as_dict()
|
||||
column["fields"][column.get("fields").index(field["fieldname"])] = field
|
||||
|
||||
return tabs or []
|
||||
|
||||
@ -134,11 +120,3 @@ def get_default_layout(doctype: str):
|
||||
tabs[-1]["sections"][-1]["columns"][-1]["fields"].append(field.fieldname)
|
||||
|
||||
return tabs
|
||||
|
||||
|
||||
def getOptions(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": ""})
|
||||
return field.options
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
:tabs="tabs.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" :preview="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -103,9 +103,7 @@ function saveChanges() {
|
||||
tab.sections.forEach((section) => {
|
||||
section.columns.forEach((column) => {
|
||||
if (!column.fields) return
|
||||
column.fields = column.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
column.fields = column.fields.map((field) => field.fieldname)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -51,43 +51,43 @@
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
<template v-for="field in column.fields" :key="field.name">
|
||||
<template v-for="field in column.fields" :key="field.fieldname">
|
||||
<div v-if="field.visible" class="field">
|
||||
<div
|
||||
v-if="field.type != 'Check'"
|
||||
v-if="field.fieldtype != 'Check'"
|
||||
class="mb-2 text-sm text-ink-gray-5"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span
|
||||
class="text-ink-red-3"
|
||||
v-if="
|
||||
field.mandatory ||
|
||||
field.reqd ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
"
|
||||
class="text-ink-red-3"
|
||||
>*</span
|
||||
>
|
||||
</div>
|
||||
<FormControl
|
||||
v-if="field.read_only && field.type !== 'Check'"
|
||||
v-if="field.read_only && field.fieldtype !== 'Check'"
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
v-model="data[field.fieldname]"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Grid
|
||||
v-else-if="field.type === 'Table'"
|
||||
v-model="data[field.name]"
|
||||
v-else-if="field.fieldtype === 'Table'"
|
||||
v-model="data[field.fieldname]"
|
||||
:doctype="field.options"
|
||||
:parentDoctype="doctype"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Select'"
|
||||
v-else-if="field.fieldtype === 'Select'"
|
||||
type="select"
|
||||
class="form-control"
|
||||
:class="field.prefix ? 'prefix' : ''"
|
||||
:options="field.options"
|
||||
v-model="data[field.name]"
|
||||
v-model="data[field.fieldname]"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
>
|
||||
<template v-if="field.prefix" #prefix>
|
||||
@ -95,14 +95,16 @@
|
||||
</template>
|
||||
</FormControl>
|
||||
<div
|
||||
v-else-if="field.type == 'Check'"
|
||||
v-else-if="field.fieldtype == '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)"
|
||||
v-model="data[field.fieldname]"
|
||||
@change="
|
||||
(e) => (data[field.fieldname] = e.target.checked)
|
||||
"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<label
|
||||
@ -110,7 +112,7 @@
|
||||
@click="
|
||||
() => {
|
||||
if (!Boolean(field.read_only)) {
|
||||
data[field.name] = !data[field.name]
|
||||
data[field.fieldname] = !data[field.fieldname]
|
||||
}
|
||||
}
|
||||
"
|
||||
@ -121,21 +123,24 @@
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-1" v-else-if="field.type === 'Link'">
|
||||
<div
|
||||
class="flex gap-1"
|
||||
v-else-if="field.fieldtype === 'Link'"
|
||||
>
|
||||
<Link
|
||||
class="form-control flex-1 truncate"
|
||||
:value="data[field.name]"
|
||||
:value="data[field.fieldname]"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.name] = v)"
|
||||
@change="(v) => (data[field.fieldname] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:onCreate="field.create"
|
||||
/>
|
||||
<Button
|
||||
v-if="data[field.name] && field.edit"
|
||||
v-if="data[field.fieldname] && field.edit"
|
||||
class="shrink-0"
|
||||
:label="__('Edit')"
|
||||
@click="field.edit(data[field.name])"
|
||||
@click="field.edit(data[field.fieldname])"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
@ -144,19 +149,19 @@
|
||||
</div>
|
||||
|
||||
<Link
|
||||
v-else-if="field.type === 'User'"
|
||||
v-else-if="field.fieldtype === 'User'"
|
||||
class="form-control"
|
||||
:value="getUser(data[field.name]).full_name"
|
||||
:value="getUser(data[field.fieldname]).full_name"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.name] = v)"
|
||||
@change="(v) => (data[field.fieldname] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:hideMe="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="data[field.name]"
|
||||
:user="data[field.fieldname]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
@ -176,17 +181,17 @@
|
||||
</template>
|
||||
</Link>
|
||||
<DateTimePicker
|
||||
v-else-if="field.type === 'Datetime'"
|
||||
v-model="data[field.name]"
|
||||
v-else-if="field.fieldtype === 'Datetime'"
|
||||
v-model="data[field.fieldname]"
|
||||
icon-left=""
|
||||
:formatter="(date) => getFormat(date, '', true, true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.type === 'Date'"
|
||||
v-else-if="field.fieldtype === 'Date'"
|
||||
icon-left=""
|
||||
v-model="data[field.name]"
|
||||
v-model="data[field.fieldname]"
|
||||
:formatter="(date) => getFormat(date, '', true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
@ -194,48 +199,48 @@
|
||||
<FormControl
|
||||
v-else-if="
|
||||
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
||||
field.type,
|
||||
field.fieldtype,
|
||||
)
|
||||
"
|
||||
type="textarea"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
v-model="data[field.fieldname]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Int'].includes(field.type)"
|
||||
v-else-if="['Int'].includes(field.fieldtype)"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
v-model="data[field.fieldname]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Percent'"
|
||||
v-else-if="field.fieldtype === 'Percent'"
|
||||
type="text"
|
||||
:value="getFormattedPercent(field.name, data)"
|
||||
:value="getFormattedPercent(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
@change="data[field.fieldname] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Float'"
|
||||
v-else-if="field.fieldtype === 'Float'"
|
||||
type="text"
|
||||
:value="getFormattedFloat(field.name, data)"
|
||||
:value="getFormattedFloat(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
@change="data[field.fieldname] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Currency'"
|
||||
v-else-if="field.fieldtype === 'Currency'"
|
||||
type="text"
|
||||
:value="getFormattedCurrency(field.name, data)"
|
||||
:value="getFormattedCurrency(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
@change="data[field.fieldname] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
v-model="data[field.fieldname]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
</div>
|
||||
@ -274,6 +279,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
|
||||
@ -291,43 +300,67 @@ const _tabs = computed(() => {
|
||||
tab.sections = tab.sections.map((section) => {
|
||||
section.columns = section.columns.map((column) => {
|
||||
column.fields = column.fields.map((field) => {
|
||||
if (field.type == 'Link' && field.options == 'User') {
|
||||
field.type = 'User'
|
||||
}
|
||||
let _field = {
|
||||
...field,
|
||||
display_via_depends_on: evaluateDependsOnValue(
|
||||
field.depends_on,
|
||||
props.data,
|
||||
),
|
||||
mandatory_via_depends_on: evaluateDependsOnValue(
|
||||
field.mandatory_depends_on,
|
||||
props.data,
|
||||
),
|
||||
}
|
||||
_field.visible = isFieldVisible(_field)
|
||||
return _field
|
||||
return parsedField(field)
|
||||
})
|
||||
return column
|
||||
})
|
||||
section.visible = section.columns.some((column) =>
|
||||
column.fields.some((field) => field.visible),
|
||||
)
|
||||
|
||||
// to handle special case
|
||||
if (section.hidden) {
|
||||
section.visible = false
|
||||
}
|
||||
return section
|
||||
return parsedSection(section)
|
||||
})
|
||||
return tab
|
||||
})
|
||||
})
|
||||
|
||||
function parsedField(field) {
|
||||
if (field.fieldtype == 'Select' && typeof field.options === 'string') {
|
||||
field.options = field.options.split('\n').map((option) => {
|
||||
return { label: option, value: option }
|
||||
})
|
||||
|
||||
if (field.options[0].value !== '') {
|
||||
field.options.unshift({ label: '', value: '' })
|
||||
}
|
||||
}
|
||||
|
||||
if (field.fieldtype === 'Link' && field.options === 'User') {
|
||||
field.options = field.options
|
||||
field.fieldtype = 'User'
|
||||
}
|
||||
|
||||
let _field = {
|
||||
...field,
|
||||
filters: field.link_filters && JSON.parse(field.link_filters),
|
||||
placeholder: field.placeholder || field.label,
|
||||
display_via_depends_on: evaluateDependsOnValue(
|
||||
field.depends_on,
|
||||
props.data,
|
||||
),
|
||||
mandatory_via_depends_on: evaluateDependsOnValue(
|
||||
field.mandatory_depends_on,
|
||||
props.data,
|
||||
),
|
||||
}
|
||||
|
||||
_field.visible = isFieldVisible(_field)
|
||||
return _field
|
||||
}
|
||||
|
||||
function parsedSection(section) {
|
||||
section.visible = section.columns.some((column) =>
|
||||
column.fields.some((field) => field.visible),
|
||||
)
|
||||
|
||||
// to handle special case
|
||||
if (section.hidden) {
|
||||
section.visible = false
|
||||
}
|
||||
return section
|
||||
}
|
||||
|
||||
function isFieldVisible(field) {
|
||||
if (props.preview) return true
|
||||
return (
|
||||
(field.type == 'Check' ||
|
||||
(field.read_only && props.data[field.name]) ||
|
||||
(field.fieldtype == 'Check' ||
|
||||
(field.read_only && props.data[field.fieldname]) ||
|
||||
!field.read_only) &&
|
||||
(!field.depends_on || field.display_via_depends_on) &&
|
||||
!field.hidden
|
||||
@ -344,7 +377,7 @@ const getPlaceholder = (field) => {
|
||||
if (field.placeholder) {
|
||||
return __(field.placeholder)
|
||||
}
|
||||
if (['Select', 'Link'].includes(field.type)) {
|
||||
if (['Select', 'Link'].includes(field.fieldtype)) {
|
||||
return __('Select {0}', [__(field.label)])
|
||||
} else {
|
||||
return __('Enter {0}', [__(field.label)])
|
||||
|
||||
@ -132,7 +132,7 @@
|
||||
<Draggable
|
||||
:list="column.fields"
|
||||
group="fields"
|
||||
item-key="name"
|
||||
item-key="fieldname"
|
||||
class="flex flex-col gap-1.5"
|
||||
handle=".cursor-grab"
|
||||
>
|
||||
@ -282,7 +282,7 @@ const fields = createResource({
|
||||
|
||||
return data.filter((field) => {
|
||||
return (
|
||||
!existingFields.find((f) => f.name === field.fieldname) &&
|
||||
!existingFields.find((f) => f.fieldname === field.fieldname) &&
|
||||
!restrictedFields.includes(field.fieldname)
|
||||
)
|
||||
})
|
||||
@ -305,23 +305,7 @@ function addTab() {
|
||||
|
||||
function addField(column, field) {
|
||||
if (!field) return
|
||||
if (field.fieldtype === 'Select') {
|
||||
field.options = field.options.split('\n')
|
||||
field.options = field.options.map((option) => {
|
||||
return { label: option, value: option }
|
||||
})
|
||||
if (field.options[0].value !== '') {
|
||||
field.options.unshift({ label: '', value: '' })
|
||||
}
|
||||
}
|
||||
let newFieldObj = {
|
||||
...field,
|
||||
name: field.fieldname,
|
||||
type: field.fieldtype,
|
||||
depends_on: '',
|
||||
mandatory_depends_on: '',
|
||||
}
|
||||
column.fields.push(newFieldObj)
|
||||
column.fields.push(field)
|
||||
}
|
||||
|
||||
function getTabOptions(tab) {
|
||||
|
||||
@ -123,11 +123,11 @@ const tabs = createResource({
|
||||
tab.sections.forEach((section) => {
|
||||
section.columns.forEach((column) => {
|
||||
column.fields.forEach((field) => {
|
||||
if (field.name == 'email_id') {
|
||||
if (field.fieldname == 'email_id') {
|
||||
field.read_only = false
|
||||
} else if (field.name == 'mobile_no') {
|
||||
} else if (field.fieldname == 'mobile_no') {
|
||||
field.read_only = false
|
||||
} else if (field.name == 'address') {
|
||||
} else if (field.fieldname == 'address') {
|
||||
field.create = (value, close) => {
|
||||
_contact.value.address = value
|
||||
emit('openAddressModal')
|
||||
@ -138,8 +138,8 @@ const tabs = createResource({
|
||||
emit('openAddressModal', address)
|
||||
show.value = false
|
||||
}
|
||||
} else if (field.type === 'Table') {
|
||||
_contact.value[field.name] = []
|
||||
} else if (field.fieldtype === 'Table') {
|
||||
_contact.value[field.fieldname] = []
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -36,7 +36,13 @@
|
||||
:tabs="tabs.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
|
||||
<FieldLayout
|
||||
v-else
|
||||
:tabs="tabs.data"
|
||||
:data="{}"
|
||||
:modal="true"
|
||||
:preview="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -66,7 +72,7 @@ const dirty = ref(false)
|
||||
const preview = ref(false)
|
||||
|
||||
function getParams() {
|
||||
return { doctype: _doctype.value, type: 'Data Fields', no_reactivity: 1 }
|
||||
return { doctype: _doctype.value, type: 'Data Fields' }
|
||||
}
|
||||
|
||||
const tabs = createResource({
|
||||
|
||||
@ -160,16 +160,14 @@ const tabs = createResource({
|
||||
hasContactSections.value = true
|
||||
}
|
||||
column.fields.forEach((field) => {
|
||||
if (field.name == 'status') {
|
||||
field.type = 'Select'
|
||||
if (field.fieldname == 'status') {
|
||||
field.fieldtype = 'Select'
|
||||
field.options = dealStatuses.value
|
||||
field.prefix = getDealStatus(deal.status).iconColorClass
|
||||
} else if (field.name == 'deal_owner') {
|
||||
field.type = 'User'
|
||||
}
|
||||
|
||||
if (field.type === 'Table') {
|
||||
deal[field.name] = []
|
||||
if (field.fieldtype === 'Table') {
|
||||
deal[field.fieldname] = []
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -73,16 +73,14 @@ const tabs = createResource({
|
||||
tab.sections.forEach((section) => {
|
||||
section.columns.forEach((column) => {
|
||||
column.fields.forEach((field) => {
|
||||
if (field.name == 'status') {
|
||||
field.type = 'Select'
|
||||
if (field.fieldname == 'status') {
|
||||
field.fieldtype = 'Select'
|
||||
field.options = leadStatuses.value
|
||||
field.prefix = getLeadStatus(lead.status).iconColorClass
|
||||
} else if (field.name == 'lead_owner') {
|
||||
field.type = 'User'
|
||||
}
|
||||
|
||||
if (field.type === 'Table') {
|
||||
lead[field.name] = []
|
||||
if (field.fieldtype === 'Table') {
|
||||
lead[field.fieldname] = []
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -121,7 +121,7 @@ const tabs = createResource({
|
||||
tab.sections.forEach((section) => {
|
||||
section.columns.forEach((column) => {
|
||||
column.fields.forEach((field) => {
|
||||
if (field.name == 'address') {
|
||||
if (field.fieldname == 'address') {
|
||||
field.create = (value, close) => {
|
||||
_organization.value.address = value
|
||||
emit('openAddressModal')
|
||||
@ -132,8 +132,8 @@ const tabs = createResource({
|
||||
emit('openAddressModal', address)
|
||||
show.value = false
|
||||
}
|
||||
} else if (field.type === 'Table') {
|
||||
_organization.value[field.name] = []
|
||||
} else if (field.fieldtype === 'Table') {
|
||||
_organization.value[field.fieldname] = []
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
:tabs="tabs.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" />
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" :preview="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -101,9 +101,7 @@ function saveChanges() {
|
||||
tab.sections.forEach((section) => {
|
||||
section.columns.forEach((column) => {
|
||||
if (!column.fields) return
|
||||
column.fields = column.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
column.fields = column.fields.map((field) => field.fieldname)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -126,7 +126,7 @@ function saveChanges() {
|
||||
section.columns.forEach((column) => {
|
||||
if (!column.fields) return
|
||||
column.fields = column.fields
|
||||
.map((field) => field.fieldname || field.name)
|
||||
.map((field) => field.fieldname)
|
||||
.filter(Boolean)
|
||||
})
|
||||
})
|
||||
|
||||
@ -67,9 +67,15 @@
|
||||
class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
|
||||
>
|
||||
<span>{{ __(field.label) }}</span>
|
||||
<span class="text-ink-red-3">{{
|
||||
field.reqd ? ' *' : ''
|
||||
}}</span>
|
||||
<span
|
||||
v-if="
|
||||
field.reqd ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
"
|
||||
class="text-ink-red-3"
|
||||
>*</span
|
||||
>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="flex items-center justify-between w-[65%]">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user