work towards comments

src/components/AddNote.vue

@@ -0,0 +1,47 @@
+<template>
+    <v-card title="Add Comment">
+        <v-card-text>
+            <p>Add new comment for : {{ customer.acc_no }} - {{ customer.name }}</p>
+            <v-textarea v-model="comment" label="Comment"></v-textarea>
+        </v-card-text>
+        <v-card-actions>
+            <v-btn color="blue" @click="saveComment">Save</v-btn>
+            <v-spacer></v-spacer>
+            <v-btn color="grey" @click="$emit('return','cancel')">Cancel</v-btn>
+        </v-card-actions>
+
+    </v-card>
+</template>
+<script>
+import axios from 'axios'
+export default {
+    props: {
+        customer: null
+    },
+    data(){
+        return {
+            comment: "",
+            saving: false
+        }
+    },
+    methods: {
+        saveComment() {
+            this.saving = true
+            let url = this.$api_url + "/customers/" + this.customer.acc_no + "/comments"
+            axios.put(url, {
+                comment: this.comment
+            })
+                .then(resp => {
+                    console.log(resp.data)
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+                .finally(() => {
+                    this.saving = false
+                    this.$emit('return',"saved")
+                })
+        }
+    }
+}
+</script>

src/components/MyNav.vue

@@ -101,7 +101,6 @@ export default{
     methods:{
         get_menu() {
             let items = []
-            items.push({title: "Dashboard", value:"/about"})
             items.push({title: "Customers",
                 value:"/customers",
                 children:[{title:"List",

src/router/index.js

@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 const AboutView = () => import('../views/AboutView.vue')
 const LoginPage = () => import('../views/LoginPage.vue')
 const LogOut = () => import('../components/LogOut.vue')
@@ -13,7 +12,7 @@ const routes = [
     {
         path: '/',
         name: 'home',
-        component: HomeView
+        component: CustomerList
     },
     {
         path: '/about',

src/views/customers/CustomerList.vue

@@ -15,13 +15,16 @@
                 <RecycleScroller
                         class="scroller"
                         :items="filteredCustomers"
-                        :item-size="50"
+                        :item-size="60"
                         key-field="acc_no"
                         v-slot="{ item }"
                         >
-                        <v-list-item @click="getCustomerNotes(item)">
+                        <v-list-item @click="getCustomerComments(item)">
                             <template v-slot:title>
-                                {{ item.acc_no }} - {{ item.name }} 
+                                {{ 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>
                             </template>
                             <template v-slot:append>
                                 <v-btn color="info">Contracts</v-btn>
@@ -32,19 +35,28 @@
             </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>
+            <h3>Comments <v-btn v-if="selected_cust != null" color="warning" size="smaller" variant="text" icon="mdi-plus" @click="showAddNote"></v-btn></h3>
-            <v-progress-linear color="blue" :active="notes_loading" indeterminate>
+            <v-progress-linear color="blue" :active="comments_loading" indeterminate>
             </v-progress-linear>
             <v-list>
-                <v-list-item v-for="item in notes" :key="item.id">
+                <v-list-item v-for="item in comments" :key="item.id">
-                    {{ item.text }}
+                    {{ item.comment }}
+                    <template v-slot:append>
+                        <v-icon v-if="item.actioned" icon="mdi-tick" color="green" title="Actioned"></v-icon>
+                        <v-btn v-if="item.active" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-play" color="blue" title="Active"></v-btn>
+                        <v-btn v-if="!item.active" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-pause" title="Inactive"></v-btn>
+                    </template>
                 </v-list-item>
             </v-list>
         </v-col>
     </v-row>
+    <v-dialog v-model="dialog[0]">
+        <AddNote :customer="selected_cust" @return="closeAddNote"></AddNote>
+    </v-dialog>
 </template>
 <script>
 import axios from 'axios';
+import AddNote from '@/components/AddNote.vue'
 export default {
     props: {
         site_info: {},
@@ -55,13 +67,17 @@ export default {
             searchQuery: "",
             customer_list: [],
             customers_loading: null,
+            selected_cust: null,
             limit: 5000,
             listreceived: false,
-            notes_loading: null,
+            comments_loading: null,
-            notes: []
+            comments: [],
+            active_changing: false,
+            dialog: {}
         }
     },
     components: {
+        AddNote
     },
     computed: {
         filteredCustomers() {
@@ -71,22 +87,63 @@ export default {
             }
             let clist = this.customer_list.filter(q =>
                 q.name.toLowerCase().includes(query) || 
-                q.acc_no.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: {
-        getCustomerNotes(cust){
+        showAddNote(){
-            this.notes_loading = true
+            this.dialog[0] = true
-            let url = this.$api_url + "/customers/" + cust.acc_no + "/notes"
+        },
+        closeAddNote(e){
+            this.dialog[0] = false
+            if (e == "saved"){
+                this.getCustomerComments(this.selected_cust)
+            }
+        },
+        getCustomerComments(cust){
+            this.selected_cust = cust
+            this.comments_loading = true
+            let url = this.$api_url + "/customers/" + cust.acc_no + "/comments"
             axios.get(url)
                 .then(resp => {
-                this.notes = resp.data
+                    this.comments = resp.data
                 })
                 .catch(error => (console.log(error)))
                 .finally(() => {
-                this.notes_loading = false
+                    this.comments_loading = false
+                })
+        },
+        toggleActiveState(cmt){
+            cmt.active_changing = true
+            let url = this.$api_url + "/customers/comments/" + cmt.id + "/active"
+            axios.put(url,{
+                state: !cmt.active
+            })
+                .then(resp => {
+                    console.log(resp.data)
+                    this.getActiveState(cmt)
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+        },
+        getActiveState(cmt) {
+            let url = this.$api_url + "/customers/comments/" + cmt.id + "/active"
+            axios.get(url)
+                .then(resp => {
+                    cmt.active = resp.data
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+                .finally(() => {
+                    cmt.active_changing = false
                 })
         },
         async getCustomerList() {