From 7591cc4362e1158c6c39a88a735973a110a46f6b Mon Sep 17 00:00:00 2001
From: Gabriel Pastori <58153955+gabrielpastori1@users.noreply.github.com>
Date: Thu, 16 Nov 2023 11:56:33 -0300
Subject: [PATCH] Refactor toggleExpanded method in settings components

---
 src/components/instance/message/HasWhatsapp.vue | 17 +++++++++++++----
 src/components/instance/message/MyChats.vue     | 13 +++++++++++--
 src/components/instance/message/MyGroups.vue    | 14 +++++++++++---
 src/components/instance/settings/Chatwoot.vue   | 13 +++++++++++--
 src/components/instance/settings/Options.vue    |  8 ++++++--
 src/components/instance/settings/Rabbitmq.vue   |  8 ++++++--
 src/components/instance/settings/Typebot.vue    | 13 +++++++++++--
 src/components/instance/settings/Webhook.vue    | 13 +++++++++++--
 src/components/instance/settings/Websocket.vue  | 13 +++++++++++--
 9 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/src/components/instance/message/HasWhatsapp.vue b/src/components/instance/message/HasWhatsapp.vue
index 06f7821..27835d0 100644
--- a/src/components/instance/message/HasWhatsapp.vue
+++ b/src/components/instance/message/HasWhatsapp.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-account-question</v-icon>
       Tem Whatsapp?
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -39,7 +44,7 @@
 
         <v-chip v-if="response.exists" text-color="white" class="ml-2">
           <b>{{ (response.jid || "").split("@")[0] }}</b>
-        </v-chip> 
+        </v-chip>
       </v-alert>
     </v-card-text>
     <v-card-actions v-if="expanded">
@@ -76,6 +81,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     formatPhone(phone) {
       return phone.replace(/[^0-9]/g, "");
     },
@@ -93,7 +102,7 @@ export default {
           [phone]
         );
 
-        this.response = response[0]
+        this.response = response[0];
       } catch (err) {
         this.error = err.message;
       } finally {
diff --git a/src/components/instance/message/MyChats.vue b/src/components/instance/message/MyChats.vue
index 9c1d435..71877d3 100644
--- a/src/components/instance/message/MyChats.vue
+++ b/src/components/instance/message/MyChats.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-message</v-icon>
       Minhas conversas
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -97,6 +102,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     formatTimestamp(timestamp) {
       if (!timestamp) return "";
       return new Date(timestamp).toLocaleString();
diff --git a/src/components/instance/message/MyGroups.vue b/src/components/instance/message/MyGroups.vue
index ff94fc4..ef22df9 100644
--- a/src/components/instance/message/MyGroups.vue
+++ b/src/components/instance/message/MyGroups.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-account-group</v-icon>
       Meus Grupos
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -70,7 +75,6 @@
         <template v-slot:item.creation="{ item }">
           {{ formatTimestamp(item.creation * 1000) }}
         </template>
-
       </v-data-table>
     </v-card-text>
   </v-card>
@@ -97,6 +101,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     formatTimestamp(timestamp) {
       if (!timestamp) return "";
       return new Date(timestamp).toLocaleString();
diff --git a/src/components/instance/settings/Chatwoot.vue b/src/components/instance/settings/Chatwoot.vue
index 219340b..51717e0 100644
--- a/src/components/instance/settings/Chatwoot.vue
+++ b/src/components/instance/settings/Chatwoot.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-chat</v-icon>
       Chatwoot
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -172,6 +177,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     async saveChatwoot() {
       try {
         this.loading = true;
diff --git a/src/components/instance/settings/Options.vue b/src/components/instance/settings/Options.vue
index 3e5a258..3b5770f 100644
--- a/src/components/instance/settings/Options.vue
+++ b/src/components/instance/settings/Options.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title class="d-flex align-center" @click="toggleExpanded" style="cursor: pointer" v-ripple>
       <v-icon start>mdi-cellphone-cog</v-icon>
       Comportamento
 
@@ -10,7 +10,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -142,6 +142,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     async saveOptions() {
       try {
         this.loading = true;
diff --git a/src/components/instance/settings/Rabbitmq.vue b/src/components/instance/settings/Rabbitmq.vue
index 43148eb..7f31f77 100644
--- a/src/components/instance/settings/Rabbitmq.vue
+++ b/src/components/instance/settings/Rabbitmq.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title class="d-flex align-center" @click="toggleExpanded" style="cursor: pointer" v-ripple>
       <v-icon start>mdi-rabbit</v-icon>
       RabbitMQ
 
@@ -10,7 +10,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -116,6 +116,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     async saveRabbitmq() {
       try {
         this.loading = true;
diff --git a/src/components/instance/settings/Typebot.vue b/src/components/instance/settings/Typebot.vue
index fa24dda..ff7777f 100644
--- a/src/components/instance/settings/Typebot.vue
+++ b/src/components/instance/settings/Typebot.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-robot-happy</v-icon>
       Typebot
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -217,6 +222,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     async saveTypebot() {
       try {
         this.loading = true;
diff --git a/src/components/instance/settings/Webhook.vue b/src/components/instance/settings/Webhook.vue
index 25a6099..367420c 100644
--- a/src/components/instance/settings/Webhook.vue
+++ b/src/components/instance/settings/Webhook.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-webhook</v-icon>
       Webhook
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -157,6 +162,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },    
     async saveWebhook() {
       try {
         this.loading = true;
diff --git a/src/components/instance/settings/Websocket.vue b/src/components/instance/settings/Websocket.vue
index 4089dbf..a252472 100644
--- a/src/components/instance/settings/Websocket.vue
+++ b/src/components/instance/settings/Websocket.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card variant="outlined" :loading="loading">
-    <v-card-title class="d-flex align-center">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
       <v-icon start>mdi-email-fast</v-icon>
       Websocket
       <v-spacer></v-spacer>
@@ -9,7 +14,7 @@
         icon
         :disabled="loading"
         variant="tonal"
-        @click="expanded = !expanded"
+        @click.stop="toggleExpanded"
         :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
       >
         <v-icon>mdi-chevron-down</v-icon>
@@ -110,6 +115,10 @@ export default {
   }),
 
   methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
     async saveWebsocket() {
       try {
         this.loading = true;