better search on contract edit
This commit is contained in:
parent
b19a24842d
commit
b6dfa61f04
1 changed files with 139 additions and 70 deletions
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue