fix: show contact details with option to switch to edit mode
This commit is contained in:
Shariq Ansari
parent
b5202ad477
commit
fe6aaef206
@ -31,6 +31,9 @@ def get_contacts():
|
||||
"first_name",
|
||||
"last_name",
|
||||
"full_name",
|
||||
"gender",
|
||||
"address",
|
||||
"designation",
|
||||
"image",
|
||||
"email_id",
|
||||
"mobile_no",
|
||||
|
||||
@ -1,73 +1,133 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: editMode ? 'Edit contact' : 'New contact',
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: editMode ? 'Update' : 'Create',
|
||||
variant: 'solid',
|
||||
disabled: !dirty,
|
||||
onClick: ({ close }) =>
|
||||
editMode ? updateContact(close) : callInsertDoc(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<Link
|
||||
variant="outline"
|
||||
size="md"
|
||||
label="Salutation"
|
||||
v-model="_contact.salutation"
|
||||
doctype="Salutation"
|
||||
placeholder="Mr./Mrs./Ms..."
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="First Name"
|
||||
v-model="_contact.first_name"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="Last Name"
|
||||
v-model="_contact.last_name"
|
||||
/>
|
||||
<Dialog v-model="show" :options="dialogOptions">
|
||||
<template #body>
|
||||
<div class="bg-white px-4 pb-6 pt-5 sm:px-6">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold leading-6 text-gray-900">
|
||||
{{ dialogOptions.title || 'Untitled' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
v-if="detailMode"
|
||||
variant="ghost"
|
||||
class="w-7"
|
||||
@click="detailMode = false"
|
||||
>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" class="w-7" @click="show = false">
|
||||
<FeatherIcon name="x" class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
variant="outline"
|
||||
size="md"
|
||||
label="Organization"
|
||||
v-model="_contact.company_name"
|
||||
doctype="CRM Organization"
|
||||
placeholder="Select organization"
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="Mobile no"
|
||||
v-model="_contact.mobile_no"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="email"
|
||||
label="Email"
|
||||
v-model="_contact.email_id"
|
||||
/>
|
||||
<div>
|
||||
<div v-if="detailMode" class="flex flex-col gap-3.5">
|
||||
<div
|
||||
class="flex h-7 items-center gap-2"
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
>
|
||||
<component class="mx-1" :is="field.icon" />
|
||||
<div>{{ field.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex flex-col gap-4">
|
||||
<Link
|
||||
variant="outline"
|
||||
size="md"
|
||||
label="Salutation"
|
||||
v-model="_contact.salutation"
|
||||
doctype="Salutation"
|
||||
placeholder="Mr./Mrs./Ms..."
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="First Name"
|
||||
v-model="_contact.first_name"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="Last Name"
|
||||
v-model="_contact.last_name"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
variant="outline"
|
||||
size="md"
|
||||
label="Organization"
|
||||
v-model="_contact.company_name"
|
||||
doctype="CRM Organization"
|
||||
placeholder="Select organization"
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<Link
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
label="Gender"
|
||||
v-model="_contact.gender"
|
||||
doctype="Gender"
|
||||
placeholder="Select gender"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="Designation"
|
||||
v-model="_contact.designation"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="text"
|
||||
label="Mobile no"
|
||||
v-model="_contact.mobile_no"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
variant="outline"
|
||||
size="md"
|
||||
type="email"
|
||||
label="Email"
|
||||
v-model="_contact.email_id"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
variant="outline"
|
||||
size="md"
|
||||
label="Address"
|
||||
v-model="_contact.address"
|
||||
doctype="Address"
|
||||
placeholder="Select address"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!detailMode" class="px-4 pb-7 pt-4 sm:px-6">
|
||||
<div class="space-y-2">
|
||||
<Button
|
||||
class="w-full"
|
||||
v-for="action in dialogOptions.actions"
|
||||
:key="action.label"
|
||||
v-bind="action"
|
||||
>
|
||||
{{ action.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -75,8 +135,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { FormControl, Dialog, call } from 'frappe-ui'
|
||||
import { FormControl, Dialog, call, FeatherIcon } from 'frappe-ui'
|
||||
import { ref, defineModel, nextTick, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
@ -89,6 +151,7 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: {
|
||||
redirect: true,
|
||||
detailMode: false,
|
||||
afterInsert: () => {},
|
||||
},
|
||||
},
|
||||
@ -98,18 +161,21 @@ const router = useRouter()
|
||||
const show = defineModel()
|
||||
const contacts = defineModel('reloadContacts')
|
||||
|
||||
const detailMode = ref(false)
|
||||
const editMode = ref(false)
|
||||
let _contact = ref({})
|
||||
|
||||
async function updateContact(close) {
|
||||
async function updateContact() {
|
||||
if (!dirty.value) {
|
||||
close()
|
||||
show.value = false
|
||||
return
|
||||
}
|
||||
|
||||
let values = { ..._contact.value }
|
||||
|
||||
let name = await callSetValue(values)
|
||||
|
||||
handleContactUpdate({ name }, close)
|
||||
handleContactUpdate({ name })
|
||||
}
|
||||
|
||||
async function callSetValue(values) {
|
||||
@ -121,7 +187,7 @@ async function callSetValue(values) {
|
||||
return d.name
|
||||
}
|
||||
|
||||
async function callInsertDoc(close) {
|
||||
async function callInsertDoc() {
|
||||
if (_contact.value.email_id) {
|
||||
_contact.value.email_ids = [{ email_id: _contact.value.email_id }]
|
||||
delete _contact.value.email_id
|
||||
@ -138,10 +204,10 @@ async function callInsertDoc(close) {
|
||||
..._contact.value,
|
||||
},
|
||||
})
|
||||
doc.name && handleContactUpdate(doc, close)
|
||||
doc.name && handleContactUpdate(doc)
|
||||
}
|
||||
|
||||
function handleContactUpdate(doc, close) {
|
||||
function handleContactUpdate(doc) {
|
||||
contacts.value?.reload()
|
||||
if (doc.name && props.options.redirect) {
|
||||
router.push({
|
||||
@ -149,10 +215,71 @@ function handleContactUpdate(doc, close) {
|
||||
params: { contactId: doc.name },
|
||||
})
|
||||
}
|
||||
close && close()
|
||||
show.value = false
|
||||
props.options.afterInsert && props.options.afterInsert(doc)
|
||||
}
|
||||
|
||||
const dialogOptions = computed(() => {
|
||||
let title = detailMode.value
|
||||
? _contact.value.full_name
|
||||
: editMode.value
|
||||
? 'Edit contact'
|
||||
: 'Create contact'
|
||||
let size = detailMode.value ? '' : 'xl'
|
||||
let actions = detailMode.value
|
||||
? []
|
||||
: [
|
||||
{
|
||||
label: editMode.value ? 'Update' : 'Create',
|
||||
variant: 'solid',
|
||||
disabled: !dirty.value,
|
||||
onClick: () => (editMode.value ? updateContact() : callInsertDoc()),
|
||||
},
|
||||
]
|
||||
|
||||
return { title, size, actions }
|
||||
})
|
||||
|
||||
const fields = computed(() => {
|
||||
return [
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'full_name',
|
||||
value: _contact.value.full_name,
|
||||
},
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'gender',
|
||||
value: _contact.value.gender,
|
||||
},
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'email_id',
|
||||
value: _contact.value.email_id,
|
||||
},
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'mobile_no',
|
||||
value: _contact.value.mobile_no,
|
||||
},
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'company_name',
|
||||
value: _contact.value.company_name,
|
||||
},
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'designation',
|
||||
value: _contact.value.designation,
|
||||
},
|
||||
{
|
||||
icon: ContactsIcon,
|
||||
name: 'address',
|
||||
value: _contact.value.address,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const dirty = computed(() => {
|
||||
return JSON.stringify(props.contact) !== JSON.stringify(_contact.value)
|
||||
})
|
||||
@ -161,6 +288,7 @@ watch(
|
||||
() => show.value,
|
||||
(value) => {
|
||||
if (!value) return
|
||||
detailMode.value = props.options.detailMode
|
||||
editMode.value = false
|
||||
nextTick(() => {
|
||||
_contact.value = { ...props.contact }
|
||||
|
||||
@ -116,10 +116,25 @@
|
||||
variant="ghost"
|
||||
label="More"
|
||||
class="-ml-1 cursor-pointer hover:text-gray-900"
|
||||
@click="
|
||||
() => {
|
||||
detailMode = true
|
||||
showContactModal = true
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex gap-1.5">
|
||||
<Button label="Edit" size="sm" @click="">
|
||||
<Button
|
||||
label="Edit"
|
||||
size="sm"
|
||||
@click="
|
||||
() => {
|
||||
detailMode = false
|
||||
showContactModal = true
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</template>
|
||||
@ -186,6 +201,12 @@
|
||||
</template>
|
||||
</Tabs>
|
||||
</div>
|
||||
<ContactModal
|
||||
v-model="showContactModal"
|
||||
v-model:reloadContacts="contacts"
|
||||
:contact="contact"
|
||||
:options="{ detailMode }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -211,6 +232,7 @@ import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
||||
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
||||
import LeadsListView from '@/components/ListViews/LeadsListView.vue'
|
||||
import DealsListView from '@/components/ListViews/DealsListView.vue'
|
||||
import ContactModal from '@/components/Modals/ContactModal.vue'
|
||||
import {
|
||||
dateFormat,
|
||||
dateTooltipFormat,
|
||||
@ -240,6 +262,9 @@ const router = useRouter()
|
||||
|
||||
const contact = computed(() => getContactByName(props.contactId))
|
||||
|
||||
const showContactModal = ref(false)
|
||||
const detailMode = ref(false)
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let items = [{ label: 'Contacts', route: { name: 'Contacts' } }]
|
||||
items.push({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user