better search on contract edit
This commit is contained in:
parent
b19a24842d
commit
b6dfa61f04
1 changed files with 139 additions and 70 deletions
|
|
@ -4,22 +4,10 @@
|
||||||
<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>
|
||||||
|
|
@ -32,8 +20,39 @@
|
||||||
</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">
|
||||||
<v-row>
|
<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-col cols="6">
|
||||||
<v-autocomplete
|
<v-autocomplete
|
||||||
label="Product Code"
|
label="Product Code"
|
||||||
|
|
@ -48,14 +67,7 @@
|
||||||
cache-items
|
cache-items
|
||||||
@click:append="searchProducts()"></v-autocomplete>
|
@click:append="searchProducts()"></v-autocomplete>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4">
|
</v-row>-->
|
||||||
<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-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>
|
||||||
|
|
@ -89,6 +101,40 @@
|
||||||
@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"
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue