test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: use fieldname & fieldtype instead of name & type in fields layout

Browse Source
This commit is contained in:
Shariq Ansari 2025-01-02 20:39:02 +05:30
parent b4e4273810
commit 81c99fde16
12 changed files with 146 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
View File

@ -14,7 +14,7 @@ class CRMFieldsLayout(Document):
@frappe.whitelist() @frappe.whitelist()
def get_fields_layout(doctype: str, type: str, no_reactivity=False): def get_fields_layout(doctype: str, type: str):
tabs = [] tabs = []
layout = None 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 []: for field in column.get("fields") if column.get("fields") else []:
field = next((f for f in fields if f.fieldname == field), None) field = next((f for f in fields if f.fieldname == field), None)
if field: if field:
field = { field = field.as_dict()
"label": _(field.label), column["fields"][column.get("fields").index(field["fieldname"])] = field
"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
return tabs or [] return tabs or []
@ -134,11 +120,3 @@ def get_default_layout(doctype: str):
tabs[-1]["sections"][-1]["columns"][-1]["fields"].append(field.fieldname) tabs[-1]["sections"][-1]["columns"][-1]["fields"].append(field.fieldname)
return tabs 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

6
frontend/src/components/Controls/GridRowFieldsModal.vue
View File

@ -36,7 +36,7 @@
:tabs="tabs.data" :tabs="tabs.data"
:doctype="_doctype" :doctype="_doctype"
/> />
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" /> <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" :preview="true"/>
</div> </div>
</div> </div>
</template> </template>
@ -103,9 +103,7 @@ function saveChanges() {
tab.sections.forEach((section) => { tab.sections.forEach((section) => {
section.columns.forEach((column) => { section.columns.forEach((column) => {
if (!column.fields) return if (!column.fields) return
column.fields = column.fields.map( column.fields = column.fields.map((field) => field.fieldname)
(field) => field.fieldname || field.name,
)
}) })
}) })
}) })

139
frontend/src/components/FieldLayout.vue
View File

