better customer screen WIP
This commit is contained in:
parent
b78da566d9
commit
c5fd049d07
3 changed files with 81 additions and 43 deletions
|
|
@ -47,13 +47,21 @@
|
|||
</template>
|
||||
</template>
|
||||
<v-divider></v-divider>
|
||||
<v-footer >
|
||||
<sub>{{ site_info.name }} v{{ site_info.version }}</sub>
|
||||
<v-footer>
|
||||
<v-banner>
|
||||
<v-banner-text>
|
||||
<sub>{{ site_info.name }}<br/>
|
||||
BE v{{ site_info.version }}<br/>
|
||||
FE v{{ appVersion }}
|
||||
</sub>
|
||||
</v-banner-text>
|
||||
</v-banner>
|
||||
</v-footer>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { version } from "@/../package.json"
|
||||
export default{
|
||||
name: "MyNav",
|
||||
props: {
|
||||
|
|
@ -79,6 +87,7 @@ export default{
|
|||
},
|
||||
data(){
|
||||
return {
|
||||
appVersion: version,
|
||||
items: [],
|
||||
drawer: null,
|
||||
drawer2: false
|
||||
|
|
|
|||
|
|
@ -8,5 +8,6 @@ export default class Customer {
|
|||
full_title = "";
|
||||
at_risk = false;
|
||||
address = new CustomerAddress();
|
||||
notes = {}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,47 @@
|
|||
<template>
|
||||
<h3>Customer List</h3>
|
||||
<v-responsive
|
||||
max-width="500"
|
||||
>
|
||||
<v-text-field
|
||||
clearable
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
v-model="searchQuery"
|
||||
density="compact"
|
||||
append-inner-icon="mdi-magnify"></v-text-field>
|
||||
</v-responsive>
|
||||
<RecycleScroller
|
||||
class="scroller"
|
||||
:items="filteredCustomers"
|
||||
:item-size="50"
|
||||
key-field="acc_no"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<v-row class="customer">
|
||||
<v-col cols="6">
|
||||
{{ item.acc_no }} - {{ item.name }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
<hr />
|
||||
</RecycleScroller>
|
||||
<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="50"
|
||||
key-field="acc_no"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<v-list-item @click="getCustomerNotes(item)">
|
||||
<template v-slot:title>
|
||||
{{ item.acc_no }} - {{ item.name }}
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-btn color="info">Contracts</v-btn>
|
||||
<v-btn color="warning">Med Feeds</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</RecycleScroller>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm=12 lg=6>
|
||||
<h3>Notes <v-btn color="warning" size="smaller" variant="text" icon="mdi-plus"></v-btn></h3>
|
||||
<v-progress-linear color="blue" :active="notes_loading" indeterminate>
|
||||
</v-progress-linear>
|
||||
<v-list>
|
||||
<v-list-item v-for="item in notes" :key="item.id">
|
||||
{{ item.text }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
|
@ -36,12 +53,12 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
searchQuery: "",
|
||||
showSearch: true,
|
||||
open: false,
|
||||
list: [],
|
||||
customer_list: [],
|
||||
customers_loading: null,
|
||||
limit: 5000,
|
||||
loading: true,
|
||||
listreceived: false
|
||||
listreceived: false,
|
||||
notes_loading: null,
|
||||
notes: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -52,7 +69,7 @@ export default {
|
|||
if (!this.listreceived){
|
||||
this.getCustomerList()
|
||||
}
|
||||
let clist = this.list.filter(q =>
|
||||
let clist = this.customer_list.filter(q =>
|
||||
q.name.toLowerCase().includes(query) ||
|
||||
q.acc_no.includes(query)
|
||||
)
|
||||
|
|
@ -60,30 +77,41 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
getCustomerNotes(cust){
|
||||
this.notes_loading = true
|
||||
let url = this.$api_url + "/customers/" + cust + "/notes"
|
||||
axios.get(url)
|
||||
.then(resp => {
|
||||
this.notes = resp.data
|
||||
})
|
||||
.catch(error => (console.log(error)))
|
||||
.finally(() => {
|
||||
this.notes_loading = false
|
||||
})
|
||||
},
|
||||
async getCustomerList() {
|
||||
this.loading = true
|
||||
this.customers_loading = true
|
||||
let url = this.$api_url + "/customers/list"
|
||||
axios
|
||||
.get(url,{
|
||||
params: { limit: this.limit, query: this.searchQuery }})
|
||||
.then(resp => {
|
||||
this.list = resp.data
|
||||
this.customer_list = resp.data
|
||||
this.listreceived = true
|
||||
this.loading = false
|
||||
})
|
||||
.catch(error => (console.log(error)))
|
||||
.finally(() => {
|
||||
this.customers_loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.scroller {
|
||||
height: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
.customer {
|
||||
height: 32%;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.scroller.small {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue