better looking complaint ticks

src/components/ComplaintInfo.vue

@@ -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 indeterminate :active="info_loading">
-        </v-progress-linear>
+            </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-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 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-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() {
+        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")
                 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,
+                checks: JSON.stringify(this.complaint.info.checks),
-                two: this.complaint.info.two,
-                three: this.complaint.info.three,
                 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
         },

src/types/ComplaintInfoType.vue

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

src/views/complaints/ComplaintsList.vue

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