complaints now in new format
This commit is contained in:
parent
28e97f1c7f
commit
ded985353a
4 changed files with 209 additions and 140 deletions
110
src/components/ComplaintInfo.vue
Normal file
110
src/components/ComplaintInfo.vue
Normal file
|
@ -0,0 +1,110 @@
|
||||||
|
<template>
|
||||||
|
<v-card :class="{ 'bg-red-lighten-5' : complaint.at_risk }">
|
||||||
|
<v-card-title>
|
||||||
|
Complaint Info : {{ complaint.id }}
|
||||||
|
<v-icon v-if="complaint.active" icon="mdi-play" title="Active"></v-icon>
|
||||||
|
<v-icon v-if="complaint.at_risk" color="red" icon="mdi-exclamation" title="At Risk"></v-icon>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-subtitle>
|
||||||
|
{{ complaint.customer.acc_no }} - {{ complaint.customer.name }}<br/>
|
||||||
|
{{ formatDate(complaint.complaint_date,"DD/MM/YYYY") }}
|
||||||
|
</v-card-subtitle>
|
||||||
|
<v-card-text>
|
||||||
|
Reason: {{ complaint.reason }}<br/>
|
||||||
|
Driver: {{ complaint.driver.name }}<br/>
|
||||||
|
Delivery Date {{ formatDate(complaint.delivery_date,"DD/MM/YYYY") }}<br/>
|
||||||
|
Order : {{ complaint.sop.doc_no }}<br/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-subtitle>
|
||||||
|
<v-progress-linear indeterminate :active="info_loading">
|
||||||
|
</v-progress-linear>
|
||||||
|
Comments
|
||||||
|
</v-card-subtitle>
|
||||||
|
<v-card-text>
|
||||||
|
{{ complaint.info.comments }}
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-subtitle>
|
||||||
|
Info
|
||||||
|
</v-card-subtitle>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols=4>
|
||||||
|
<v-row dense nogutters>
|
||||||
|
<v-checkbox label="1" type="checkbox" v-model="complaint.info.one" @change="changeComplaintCheckbox()" />
|
||||||
|
<v-checkbox label="2" v-model="complaint.info.two" @change="changeComplaintCheckbox()"/>
|
||||||
|
<v-checkbox label="3" v-model="complaint.info.three" @change="changeComplaintCheckbox()"/>
|
||||||
|
</v-row>
|
||||||
|
<v-row dense nogutters>
|
||||||
|
<v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox()" />
|
||||||
|
<v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox()" />
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Complaint from '@/types/ComplaintType.vue'
|
||||||
|
import methods from '@/CommonMethods.vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
in_complaint: new Complaint()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
in_complaint(){
|
||||||
|
this.complaint = this.in_complaint
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [methods],
|
||||||
|
emits: ["return"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
complaint: this.in_complaint,
|
||||||
|
info_loading: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getComplaintInfo() {
|
||||||
|
this.info_loading = true
|
||||||
|
let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info"
|
||||||
|
console.log("Getting Complaint Info...")
|
||||||
|
axios.get(url)
|
||||||
|
.then(resp =>{
|
||||||
|
this.complaint.info = resp.data
|
||||||
|
this.info_loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeComplaintCheckbox() {
|
||||||
|
let set = this.setComplaintStatus()
|
||||||
|
if (this.complaint.at_risk && set && this.complaint.info.one && this.complaint.info.two && this.complaint.info.three) {
|
||||||
|
console.log("Contract no longer at risk")
|
||||||
|
this.complaint.at_risk = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setComplaintStatus() {
|
||||||
|
this.info_loading = true
|
||||||
|
let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info/set"
|
||||||
|
console.log("Getting Complaint Info...")
|
||||||
|
axios.post(url, {
|
||||||
|
one: this.complaint.info.one,
|
||||||
|
two: this.complaint.info.two,
|
||||||
|
three: this.complaint.info.three,
|
||||||
|
at_risk: this.complaint.at_risk,
|
||||||
|
permanent: this.complaint.info.permanent
|
||||||
|
}).then(resp => {
|
||||||
|
let stat = resp.data
|
||||||
|
console.log(stat)
|
||||||
|
this.getComplaintInfo()
|
||||||
|
this.info_loading = false
|
||||||
|
})
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getComplaintInfo()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
9
src/types/ComplaintInfoType.vue
Normal file
9
src/types/ComplaintInfoType.vue
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
export default class ComplaintInfo {
|
||||||
|
one = false
|
||||||
|
two = false
|
||||||
|
three = false
|
||||||
|
permanent = false
|
||||||
|
comments = ""
|
||||||
|
}
|
||||||
|
</script>
|
16
src/types/ComplaintType.vue
Normal file
16
src/types/ComplaintType.vue
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<script>
|
||||||
|
import Customer from '@/types/CustomerType.vue'
|
||||||
|
import ComplaintInfo from '@/types/ComplaintInfoType.vue'
|
||||||
|
export default class Complaint {
|
||||||
|
id = 0
|
||||||
|
complaint_date = ""
|
||||||
|
delivery_date = ""
|
||||||
|
reason = ""
|
||||||
|
sop = {}
|
||||||
|
at_risk = false
|
||||||
|
driver = ""
|
||||||
|
info = new ComplaintInfo()
|
||||||
|
customer = new Customer()
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -1,116 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<h3>Complaints</h3>
|
<h3>Complaints</h3>
|
||||||
<v-tabs v-model="tab" fixed-tabs>
|
<v-tabs v-model="tab" >
|
||||||
<v-tab title="List" v-model="list" />
|
<v-tab title="List" v-model="list" />
|
||||||
<v-tab title="Edit" v-model="edit" v-if="edit" />
|
<v-tab title="Edit" v-model="edit" v-if="edit" />
|
||||||
<v-tab title="Report" v-model="report" v-if="report" />
|
<v-tab title="Report" v-model="report" v-if="report" />
|
||||||
</v-tabs>
|
</v-tabs>
|
||||||
<v-window v-model="tab">
|
<v-window v-model="tab">
|
||||||
<v-window-item v-model="list">
|
<v-window-item v-model="list">
|
||||||
<v-responsive
|
<v-col cols="12" xs="12" sm="12" md="12" lg=8>
|
||||||
max-width="500"
|
<v-text-field
|
||||||
>
|
clearable
|
||||||
<v-text-field
|
label="Search"
|
||||||
clearable
|
variant="outlined"
|
||||||
label="Search"
|
v-model="searchQuery"
|
||||||
variant="outlined"
|
density="compact"
|
||||||
v-model="searchQuery"
|
append-inner-icon="mdi-magnify"></v-text-field>
|
||||||
density="compact"
|
<v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text">Add</v-btn>
|
||||||
append-inner-icon="mdi-magnify"></v-text-field>
|
<v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
|
||||||
<v-switch color="blue" label="Show Only Active" v-model="showActive"></v-switch>
|
<v-card variant="outlined">
|
||||||
<v-btn v-if="site_info.features.addcomplaint" color="warning">+ Add</v-btn>
|
<RecycleScroller class="scroller"
|
||||||
</v-responsive>
|
:items="filteredComplaints"
|
||||||
<v-table>
|
:item-size="100"
|
||||||
<thead>
|
v-slot="{ item }"
|
||||||
<tr>
|
key-field="id">
|
||||||
<th>Comp No</th>
|
<v-row dense class="item" :class="{ 'bg-red-lighten-5' : item.at_risk }">
|
||||||
<th>Date</th>
|
<v-col cols="4">
|
||||||
<th>Order</th>
|
Complaint : {{ item.id }}<br/>
|
||||||
<th>Acc No</th>
|
<span class="text-caption">
|
||||||
<th>Name</th>
|
Complaint Date : {{ item.complaint_date }}<br/>
|
||||||
<th>Reason</th>
|
Sales Order: {{ item.sop.doc_no }}<br/>
|
||||||
<th>Active</th>
|
</span>
|
||||||
<th></th>
|
</v-col>
|
||||||
</tr>
|
<v-col cols="4" class="text-body-2">
|
||||||
</thead>
|
{{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
|
||||||
<tbody>
|
Reason : {{ item.reason }}<br/>
|
||||||
<tr v-if="loading">
|
Driver : {{ item.driver.name }}
|
||||||
<td colspan=7>
|
</v-col>
|
||||||
<img class="loading" src="/images/icons/loading.gif"/>
|
<v-col cols=4>
|
||||||
</td>
|
<div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
|
||||||
</tr>
|
<v-row>
|
||||||
<template v-for="complaint in filteredComplaints" :key="complaint.id">
|
<v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon>
|
||||||
<tr :class="{ at_risk : complaint.at_risk, cust_at_risk: complaint.customer.at_risk }">
|
<v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
|
||||||
<td>{{ complaint.id }}</td>
|
</v-row>
|
||||||
<td>{{ complaint.complaint_date }}</td>
|
<v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
|
||||||
<td>{{ complaint.sop.doc_no }}</td>
|
<v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
|
||||||
<td>{{ complaint.customer.acc_no }}</td>
|
</div>
|
||||||
<td>{{ complaint.customer.name }}
|
</v-col>
|
||||||
</td>
|
</v-row>
|
||||||
<td>{{ complaint.reason }}</td>
|
</RecycleScroller>
|
||||||
<td>
|
</v-card>
|
||||||
<img class="icon" v-if="complaint.active" v-bind:alt="complaint.active" v-bind:title="complaint.active" src="/images/icons/Live.png"/>
|
</v-col>
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<v-btn @click="showInfo(complaint)">
|
|
||||||
<span v-if="complaint.info_shown">
|
|
||||||
Hide
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
View
|
|
||||||
</span>
|
|
||||||
</v-btn>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="complaint.info_shown">
|
|
||||||
<template v-if="complaint.info">
|
|
||||||
<template v-if="complaint.info_loaded">
|
|
||||||
<td colspan=4>
|
|
||||||
{{ complaint.info.comments }}
|
|
||||||
<br />
|
|
||||||
<sub>- {{ complaint.info.added_by }}</sub>
|
|
||||||
</td>
|
|
||||||
<td colspan=2>
|
|
||||||
<v-container>
|
|
||||||
<v-form :disabled="complaint.info.loading">
|
|
||||||
<v-row dense nogutters>
|
|
||||||
<v-checkbox label="1" type="checkbox" v-model="complaint.info.one" @change="changeComplaintCheckbox(complaint)" />
|
|
||||||
<v-checkbox label="2" v-model="complaint.info.two" @change="changeComplaintCheckbox(complaint)"/>
|
|
||||||
<v-checkbox label="3" v-model="complaint.info.three" @change="changeComplaintCheckbox(complaint)"/>
|
|
||||||
</v-row>
|
|
||||||
<v-row dense nogutters>
|
|
||||||
<v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox(complaint)" />
|
|
||||||
<v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox(complaint)" />
|
|
||||||
</v-row>
|
|
||||||
</v-form>
|
|
||||||
</v-container>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<img v-if="complaint.info.loading" class="loading" src="/images/icons/loading.gif"/>
|
|
||||||
<template v-else>
|
|
||||||
<v-btn v-if="site_info.features.editcomplaint" color="warning">Edit</v-btn>
|
|
||||||
</template>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<td colspan=6>
|
|
||||||
<img class="loading" src="/images/icons/loading.gif"/>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
</tbody>
|
|
||||||
</v-table>
|
|
||||||
</v-window-item>
|
</v-window-item>
|
||||||
</v-window>
|
</v-window>
|
||||||
|
<v-dialog v-model="showComplaintInfo">
|
||||||
|
<ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
|
||||||
|
</v-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import ComplaintInfo from '@/components/ComplaintInfo.vue'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
site_info:{},
|
site_info:{},
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
ComplaintInfo
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tab: "list",
|
tab: "list",
|
||||||
|
@ -121,7 +76,9 @@ export default {
|
||||||
limit: 300,
|
limit: 300,
|
||||||
searchQuery: "",
|
searchQuery: "",
|
||||||
edit: false,
|
edit: false,
|
||||||
report: false
|
report: false,
|
||||||
|
showComplaintInfo: false,
|
||||||
|
selected_complaint: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -145,7 +102,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getComplaintsList(){
|
getComplaintsList(){
|
||||||
this.loading = true
|
this.loading = true
|
||||||
let url = this.$api_url + "/customers/complaints/list"
|
let url = this.$api_url + "/customers/complaints/list"
|
||||||
console.log("Getting Complaint list...")
|
console.log("Getting Complaint list...")
|
||||||
|
@ -160,49 +117,26 @@ export default {
|
||||||
this.listreceived = true
|
this.listreceived = true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
async getComplaintInfo(complaint) {
|
showInfo(complaint) {
|
||||||
complaint.info.loading = true
|
this.showComplaintInfo = true
|
||||||
let url = this.$api_url + "/customers/complaints/" + complaint.id + "/info"
|
this.selected_complaint = complaint
|
||||||
console.log("Getting Complaint Info...")
|
|
||||||
axios.get(url)
|
|
||||||
.then(resp =>{
|
|
||||||
complaint.info = resp.data
|
|
||||||
complaint.info.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async showInfo(complaint) {
|
|
||||||
console.log(complaint.id)
|
|
||||||
complaint.info_loaded = false
|
complaint.info_loaded = false
|
||||||
complaint.info_shown = !complaint.info_shown
|
|
||||||
if (complaint.info_shown) {
|
|
||||||
complaint.info = await this.getComplaintInfo(complaint)
|
|
||||||
complaint.info_loaded = true
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
async changeComplaintCheckbox(complaint) {
|
doInfoReturn(code) {
|
||||||
let set = await this.setComplaintStatus(complaint)
|
console.log(code)
|
||||||
if (complaint.at_risk && set && complaint.info.one && complaint.info.two && complaint.info.three) {
|
|
||||||
console.log("Contract no longer at risk")
|
|
||||||
complaint.at_risk = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async setComplaintStatus(complaint) {
|
|
||||||
complaint.info.loading = true
|
|
||||||
let url = this.$api_url + "/customers/complaints/" + complaint.id + "/info/set"
|
|
||||||
console.log("Getting Complaint Info...")
|
|
||||||
axios.post(url, {
|
|
||||||
one: complaint.info.one,
|
|
||||||
two: complaint.info.two,
|
|
||||||
three: complaint.info.three,
|
|
||||||
at_risk: complaint.at_risk,
|
|
||||||
permanent: complaint.info.permanent
|
|
||||||
}).then(resp => {
|
|
||||||
console.log(resp.data)
|
|
||||||
this.getComplaintInfo(complaint)
|
|
||||||
complaint.info_loaded = true
|
|
||||||
})
|
|
||||||
return true
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
.item {
|
||||||
|
height: 100px;
|
||||||
|
overflow-y:hidden;
|
||||||
|
padding: 0 1em;
|
||||||
|
margin-bottom:2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue