created customer search component

src/components/CustomerSearch.vue

@@ -0,0 +1,67 @@
+<template>
+    <v-card title="Customer Search">
+        <v-card-text>
+            <v-text-field label="Search" v-model="customer_search" append-icon="mdi-magnify" @click:append="searchCustomers" @keyup.enter.prevent="searchCustomers"></v-text-field>
+            <v-progress-linear indeterminate :active="customers_loading">
+            </v-progress-linear>
+            <v-list>
+                <RecycleScroller class="scroller"
+                                 :items="filteredCustomers"
+                                 :item-size="50"
+                                 v-slot="{ item }" 
+                                 key-field="acc_no"
+                                 >
+                                 <v-list-item>
+                                     <v-btn icon="mdi-arrow-right" title="select" @click="selectCustomer(item)" size="small" color="success"></v-btn>
+                                     {{ item.acc_no }} - {{ item.name }}
+                                 </v-list-item>
+                </RecycleScroller>
+            </v-list>
+        </v-card-text>
+    </v-card>
+</template>
+<script>
+import axios from 'axios'
+export default {
+    data() {
+        return {
+            customer_search: "",
+            customers_loading: null,
+            customers: []
+        }
+    },
+    computed: {
+        filteredCustomers(){
+            if (this.customer_search == null){
+                return []
+            }
+            let query = this.customer_search.toLowerCase()
+            let clist = this.customers.filter(q =>
+                q.name.toLowerCase().includes(query) ||
+                q.acc_no.includes(query)
+            )
+            return clist
+        },
+    },
+    emits: ['returnCustomer'],
+    methods: {
+        selectCustomer(cust){
+            this.$emit('returnCustomer',cust)
+        },
+        searchCustomers() {
+            this.customers_loading = true
+            let url = this.$api_url + "/customers/search/" + this.customer_search
+            axios.get(url)
+                .then(resp => {
+                    this.customers = resp.data
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+                .finally(() => {
+                    this.customers_loading = false
+                })
+        },
+    }
+}
+</script>

src/views/contracts/ContractEdit.vue

@@ -102,26 +102,7 @@
         </v-card-actions>
     </v-card>
     <v-dialog v-model="search[0]" scrollable>
-        <v-card title="Customer Search">
+        <CustomerSearch @returnCustomer="setCustomer"></CustomerSearch>
-            <v-card-text>
-                <v-text-field label="Search" v-model="customer_search" append-icon="mdi-magnify" @click:append="searchCustomers" @keyup.enter.prevent="searchCustomers"></v-text-field>
-                <v-progress-linear indeterminate :active="customers_loading">
-                </v-progress-linear>
-                <v-list>
-                    <RecycleScroller class="scroller"
-                                     :items="filteredCustomers"
-                                     :item-size="50"
-                                     v-slot="{ item }" 
-                                     key-field="acc_no"
-                                     >
-                                     <v-list-item>
-                                         <v-btn icon="mdi-arrow-right" title="select" @click="contract.customer = item; search[0] = false" size="small" color="success"></v-btn>
-                                         {{ item.acc_no }} - {{ item.name }}
-                                     </v-list-item>
-                    </RecycleScroller>
-                </v-list>
-            </v-card-text>
-        </v-card>
     </v-dialog>
     <v-dialog v-model="search[1]">
         <ProductSearch @returnProduct="setProduct"></ProductSearch>
@@ -134,6 +115,7 @@ import ErrorBanner from '@/components/ErrorBanner.vue'
 import methods from '@/CommonMethods.vue'
 import Product from '@/types/ProductType.vue'
 import ProductSearch from '@/components/ProductSearch.vue'
+import CustomerSearch from '@/components/CustomerSearch.vue'
 export default {
     props: {
         setcontract: {}
@@ -141,7 +123,8 @@ export default {
     components: {
         DatePicker,
         ErrorBanner,
-        ProductSearch
+        ProductSearch,
+        CustomerSearch
     },
     watch: {
         setcontract(newval) {
@@ -165,17 +148,6 @@ export default {
         }
     },
     computed: {
-        filteredCustomers(){
-            if (this.customer_search == null){
-                return []
-            }
-            let query = this.customer_search.toLowerCase()
-            let clist = this.customers.filter(q =>
-                q.name.toLowerCase().includes(query) ||
-                q.acc_no.includes(query)
-            )
-            return clist
-        },
         title() {
             if ( this.contract.isNew ) {
                 return "New Contract"
@@ -229,20 +201,6 @@ export default {
                 this.saving = false
             })
         },
-        async searchCustomers() {
-            this.customers_loading = true
-            let url = this.$api_url + "/customers/search/" + this.customer_search
-            axios.get(url)
-                .then(resp => {
-                    this.customers = resp.data
-                })
-                .catch(err => {
-                    console.log(err)
-                })
-                .finally(() => {
-                    this.customers_loading = false
-                })
-        },
         productCodeName(p) {
             return p.code + ' - ' + p.name
         },
@@ -251,6 +209,10 @@ export default {
             p.price = q.price
             this.contract.products[this.searchProdIndex] = p
             this.search[1] = false
+        },
+        setCustomer(c){
+            this.contract.customer = c
+            this.search[0] = false
         }
     }
 }