fix: create new contact from deals add contact

frontend/src/components/Modals/ContactModal.vue

@@ -9,7 +9,7 @@
           label: editMode ? 'Update' : 'Create',
           variant: 'solid',
           disabled: !dirty,
-          onClick: ({ close }) => updateContact(close),
+          onClick: ({ close }) => editMode ? updateContact(close) : callInsertDoc(close),
         },
       ],
     }"
@@ -42,11 +42,21 @@
           />
         </div>
         <FormControl
-          type="text"
+          type="autocomplete"
           variant="outline"
           size="md"
           label="Organisation"
-          v-model="_contact.company_name"
+          :value="_contact.company_name"
+          :options="
+            organizations.data.map((d) => {
+              return {
+                label: d.name,
+                value: d.name,
+              }
+            })
+          "
+          @change="(e) => (_contact.company_name = e.value)"
+          placeholder="Select organization"
         />
         <div class="flex gap-4">
           <FormControl
@@ -74,53 +84,72 @@
 <script setup>
 import { FormControl, Dialog, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch, computed } from 'vue'
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
+import { organizationsStore } from '@/stores/organizations'
 
 const props = defineProps({
   contact: {
     type: Object,
     default: {},
   },
+  options: {
+    type: Object,
+    default: {
+      redirect: true,
+      afterInsert: () => {},
+    },
+  },
 })
 
 const router = useRouter()
-
 const show = defineModel()
 const contacts = defineModel('reloadContacts')
 
+const { organizations } = organizationsStore()
+
 const editMode = ref(false)
 let _contact = ref({})
 
 async function updateContact(close) {
-  if (JSON.stringify(props.contact) === JSON.stringify(_contact.value)) {
+  if (!dirty.value) {
+    close()
     return
   }
 
-  if (_contact.value.name) {
-    let d = await call('frappe.client.set_value', {
+  let name = await callSetValue(values)
+
+  handleContactUpdate({ name }, close)
+}
+
+async function callSetValue(values) {
+  const d = await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: _contact.value.name,
+    fieldname: values,
+  })
+  return d.name
+}
+
+async function callInsertDoc(close) {
+  const doc = await call('frappe.client.insert', {
+    doc: {
       doctype: 'Contact',
-      name: _contact.value.name,
-      fieldname: _contact.value,
+      ..._contact.value,
+    },
+  })
+  doc.name && handleContactUpdate(doc, close)
+}
+
+function handleContactUpdate(doc, close) {
+  contacts.value?.reload()
+  if (doc.name && props.options.redirect) {
+    router.push({
+      name: 'Contact',
+      params: { contactId: doc.name },
     })
-    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()
-      router.push({
-        name: 'Contact',
-        params: { contactId: d.name },
-      })
-    }
   }
-  close()
+  close && close()
+  props.options.afterInsert && props.options.afterInsert(doc)
 }
 
 const dirty = computed(() => {
@@ -134,7 +163,7 @@ watch(
     editMode.value = false
     nextTick(() => {
       _contact.value = { ...props.contact }
-      if (_contact.value.first_name) {
+      if (_contact.value.name) {
         editMode.value = true
       }
     })

frontend/src/components/Modals/OrganizationModal.vue

@@ -57,13 +57,13 @@ const props = defineProps({
   },
 })
 
+const router = useRouter()
 const show = defineModel()
 const organizations = defineModel('reloadOrganizations')
 
 const title = ref(null)
 const editMode = ref(false)
 let _organization = ref({})
-const router = useRouter()
 
 async function updateOrganization(close) {
   const old = { ...props.organization }

frontend/src/pages/Deal.vue

@@ -125,7 +125,7 @@
                         }
                       })
                     "
-                    @change="(e) => addContact(e.value)"
+                    @change="(e) => e.value && addContact(e.value)"
                   >
                     <template #target="{ togglePopover }">
                       <Button
@@ -138,6 +138,29 @@
                         </template>
                       </Button>
                     </template>
+                    <template #footer="{ value, close }">
+                      <div>
+                        <Button
+                          variant="ghost"
+                          class="w-full !justify-start"
+                          label="Create one"
+                          @click="
+                            () => {
+                              _contact = {
+                                first_name: value,
+                                company_name: deal.data.organization,
+                              }
+                              showContactModal = true
+                              close()
+                            }
+                          "
+                        >
+                          <template #prefix>
+                            <FeatherIcon name="plus" class="h-4" />
+                          </template>
+                        </Button>
+                      </div>
+                    </template>
                   </Autocomplete>
                 </div>
               </div>
@@ -339,7 +362,10 @@
                         class="mx-2 h-px border-t border-gray-200"
                       />
                     </div>
-                    <div v-else class="flex justify-center items-center text-base text-gray-600 h-20">
+                    <div
+                      v-else
+                      class="flex h-20 items-center justify-center text-base text-gray-600"
+                    >
                       No contacts added
                     </div>
                   </div>
@@ -359,6 +385,14 @@
       afterInsert: (doc) => updateField('organization', doc.name),
     }"
   />
+  <ContactModal
+    v-model="showContactModal"
+    :contact="_contact"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => addContact(doc.name),
+    }"
+  />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -374,6 +408,7 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import ContactModal from '@/components/Modals/ContactModal.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import {
   dealStatuses,
@@ -560,14 +595,17 @@ const detailSections = computed(() => {
   ]
 })
 
+const showContactModal = ref(false)
+const _contact = ref({})
+
 async function addContact(value) {
   let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.add_contact', {
     deal: props.dealId,
     contact: value,
   })
   if (d) {
+    await contacts.reload()
     deal.reload()
-    contacts.reload()
     createToast({
       title: 'Contact added',
       icon: 'check',