From 10a37c6a54c08d09b6b81dedbbe7a81437bdea63 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 16 Nov 2023 17:56:11 +0530
Subject: [PATCH] fix: moved create one btn from slot to Link component

---
 frontend/src/components/Controls/Link.vue | 17 +++++--
 frontend/src/pages/Deal.vue               | 54 +++++------------------
 frontend/src/pages/Lead.vue               | 21 +--------
 3 files changed, 28 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 65876400..1cb2e40e 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -24,8 +24,19 @@
         <slot name="item-prefix" v-bind="{ active, selected, option }" />
       </template>
 
-      <template v-if="$slots.footer" #footer="{ value, close }">
-        <slot name="footer" v-bind="{ value, close }" />
+      <template v-if="attrs.onCreate" #footer="{ value, close }">
+        <div>
+          <Button
+            variant="ghost"
+            class="w-full !justify-start"
+            label="Create one"
+            @click="attrs.onCreate(value, close)"
+          >
+            <template #prefix>
+              <FeatherIcon name="plus" class="h-4" />
+            </template>
+          </Button>
+        </div>
       </template>
     </Autocomplete>
   </div>
@@ -34,7 +45,7 @@
 <script setup>
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
-import { createResource } from 'frappe-ui'
+import { createResource, FeatherIcon } from 'frappe-ui'
 import { useAttrs, computed, ref } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index a3615f28..42dd6ffa 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -119,6 +119,16 @@
                     value=""
                     doctype="Contact"
                     @change="(e) => addContact(e)"
+                    :onCreate="
+                      (value, close) => {
+                        _contact = {
+                          first_name: value,
+                          company_name: deal.data.organization,
+                        }
+                        showContactModal = true
+                        close()
+                      }
+                    "
                   >
                     <template #target="{ togglePopover }">
                       <Button
@@ -131,29 +141,6 @@
                         </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>
                   </Link>
                 </div>
               </div>
@@ -183,25 +170,8 @@
                         :doctype="field.doctype"
                         :placeholder="field.placeholder"
                         @change="(e) => field.change(e)"
-                      >
-                        <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>
-                      </Link>
+                        :onCreate="field.create"
+                      />
                       <FormControl
                         v-else-if="field.type === 'date'"
                         type="date"
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index b77f2665..7e25019b 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -205,25 +205,8 @@
                         :doctype="field.doctype"
                         :placeholder="field.placeholder"
                         @change="(e) => field.change(e)"
-                      >
-                        <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>
-                      </Link>
+                        :onCreate="field.create"
+                      />
                       <FormControl
                         v-else-if="field.type === 'user'"
                         type="autocomplete"