From 43ab44794cb694b3b9cb81ea3eb7ccf3e0da9fd9 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Thu, 23 Mar 2023 20:36:07 +0000
Subject: [PATCH] better error banner

---
 src/components/ErrorBanner.vue       | 10 ++--
 src/views/contracts/ContractEdit.vue | 72 ++++++++++++++--------------
 src/views/medfeeds/MedFeedsEdit.vue  | 20 ++++----
 3 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/components/ErrorBanner.vue b/src/components/ErrorBanner.vue
index e0d1a98..af8fa87 100644
--- a/src/components/ErrorBanner.vue
+++ b/src/components/ErrorBanner.vue
@@ -1,8 +1,12 @@
 <template>
     <v-row>
         <v-list>
-            <v-list-item v-for="e in errors" :key="e.id">
-                <v-banner color="error" icon="mdi-exclamation-thick">{{ e.msg }}</v-banner>
+            <v-list-item v-for="(e, index) in errors" :key="index">
+                <v-banner color="error" icon="$error">
+                    <v-banner-text>
+                        {{ e }}
+                    </v-banner-text>
+                </v-banner>
             </v-list-item>
         </v-list>
     </v-row>
@@ -10,7 +14,7 @@
 <script>
 export default {
     props: {
-        errors: {}
+        errors: []
     }
 }
 </script>
diff --git a/src/views/contracts/ContractEdit.vue b/src/views/contracts/ContractEdit.vue
index 89d4c24..bd1860e 100644
--- a/src/views/contracts/ContractEdit.vue
+++ b/src/views/contracts/ContractEdit.vue
@@ -4,9 +4,9 @@
             <v-container>
                 <v-row>
                     <v-col cols="6">
-                        <v-text-field readonly variant="solo" prepend-icon="mdi-magnify" @click:prepend="showCustomerSearch" label="Customer" :model-value="contract.customer.acc_no + ' - ' + contract.customer.name">
+                        <v-text-field readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showCustomerSearch" label="Customer" :model-value="contract.customer.acc_no + ' - ' + contract.customer.name">
                         </v-text-field>
-                        <v-text-field type="number" variant="solo" label="Tonnage Per Month" v-model="contract.tonnage_per_month"></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>
@@ -22,12 +22,10 @@
                 <v-table density="compact">
                     <thead>
                         <tr>
-                            <th>
-                            </th>
-                            <th>
+                            <th style="width:65%;">
                                 Product
                             </th>
-                            <th>
+                            <th style="width:20%">
                                 Price
                             </th>
                             <th>
@@ -37,13 +35,10 @@
                     <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>
+                                <v-text-field readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showProductSearch(index)" :model-value="p.code + ' - ' + p.name"></v-text-field>
                             </td>
                             <td>
-                                {{ p.code }} - {{ p.name }}
-                            </td>
-                            <td>
-                                <v-text-field type="number" density="compact" variant="underlined" v-model="p.price"></v-text-field>
+                                <v-text-field prepend-icon="mdi-currency-gbp" 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>
@@ -51,26 +46,26 @@
                         </tr>
                     </tbody>
                 </v-table>
-                    <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" variant="outlined" v-model="contract.comments"></v-textarea>
-                            <v-textarea rows=3 label="Office Comments" variant="outlined" v-model="contract.office_comments"></v-textarea>
-                        </v-col>
-                    </v-row>
-                    <ErrorBanner :errors="errors" />
+                <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" variant="outlined" v-model="contract.comments"></v-textarea>
+                        <v-textarea rows=3 label="Office Comments" variant="outlined" v-model="contract.office_comments"></v-textarea>
+                    </v-col>
+                </v-row>
             </v-container>
         </v-card-text>
+        <ErrorBanner :errors="errors" />
         <v-card-actions>
             <v-btn v-if="!contract.isNew" color="red-darken-1"
                                           variant="text"
@@ -90,8 +85,8 @@
     <v-dialog v-model="search[1]">
         <ProductSearch @returnProduct="setProduct"></ProductSearch>
     </v-dialog>
-    </template>
-    <script>
+</template>
+<script>
 import axios from 'axios'
 import DatePicker from '@vuepic/vue-datepicker'
 import ErrorBanner from '@/components/ErrorBanner.vue'
