psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

better search on contract edit

Browse source
This commit is contained in:
Paul Wilde 2023-03-20 15:27:10 +00:00
parent b19a24842d
commit b6dfa61f04
1 changed files with 139 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/views/contracts/ContractEdit.vue
View file

@ -4,22 +4,10 @@
<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>
@ -32,8 +20,39 @@
</label><br />
</v-col>
</v-row>
<template v-for="(p, index) in contract.products" :key="index">
<v-row>
<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"
@ -48,14 +67,7 @@
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-col>
</v-row>
</template>
</v-row>-->
<v-row>
<v-col cols="4">
<v-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
@ -89,6 +101,40 @@
@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"
@ -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
}
}
}