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

complaints now in new format

Browse source
This commit is contained in:
Paul Wilde 2023-03-24 16:07:47 +00:00
parent 28e97f1c7f
commit ded985353a
4 changed files with 209 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/components/ComplaintInfo.vue Normal file
View 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
View 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
View 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>

190
src/views/complaints/ComplaintsList.vue
View file

@ -1,15 +1,13 @@
<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 <v-text-field
clearable clearable
label="Search" label="Search"
@ -17,100 +15,57 @@
v-model="searchQuery" v-model="searchQuery"
density="compact" density="compact"
append-inner-icon="mdi-magnify"></v-text-field> append-inner-icon="mdi-magnify"></v-text-field>
<v-switch color="blue" label="Show Only Active" v-model="showActive"></v-switch> <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text">Add</v-btn>
<v-btn v-if="site_info.features.addcomplaint" color="warning">+ Add</v-btn> <v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
</v-responsive> <v-card variant="outlined">
<v-table> <RecycleScroller class="scroller"
<thead> :items="filteredComplaints"
<tr> :item-size="100"
<th>Comp No</th> v-slot="{ item }"
<th>Date</th> key-field="id">
<th>Order</th> <v-row dense class="item" :class="{ 'bg-red-lighten-5' : item.at_risk }">
<th>Acc No</th> <v-col cols="4">
<th>Name</th> Complaint : {{ item.id }}<br/>
<th>Reason</th> <span class="text-caption">
<th>Active</th> Complaint Date : {{ item.complaint_date }}<br/>
<th></th> Sales Order: {{ item.sop.doc_no }}<br/>
</tr>
</thead>
<tbody>
<tr v-if="loading">
<td colspan=7>
<img class="loading" src="/images/icons/loading.gif"/>
</td>
</tr>
<template v-for="complaint in filteredComplaints" :key="complaint.id">
<tr :class="{ at_risk : complaint.at_risk, cust_at_risk: complaint.customer.at_risk }">
<td>{{ complaint.id }}</td>
<td>{{ complaint.complaint_date }}</td>
<td>{{ complaint.sop.doc_no }}</td>
<td>{{ complaint.customer.acc_no }}</td>
<td>{{ complaint.customer.name }}
</td>
<td>{{ complaint.reason }}</td>
<td>
<img class="icon" v-if="complaint.active" v-bind:alt="complaint.active" v-bind:title="complaint.active" src="/images/icons/Live.png"/>
</td>
<td>
<v-btn @click="showInfo(complaint)">
<span v-if="complaint.info_shown">
Hide
</span> </span>
<span v-else> </v-col>
View <v-col cols="4" class="text-body-2">
</span> {{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
</v-btn> Reason : {{ item.reason }}<br/>
</td> Driver : {{ item.driver.name }}
</tr> </v-col>
<tr v-if="complaint.info_shown"> <v-col cols=4>
<template v-if="complaint.info"> <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
<template v-if="complaint.info_loaded"> <v-row>
<td colspan=4> <v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon>
{{ complaint.info.comments }} <v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
<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>
<v-row dense nogutters> <v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
<v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox(complaint)" /> <v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
<v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox(complaint)" /> </div>
</v-col>
</v-row> </v-row>
</v-form> </RecycleScroller>
</v-container> </v-card>
</td> </v-col>
<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>