created product search component

src/components/ProductSearch.vue

@@ -0,0 +1,64 @@
+<template>
+    <v-card title="Product Search">
+        <v-card-text>
+            <v-text-field label="Search" v-model="product_search" append-icon="mdi-magnify" @click:append="searchProducts" @keyup.enter.prevent="searchProducts"></v-text-field>
+            <v-progress-linear indeterminate :active="products_loading">
+            </v-progress-linear>
+            <v-list>
+                <RecycleScroller class="scroller"
+                                 :items="products"
+                                 :item-size="50"
+                                 v-slot="{ item }" 
+                                 key-field="code"
+                                 >
+                                 <v-list-item>
+                                     <v-btn icon="mdi-arrow-right" title="select" @click="setProduct(item)" size="small" color="success"></v-btn>
+                                     {{ item.code }} - {{ item.name }}
+                                 </v-list-item>
+                </RecycleScroller>
+            </v-list>
+        </v-card-text>
+    </v-card>
+</template>
+<script>
+import axios from 'axios'
+export default {
+    props:{
+    },
+    data() {
+        return {
+            product_search: "",
+            products: [],
+            products_loading: null
+        }
+    },
+    emits: ['returnProduct'],
+    methods: {
+        searchProducts() {
+            this.products_loading = true
+            console.log("Searching for " & this.product_search)
+            let url = this.$api_url + "/products/search/" + this.product_search
+            axios.get(url)
+                .then(resp => {
+                    console.log(resp)
+                    this.products = resp.data
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+                .finally(() => {
+                    this.products_loading = false
+                })
+        },
+        setProduct(p){
+            this.$emit('returnProduct',p)
+        }
+    }
+}
+</script>
+<style scoped>
+.scroller {
+    height:500px;
+}
+</style>
+

src/views/contracts/ContractEdit.vue

@@ -124,26 +124,7 @@
         </v-card>
     </v-dialog>
     <v-dialog v-model="search[1]">
-        <v-card title="Product Search">
+        <ProductSearch @returnProduct="setProduct"></ProductSearch>
-            <v-card-text>
-                <v-text-field label="Search" v-model="product_search" append-icon="mdi-magnify" @click:append="searchProducts" @keyup.enter.prevent="searchProducts"></v-text-field>
-                <v-progress-linear indeterminate :active="products_loading">
-                </v-progress-linear>
-                <v-list>
-                    <RecycleScroller class="scroller"
-                                     :items="products"
-                                     :item-size="50"
-                                     v-slot="{ item }" 
-                                     key-field="code"
-                                     >
-                        <v-list-item>
-                            <v-btn icon="mdi-arrow-right" title="select" @click="setProduct(item)" size="small" color="success"></v-btn>
-                            {{ item.code }} - {{ item.name }}
-                        </v-list-item>
-                    </RecycleScroller>
-                </v-list>
-            </v-card-text>
-        </v-card>
     </v-dialog>
     </template>
     <script>
@@ -152,13 +133,15 @@ import DatePicker from '@vuepic/vue-datepicker'
 import ErrorBanner from '@/components/ErrorBanner.vue'
 import methods from '@/CommonMethods.vue'
 import Product from '@/types/ProductType.vue'
+import ProductSearch from '@/components/ProductSearch.vue'
 export default {
     props: {
         setcontract: {}
     },
     components: {
         DatePicker,
-        ErrorBanner
+        ErrorBanner,
+        ProductSearch
     },
     watch: {
         setcontract(newval) {
@@ -260,22 +243,6 @@ export default {
                     this.customers_loading = false
                 })
         },
-        searchProducts() {
-            this.products_loading = true
-            console.log("Searching for " & this.product_search)
-            let url = this.$api_url + "/products/search/" + this.product_search
-            axios.get(url)
-                .then(resp => {
-                    console.log(resp)
-                    this.products = resp.data
-                })
-                .catch(err => {
-                    console.log(err)
-                })
-                .finally(() => {
-                    this.products_loading = false
-                })
-        },
         productCodeName(p) {
             return p.code + ' - ' + p.name
         },