better looking complaint ticks
This commit is contained in:
parent
d357201b06
commit
86378a58c3
3 changed files with 63 additions and 19 deletions
|
|
@ -16,8 +16,8 @@
|
|||
Order : {{ complaint.sop.doc_no }}<br/>
|
||||
</v-card-text>
|
||||
<v-card-subtitle>
|
||||
<v-progress-linear indeterminate :active="info_loading">
|
||||
</v-progress-linear>
|
||||
<v-progress-linear indeterminate :active="info_loading">
|
||||
</v-progress-linear>
|
||||
Comments
|
||||
</v-card-subtitle>
|
||||
<v-card-text>
|
||||
|
|
@ -30,13 +30,27 @@
|
|||
<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-btn-toggle dark multiple background-color="primary">
|
||||
<v-btn :active="complaint.info.checks[1]"
|
||||
:loading="loading[1]"
|
||||
@click="clickComplaintCheckbox(1)">1</v-btn>
|
||||
<v-btn :active="complaint.info.checks[2]"
|
||||
:loading="loading[2]"
|
||||
@click="clickComplaintCheckbox(2)">2</v-btn>
|
||||
<v-btn :active="complaint.info.checks[3]"
|
||||
:loading="loading[3]"
|
||||
@click="clickComplaintCheckbox(3)">3</v-btn>
|
||||
</v-btn-toggle>
|
||||
</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-btn-toggle dark multiple background-color="primary">
|
||||
<v-btn :active="complaint.at_risk"
|
||||
:loading="loading[4]"
|
||||
@click="clickAtRisk">At Risk</v-btn>
|
||||
<v-btn :active="complaint.info.permanent"
|
||||
:loading="loading[5]"
|
||||
@click="clickPermanent">Permanent</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
@ -63,7 +77,17 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
complaint: this.in_complaint,
|
||||
info_loading: true
|
||||
info_loading: true,
|
||||
loading: [false, false, false, false, false, false]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isThreeDone() {
|
||||
let c = this.complaint.info.checks
|
||||
if (c[1] && c[2] && c[3]) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
@ -77,21 +101,39 @@ export default {
|
|||
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) {
|
||||
checkComplaintStatus(){
|
||||
if (!this.complaint.info.permanent && this.complaint.at_risk && this.isThreeDone) {
|
||||
console.log("Contract no longer at risk")
|
||||
this.complaint.at_risk = false
|
||||
}
|
||||
},
|
||||
setComplaintStatus() {
|
||||
clickAtRisk(){
|
||||
this.loading[4] = true
|
||||
this.complaint.at_risk = !this.complaint.at_risk
|
||||
if (this.setComplaintStatus(4)) {
|
||||
this.checkComplaintStatus()
|
||||
}
|
||||
},
|
||||
clickComplaintCheckbox(box) {
|
||||
this.loading[box] = true
|
||||
this.complaint.info.checks[box] = !this.complaint.info.checks[box]
|
||||
if (this.setComplaintStatus(box)) {
|
||||
this.checkComplaintStatus()
|
||||
}
|
||||
},
|
||||
clickPermanent(){
|
||||
this.loading[5] = true
|
||||
this.complaint.info.permanent = !this.complaint.info.permanent
|
||||
if (this.setComplaintStatus(5)) {
|
||||
this.checkComplaintStatus()
|
||||
}
|
||||
},
|
||||
setComplaintStatus(idx) {
|
||||
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,
|
||||
checks: JSON.stringify(this.complaint.info.checks),
|
||||
at_risk: this.complaint.at_risk,
|
||||
permanent: this.complaint.info.permanent
|
||||
}).then(resp => {
|
||||
|
|
@ -99,6 +141,10 @@ export default {
|
|||
console.log(stat)
|
||||
this.getComplaintInfo()
|
||||
this.info_loading = false
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
}).finally(() => {
|
||||
this.loading[idx] = false
|
||||
})
|
||||
return true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<script>
|
||||
export default class ComplaintInfo {
|
||||
one = false
|
||||
two = false
|
||||
three = false
|
||||
checks = [false, false, false, false]
|
||||
permanent = false
|
||||
comments = ""
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
:item-size="100"
|
||||
v-slot="{ item }"
|
||||
key-field="id">
|
||||
<v-row dense class="item" :class="{ 'bg-red-lighten-5' : item.at_risk }">
|
||||
<v-row dense class="item" :class="{ 'bg-red-lighten-4' : item.at_risk }">
|
||||
<v-col cols="4">
|
||||
Complaint : {{ item.id }}<br/>
|
||||
<span class="text-caption">
|
||||
|
|
|
|||
Loading…
Reference in a new issue