work towards comments

This commit is contained in:
Paul Wilde 2023-03-21 13:02:06 +00:00
parent 5f021f8d5c
commit 623b107f65
4 changed files with 128 additions and 26 deletions

View file

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

View file

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

View file

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

View file

@ -15,36 +15,48 @@
<RecycleScroller <RecycleScroller
class="scroller" class="scroller"
:items="filteredCustomers" :items="filteredCustomers"
:item-size="50" :item-size="60"
key-field="acc_no" key-field="acc_no"
v-slot="{ item }" v-slot="{ item }"
> >
<v-list-item @click="getCustomerNotes(item)"> <v-list-item @click="getCustomerComments(item)">
<template v-slot:title> <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>
<v-btn color="warning">Med Feeds</v-btn>
</template> </template>
<template v-slot:append>
<v-btn color="info">Contracts</v-btn>
<v-btn color="warning">Med Feeds</v-btn>
</template>
</v-list-item> </v-list-item>
</RecycleScroller> </RecycleScroller>
</v-list> </v-list>
</v-col> </v-col>
<v-col cols="12" sm=12 lg=6> <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-progress-linear>
<v-list> <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-item>
</v-list> </v-list>
</v-col> </v-col>
</v-row> </v-row>
<v-dialog v-model="dialog[0]">
<AddNote :customer="selected_cust" @return="closeAddNote"></AddNote>
</v-dialog>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios';
import AddNote from '@/components/AddNote.vue'
export default { export default {
props: { props: {
site_info: {}, site_info: {},
@ -55,13 +67,17 @@ export default {
searchQuery: "", searchQuery: "",
customer_list: [], customer_list: [],
customers_loading: null, customers_loading: null,
selected_cust: null,
limit: 5000, limit: 5000,
listreceived: false, listreceived: false,
notes_loading: null, comments_loading: null,
notes: [] comments: [],
active_changing: false,
dialog: {}
} }
}, },
components: { components: {
AddNote
}, },
computed: { computed: {
filteredCustomers() { filteredCustomers() {
@ -71,23 +87,64 @@ export default {
} }
let clist = this.customer_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) ||
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 return clist
}, },
}, },
methods: { 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) axios.get(url)
.then(resp => { .then(resp => {
this.notes = resp.data this.comments = resp.data
}) })
.catch(error => (console.log(error))) .catch(error => (console.log(error)))
.finally(() => { .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() { async getCustomerList() {
this.customers_loading = true this.customers_loading = true