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:{
|
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",
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue