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

created customer search component

Browse source
This commit is contained in:
Paul Wilde 2023-03-20 22:04:16 +00:00
parent 814fe233e4
commit 0caeb1d859
2 changed files with 75 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/CustomerSearch.vue Normal file
View 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>

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

@ -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
}
}
}