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

@ -16,8 +16,8 @@
Order : {{ complaint.sop.doc_no }}<br/> Order : {{ complaint.sop.doc_no }}<br/>
</v-card-text> </v-card-text>
<v-card-subtitle> <v-card-subtitle>
<v-progress-linear indeterminate :active="info_loading"> <v-progress-linear indeterminate :active="info_loading">
</v-progress-linear> </v-progress-linear>
Comments Comments
</v-card-subtitle> </v-card-subtitle>
<v-card-text> <v-card-text>
@ -30,13 +30,27 @@
<v-row> <v-row>
<v-col cols=4> <v-col cols=4>
<v-row dense nogutters> <v-row dense nogutters>
<v-checkbox label="1" type="checkbox" v-model="complaint.info.one" @change="changeComplaintCheckbox()" /> <v-btn-toggle dark multiple background-color="primary">
<v-checkbox label="2" v-model="complaint.info.two" @change="changeComplaintCheckbox()"/> <v-btn :active="complaint.info.checks[1]"
<v-checkbox label="3" v-model="complaint.info.three" @change="changeComplaintCheckbox()"/> :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>
<v-row dense nogutters> <v-row dense nogutters>
<v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox()" /> <v-btn-toggle dark multiple background-color="primary">
<v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox()" /> <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-row>
</v-col> </v-col>
</v-row> </v-row>
@ -63,7 +77,17 @@ export default {
data() { data() {
return { return {
complaint: this.in_complaint, 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:{ methods:{
@ -77,21 +101,39 @@ export default {
this.info_loading = false this.info_loading = false
}) })
}, },
changeComplaintCheckbox() { checkComplaintStatus(){
let set = this.setComplaintStatus() if (!this.complaint.info.permanent && this.complaint.at_risk && this.isThreeDone) {
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") console.log("Contract no longer at risk")
this.complaint.at_risk = false 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 this.info_loading = true
let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info/set" let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info/set"
console.log("Getting Complaint Info...") console.log("Getting Complaint Info...")
axios.post(url, { axios.post(url, {
one: this.complaint.info.one, checks: JSON.stringify(this.complaint.info.checks),
two: this.complaint.info.two,
three: this.complaint.info.three,
at_risk: this.complaint.at_risk, at_risk: this.complaint.at_risk,
permanent: this.complaint.info.permanent permanent: this.complaint.info.permanent
}).then(resp => { }).then(resp => {
@ -99,6 +141,10 @@ export default {
console.log(stat) console.log(stat)
this.getComplaintInfo() this.getComplaintInfo()
this.info_loading = false this.info_loading = false
}).catch(err => {
console.log(err)
}).finally(() => {
this.loading[idx] = false
}) })
return true return true
}, },

View file

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

View file

@ -23,7 +23,7 @@
:item-size="100" :item-size="100"
v-slot="{ item }" v-slot="{ item }"
key-field="id"> 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"> <v-col cols="4">
Complaint : {{ item.id }}<br/> Complaint : {{ item.id }}<br/>
<span class="text-caption"> <span class="text-caption">