better customer screen WIP

src/components/MyNav.vue

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

src/types/CustomerType.vue

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

src/views/customers/CustomerList.vue

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