created customer search component
This commit is contained in:
parent
814fe233e4
commit
0caeb1d859
2 changed files with 75 additions and 46 deletions
67
src/components/CustomerSearch.vue
Normal file
67
src/components/CustomerSearch.vue
Normal file
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<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>
|
||||
<RecycleScroller class="scroller"
|
||||
:items="filteredCustomers"
|
||||
:item-size="50"
|
||||
v-slot="{ item }"
|
||||
key-field="acc_no"
|
||||
>
|
||||
<v-list-item>
|
||||
<v-btn icon="mdi-arrow-right" title="select" @click="selectCustomer(item)" size="small" color="success"></v-btn>
|
||||
{{ item.acc_no }} - {{ item.name }}
|
||||
</v-list-item>
|
||||
</RecycleScroller>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customer_search: "",
|
||||
customers_loading: null,
|
||||
customers: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredCustomers(){
|
||||
if (this.customer_search == null){
|
||||
return []
|
||||
}
|
||||
let query = this.customer_search.toLowerCase()
|
||||
let clist = this.customers.filter(q =>
|
||||
q.name.toLowerCase().includes(query) ||
|
||||
q.acc_no.includes(query)
|
||||
)
|
||||
return clist
|
||||
},
|
||||
},
|
||||
emits: ['returnCustomer'],
|
||||
methods: {
|
||||
selectCustomer(cust){
|
||||
this.$emit('returnCustomer',cust)
|
||||
},
|
||||
searchCustomers() {
|
||||
this.customers_loading = true
|
||||
let url = this.$api_url + "/customers/search/" + this.customer_search
|
||||
axios.get(url)
|
||||
.then(resp => {
|
||||
this.customers = resp.data
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
.finally(() => {
|
||||
this.customers_loading = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -102,26 +102,7 @@
|
|||
</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>
|
||||
<RecycleScroller class="scroller"
|
||||
:items="filteredCustomers"
|
||||
:item-size="50"
|
||||
v-slot="{ item }"
|
||||
key-field="acc_no"
|
||||
>
|
||||
<v-list-item>
|
||||
<v-btn icon="mdi-arrow-right" title="select" @click="contract.customer = item; search[0] = false" size="small" color="success"></v-btn>
|
||||
{{ item.acc_no }} - {{ item.name }}
|
||||
</v-list-item>
|
||||
</RecycleScroller>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<CustomerSearch @returnCustomer="setCustomer"></CustomerSearch>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="search[1]">
|
||||
<ProductSearch @returnProduct="setProduct"></ProductSearch>
|
||||
|
@ -134,6 +115,7 @@ import ErrorBanner from '@/components/ErrorBanner.vue'
|
|||
import methods from '@/CommonMethods.vue'
|
||||
import Product from '@/types/ProductType.vue'
|
||||
import ProductSearch from '@/components/ProductSearch.vue'
|
||||
import CustomerSearch from '@/components/CustomerSearch.vue'
|
||||
export default {
|
||||
props: {
|
||||
setcontract: {}
|
||||
|
@ -141,7 +123,8 @@ export default {
|
|||
components: {
|
||||
DatePicker,
|
||||
ErrorBanner,
|
||||
ProductSearch
|
||||
ProductSearch,
|
||||
CustomerSearch
|
||||
},
|
||||
watch: {
|
||||
setcontract(newval) {
|
||||
|
@ -165,17 +148,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
filteredCustomers(){
|
||||
if (this.customer_search == null){
|
||||
return []
|
||||
}
|
||||
let query = this.customer_search.toLowerCase()
|
||||
let clist = this.customers.filter(q =>
|
||||
q.name.toLowerCase().includes(query) ||
|
||||
q.acc_no.includes(query)
|
||||
)
|
||||
return clist
|
||||
},
|
||||
title() {
|
||||
if ( this.contract.isNew ) {
|
||||
return "New Contract"
|
||||
|
@ -229,20 +201,6 @@ export default {
|
|||
this.saving = false
|
||||
})
|
||||
},
|
||||
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
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
.finally(() => {
|
||||
this.customers_loading = false
|
||||
})
|
||||
},
|
||||
productCodeName(p) {
|
||||
return p.code + ' - ' + p.name
|
||||
},
|
||||
|
@ -251,6 +209,10 @@ export default {
|
|||
p.price = q.price
|
||||
this.contract.products[this.searchProdIndex] = p
|
||||
this.search[1] = false
|
||||
},
|
||||
setCustomer(c){
|
||||
this.contract.customer = c
|
||||
this.search[0] = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue