131 lines
4.7 KiB
Vue
131 lines
4.7 KiB
Vue
<template>
|
|
<v-text-field
|
|
clearable
|
|
label="Search"
|
|
variant="outlined"
|
|
v-model="searchQuery"
|
|
density="compact"
|
|
append-inner-icon="mdi-magnify"></v-text-field>
|
|
<v-row>
|
|
<v-col cols="12" sm=12 lg=6>
|
|
<h3>Customer List</h3>
|
|
<v-progress-linear color="blue" :active="customers_loading" indeterminate>
|
|
</v-progress-linear>
|
|
<v-list>
|
|
<RecycleScroller
|
|
class="scroller"
|
|
:items="filteredCustomers"
|
|
:item-size="60"
|
|
key-field="acc_no"
|
|
v-slot="{ item }"
|
|
>
|
|
<v-list-item >
|
|
<template v-slot:title >
|
|
<v-card @click="getCustomerInfo(item)">
|
|
{{ item.acc_no }} - {{ item.name }}:
|
|
<span class="text-caption">{{ item.address.line_1 }}, {{ item.address.line_2 }}, <br/>
|
|
{{ item.address.city }}, {{ item.address.county}}, {{ item.address.postcode }},
|
|
</span>
|
|
</v-card>
|
|
</template>
|
|
<template v-slot:append>
|
|
<v-btn @click.prevent="goToContracts(item)" class="text-none" color="blue-lighten-1" title="View Contracts">
|
|
Contracts
|
|
<v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count">
|
|
</v-badge>
|
|
</v-btn>
|
|
<v-btn @click.prevent="goToMedFeeds(item)" class="text-none" color="orange-lighten-1" title="View Med Feeds">
|
|
Med Feeds
|
|
<v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count">
|
|
</v-badge>
|
|
</v-btn>
|
|
</template>
|
|
</v-list-item>
|
|
</RecycleScroller>
|
|
</v-list>
|
|
<RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders>
|
|
</v-col>
|
|
<v-col cols="12" sm=12 lg=6>
|
|
<CustomerComments :customer="selected_cust"></CustomerComments>
|
|
<br/>
|
|
<RecentOrders :customer="selected_cust" doc_status="2"></RecentOrders>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
<script>
|
|
import axios from 'axios';
|
|
import RecentOrders from '@/components/RecentOrders.vue'
|
|
import CustomerComments from '@/components/CustomerComments.vue'
|
|
import Customer from '@/types/CustomerType.vue'
|
|
export default {
|
|
props: {
|
|
site_info: {},
|
|
user_info: {}
|
|
},
|
|
data() {
|
|
return {
|
|
searchQuery: "",
|
|
customer_list: [],
|
|
customers_loading: null,
|
|
selected_cust: new Customer(),
|
|
limit: 5000,
|
|
listreceived: false,
|
|
}
|
|
},
|
|
components: {
|
|
RecentOrders,
|
|
CustomerComments
|
|
},
|
|
computed: {
|
|
filteredCustomers() {
|
|
let query = this.searchQuery.toLowerCase()
|
|
if (!this.listreceived){
|
|
this.getCustomerList()
|
|
}
|
|
let clist = this.customer_list.filter(q =>
|
|
q.name.toLowerCase().includes(query) ||
|
|
q.acc_no.includes(query) ||
|
|
q.address.line_1.toLowerCase().includes(query) ||
|
|
q.address.line_2.toLowerCase().includes(query) ||
|
|
q.address.city.toLowerCase().includes(query) ||
|
|
q.address.postcode.toLowerCase().includes(query)
|
|
)
|
|
return clist
|
|
},
|
|
},
|
|
methods: {
|
|
getCustomerInfo(c) {
|
|
this.selected_cust = c
|
|
},
|
|
goToContracts(c){
|
|
this.$router.push('/customers/contracts/list/' + c.id)
|
|
},
|
|
goToMedFeeds(c){
|
|
this.$router.push('/customers/medicated-feeds/list/' + c.id)
|
|
},
|
|
async getCustomerList() {
|
|
this.customers_loading = true
|
|
let url = this.$api_url + "/customers/list"
|
|
axios
|
|
.get(url,{
|
|
params: { limit: this.limit, query: this.searchQuery }})
|
|
.then(resp => {
|
|
this.customer_list = resp.data
|
|
this.listreceived = true
|
|
})
|
|
.catch(error => (console.log(error)))
|
|
.finally(() => {
|
|
this.customers_loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.scroller {
|
|
height: 300px;
|
|
}
|
|
.scroller.small {
|
|
height: 200px;
|
|
}
|
|
</style>
|