From b6dfa61f04b4e854aa0af144d9db6506197f6261 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Mon, 20 Mar 2023 15:27:10 +0000
Subject: [PATCH] better search on contract edit

---
 src/views/contracts/ContractEdit.vue | 209 ++++++++++++++++++---------
 1 file changed, 139 insertions(+), 70 deletions(-)

diff --git a/src/views/contracts/ContractEdit.vue b/src/views/contracts/ContractEdit.vue
index 5d0f080..9e07ded 100644
--- a/src/views/contracts/ContractEdit.vue
+++ b/src/views/contracts/ContractEdit.vue
@@ -4,27 +4,15 @@
             <v-container>
                 <v-row>
                     <v-col cols="6">
-                        <v-autocomplete 
-                           label="Customer" 
-                           v-model="contract.customer.acc_no" 
-                           v-model:search="customer_search"
-                           :loading="customers_loading"
-                           :items="customers"
-                           cache-items
-                           hide-no-data
-                           hide-details
-                           solo-inverted
-                           no-data-text="No Customers Found"
-                           item-title="full_title"
-                           item-value="acc_no"
-                           :readonly="!contract.isNew">
-                        </v-autocomplete>
-                        <v-text-field type="number" label="Tonnage Per Month" v-model="contract.tonnage_per_month"></v-text-field>
+                        <v-text-field readonly="true" variant="none" prepend-icon="mdi-magnify" @click:prepend="showCustomerSearch">
+                            {{ contract.customer.acc_no }} - {{ contract.customer.name }}
+                        </v-text-field>
+                        <v-text-field type="number" variant="outlined" label="Tonnage Per Month" v-model="contract.tonnage_per_month"></v-text-field>
                     </v-col>
                     <v-col cols="6">
                         <label>
                             Start Date
-                            <DatePicker v-model="contract.start_date"  format="dd/MM/yyyy" />
+                            <DatePicker v-model="contract.start_date" format="dd/MM/yyyy" />
                         </label><br />
                         <label>
                             Finish Date
@@ -32,63 +20,121 @@
                         </label><br />
                     </v-col>
                 </v-row>
-                <template v-for="(p, index) in contract.products" :key="index">
+                <v-table density="compact">
+                    <thead>
+                        <tr>
+                            <th>
+                            </th>
+                            <th>
+                                Product
+                            </th>
+                            <th>
+                                Price
+                            </th>
+                            <th>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(p, index) in contract.products" :key="index">
+                            <td>
+                                <v-btn icon="mdi-magnify" size="small" color="blue-grey" title="Search Products" @click="showProductSearch(index)"></v-btn>
+                            </td>
+                            <td>
+                                {{ p.code }} - {{ p.name }}
+                            </td>
+                            <td>
+                                <v-text-field type="number" density="compact" variant="outlined" v-model="p.price"></v-text-field>
+                            </td>
+                            <td>
+                                <v-btn size="small" color="error" title="Remove" variant="plain" @click="removeProduct(p.code)" icon="mdi-minus"></v-btn>
+                            </td>
+                        </tr>
+                    </tbody>
+                </v-table>
+                <!--<v-row>
+                    <v-col cols="6">
+                    <v-autocomplete
+                    label="Product Code" 
+                    @keyup.enter="searchProducts()" 
+                    :items="products" 
+                    item-title="code"
+                    item-value="code"
+                    v-model="p.code"
+                    v-model:search="product_search"
+                    append-icon="mdi-magnify"
+                    no-data-text="No results (press Enter to search)"
+                    cache-items
+                    @click:append="searchProducts()"></v-autocomplete>
+                    </v-col>
+                    </v-row>-->
                     <v-row>
-                        <v-col cols="6">
-                            <v-autocomplete
-                               label="Product Code" 
-                               @keyup.enter="searchProducts()" 
-                               :items="products" 
-                               item-title="code"
-                               item-value="code"
-                               v-model="p.code"
-                               v-model:search="product_search"
-                               append-icon="mdi-magnify"
-                               no-data-text="No results (press Enter to search)"
-                               cache-items
-                               @click:append="searchProducts()"></v-autocomplete>
-                        </v-col>
                         <v-col cols="4">
-                            <v-text-field type="number" label="Price" v-model="p.price"></v-text-field>
-                        </v-col>
-                        <v-col cols="2">
-                            <v-btn size="small" color="error" title="Remove" variant="plain" icon @click="contract.products.pop()"><v-icon>mdi-minus</v-icon></v-btn>
+                            <v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
                         </v-col>
                     </v-row>
