From 9bd4b79ea07ea716c6781848a49478a1746a5a0f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 15 Oct 2023 08:23:45 +0530
Subject: [PATCH] fix: create/edit contact

---
 crm/api/session.py                       |   2 +-
 frontend/src/components/ContactModal.vue | 136 +++++++++++++++++++++++
 frontend/src/pages/Contact.vue           |  33 +++++-
 frontend/src/pages/Contacts.vue          |  24 ++--
 4 files changed, 182 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ContactModal.vue

diff --git a/crm/api/session.py b/crm/api/session.py
index e40a769b..c5fb5c4e 100644
--- a/crm/api/session.py
+++ b/crm/api/session.py
@@ -25,7 +25,7 @@ def get_contacts():
 
 	contacts = frappe.qb.get_query(
 		"Contact",
-		fields=['name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation'],
+		fields=['name', 'first_name', 'last_name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation', 'company_name'],
 		order_by="first_name asc",
 		distinct=True,
 	).run(as_dict=1)
diff --git a/frontend/src/components/ContactModal.vue b/frontend/src/components/ContactModal.vue
new file mode 100644
index 00000000..5fd0d6ce
--- /dev/null
+++ b/frontend/src/components/ContactModal.vue
@@ -0,0 +1,136 @@
+<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 }) => updateContact(close),
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <FormControl
+          type="text"
+          size="md"
+          variant="outline"
+          label="Salutation"
+          v-model="_contact.salutation"
+        />
+        <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>
+        <FormControl
+          type="text"
+          variant="outline"
+          size="md"
+          label="Organisation"
+          v-model="_contact.company_name"
+        />
+        <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>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { FormControl, Dialog, call } from 'frappe-ui'
+import { ref, defineModel, nextTick, watch, computed } from 'vue'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    default: {},
+  },
+})
+
+const show = defineModel()
+const contacts = defineModel('reloadContacts')
+
+const editMode = ref(false)
+let _contact = ref({})
+
+async function updateContact(close) {
+  if (JSON.stringify(props.contact) === JSON.stringify(_contact.value)) {
+    return
+  }
+
+  if (_contact.value.name) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'Contact',
+      name: _contact.value.name,
+      fieldname: _contact.value,
+    })
+    if (d.name) {
+      contacts.value.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'Contact',
+        ..._contact.value,
+      },
+    })
+    if (d.name) {
+      contacts.value.reload()
+    }
+  }
+  close()
+}
+
+const dirty = computed(() => {
+  return JSON.stringify(props.contact) !== JSON.stringify(_contact.value)
+})
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    nextTick(() => {
+      _contact.value = { ...props.contact }
+      if (_contact.value.first_name) {
+        editMode.value = true
+      }
+    })
+  }
+)
+</script>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 2d9a4ba9..62acd92b 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -11,18 +11,31 @@
         {{ contact.salutation + ' ' + contact.full_name }}
       </div>
       <div class="flex items-center gap-2 text-base text-gray-700">
-        <div class="flex items-center gap-1.5">
+        <div v-if="contact.email_id" class="flex items-center gap-1.5">
           <EmailIcon class="h-4 w-4" />
           <span class="">{{ contact.email_id }}</span>
         </div>
-        <span class="text-3xl leading-[0] text-gray-600">&middot;</span>
-        <div class="flex items-center gap-1.5">
+        <span
+          v-if="contact.mobile_no"
+          class="text-3xl leading-[0] text-gray-600"
+          >&middot;</span
+        >
+        <div v-if="contact.mobile_no" class="flex items-center gap-1.5">
           <PhoneIcon class="h-4 w-4" />
           <span class="">{{ contact.mobile_no }}</span>
         </div>
+        <span
+          v-if="(contact.email_id || contact.mobile_no) && contact.company_name"
+          class="text-3xl leading-[0] text-gray-600"
+          >&middot;</span
+        >
+        <div v-if="contact.company_name" class="flex items-center gap-1.5">
+          <Avatar :label="contact.company_name" size="xs" />
+          <span class="">{{ contact.company_name }}</span>
+        </div>
       </div>
       <div class="mt-1 flex gap-2">
-        <Button label="Edit" size="sm">
+        <Button label="Edit" size="sm" @click="showContactModal = true">
           <template #prefix>
             <EditIcon class="h-4 w-4" />
           </template>
@@ -39,14 +52,22 @@
         </Button>
       </div>
     </div>
+    <ContactModal
+      v-model="showContactModal"
+      v-model:reloadContacts="contacts"
+      :contact="contact"
+    />
   </div>
 </template>
 
 <script setup>
 import { FeatherIcon, Avatar } from 'frappe-ui'
+import ContactModal from '@/components/ContactModal.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import { contactsStore } from '@/stores/contacts.js'
+import { ref } from 'vue'
 
 const props = defineProps({
   contact: {
@@ -54,4 +75,8 @@ const props = defineProps({
     required: true,
   },
 })
+
+const { contacts } = contactsStore()
+
+const showContactModal = ref(false)
 </script>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 8b2b61b6..7137911b 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -4,7 +4,7 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
-      <Button variant="solid" label="Create">
+      <Button variant="solid" label="Create" @click="showContactModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
@@ -16,7 +16,7 @@
         v-for="(contact, i) in contacts.data"
         :key="i"
         :class="[
-          current_contact?.name === contact.name
+          currentContact?.name === contact.name
             ? 'bg-gray-50 hover:bg-gray-100'
             : 'hover:bg-gray-50',
         ]"
@@ -33,7 +33,7 @@
       </router-link>
     </div>
     <div class="flex-1">
-      <router-view v-if="current_contact" :contact="current_contact" />
+      <router-view v-if="currentContact" :contact="currentContact" />
       <div
         v-else
         class="grid h-full place-items-center text-xl font-medium text-gray-500"
@@ -45,20 +45,28 @@
       </div>
     </div>
   </div>
+  <ContactModal
+    v-model="showContactModal"
+    v-model:reloadContacts="contacts"
+    :contact="{}"
+  />
 </template>
 
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
+import ContactModal from '@/components/ContactModal.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import { FeatherIcon, Breadcrumbs, Avatar } from 'frappe-ui'
 import { contactsStore } from '@/stores/contacts.js'
-import { computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 const { contacts } = contactsStore()
 const route = useRoute()
 
-const current_contact = computed(() => {
+const showContactModal = ref(false)
+
+const currentContact = computed(() => {
   return contacts.data.find(
     (contact) => contact.name === route.params.contactId
   )
@@ -66,12 +74,12 @@ const current_contact = computed(() => {
 
 const breadcrumbs = computed(() => {
   let items = [{ label: 'Contacts', route: { name: 'Contacts' } }]
-  if (!current_contact.value) return items
+  if (!currentContact.value) return items
   items.push({
-    label: current_contact.value.full_name,
+    label: currentContact.value.full_name,
     route: {
       name: 'Contact',
-      params: { contactId: current_contact.value.name },
+      params: { contactId: currentContact.value.name },
     },
   })
   return items