From 86378a58c336bc9406fe93c84cc6b4bf047798d3 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@paulwilde.uk>
Date: Mon, 27 Mar 2023 09:50:39 +0100
Subject: [PATCH] better looking complaint ticks

---
 src/components/ComplaintInfo.vue        | 76 ++++++++++++++++++++-----
 src/types/ComplaintInfoType.vue         |  4 +-
 src/views/complaints/ComplaintsList.vue |  2 +-
 3 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/components/ComplaintInfo.vue b/src/components/ComplaintInfo.vue
index 0666bae..f64de7a 100644
--- a/src/components/ComplaintInfo.vue
+++ b/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>
+            <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
         },
diff --git a/src/types/ComplaintInfoType.vue b/src/types/ComplaintInfoType.vue
index 8450cd4..d300655 100644
--- a/src/types/ComplaintInfoType.vue
+++ b/src/types/ComplaintInfoType.vue
@@ -1,8 +1,6 @@
 <script>
 export default class ComplaintInfo {
-    one = false
-    two = false
-    three = false
+    checks = [false, false, false, false]
     permanent = false
     comments = ""
 }
diff --git a/src/views/complaints/ComplaintsList.vue b/src/views/complaints/ComplaintsList.vue
index 1f738c3..d8fa2e5 100644
--- a/src/views/complaints/ComplaintsList.vue
+++ b/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">