better looking complaint ticks

This commit is contained in:
Paul Wilde 2023-03-27 09:50:39 +01:00
parent d357201b06
commit 86378a58c3
3 changed files with 63 additions and 19 deletions

View file

@ -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
},

View file

@ -1,8 +1,6 @@
<script>
export default class ComplaintInfo {
one = false
two = false
three = false
checks = [false, false, false, false]
permanent = false
comments = ""
}

View file

@ -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">