psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

work towards comments

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/components/AddNote.vue Normal file
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>

1
src/components/MyNav.vue
View file

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

3
src/router/index.js
View file

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

87
src/views/customers/CustomerList.vue
View file

@ -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>
<v-progress-linear color="blue" :active="notes_loading" indeterminate>
<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="comments_loading" indeterminate>
</v-progress-linear>
<v-list>
<v-list-item v-for="item in notes" :key="item.id">
{{ item.text }}
<v-list-item v-for="item in comments" :key="item.id">
{{ 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,
notes: []
comments_loading: null,
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){
this.notes_loading = true
let url = this.$api_url + "/customers/" + cust.acc_no + "/notes"
showAddNote(){
this.dialog[0] = true
},
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() {