feat: my groups

src/components/instance/InstanceBody.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tabs>
+  <v-tabs v-model="tab" background-color="transparent" color="primary">
     <v-tab v-for="tab in tabs" :key="tab.id" :value="tab.id">
       <v-icon start>{{ tab.icon }}</v-icon>
       {{ tab.title }}
@@ -7,14 +7,13 @@
   </v-tabs>
 
   <v-window v-model="tab">
-    <v-window-item v-for="tab in tabs" :key="tab.id" :value="tab.id" >
+    <v-window-item v-for="tab in tabs" :key="tab.id" :value="tab.id">
       <div class="d-flex flex-column gap-8">
-
         <component
-        v-for="component in tab.components"
-        :key="component"
-        :is="component"
-        :instance="instance"
+          v-for="component in tab.components"
+          :key="component"
+          :is="component"
+          :instance="instance"
         />
       </div>
     </v-window-item>
@@ -28,6 +27,8 @@ import Rabbitmq from "./settings/Rabbitmq.vue";
 import Chatwoot from "./settings/Chatwoot.vue";
 import Typebot from "./settings/Typebot.vue";
 
+import MyGroups from "./message/MyGroups.vue";
+
 export default {
   components: {
     Webhook,
@@ -35,6 +36,7 @@ export default {
     Rabbitmq,
     Chatwoot,
     Typebot,
+    MyGroups
   },
   data: () => ({
     tab: "settings",
@@ -45,6 +47,12 @@ export default {
         title: "Configurações",
         components: ["Webhook", "Websocket", "Rabbitmq", "Chatwoot", "Typebot"],
       },
+      {
+        id: "message",
+        icon: "mdi-message",
+        title: "Mensagens",
+        components: ["MyGroups"],
+      },
     ],
   }),
   props: {

src/components/instance/InstanceHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card
     variant="outlined"
-    class="d-flex align-center gap-4 pa-2"
+    class="d-flex align-center gap-4 pa-2 flex-wrap"
     rounded="xl"
   >
     <v-avatar size="100" rounded="xl">
@@ -30,27 +30,30 @@
       <small>{{ instance.instance.profileStatus }}</small>
     </div>
     <v-spacer></v-spacer>
-    <!-- <v-btn
-      @click="restartInstance"
-      :disabled="disconnect.loading"
-      :loading="restart.loading"
-      variant="tonal"
-      color="info"
-      size="small"
-    >
-      <v-icon start>mdi-cellphone-arrow-down</v-icon>
-    </v-btn> -->
-    <v-btn
-      @click="disconnectInstance"
-      :disabled="instance.instance.status === 'close' || restart.loading"
-      :loading="disconnect.loading"
-      variant="tonal"
-      color="error"
-      size="small"
-    >
-      <v-icon start>mdi-cellphone-nfc-off</v-icon>
-      {{ disconnect.confirm ? "Tem Certeza?" : "Desconectar" }}
-    </v-btn>
+    <div class="d-flex gap-2 flex-wrap justify-end">
+      <v-btn
+        @click="restartInstance"
+        :disabled="disconnect.loading || restart.success"
+        :loading="restart.loading"
+        variant="tonal"
+        color="info"
+        size="small"
+      >
+        <v-icon start>mdi-restart</v-icon>
+        {{ restart.success ? "Reiniciada!" : "Reiniciar" }}
+      </v-btn>
+      <v-btn
+        @click="disconnectInstance"
+        :disabled="instance.instance.status === 'close' || restart.loading"
+        :loading="disconnect.loading"
+        variant="tonal"
+        color="error"
+        size="small"
+      >
+        <v-icon start>mdi-cellphone-nfc-off</v-icon>
+        {{ disconnect.confirm ? "Tem Certeza?" : "Desconectar" }}
+      </v-btn>
+    </div>
   </v-card>
 </template>
 
@@ -63,7 +66,7 @@ export default {
   name: "InstanceHeader",
   data: () => ({
     disconnect: { confirm: false, loading: false },
-    restart: { loading: false },
+    restart: { loading: false, success: false },
     statusMapper: statusMapper,
     AppStore: useAppStore(),
   }),
@@ -72,7 +75,13 @@ export default {
       this.restart.loading = true;
       try {
         await instanceController.restart(this.instance.instance.instanceName);
-        await this.AppStore.reconnect();
+        this.restart.success = true;
+
+        setTimeout(() => {
+          this.restart.success = false;
+        }, 5000);
+
+        // await this.AppStore.reconnect();
       } catch (e) {
         console.log(e);
         alert(e.message || e.error || "Erro desconhecido");

src/components/instance/message/MyGroups.vue

@@ -0,0 +1,135 @@
+<template>
+  <v-card variant="outlined" :loading="loading">
+    <v-card-title class="d-flex align-center">
+      <v-icon start>mdi-account-group</v-icon>
+      Meus Grupos
+      <v-spacer></v-spacer>
+      <v-btn
+        size="small"
+        icon
+        :disabled="loading"
+        variant="tonal"
+        @click="expanded = !expanded"
+        :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
+      >
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+    </v-card-title>
+    <v-card-text v-if="expanded">
+      <v-alert v-if="error" type="error" class="mb-3">
+        {{ error }}
+      </v-alert>
+
+      <v-text-field
+        v-model="search"
+        label="Pesquisar"
+        outlined
+        clearable
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3"
+      />
+
+      <v-data-table
+        :headers="[
+          { title: 'Nome', value: 'subject' },
+          { title: 'ID', value: 'id', align: 'center' },
+        ]"
+        :items="groups"
+        :no-data-text="loading ? '' : 'Nenhum grupo encontrado'"
+        :search="search"
+        :rows-per-page-items="[5, 10, 25, 50, 100]"
+        :items-per-page="5"
+        class="elevation-0"
+      >
+        <template v-slot:item.id="{ item }">
+          <v-chip size="x-small" outlined color="primary" @click="copy(item)">
+            {{ item.id }}
+            <v-icon
+              size="14"
+              class="ml-1"
+              v-if="copied.includes(item.id)"
+              color="primary"
+            >
+              mdi-check
+            </v-icon>
+            <v-icon
+              size="14"
+              class="ml-1"
+              v-else
+              color="primary"
+            >
+              mdi-content-copy
+            </v-icon>
+          </v-chip>
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+
+export default {
+  name: "InstanceWebsocket",
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    expanded: false,
+    loading: false,
+    error: false,
+    groups: [],
+    copied: [],
+    search: "",
+  }),
+
+  methods: {
+    copy(group) {
+      if(this.copied.includes(group.id)) return
+
+      const el = document.createElement("textarea");
+      el.value = group.id;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+
+      this.copied.push(group.id);
+      setTimeout(() => {
+        this.copied = this.copied.filter((i) => i !== group.id);
+      }, 2000);
+    },
+    async loadGroups() {
+      try {
+        this.loading = true;
+        this.error = false;
+        const groups = await instanceController.group.getAll(
+          this.instance.instance.instanceName
+        );
+
+        this.groups = groups;
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  watch: {
+    expanded: {
+      handler() {
+        if (this.expanded) this.loadGroups();
+      },
+    },
+  },
+};
+</script>
+
+<style></style>

src/components/instance/settings/Rabbitmq.vue

@@ -21,6 +21,11 @@
         {{ error }}
       </v-alert>
 
+      <v-alert type="info" class="mb-3">
+        O RabbitMQ é utilizado pela API para o enfileiramento das notificações.
+        Ele NÃO é utilizado para o envio de mensagens.
+      </v-alert>
+
       <v-form v-model="valid">
         <v-select
           :items="rabbitmqEventsType"

src/services/instanceController.js

@@ -47,7 +47,7 @@ const logout = async (instanceName) => {
 
 const restart = async (instanceName) => {
   return await http
-    .post("/instance/restart/:instance", {
+    .put("/instance/restart/:instance", {}, {
       params: {
         instance: instanceName
       }
@@ -59,7 +59,7 @@ const restart = async (instanceName) => {
 }
 
 import settings from "./instanceSettingsController.js";
-
+import group from "./instanceGroupController.js";
 
 export default {
   fetchAll,
@@ -67,6 +67,7 @@ export default {
   connect,
   logout,
   restart,
-  ...settings
+  ...settings,
+  group
 
 };

src/services/instanceGroupController.js

@@ -0,0 +1,19 @@
+
+import http from "../http-common";
+
+const getAll = async (instanceName) => {
+  return await http
+    .get("/group/fetchAllGroups/:instance/?getParticipants=false", {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+export default {
+  getAll: getAll
+}