better search on contract edit
This commit is contained in:
parent
b19a24842d
commit
b6dfa61f04
|
|
@ -4,27 +4,15 @@
|
|||
<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>
|
||||
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>
|
||||
Finish Date
|
||||
|
|
@ -32,63 +20,121 @@
|
|||
</label><br />
|
||||
</v-col>
|
||||
</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-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-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-btn @click="addProduct()" v-if="contract.products.length < 4">+ Add Product</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<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" 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-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" 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-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn v-if="!contract.isNew" color="red-darken-1"
|
||||
variant="text"
|
||||
@click="saveContract(selected_contract)">Save</v-btn>
|
||||
variant="text"
|
||||
@click="saveContract(selected_contract)">Save</v-btn>
|
||||
<v-btn v-if="contract.isNew" color="red-darken-1"
|
||||
variant="text"
|
||||
@click="saveContract(selected_contract)">Add</v-btn>
|
||||
variant="text"
|
||||
@click="saveContract(selected_contract)">Add</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue-darken-1"
|
||||
variant="text"
|
||||
@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"
|
||||
|
|
@ -156,11 +211,11 @@ export default {
|
|||
console.log("Saved Contract : " + JSON.stringify(resp.data))
|
||||
this.saving = false
|
||||
if (resp.data == true) {
|
||||
if (this.contract.isNew) {
|
||||
if (this.contract.isNew) {
|
||||
this.$emit('contractupdate', resp.data)
|
||||
} else {
|
||||
this.$emit('contractupdate', resp.data)
|
||||
}
|
||||
} else {
|
||||
this.$emit('contractupdate', resp.data)
|
||||
}
|
||||
} else {
|
||||
this.error("Contract not saved.")
|
||||
console.log("Not Saved")
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue