package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmc_fe",
-  "version": "0.1.1",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/MyNav.vue

@@ -47,21 +47,13 @@
                 </template>
             </template>
             <v-divider></v-divider>
-            <v-footer>
+            <v-footer >
-                <v-banner>
+                <sub>{{ site_info.name }} v{{ site_info.version }}</sub>
-                    <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: {
@@ -87,7 +79,6 @@ export default{
     },
     data(){
         return {
-            appVersion: version,
             items: [],
             drawer: null,
             drawer2: false

src/types/CustomerType.vue

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

src/views/customers/CustomerList.vue

@@ -1,47 +1,30 @@
 <template>
-    <v-text-field 
+    <h3>Customer List</h3>
-        clearable
+    <v-responsive
-        label="Search"
+            max-width="500"
-        variant="outlined"
+            >
-        v-model="searchQuery"
+            <v-text-field 
-        density="compact"
+            clearable
-        append-inner-icon="mdi-magnify"></v-text-field>
+            label="Search"
-    <v-row>
+            variant="outlined"
-        <v-col cols="12" sm=12 lg=6>
+            v-model="searchQuery"
-            <h3>Customer List</h3>
+            density="compact"
-            <v-progress-linear color="blue" :active="customers_loading" indeterminate>
+            append-inner-icon="mdi-magnify"></v-text-field>
-            </v-progress-linear>
+    </v-responsive>
-            <v-list>
+        <RecycleScroller
-                <RecycleScroller
+                class="scroller"
-                        class="scroller"
+                :items="filteredCustomers"
-                        :items="filteredCustomers"
+                :item-size="50"
-                        :item-size="50"
+                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 }} 
+                    </v-col>
-                            </template>
+                </v-row>
-                <template v-slot:append>
+                <hr />
-                    <v-btn color="info">Contracts</v-btn>
+        </RecycleScroller>
-                    <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';
@@ -53,12 +36,12 @@ export default {
     data() {
         return {
             searchQuery: "",
-            customer_list: [],
+            showSearch: true,
-            customers_loading: null,
+            open: false,
+            list: [],
             limit: 5000,
-            listreceived: false,
+            loading: true,
-            notes_loading: null,
+            listreceived: false
-            notes: []
         }
     },
     components: {
@@ -69,7 +52,7 @@ export default {
             if (!this.listreceived){
                 this.getCustomerList()
             }
-            let clist = this.customer_list.filter(q =>
+            let clist = this.list.filter(q =>
                 q.name.toLowerCase().includes(query) || 
                 q.acc_no.includes(query)
             )
@@ -77,41 +60,30 @@ 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.customers_loading = true
+            this.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.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;
 }
-.scroller.small {
+.customer {
-    height: 200px;
+  height: 32%;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
 }
 </style>