work towards comments
This commit is contained in:
parent
5f021f8d5c
commit
623b107f65
4 changed files with 128 additions and 26 deletions
47
src/components/AddNote.vue
Normal file
47
src/components/AddNote.vue
Normal 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>
|
|
@ -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",
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -15,36 +15,48 @@
|
|||
<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>
|
||||
<v-btn color="warning">Med Feeds</v-btn>
|
||||
</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>
|
||||
<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,23 +87,64 @@ 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
|
||||
})
|
||||
.catch(error => (console.log(error)))
|
||||
.finally(() => {
|
||||
this.notes_loading = false
|
||||
.then(resp => {
|
||||
this.comments = resp.data
|
||||
})
|
||||
.catch(error => (console.log(error)))
|
||||
.finally(() => {
|
||||
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() {
|
||||
this.customers_loading = true
|
||||
|
|
Loading…
Reference in a new issue