better search on contract edit

This commit is contained in:
Paul Wilde 2023-03-20 15:27:10 +00:00
parent b19a24842d
commit b6dfa61f04

View file

@ -4,27 +4,15 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="6"> <v-col cols="6">
<v-autocomplete <v-text-field readonly="true" variant="none" prepend-icon="mdi-magnify" @click:prepend="showCustomerSearch">
label="Customer" {{ contract.customer.acc_no }} - {{ contract.customer.name }}
v-model="contract.customer.acc_no" </v-text-field>
v-model:search="customer_search" <v-text-field type="number" variant="outlined" label="Tonnage Per Month" v-model="contract.tonnage_per_month"></v-text-field>
: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-col> </v-col>
<v-col cols="6"> <v-col cols="6">
<label> <label>
Start Date 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><br />
<label> <label>
Finish Date Finish Date
@ -32,63 +20,121 @@
</label><br /> </label><br />
</v-col> </v-col>
</v-row> </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-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-col cols="4">
<v-text-field type="number" label="Price" v-model="p.price"></v-text-field> <v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
</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-col> </v-col>
</v-row> </v-row>
</template> <v-row>
<v-row> <v-col cols="6">
<v-col cols="4"> <label>
<v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn> Agree Date
</v-col> <DatePicker v-model="contract.agree_date" format="dd/MM/yyyy" />
</v-row> </label>
<v-row> </v-col>
<v-col cols="6"> <v-col cols="12">
<label> <v-textarea rows=3 label="Comments" v-model="contract.comments"></v-textarea>
Agree Date <v-textarea rows=3 label="Office Comments" v-model="contract.office_comments"></v-textarea>
<DatePicker v-model="contract.agree_date" format="dd/MM/yyyy" /> </v-col>
</label> </v-row>
</v-col> <ErrorBanner :errors="errors" />
<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-container>
</v-card-text> </v-card-text>
<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"
@click="saveContract(selected_contract)">Save</v-btn> @click="saveContract(selected_contract)">Save</v-btn>
<v-btn v-if="contract.isNew" color="red-darken-1" <v-btn v-if="contract.isNew" color="red-darken-1"
variant="text" variant="text"
@click="saveContract(selected_contract)">Add</v-btn> @click="saveContract(selected_contract)">Add</v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="blue-darken-1" <v-btn color="blue-darken-1"
variant="text" variant="text"
@click="close">Close</v-btn> @click="close">Close</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </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> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
@ -108,11 +154,6 @@ export default {
setcontract(newval) { setcontract(newval) {
this.contract = newval this.contract = newval
}, },
customer_search(val) {
if (val && val.length > 2) {
this.searchCustomers(val)
}
}
}, },
mixins: [methods], mixins: [methods],
data() { data() {
@ -120,6 +161,8 @@ export default {
contract: this.setcontract, contract: this.setcontract,
dialog: this.opendialog, dialog: this.opendialog,
saving: false, saving: false,
search: [],
searchProdIndex: null,
product_search: null, product_search: null,
products_loading: false, products_loading: false,
products: [], products: [],
@ -144,6 +187,18 @@ export default {
addProduct() { addProduct() {
this.contract.products.push(new Product()) 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(){ async saveContract(){
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"
@ -156,11 +211,11 @@ 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) { if (this.contract.isNew) {
this.$emit('contractupdate', resp.data) this.$emit('contractupdate', resp.data)
} else { } else {
this.$emit('contractupdate', resp.data) this.$emit('contractupdate', resp.data)
} }
} else { } else {
this.error("Contract not saved.") this.error("Contract not saved.")
console.log("Not Saved") console.log("Not Saved")
@ -170,8 +225,9 @@ export default {
this.saving = false this.saving = false
}) })
}, },
async searchCustomers(name) { async searchCustomers() {
let url = this.$api_url + "/customers/search/" + name this.customers_loading = true
let url = this.$api_url + "/customers/search/" + this.customer_search
axios.get(url) axios.get(url)
.then(resp => { .then(resp => {
this.customers = resp.data this.customers = resp.data
@ -179,8 +235,12 @@ export default {
.catch(err => { .catch(err => {
console.log(err) console.log(err)
}) })
.finally(() => {
this.customers_loading = false
})
}, },
searchProducts() { searchProducts() {
this.products_loading = true
console.log("Searching for " & this.product_search) console.log("Searching for " & this.product_search)
let url = this.$api_url + "/products/search/" + this.product_search let url = this.$api_url + "/products/search/" + this.product_search
axios.get(url) axios.get(url)
@ -191,9 +251,18 @@ export default {
.catch(err => { .catch(err => {
console.log(err) console.log(err)
}) })
.finally(() => {
this.products_loading = false
})
}, },
productCodeName(p) { productCodeName(p) {
return p.code + ' - ' + p.name 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
} }
} }
} }