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

fix: use document to load doc data in sidepanel layout

Browse Source 
(cherry picked from commit a30503ca5fbebb87c05cdf5b794eca0c9ce3491e)
This commit is contained in:
Shariq Ansari 2025-05-01 18:01:18 +05:30 committed by Mergify
parent 1c0e17109e
commit d76ca6c588
3 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,10 @@
> >
</div> </div>
</Tooltip> </Tooltip>
<div class="flex items-center justify-between w-[65%]"> <div
v-if="!document.get.loading"
class="flex items-center justify-between w-[65%]"
>
<div <div
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base" class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
> >
@ -67,21 +70,21 @@
class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5" class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
> >
<Tooltip :text="__(field.tooltip)"> <Tooltip :text="__(field.tooltip)">
<div>{{ data[field.fieldname] }}</div> <div>{{ document.doc[field.fieldname] }}</div>
</Tooltip> </Tooltip>
</div> </div>
<div v-else-if="field.fieldtype === 'Dropdown'"> <div v-else-if="field.fieldtype === 'Dropdown'">
<NestedPopover> <NestedPopover>
<template #target="{ open }"> <template #target="{ open }">
<Button <Button
:label="data[field.fieldname]" :label="document.doc[field.fieldname]"
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3" class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
> >
<div <div
v-if="data[field.fieldname]" v-if="document.doc[field.fieldname]"
class="truncate" class="truncate"
> >
{{ data[field.fieldname] }} {{ document.doc[field.fieldname] }}
</div> </div>
<div <div
v-else v-else
@ -138,7 +141,7 @@
v-else-if="field.fieldtype == 'Check'" v-else-if="field.fieldtype == 'Check'"
class="form-control" class="form-control"
type="checkbox" type="checkbox"
v-model="data[field.fieldname]" v-model="document.doc[field.fieldname]"
@change.stop=" @change.stop="
emit( emit(
'update', 'update',
@ -159,7 +162,7 @@
" "
class="form-control" class="form-control"
type="textarea" type="textarea"
:value="data[field.fieldname]" :value="document.doc[field.fieldname]"
:placeholder="field.placeholder" :placeholder="field.placeholder"
:debounce="500" :debounce="500"
@change.stop=" @change.stop="
@ -170,7 +173,7 @@
v-else-if="field.fieldtype === 'Select'" v-else-if="field.fieldtype === 'Select'"
class="form-control cursor-pointer [&_select]:cursor-pointer truncate" class="form-control cursor-pointer [&_select]:cursor-pointer truncate"
type="select" type="select"
v-model="data[field.fieldname]" v-model="document.doc[field.fieldname]"
:options="field.options" :options="field.options"
:placeholder="field.placeholder" :placeholder="field.placeholder"
@change.stop=" @change.stop="
@ -181,21 +184,22 @@
v-else-if="field.fieldtype === 'User'" v-else-if="field.fieldtype === 'User'"
class="form-control" class="form-control"
:value=" :value="
data[field.fieldname] && document.doc[field.fieldname] &&
getUser(data[field.fieldname]).full_name getUser(document.doc[field.fieldname]).full_name
" "
doctype="User" doctype="User"
:filters="field.filters" :filters="field.filters"
@change=" @change="(v) => emit('update', field.fieldname, v)"
(data) => emit('update', field.fieldname, data)
"
:placeholder="'Select' + ' ' + field.label + '...'" :placeholder="'Select' + ' ' + field.label + '...'"
:hideMe="true" :hideMe="true"
> >
<template v-if="data[field.fieldname]" #prefix> <template
v-if="document.doc[field.fieldname]"
#prefix
>
<UserAvatar <UserAvatar
class="mr-1.5" class="mr-1.5"
:user="data[field.fieldname]" :user="document.doc[field.fieldname]"
size="sm" size="sm"
/> />
</template> </template>
@ -219,17 +223,15 @@
['Link', 'Dynamic Link'].includes(field.fieldtype) ['Link', 'Dynamic Link'].includes(field.fieldtype)
" "
class="form-control select-text" class="form-control select-text"
:value="data[field.fieldname]" :value="document.doc[field.fieldname]"
:doctype=" :doctype="
field.fieldtype == 'Link' field.fieldtype == 'Link'
? field.options ? field.options
: data[field.options] : document.doc[field.options]
" "
:filters="field.filters" :filters="field.filters"
:placeholder="field.placeholder" :placeholder="field.placeholder"
@change=" @change="(v) => emit('update', field.fieldname, v)"
(data) => emit('update', field.fieldname, data)
"
:onCreate="field.create" :onCreate="field.create"
/> />
<div <div
@ -238,15 +240,13 @@
> >
<DateTimePicker <DateTimePicker
icon-left="" icon-left=""
:value="data[field.fieldname]" :value="document.doc[field.fieldname]"
:formatter=" :formatter="
(date) => getFormat(date, '', true, true) (date) => getFormat(date, '', true, true)
" "
:placeholder="field.placeholder" :placeholder="field.placeholder"
placement="left-start" placement="left-start"
@change=" @change="(v) => emit('update', field.fieldname, v)"
(data) => emit('update', field.fieldname, data)
"
/> />
</div> </div>
<div <div
@ -255,20 +255,20 @@
> >
<DatePicker <DatePicker
icon-left="" icon-left=""
:value="data[field.fieldname]" :value="document.doc[field.fieldname]"
:formatter="(date) => getFormat(date, '', true)" :formatter="(date) => getFormat(date, '', true)"
:placeholder="field.placeholder" :placeholder="field.placeholder"
placement="left-start" placement="left-start"
@change=" @change="(v) => emit('update', field.fieldname, v)"
(data) => emit('update', field.fieldname, data)
"
/> />
</div> </div>
<FormControl <FormControl
v-else-if="field.fieldtype === 'Percent'" v-else-if="field.fieldtype === 'Percent'"
class="form-control" class="form-control"
type="text" type="text"
:value="getFormattedPercent(field.fieldname, data)" :value="
getFormattedPercent(field.fieldname, document.doc)
"
:placeholder="field.placeholder" :placeholder="field.placeholder"
:debounce="500" :debounce="500"
@change.stop=" @change.stop="
@ -283,7 +283,7 @@
v-else-if="field.fieldtype === 'Int'" v-else-if="field.fieldtype === 'Int'"
class="form-control" class="form-control"
type="number" type="number"
v-model="data[field.fieldname]" v-model="document.doc[field.fieldname]"
:placeholder="field.placeholder" :placeholder="field.placeholder"
:debounce="500" :debounce="500"
@change.stop=" @change.stop="
@ -294,7 +294,9 @@
v-else-if="field.fieldtype === 'Float'" v-else-if="field.fieldtype === 'Float'"
class="form-control" class="form-control"
type="text" type="text"
:value="getFormattedFloat(field.fieldname, data)" :value="
getFormattedFloat(field.fieldname, document.doc)
"
:placeholder="field.placeholder" :placeholder="field.placeholder"
:debounce="500" :debounce="500"
@change.stop=" @change.stop="
@ -309,7 +311,9 @@
v-else-if="field.fieldtype === 'Currency'" v-else-if="field.fieldtype === 'Currency'"
class="form-control" class="form-control"
type="text" type="text"
:value="getFormattedCurrency(field.fieldname, data)" :value="
getFormattedCurrency(field.fieldname, document.doc)
"
:placeholder="field.placeholder" :placeholder="field.placeholder"
:debounce="500" :debounce="500"
@change.stop=" @change.stop="
@ -324,7 +328,7 @@
v-else v-else
class="form-control" class="form-control"
type="text" type="text"
:value="data[field.fieldname]" :value="document.doc[field.fieldname]"
:placeholder="field.placeholder" :placeholder="field.placeholder"
:debounce="500" :debounce="500"
@change.stop=" @change.stop="
@ -337,19 +341,23 @@
v-if=" v-if="
field.fieldtype === 'Link' && field.fieldtype === 'Link' &&
field.link && field.link &&
data[field.fieldname] document.doc[field.fieldname]
" "
class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8" class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
@click.stop="field.link(data[field.fieldname])" @click.stop="
field.link(document.doc[field.fieldname])
"
/> />
<EditIcon <EditIcon
v-if=" v-if="
field.fieldtype === 'Link' && field.fieldtype === 'Link' &&
field.edit && field.edit &&
data[field.fieldname] document.doc[field.fieldname]
" "
class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8" class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
@click.stop="field.edit(data[field.fieldname])" @click.stop="
field.edit(document.doc[field.fieldname])
"
/> />
</div> </div>
</div> </div>
@ -386,6 +394,7 @@ import { isMobileView } from '@/composables/settings'
import { getFormat, evaluateDependsOnValue } from '@/utils' import { getFormat, evaluateDependsOnValue } from '@/utils'
import { flt } from '@/utils/numberFormat.js' import { flt } from '@/utils/numberFormat.js'
import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui' import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
import { useDocument } from '@/data/document'
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
const props = defineProps({ const props = defineProps({
@ -395,6 +404,11 @@ const props = defineProps({
doctype: { doctype: {
type: String, type: String,
default: 'CRM Lead', default: 'CRM Lead',
required: true,
},
docname: {
type: String,
required: true,
}, },
preview: { preview: {
type: Boolean, type: Boolean,
@ -407,13 +421,15 @@ const props = defineProps({
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } = const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
getMeta(props.doctype) getMeta(props.doctype)
const { isManager, getUser } = usersStore() const { isManager, getUser } = usersStore()
const emit = defineEmits(['update', 'reload']) const emit = defineEmits(['update', 'reload'])
const data = defineModel()
const showSidePanelModal = ref(false) const showSidePanelModal = ref(false)
const { document } = useDocument(props.doctype, props.docname)
const _sections = computed(() => { const _sections = computed(() => {
if (!props.sections?.length) return [] if (!props.sections?.length) return []
let editButtonAdded = false let editButtonAdded = false
@ -453,11 +469,11 @@ function parsedField(field) {
placeholder: field.placeholder || field.label, placeholder: field.placeholder || field.label,
display_via_depends_on: evaluateDependsOnValue( display_via_depends_on: evaluateDependsOnValue(
field.depends_on, field.depends_on,
data.value, document.doc,
), ),
mandatory_via_depends_on: evaluateDependsOnValue( mandatory_via_depends_on: evaluateDependsOnValue(
field.mandatory_depends_on, field.mandatory_depends_on,
data.value, document.doc,
), ),
} }
@ -485,7 +501,7 @@ function isFieldVisible(field) {
if (props.preview) return true if (props.preview) return true
return ( return (
(field.fieldtype == 'Check' || (field.fieldtype == 'Check' ||
(field.read_only && data.value[field.fieldname]) || (field.read_only && document.doc?.[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

2
frontend/src/pages/Deal.vue
View File

@ -129,10 +129,10 @@
class="flex flex-1 flex-col justify-between overflow-hidden" class="flex flex-1 flex-col justify-between overflow-hidden"
> >
<SidePanelLayout <SidePanelLayout
v-model="deal.data"
:sections="sections.data" :sections="sections.data"
:addContact="addContact" :addContact="addContact"
doctype="CRM Deal" doctype="CRM Deal"
:docname="deal.data.name"
@update="updateField" @update="updateField"
@reload="sections.reload" @reload="sections.reload"
> >

2
frontend/src/pages/Lead.vue
View File

@ -182,9 +182,9 @@
class="flex flex-1 flex-col justify-between overflow-hidden" class="flex flex-1 flex-col justify-between overflow-hidden"
> >
<SidePanelLayout <SidePanelLayout
v-model="lead.data"
:sections="sections.data" :sections="sections.data"
doctype="CRM Lead" doctype="CRM Lead"
:docname="lead.data.name"
@update="updateField" @update="updateField"
@reload="sections.reload" @reload="sections.reload"
/> />