Refactor toggleExpanded method in settings components

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 {

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();

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();

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;

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;

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;

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;

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;

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;