@ -51,43 +51,43 @@
> >
{{ column.label }} {{ column.label }}
</div> </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.visible" class="field">
<div <div
v-if="field.type != 'Check'" v-if="field.fieldtype != 'Check'"
class="mb-2 text-sm text-ink-gray-5" class="mb-2 text-sm text-ink-gray-5"
> >
{{ __(field.label) }} {{ __(field.label) }}
<span <span
class="text-ink-red-3"
v-if=" v-if="
field.mandatory || field.reqd ||
(field.mandatory_depends_on && (field.mandatory_depends_on &&
field.mandatory_via_depends_on) field.mandatory_via_depends_on)
" "
class="text-ink-red-3"
>*</span >*</span
> >
</div> </div>
<FormControl <FormControl
v-if="field.read_only && field.type !== 'Check'" v-if="field.read_only && field.fieldtype !== 'Check'"
type="text" type="text"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
v-model="data[field.name]" v-model="data[field.fieldname]"
:disabled="true" :disabled="true"
/> />
<Grid <Grid
v-else-if="field.type === 'Table'" v-else-if="field.fieldtype === 'Table'"
v-model="data[field.name]" v-model="data[field.fieldname]"
:doctype="field.options" :doctype="field.options"
:parentDoctype="doctype" :parentDoctype="doctype"
/> />
<FormControl <FormControl
v-else-if="field.type === 'Select'" v-else-if="field.fieldtype === 'Select'"
type="select" type="select"
class="form-control" class="form-control"
:class="field.prefix ? 'prefix' : ''" :class="field.prefix ? 'prefix' : ''"
:options="field.options" :options="field.options"
v-model="data[field.name]" v-model="data[field.fieldname]"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
> >
<template v-if="field.prefix" #prefix> <template v-if="field.prefix" #prefix>
@ -95,14 +95,16 @@
</template> </template>
</FormControl> </FormControl>
<div <div
v-else-if="field.type == 'Check'" v-else-if="field.fieldtype == 'Check'"
class="flex items-center gap-2" class="flex items-center gap-2"
> >
<FormControl <FormControl
class="form-control" class="form-control"
type="checkbox" type="checkbox"
v-model="data[field.name]" v-model="data[field.fieldname]"
@change="(e) => (data[field.name] = e.target.checked)" @change="
(e) => (data[field.fieldname] = e.target.checked)
"
:disabled="Boolean(field.read_only)" :disabled="Boolean(field.read_only)"
/> />
<label <label
@ -110,7 +112,7 @@
@click=" @click="
() => { () => {
if (!Boolean(field.read_only)) { if (!Boolean(field.read_only)) {
data[field.name] = !data[field.name] data[field.fieldname] = !data[field.fieldname]
} }
} }
" "
@ -121,21 +123,24 @@
> >
</label> </label>
</div> </div>
<div class="flex gap-1" v-else-if="field.type === 'Link'"> <div
class="flex gap-1"
v-else-if="field.fieldtype === 'Link'"
>
<Link <Link
class="form-control flex-1 truncate" class="form-control flex-1 truncate"
:value="data[field.name]" :value="data[field.fieldname]"
:doctype="field.options" :doctype="field.options"
:filters="field.filters" :filters="field.filters"
@change="(v) => (data[field.name] = v)" @change="(v) => (data[field.fieldname] = v)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
:onCreate="field.create" :onCreate="field.create"
/> />
<Button <Button
v-if="data[field.name] && field.edit" v-if="data[field.fieldname] && field.edit"
class="shrink-0" class="shrink-0"
:label="__('Edit')" :label="__('Edit')"
@click="field.edit(data[field.name])" @click="field.edit(data[field.fieldname])"
> >
<template #prefix> <template #prefix>
<EditIcon class="h-4 w-4" /> <EditIcon class="h-4 w-4" />
@ -144,19 +149,19 @@
</div> </div>
<Link <Link
v-else-if="field.type === 'User'" v-else-if="field.fieldtype === 'User'"
class="form-control" class="form-control"
:value="getUser(data[field.name]).full_name" :value="getUser(data[field.fieldname]).full_name"
:doctype="field.options" :doctype="field.options"
:filters="field.filters" :filters="field.filters"
@change="(v) => (data[field.name] = v)" @change="(v) => (data[field.fieldname] = v)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
:hideMe="true" :hideMe="true"
> >
<template #prefix> <template #prefix>
<UserAvatar <UserAvatar
class="mr-2" class="mr-2"
:user="data[field.name]" :user="data[field.fieldname]"
size="sm" size="sm"
/> />
</template> </template>
@ -176,17 +181,17 @@
</template> </template>
</Link> </Link>
<DateTimePicker <DateTimePicker
v-else-if="field.type === 'Datetime'" v-else-if="field.fieldtype === 'Datetime'"
v-model="data[field.name]" v-model="data[field.fieldname]"
icon-left="" icon-left=""
:formatter="(date) => getFormat(date, '', true, true)" :formatter="(date) => getFormat(date, '', true, true)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
input-class="border-none" input-class="border-none"
/> />
<DatePicker <DatePicker
v-else-if="field.type === 'Date'" v-else-if="field.fieldtype === 'Date'"
icon-left="" icon-left=""
v-model="data[field.name]" v-model="data[field.fieldname]"
:formatter="(date) => getFormat(date, '', true)" :formatter="(date) => getFormat(date, '', true)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
input-class="border-none" input-class="border-none"
@ -194,48 +199,48 @@
<FormControl <FormControl
v-else-if=" v-else-if="
['Small Text', 'Text', 'Long Text', 'Code'].includes( ['Small Text', 'Text', 'Long Text', 'Code'].includes(
field.type, field.fieldtype,
) )
" "
type="textarea" type="textarea"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
v-model="data[field.name]" v-model="data[field.fieldname]"
/> />
<FormControl <FormControl
v-else-if="['Int'].includes(field.type)" v-else-if="['Int'].includes(field.fieldtype)"
type="number" type="number"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
v-model="data[field.name]" v-model="data[field.fieldname]"
/> />
<FormControl <FormControl
v-else-if="field.type === 'Percent'" v-else-if="field.fieldtype === 'Percent'"
type="text" type="text"
:value="getFormattedPercent(field.name, data)" :value="getFormattedPercent(field.fieldname, data)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
:disabled="Boolean(field.read_only)" :disabled="Boolean(field.read_only)"
@change="data[field.name] = flt($event.target.value)" @change="data[field.fieldname] = flt($event.target.value)"
/> />
<FormControl <FormControl
v-else-if="field.type === 'Float'" v-else-if="field.fieldtype === 'Float'"
type="text" type="text"
:value="getFormattedFloat(field.name, data)" :value="getFormattedFloat(field.fieldname, data)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
:disabled="Boolean(field.read_only)" :disabled="Boolean(field.read_only)"
@change="data[field.name] = flt($event.target.value)" @change="data[field.fieldname] = flt($event.target.value)"
/> />
<FormControl <FormControl
v-else-if="field.type === 'Currency'" v-else-if="field.fieldtype === 'Currency'"
type="text" type="text"
:value="getFormattedCurrency(field.name, data)" :value="getFormattedCurrency(field.fieldname, data)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
:disabled="Boolean(field.read_only)" :disabled="Boolean(field.read_only)"
@change="data[field.name] = flt($event.target.value)" @change="data[field.fieldname] = flt($event.target.value)"
/> />
<FormControl <FormControl
v-else v-else
type="text" type="text"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
v-model="data[field.name]" v-model="data[field.fieldname]"
:disabled="Boolean(field.read_only)" :disabled="Boolean(field.read_only)"
/> />
</div> </div>
@ -274,6 +279,10 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
preview: {
type: Boolean,
default: false,
},
}) })
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } = const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
@ -291,11 +300,36 @@ const _tabs = computed(() => {
tab.sections = tab.sections.map((section) => { tab.sections = tab.sections.map((section) => {
section.columns = section.columns.map((column) => { section.columns = section.columns.map((column) => {
column.fields = column.fields.map((field) => { column.fields = column.fields.map((field) => {
if (field.type == 'Link' && field.options == 'User') { return parsedField(field)
field.type = 'User' })
return column
})
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 = { let _field = {
...field, ...field,
filters: field.link_filters && JSON.parse(field.link_filters),
placeholder: field.placeholder || field.label,
display_via_depends_on: evaluateDependsOnValue( display_via_depends_on: evaluateDependsOnValue(
field.depends_on, field.depends_on,
props.data, props.data,
@ -305,11 +339,12 @@ const _tabs = computed(() => {
props.data, props.data,
), ),
} }
_field.visible = isFieldVisible(_field) _field.visible = isFieldVisible(_field)
return _field return _field
}) }
return column
}) function parsedSection(section) {
section.visible = section.columns.some((column) => section.visible = section.columns.some((column) =>
column.fields.some((field) => field.visible), column.fields.some((field) => field.visible),
) )
@ -319,15 +354,13 @@ const _tabs = computed(() => {
section.visible = false section.visible = false
} }
return section return section
}) }
return tab
})
})
function isFieldVisible(field) { function isFieldVisible(field) {
if (props.preview) return true
return ( return (
(field.type == 'Check' || (field.fieldtype == 'Check' ||
(field.read_only && props.data[field.name]) || (field.read_only && props.data[field.fieldname]) ||
!field.read_only) && !field.read_only) &&
(!field.depends_on || field.display_via_depends_on) && (!field.depends_on || field.display_via_depends_on) &&
!field.hidden !field.hidden
@ -344,7 +377,7 @@ const getPlaceholder = (field) => {
if (field.placeholder) { if (field.placeholder) {
return __(field.placeholder) return __(field.placeholder)
} }
if (['Select', 'Link'].includes(field.type)) { if (['Select', 'Link'].includes(field.fieldtype)) {
return __('Select {0}', [__(field.label)]) return __('Select {0}', [__(field.label)])
} else { } else {
return __('Enter {0}', [__(field.label)]) return __('Enter {0}', [__(field.label)])

22
frontend/src/components/FieldLayoutEditor.vue
View File

@ -132,7 +132,7 @@
<Draggable <Draggable
:list="column.fields" :list="column.fields"
group="fields" group="fields"
item-key="name" item-key="fieldname"
class="flex flex-col gap-1.5" class="flex flex-col gap-1.5"
handle=".cursor-grab" handle=".cursor-grab"
> >
@ -282,7 +282,7 @@ const fields = createResource({
return data.filter((field) => { return data.filter((field) => {
return ( return (
!existingFields.find((f) => f.name === field.fieldname) && !existingFields.find((f) => f.fieldname === field.fieldname) &&
!restrictedFields.includes(field.fieldname) !restrictedFields.includes(field.fieldname)
) )
}) })
@ -305,23 +305,7 @@ function addTab() {
function addField(column, field) { function addField(column, field) {
if (!field) return if (!field) return
if (field.fieldtype === 'Select') { column.fields.push(field)
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)
} }
function getTabOptions(tab) { function getTabOptions(tab) {

10
frontend/src/components/Modals/ContactModal.vue
View File

@ -123,11 +123,11 @@ const tabs = createResource({
tab.sections.forEach((section) => { tab.sections.forEach((section) => {
section.columns.forEach((column) => { section.columns.forEach((column) => {
column.fields.forEach((field) => { column.fields.forEach((field) => {
if (field.name == 'email_id') { if (field.fieldname == 'email_id') {
field.read_only = false field.read_only = false
} else if (field.name == 'mobile_no') { } else if (field.fieldname == 'mobile_no') {
field.read_only = false field.read_only = false
} else if (field.name == 'address') { } else if (field.fieldname == 'address') {
field.create = (value, close) => { field.create = (value, close) => {
_contact.value.address = value _contact.value.address = value
emit('openAddressModal') emit('openAddressModal')
@ -138,8 +138,8 @@ const tabs = createResource({
emit('openAddressModal', address) emit('openAddressModal', address)
show.value = false show.value = false
} }
} else if (field.type === 'Table') { } else if (field.fieldtype === 'Table') {
_contact.value[field.name] = [] _contact.value[field.fieldname] = []
} }
}) })
}) })

10
frontend/src/components/Modals/DataFieldsModal.vue
View File

@ -36,7 +36,13 @@
:tabs="tabs.data" :tabs="tabs.data"
:doctype="_doctype" :doctype="_doctype"
/> />
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" /> <FieldLayout
v-else
:tabs="tabs.data"
:data="{}"
:modal="true"
:preview="true"
/>
</div> </div>
</div> </div>
</template> </template>
@ -66,7 +72,7 @@ const dirty = ref(false)
const preview = ref(false) const preview = ref(false)
function getParams() { function getParams() {
return { doctype: _doctype.value, type: 'Data Fields', no_reactivity: 1 } return { doctype: _doctype.value, type: 'Data Fields' }
} }
const tabs = createResource({ const tabs = createResource({

10
frontend/src/components/Modals/DealModal.vue
View File

@ -160,16 +160,14 @@ const tabs = createResource({
hasContactSections.value = true hasContactSections.value = true
} }
column.fields.forEach((field) => { column.fields.forEach((field) => {
if (field.name == 'status') { if (field.fieldname == 'status') {
field.type = 'Select' field.fieldtype = 'Select'
field.options = dealStatuses.value field.options = dealStatuses.value
field.prefix = getDealStatus(deal.status).iconColorClass field.prefix = getDealStatus(deal.status).iconColorClass
} else if (field.name == 'deal_owner') {
field.type = 'User'
} }
if (field.type === 'Table') { if (field.fieldtype === 'Table') {
deal[field.name] = [] deal[field.fieldname] = []
} }
}) })
}) })

10
frontend/src/components/Modals/LeadModal.vue
View File

@ -73,16 +73,14 @@ const tabs = createResource({
tab.sections.forEach((section) => { tab.sections.forEach((section) => {
section.columns.forEach((column) => { section.columns.forEach((column) => {
column.fields.forEach((field) => { column.fields.forEach((field) => {
if (field.name == 'status') { if (field.fieldname == 'status') {
field.type = 'Select' field.fieldtype = 'Select'
field.options = leadStatuses.value field.options = leadStatuses.value
field.prefix = getLeadStatus(lead.status).iconColorClass field.prefix = getLeadStatus(lead.status).iconColorClass
} else if (field.name == 'lead_owner') {
field.type = 'User'
} }
if (field.type === 'Table') { if (field.fieldtype === 'Table') {
lead[field.name] = [] lead[field.fieldname] = []
} }
}) })
}) })

6
frontend/src/components/Modals/OrganizationModal.vue
View File

@ -121,7 +121,7 @@ const tabs = createResource({
tab.sections.forEach((section) => { tab.sections.forEach((section) => {
section.columns.forEach((column) => { section.columns.forEach((column) => {
column.fields.forEach((field) => { column.fields.forEach((field) => {
if (field.name == 'address') { if (field.fieldname == 'address') {
field.create = (value, close) => { field.create = (value, close) => {
_organization.value.address = value _organization.value.address = value
emit('openAddressModal') emit('openAddressModal')
@ -132,8 +132,8 @@ const tabs = createResource({
emit('openAddressModal', address) emit('openAddressModal', address)
show.value = false show.value = false
} }
} else if (field.type === 'Table') { } else if (field.fieldtype === 'Table') {
_organization.value[field.name] = [] _organization.value[field.fieldname] = []
} }
}) })
}) })

6
frontend/src/components/Modals/QuickEntryModal.vue
View File

@ -36,7 +36,7 @@
:tabs="tabs.data" :tabs="tabs.data"
:doctype="_doctype" :doctype="_doctype"
/> />
<FieldLayout v-else :tabs="tabs.data" :data="{}" /> <FieldLayout v-else :tabs="tabs.data" :data="{}" :preview="true" />
</div> </div>
</div> </div>
</template> </template>
@ -101,9 +101,7 @@ function saveChanges() {
tab.sections.forEach((section) => { tab.sections.forEach((section) => {
section.columns.forEach((column) => { section.columns.forEach((column) => {
if (!column.fields) return if (!column.fields) return
column.fields = column.fields.map( column.fields = column.fields.map((field) => field.fieldname)
(field) => field.fieldname || field.name,
)
}) })
}) })
}) })

2
frontend/src/components/Modals/SidePanelModal.vue
View File

@ -126,7 +126,7 @@ function saveChanges() {
section.columns.forEach((column) => { section.columns.forEach((column) => {
if (!column.fields) return if (!column.fields) return
column.fields = column.fields column.fields = column.fields
.map((field) => field.fieldname || field.name) .map((field) => field.fieldname)
.filter(Boolean) .filter(Boolean)
}) })
}) })

12
frontend/src/components/SidePanelLayout.vue
View File

@ -67,9 +67,15 @@
class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5" class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
> >
<span>{{ __(field.label) }}</span> <span>{{ __(field.label) }}</span>
<span class="text-ink-red-3">{{ <span
field.reqd ? ' *' : '' v-if="
}}</span> field.reqd ||
(field.mandatory_depends_on &&
field.mandatory_via_depends_on)
"
class="text-ink-red-3"
>*</span
>
</div> </div>
</Tooltip> </Tooltip>
<div class="flex items-center justify-between w-[65%]"> <div class="flex items-center justify-between w-[65%]">