fix: show contact details with option to switch to edit mode

crm/api/session.py

@@ -31,6 +31,9 @@ def get_contacts():
 			"first_name",
 			"last_name",
 			"full_name",
+			"gender",
+			"address",
+			"designation",
 			"image",
 			"email_id",
 			"mobile_no",

frontend/src/components/Modals/ContactModal.vue

@@ -1,73 +1,133 @@
 <template>
-  <Dialog
+  <Dialog v-model="show" :options="dialogOptions">
-    v-model="show"
+    <template #body>
-    :options="{
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
-      title: editMode ? 'Edit contact' : 'New contact',
+        <div class="mb-5 flex items-center justify-between">
-      size: 'xl',
+          <div>
-      actions: [
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-        {
+              {{ dialogOptions.title || 'Untitled' }}
-          label: editMode ? 'Update' : 'Create',
+            </h3>
-          variant: 'solid',
+          </div>
-          disabled: !dirty,
+          <div class="flex items-center gap-1">
-          onClick: ({ close }) =>
+            <Button
-            editMode ? updateContact(close) : callInsertDoc(close),
+              v-if="detailMode"
-        },
+              variant="ghost"
-      ],
+              class="w-7"
-    }"
+              @click="detailMode = false"
-  >
+            >
-    <template #body-content>
+              <EditIcon class="h-4 w-4" />
-      <div class="flex flex-col gap-4">
+            </Button>
-        <Link
+            <Button variant="ghost" class="w-7" @click="show = false">
-          variant="outline"
+              <FeatherIcon name="x" class="h-4 w-4" />
-          size="md"
+            </Button>
-          label="Salutation"
+          </div>
-          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
+        <div>
-          variant="outline"
+          <div v-if="detailMode" class="flex flex-col gap-3.5">
-          size="md"
+            <div
-          label="Organization"
+              class="flex h-7 items-center gap-2"
-          v-model="_contact.company_name"
+              v-for="field in fields"
-          doctype="CRM Organization"
+              :key="field.name"
-          placeholder="Select organization"
+            >
-        />
+              <component class="mx-1" :is="field.icon" />
-        <div class="flex gap-4">
+              <div>{{ field.value }}</div>
-          <FormControl
+            </div>
-            class="flex-1"
+          </div>
-            variant="outline"
+          <div v-else>
-            size="md"
+            <div class="flex flex-col gap-4">
-            type="text"
+              <Link
-            label="Mobile no"
+                variant="outline"
-            v-model="_contact.mobile_no"
+                size="md"
-          />
+                label="Salutation"
-          <FormControl
+                v-model="_contact.salutation"
-            class="flex-1"
+                doctype="Salutation"
-            variant="outline"
+                placeholder="Mr./Mrs./Ms..."
-            size="md"
+              />
-            type="email"
+              <div class="flex gap-4">
-            label="Email"
+                <FormControl
-            v-model="_contact.email_id"
+                  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 }

frontend/src/pages/Contact.vue

@@ -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({