-                </template>
-                <v-row>
-                    <v-col cols="4">
-                        <v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
-                    </v-col>
-                </v-row>
-                <v-row>
-                    <v-col cols="6">
-                        <label>
-                            Agree Date
-                            <DatePicker v-model="contract.agree_date"   format="dd/MM/yyyy" />
-                        </label>
-                    </v-col>
-                    <v-col cols="12">
-                        <v-textarea rows=3 label="Comments" v-model="contract.comments"></v-textarea>
-                        <v-textarea rows=3 label="Office Comments" v-model="contract.office_comments"></v-textarea>
-                    </v-col>
-                </v-row>
-                <ErrorBanner :errors="errors" />
+                    <v-row>
+                        <v-col cols="6">
+                            <label>
+                                Agree Date
+                                <DatePicker v-model="contract.agree_date"   format="dd/MM/yyyy" />
+                            </label>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-textarea rows=3 label="Comments" v-model="contract.comments"></v-textarea>
+                            <v-textarea rows=3 label="Office Comments" v-model="contract.office_comments"></v-textarea>
+                        </v-col>
+                    </v-row>
+                    <ErrorBanner :errors="errors" />
             </v-container>
         </v-card-text>
         <v-card-actions>
             <v-btn v-if="!contract.isNew" color="red-darken-1"
-                   variant="text"
-                   @click="saveContract(selected_contract)">Save</v-btn>
+                                          variant="text"
+                                          @click="saveContract(selected_contract)">Save</v-btn>
             <v-btn v-if="contract.isNew" color="red-darken-1"
-                   variant="text"
-                   @click="saveContract(selected_contract)">Add</v-btn>
+                                         variant="text"
+                                         @click="saveContract(selected_contract)">Add</v-btn>
             <v-spacer></v-spacer>
             <v-btn color="blue-darken-1"
                    variant="text"
                    @click="close">Close</v-btn>
         </v-card-actions>
     </v-card>
+    <v-dialog v-model="search[0]" scrollable>
+        <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>
+                    <template v-for="c in customers" :key="c.acc_no">
+                        <v-list-item>
+                            <v-btn icon="mdi-arrow-right" title="select" @click="contract.customer = c; search[0] = false" size="small" color="success"></v-btn>
+                            {{ c.acc_no }} - {{ c.name }}
+                        </v-list-item>
+                    </template>
+                </v-list>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+    <v-dialog v-model="search[1]">
+        <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>
+                    <template v-for="p in products" :key="p.code">
+                        <v-list-item>
+                            <v-btn icon="mdi-arrow-right" title="select" @click="setProduct(p)" size="small" color="success"></v-btn>
+                            {{ p.code }} - {{ p.name }}
+                        </v-list-item>
+                    </template>
+                </v-list>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
 </template>
 <script>
 import axios from 'axios'
@@ -108,11 +154,6 @@ export default {
         setcontract(newval) {
             this.contract = newval
         },
-        customer_search(val) {
-            if (val && val.length > 2) {
-                this.searchCustomers(val)
-            }
-        }
     },
     mixins: [methods],
     data() {
@@ -120,6 +161,8 @@ export default {
             contract: this.setcontract,
             dialog: this.opendialog,
             saving: false,
+            search: [],
+            searchProdIndex: null,
             product_search: null,
             products_loading: false,
             products: [],
@@ -144,6 +187,18 @@ export default {
         addProduct() {
             this.contract.products.push(new Product())
         },
+        removeProduct(code){
+            this.contract.products = this.contract.products.filter((c) => {
+                return c.code !== code
+            })
+        },
+        showCustomerSearch() {
+            this.search[0] = true
+        },
+        showProductSearch(num) {
+            this.search[1] = true
+            this.searchProdIndex = num
+        },
         async saveContract(){
             this.saving = true
             let url = this.$api_url + "/customers/contracts/" + this.contract.no + "/save"
@@ -156,11 +211,11 @@ export default {
                 console.log("Saved Contract : " + JSON.stringify(resp.data))
                 this.saving = false
                 if (resp.data == true) {
-                  if (this.contract.isNew) {
+                    if (this.contract.isNew) {
                         this.$emit('contractupdate', resp.data)
-                  } else {
-                      this.$emit('contractupdate', resp.data)
-                  }
+                    } else {
+                        this.$emit('contractupdate', resp.data)
+                    }
                 } else {
                     this.error("Contract not saved.")
                     console.log("Not Saved")
@@ -170,8 +225,9 @@ export default {
                 this.saving = false
             })
         },
-        async searchCustomers(name) {
-            let url = this.$api_url + "/customers/search/" + name
+        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
@@ -179,8 +235,12 @@ export default {
                 .catch(err => {
                     console.log(err)
                 })
+                .finally(() => {
+                    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)
@@ -191,9 +251,18 @@ export default {
                 .catch(err => {
                     console.log(err)
                 })
+                .finally(() => {
+                    this.products_loading = false
+                })
         },
         productCodeName(p) {
             return p.code + ' - ' + p.name
+        },
+        setProduct(p){
+            let q = this.contract.products[this.searchProdIndex]
+            p.price = q.price
+            this.contract.products[this.searchProdIndex] = p
+            this.search[1] = false
         }
     }
 }