@@ -128,6 +123,7 @@ export default {
             customer_search: null,
             customers_loading: false,
             customers: [],
+            errors: []
         }
     },
     computed: {
@@ -160,6 +156,7 @@ export default {
             this.searchProdIndex = num
         },
         async saveContract(){
+            this.errors = []
             this.saving = true
             let url = this.$api_url + "/customers/contracts/" + this.contract.no + "/save"
             if (this.contract.isNew) {
@@ -171,13 +168,18 @@ export default {
                 console.log("Saved Contract : " + JSON.stringify(resp.data))
                 this.saving = false
                 if (resp.data == true) {
-                    if (this.contract.isNew) {
-                        this.$emit('contractupdate', resp.data)
+                    let stat = resp.data
+                    if (stat.status == true ) {
+                        if (this.contract.isNew) {
+                            this.$emit('contractupdate', resp.data)
+                        } else {
+                            this.$emit('contractupdate', resp.data)
+                        }
                     } else {
-                        this.$emit('contractupdate', resp.data)
+                        this.errors.push("Error Saving... ")
                     }
                 } else {
-                    this.error("Contract not saved.")
+                    this.errors.push("Contract not saved.")
                     console.log("Not Saved")
                 }
             }).catch(err => {
diff --git a/src/views/medfeeds/MedFeedsEdit.vue b/src/views/medfeeds/MedFeedsEdit.vue
index f09cd30..86efda1 100644
--- a/src/views/medfeeds/MedFeedsEdit.vue
+++ b/src/views/medfeeds/MedFeedsEdit.vue
@@ -4,16 +4,16 @@
             <v-container>
                 <v-row>
                     <v-col cols="6">
-                        <v-text-field label="Customer" readonly variant="outlined" prepend-icon="mdi-magnify" @click:prepend="showCustomerSearch" :model-value="mf.customer.acc_no + ' - ' + mf.customer.name">
+                        <v-text-field label="Customer" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showCustomerSearch" :model-value="mf.customer.acc_no + ' - ' + mf.customer.name">
                         </v-text-field>
-                        <v-text-field label="Vet" readonly variant="outlined" prepend-icon="mdi-magnify" @click:prepend="showVetSearch" :model-value="mf.vet.practice">
+                        <v-text-field label="Vet" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showVetSearch" :model-value="mf.vet.practice">
                         </v-text-field>
 
                     </v-col>
                     <v-col cols="6">
                         <v-card title="Medication :">
                             <v-card-text>
-                                <v-text-field label="Medication" readonly variant="outlined" prepend-icon="mdi-magnify" @click:prepend="showMedSearch" :model-value="mf.medication.name">
+                                <v-text-field label="Medication" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showMedSearch" :model-value="mf.medication.name">
                                 </v-text-field>
                                 <template v-for="(i, idx) in mf.medication.info" :key="idx" >
                                     <template v-if="i != ''">
@@ -28,7 +28,7 @@
                 </v-row>
                 <v-row>
                     <v-col cols="12">
-                        <v-text-field label="Product" readonly variant="outlined" prepend-icon="mdi-magnify" @click:prepend="showProductSearch" :model-value="mf.product.code + ' - ' + mf.product.name">
+                        <v-text-field label="Product" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showProductSearch" :model-value="mf.product.code + ' - ' + mf.product.name">
                         </v-text-field>
                     </v-col>
                     <v-col cols="6">
@@ -51,11 +51,7 @@
                 </v-row>
             </v-container>
         </v-card-text>
-        <v-banner icon="$error" color="error" v-if="error != ''">
-            <v-banner-text>
-                {{ error }}
-            </v-banner-text>
-        </v-banner>
+                <ErrorBanner :errors="errors" />
         <v-card-actions>
             <v-btn v-if="!mf.isNew" color="red-darken-1"
                                     variant="text"
@@ -113,7 +109,7 @@ export default {
             products: [],
             search: [],
             searching: {},
-            error: ""
+            errors: []
         }
     },
     computed: {
@@ -131,7 +127,7 @@ export default {
             this.$emit('closetab','list')
         },
         saveMedFeed(medfeed) {
-            this.error = ""
+            this.errors = []
             let url = this.$api_url + "/customers/medicated-feeds/" + this.mf.id + "/save"
             console.log("Saving Med Feed...")
             axios.put(url,{
@@ -142,7 +138,7 @@ export default {
                     if (stat.status == true ) {
                         this.$emit('medfeedupdated')
                     } else {
-                        this.error = "Error Saving... "
+                        this.errors.push("Error Saving... ")
                     }
                 })
                 .catch(err => {