better customer screen WIP

This commit is contained in:
Paul Wilde 2023-03-20 18:13:10 +00:00
parent b78da566d9
commit c5fd049d07
3 changed files with 81 additions and 43 deletions

View file

@ -48,12 +48,20 @@
</template> </template>
<v-divider></v-divider> <v-divider></v-divider>
<v-footer> <v-footer>
<sub>{{ site_info.name }} v{{ site_info.version }}</sub> <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-footer>
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>
<script> <script>
import { version } from "@/../package.json"
export default{ export default{
name: "MyNav", name: "MyNav",
props: { props: {
@ -79,6 +87,7 @@ export default{
}, },
data(){ data(){
return { return {
appVersion: version,
items: [], items: [],
drawer: null, drawer: null,
drawer2: false drawer2: false

View file

@ -8,5 +8,6 @@ export default class Customer {
full_title = ""; full_title = "";
at_risk = false; at_risk = false;
address = new CustomerAddress(); address = new CustomerAddress();
notes = {}
} }
</script> </script>

View file

@ -1,8 +1,4 @@
<template> <template>
<h3>Customer List</h3>
<v-responsive
max-width="500"
>
<v-text-field <v-text-field
clearable clearable
label="Search" label="Search"
@ -10,7 +6,12 @@
v-model="searchQuery" v-model="searchQuery"
density="compact" density="compact"
append-inner-icon="mdi-magnify"></v-text-field> append-inner-icon="mdi-magnify"></v-text-field>
</v-responsive> <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 <RecycleScroller
class="scroller" class="scroller"
:items="filteredCustomers" :items="filteredCustomers"
@ -18,13 +19,29 @@
key-field="acc_no" key-field="acc_no"
v-slot="{ item }" v-slot="{ item }"
> >
<v-row class="customer"> <v-list-item @click="getCustomerNotes(item)">
<v-col cols="6"> <template v-slot:title>
{{ item.acc_no }} - {{ item.name }} {{ 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-col>
</v-row> </v-row>
<hr />
</RecycleScroller>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios';
@ -36,12 +53,12 @@ export default {
data() { data() {
return { return {
searchQuery: "", searchQuery: "",
showSearch: true, customer_list: [],
open: false, customers_loading: null,
list: [],
limit: 5000, limit: 5000,
loading: true, listreceived: false,
listreceived: false notes_loading: null,
notes: []
} }
}, },
components: { components: {
@ -52,7 +69,7 @@ export default {
if (!this.listreceived){ if (!this.listreceived){
this.getCustomerList() this.getCustomerList()
} }
let clist = this.list.filter(q => let clist = this.customer_list.filter(q =>
q.name.toLowerCase().includes(query) || q.name.toLowerCase().includes(query) ||
q.acc_no.includes(query) q.acc_no.includes(query)
) )
@ -60,18 +77,32 @@ export default {
}, },
}, },
methods: { 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() { async getCustomerList() {
this.loading = true this.customers_loading = true
let url = this.$api_url + "/customers/list" let url = this.$api_url + "/customers/list"
axios axios
.get(url,{ .get(url,{
params: { limit: this.limit, query: this.searchQuery }}) params: { limit: this.limit, query: this.searchQuery }})
.then(resp => { .then(resp => {
this.list = resp.data this.customer_list = resp.data
this.listreceived = true this.listreceived = true
this.loading = false
}) })
.catch(error => (console.log(error))) .catch(error => (console.log(error)))
.finally(() => {
this.customers_loading = false
})
} }
} }
} }
@ -80,10 +111,7 @@ export default {
.scroller { .scroller {
height: 500px; height: 500px;
} }
.customer { .scroller.small {
height: 32%; height: 200px;
padding: 0 12px;
display: flex;
align-items: center;
} }
</style> </style>