From 1cb017ac9e55ae4113f843e41a263c877480ec7a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 11 Nov 2023 12:27:57 +0530
Subject: [PATCH] fix: Add new organization button in lead organization
 autocomplete

---
 frontend/src/pages/Deal.vue | 44 +++++++++++++++++++++++++++++++++----
 frontend/src/pages/Lead.vue | 13 +++++++----
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 38e326be..ae21a4c0 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -132,15 +132,32 @@
                       {{ field.label }}
                     </div>
                     <div class="flex-1 overflow-hidden">
-                      <FormControl
+                      <Autocomplete
                         v-if="field.type === 'link'"
-                        type="autocomplete"
                         :value="deal.data[field.name]"
                         :options="field.options"
                         @change="(e) => field.change(e)"
                         :placeholder="field.placeholder"
                         class="form-control"
-                      />
+                      >
+                        <template
+                          v-if="field.create"
+                          #footer="{ value, close }"
+                        >
+                          <div>
+                            <Button
+                              variant="ghost"
+                              class="w-full !justify-start"
+                              label="Create one"
+                              @click="field.create(value, close)"
+                            >
+                              <template #prefix>
+                                <FeatherIcon name="plus" class="h-4" />
+                              </template>
+                            </Button>
+                          </div>
+                        </template>
+                      </Autocomplete>
                       <Dropdown
                         v-else-if="field.type === 'dropdown'"
                         :options="
@@ -266,7 +283,9 @@
                               v-if="cOpened"
                               class="flex flex-col gap-1.5 text-base text-gray-800"
                             >
-                              <div class="flex items-center gap-3 pl-1 pb-1.5 pt-4">
+                              <div
+                                class="flex items-center gap-3 pb-1.5 pl-1 pt-4"
+                              >
                                 <EmailIcon class="h-4 w-4" />
                                 {{ getContactByName(contact.name).email_id }}
                               </div>
@@ -292,6 +311,14 @@
       </div>
     </div>
   </div>
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    :organization="_organization"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => updateField('organization', doc.name),
+    }"
+  />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -306,6 +333,8 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 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 Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import {
   dealStatuses,
   statusDropdownOptions,
@@ -349,6 +378,8 @@ const deal = createResource({
 })
 
 const reload = ref(false)
+const showOrganizationModal = ref(false)
+const _organization = ref({})
 
 function updateDeal(fieldname, value, callback) {
   value = Array.isArray(fieldname) ? '' : value
@@ -430,6 +461,11 @@ const detailSections = computed(() => {
           placeholder: 'Select organization',
           options: getOrganizationOptions(),
           change: (data) => updateField('organization', data.value),
+          create: (value, close) => {
+            _organization.value.organization_name = value
+            showOrganizationModal.value = true
+            close()
+          },
           link: () => {
             router.push({
               name: 'Organization',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 1f25a411..b2188222 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -18,7 +18,9 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </FormControl>
-      <Dropdown :options="statusDropdownOptions(lead.data, 'lead', updateField)">
+      <Dropdown
+        :options="statusDropdownOptions(lead.data, 'lead', updateField)"
+      >
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
@@ -50,7 +52,10 @@
       >
         About this lead
       </div>
-      <FileUploader @success="(file) => updateField('image', file.file_url)" :validateFile="validateFile">
+      <FileUploader
+        @success="(file) => updateField('image', file.file_url)"
+        :validateFile="validateFile"
+      >
         <template #default="{ openFileSelector, error }">
           <div class="flex items-center justify-start gap-5 p-5">
             <div class="group relative h-[88px] w-[88px]">
@@ -201,7 +206,7 @@
                         :placeholder="field.placeholder"
                         class="form-control"
                       >
-                        <template #footer="{ value, close }">
+                        <template v-if="field.create" #footer="{ value, close }">
                           <div>
                             <Button
                               variant="ghost"
@@ -291,7 +296,7 @@
     :organization="_organization"
     :options="{
       redirect: false,
-      afterInsert: (doc) => updateField('organiation', doc.name),
+      afterInsert: (doc) => updateField('organization', doc.name),
     }"
   />
 </template>