src/components/ComplaintInfo.vue

@@ -30,27 +30,13 @@
             <v-row>
                 <v-col cols=4>
                     <v-row dense nogutters>
-                        <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-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-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-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>
@@ -77,17 +63,7 @@ export default {
     data() {
         return {
             complaint: this.in_complaint,
-            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
+            info_loading: true
         }
     },
     methods:{
@@ -101,39 +77,21 @@ export default {
                     this.info_loading = false
                 })
         },
-        checkComplaintStatus(){
-            if (!this.complaint.info.permanent && this.complaint.at_risk && this.isThreeDone) {
+        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
             }
         },
-        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) {
+        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, {
-                checks: JSON.stringify(this.complaint.info.checks),
+                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 => {
@@ -141,10 +99,6 @@ 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,6 +1,8 @@
 <script>
 export default class ComplaintInfo {
-    checks = [false, false, false, false]
+    one = 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-4' : item.at_risk }">
+                    <v-row dense class="item" :class="{ 'bg-red-lighten-5' : item.at_risk }">
                         <v-col cols="4">
                             Complaint : {{ item.id }}<br/>
                             <span class="text-caption">