better error banner

This commit is contained in:
Paul Wilde 2023-03-23 20:36:07 +00:00
parent 8195e81657
commit 43ab44794c
3 changed files with 52 additions and 50 deletions

View file

@ -1,8 +1,12 @@
<template> <template>
<v-row> <v-row>
<v-list> <v-list>
<v-list-item v-for="e in errors" :key="e.id"> <v-list-item v-for="(e, index) in errors" :key="index">
<v-banner color="error" icon="mdi-exclamation-thick">{{ e.msg }}</v-banner> <v-banner color="error" icon="$error">
<v-banner-text>
{{ e }}
</v-banner-text>
</v-banner>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-row> </v-row>
@ -10,7 +14,7 @@
<script> <script>
export default { export default {
props: { props: {
errors: {} errors: []
} }
} }
</script> </script>

View file

@ -4,9 +4,9 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="6"> <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>
<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>
<v-col cols="6"> <v-col cols="6">
<label> <label>
@ -22,12 +22,10 @@
<v-table density="compact"> <v-table density="compact">
<thead> <thead>
<tr> <tr>
<th> <th style="width:65%;">
</th>
<th>
Product Product
</th> </th>
<th> <th style="width:20%">
Price Price
</th> </th>
<th> <th>
@ -37,13 +35,10 @@
<tbody> <tbody>
<tr v-for="(p, index) in contract.products" :key="index"> <tr v-for="(p, index) in contract.products" :key="index">
<td> <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>
<td> <td>
{{ p.code }} - {{ p.name }} <v-text-field prepend-icon="mdi-currency-gbp" type="number" density="compact" variant="outlined" v-model="p.price"></v-text-field>
</td>
<td>
<v-text-field type="number" density="compact" variant="underlined" v-model="p.price"></v-text-field>
</td> </td>
<td> <td>
<v-btn size="small" color="error" title="Remove" variant="plain" @click="removeProduct(p.code)" icon="mdi-minus"></v-btn> <v-btn size="small" color="error" title="Remove" variant="plain" @click="removeProduct(p.code)" icon="mdi-minus"></v-btn>
@ -51,26 +46,26 @@
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
<v-row> <v-row>
<v-col cols="4"> <v-col cols="4">
<v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn> <v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col cols="6"> <v-col cols="6">
<label> <label>
Agree Date Agree Date
<DatePicker v-model="contract.agree_date" format="dd/MM/yyyy" /> <DatePicker v-model="contract.agree_date" format="dd/MM/yyyy" />
</label> </label>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-textarea rows=3 label="Comments" variant="outlined" v-model="contract.comments"></v-textarea> <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-textarea rows=3 label="Office Comments" variant="outlined" v-model="contract.office_comments"></v-textarea>
</v-col> </v-col>
</v-row> </v-row>
<ErrorBanner :errors="errors" />
</v-container> </v-container>
</v-card-text> </v-card-text>
<ErrorBanner :errors="errors" />
<v-card-actions> <v-card-actions>
<v-btn v-if="!contract.isNew" color="red-darken-1" <v-btn v-if="!contract.isNew" color="red-darken-1"
variant="text" variant="text"
@ -90,8 +85,8 @@
<v-dialog v-model="search[1]"> <v-dialog v-model="search[1]">
<ProductSearch @returnProduct="setProduct"></ProductSearch> <ProductSearch @returnProduct="setProduct"></ProductSearch>
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
import DatePicker from '@vuepic/vue-datepicker' import DatePicker from '@vuepic/vue-datepicker'
import ErrorBanner from '@/components/ErrorBanner.vue' import ErrorBanner from '@/components/ErrorBanner.vue'
@ -128,6 +123,7 @@ export default {
customer_search: null, customer_search: null,
customers_loading: false, customers_loading: false,
customers: [], customers: [],
errors: []
} }
}, },
computed: { computed: {
@ -160,6 +156,7 @@ export default {
this.searchProdIndex = num this.searchProdIndex = num
}, },
async saveContract(){ async saveContract(){
this.errors = []
this.saving = true this.saving = true
let url = this.$api_url + "/customers/contracts/" + this.contract.no + "/save" let url = this.$api_url + "/customers/contracts/" + this.contract.no + "/save"
if (this.contract.isNew) { if (this.contract.isNew) {
@ -171,13 +168,18 @@ export default {
console.log("Saved Contract : " + JSON.stringify(resp.data)) console.log("Saved Contract : " + JSON.stringify(resp.data))
this.saving = false this.saving = false
if (resp.data == true) { if (resp.data == true) {
if (this.contract.isNew) { let stat = resp.data
this.$emit('contractupdate', resp.data) if (stat.status == true ) {
if (this.contract.isNew) {
this.$emit('contractupdate', resp.data)
} else {
this.$emit('contractupdate', resp.data)
}
} else { } else {
this.$emit('contractupdate', resp.data) this.errors.push("Error Saving... ")
} }
} else { } else {
this.error("Contract not saved.") this.errors.push("Contract not saved.")
console.log("Not Saved") console.log("Not Saved")
} }
}).catch(err => { }).catch(err => {

View file

@ -4,16 +4,16 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="6"> <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>
<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-text-field>
</v-col> </v-col>
<v-col cols="6"> <v-col cols="6">
<v-card title="Medication :"> <v-card title="Medication :">
<v-card-text> <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> </v-text-field>
<template v-for="(i, idx) in mf.medication.info" :key="idx" > <template v-for="(i, idx) in mf.medication.info" :key="idx" >
<template v-if="i != ''"> <template v-if="i != ''">
@ -28,7 +28,7 @@
</v-row> </v-row>
<v-row> <v-row>
<v-col cols="12"> <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-text-field>
</v-col> </v-col>
<v-col cols="6"> <v-col cols="6">
@ -51,11 +51,7 @@
</v-row> </v-row>
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-banner icon="$error" color="error" v-if="error != ''"> <ErrorBanner :errors="errors" />
<v-banner-text>
{{ error }}
</v-banner-text>
</v-banner>
<v-card-actions> <v-card-actions>
<v-btn v-if="!mf.isNew" color="red-darken-1" <v-btn v-if="!mf.isNew" color="red-darken-1"
variant="text" variant="text"
@ -113,7 +109,7 @@ export default {
products: [], products: [],
search: [], search: [],
searching: {}, searching: {},
error: "" errors: []
} }
}, },
computed: { computed: {
@ -131,7 +127,7 @@ export default {
this.$emit('closetab','list') this.$emit('closetab','list')
}, },
saveMedFeed(medfeed) { saveMedFeed(medfeed) {
this.error = "" this.errors = []
let url = this.$api_url + "/customers/medicated-feeds/" + this.mf.id + "/save" let url = this.$api_url + "/customers/medicated-feeds/" + this.mf.id + "/save"
console.log("Saving Med Feed...") console.log("Saving Med Feed...")
axios.put(url,{ axios.put(url,{
@ -142,7 +138,7 @@ export default {
if (stat.status == true ) { if (stat.status == true ) {
this.$emit('medfeedupdated') this.$emit('medfeedupdated')
} else { } else {
this.error = "Error Saving... " this.errors.push("Error Saving... ")
} }
}) })
.catch(err => { .catch(err => {