new components: HasWhatsapp and MyChats

src/components/instance/InstanceBody.vue

@@ -28,7 +28,8 @@ import Chatwoot from "./settings/Chatwoot.vue";
 import Typebot from "./settings/Typebot.vue";
 
 import MyGroups from "./message/MyGroups.vue";
-
+import MyChats from "./message/MyChats.vue";
+import HasWhatsapp from "./message/HasWhatsapp.vue";
 export default {
   components: {
     Webhook,
@@ -36,7 +37,9 @@ export default {
     Rabbitmq,
     Chatwoot,
     Typebot,
-    MyGroups
+    MyGroups,
+    MyChats,
+    HasWhatsapp,
   },
   data: () => ({
     tab: "settings",
@@ -51,7 +54,7 @@ export default {
         id: "message",
         icon: "mdi-message",
         title: "Mensagens",
-        components: ["MyGroups"],
+        components: ["HasWhatsapp","MyGroups", "MyChats"],
       },
     ],
   }),

src/components/instance/message/HasWhatsapp.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-card variant="outlined" :loading="loading">
+    <v-card-title class="d-flex align-center">
+      <v-icon start>mdi-account-question</v-icon>
+      Tem Whatsapp?
+      <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="phone"
+        label="Número"
+        outlined
+        clearable
+        variant="outlined"
+        density="compact"
+        hide-details="auto"
+        class="mb-3"
+        hint="DDI + DDD + Número"
+      />
+
+      <v-alert v-if="response" :type="response.exists ? 'success' : 'error'">
+        {{
+          response.exists ? "Whatsapp encontrado" : "Whatsapp não encontrado"
+        }}
+
+        <v-chip v-if="response.exists" text-color="white" class="ml-2">
+          <b>{{ (response.jid || "").split("@")[0] }}</b>
+        </v-chip> 
+      </v-alert>
+    </v-card-text>
+    <v-card-actions v-if="expanded">
+      <v-spacer></v-spacer>
+      <v-btn
+        color="primary"
+        :disabled="loading || !phone"
+        :loading="loading"
+        @click="verifyPhone"
+      >
+        Consultar
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+
+export default {
+  name: "HasWhatsapp",
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    expanded: false,
+    loading: false,
+    error: false,
+    response: false,
+    phone: "",
+  }),
+
+  methods: {
+    formatPhone(phone) {
+      return phone.replace(/[^0-9]/g, "");
+    },
+    async verifyPhone() {
+      try {
+        this.loading = true;
+        this.error = false;
+        this.response = false;
+
+        const phone = this.formatPhone(this.phone);
+        if (phone.length < 10) throw new Error("Número inválido");
+
+        const response = await instanceController.chat.hasWhatsapp(
+          this.instance.instance.instanceName,
+          [phone]
+        );
+
+        this.response = response[0]
+      } catch (err) {
+        this.error = err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  watch: {
+    expanded: {
+      handler() {
+        if (this.expanded) {
+          this.phone = "";
+          this.error = false;
+          this.response = false;
+        }
+      },
+    },
+  },
+};
+</script>

src/components/instance/message/MyChats.vue

@@ -0,0 +1,146 @@
+<template>
+  <v-card variant="outlined" :loading="loading">
+    <v-card-title class="d-flex align-center">
+      <v-icon start>mdi-message</v-icon>
+      Minhas conversas
+      <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: 'Número', value: 'id' },
+          {
+            title: 'Ultima mensagem',
+            value: 'lastMsgTimestamp',
+            options: { format: 'DD/MM/YYYY HH:mm' },
+          },
+        ]"
+        :items="chats"
+        v-model:sort-by="sortBy"
+        :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"
+      >
+        <!-- eslint-disable-next-line vue/valid-v-slot -->
+        <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>
+        <!-- eslint-disable-next-line vue/valid-v-slot -->
+        <template v-slot:item.lastMsgTimestamp="{ item }">
+          {{ item.lastMsgTimestamp }}
+          {{ formatTimestamp(item.lastMsgTimestamp * 1000) }}
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+
+export default {
+  name: "MyChats",
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    expanded: false,
+    loading: false,
+    error: false,
+    sortBy: [{ key: "lastMsgTimestamp", order: "desc" }],
+    chats: [],
+    copied: [],
+    search: "",
+  }),
+
+  methods: {
+    formatTimestamp(timestamp) {
+      if (!timestamp) return "";
+      return new Date(timestamp).toLocaleString();
+    },
+    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 loadChats() {
+      try {
+        this.loading = true;
+        this.error = false;
+        const chats = await instanceController.chat.getAll(
+          this.instance.instance.instanceName
+        );
+
+        this.chats = chats;
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  watch: {
+    expanded: {
+      handler() {
+        if (this.expanded) this.loadChats();
+      },
+    },
+  },
+};
+</script>
+
+<style></style>

src/components/instance/message/MyGroups.vue

@@ -35,6 +35,11 @@
         :headers="[
           { title: 'Nome', value: 'subject' },
           { title: 'ID', value: 'id', align: 'center' },
+          {
+            title: 'Criado em',
+            value: 'creation',
+            align: 'center',
+          },
         ]"
         :items="groups"
         :no-data-text="loading ? '' : 'Nenhum grupo encontrado'"
@@ -43,6 +48,7 @@
         :items-per-page="5"
         class="elevation-0"
       >
+        <!-- eslint-disable-next-line vue/valid-v-slot -->
         <template v-slot:item.id="{ item }">
           <v-chip size="x-small" outlined color="primary" @click="copy(item)">
             {{ item.id }}
@@ -54,16 +60,17 @@
             >
               mdi-check
             </v-icon>
-            <v-icon
-              size="14"
-              class="ml-1"
-              v-else
-              color="primary"
-            >
+            <v-icon size="14" class="ml-1" v-else color="primary">
               mdi-content-copy
             </v-icon>
           </v-chip>
         </template>
+
+        <!-- eslint-disable-next-line vue/valid-v-slot -->
+        <template v-slot:item.creation="{ item }">
+          {{ formatTimestamp(item.creation * 1000) }}
+        </template>
+
       </v-data-table>
     </v-card-text>
   </v-card>
@@ -73,7 +80,7 @@
 import instanceController from "@/services/instanceController";
 
 export default {
-  name: "InstanceWebsocket",
+  name: "MyGroups",
   props: {
     instance: {
       type: Object,
@@ -90,8 +97,12 @@ export default {
   }),
 
   methods: {
+    formatTimestamp(timestamp) {
+      if (!timestamp) return "";
+      return new Date(timestamp).toLocaleString();
+    },
     copy(group) {
-      if(this.copied.includes(group.id)) return
+      if (this.copied.includes(group.id)) return;
 
       const el = document.createElement("textarea");
       el.value = group.id;

src/components/modal/ConnectPhone.vue

@@ -70,6 +70,7 @@ export default {
         if (response.base64) this.qrCode = response.base64;
         else if (response.instance) {
           this.dialog = false;
+          this.AppStore.reconnect();
           return;
         } else throw new Error("Não foi possível carregar o QR Code, se o erro persistir, reinicie a API e tente novamente.");
 

src/services/instanceChatController.js

@@ -0,0 +1,33 @@
+
+import http from "../http-common";
+
+const getAll = async (instanceName) => {
+  return await http
+    .get("/chat/findChats/:instance", {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+const hasWhatsapp = async (instanceName, numbers) => {
+  return await http
+    .post("/chat/whatsappNumbers/:instance", { numbers }, {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+export default {
+  getAll: getAll,
+  hasWhatsapp: hasWhatsapp
+}

src/services/instanceController.js

@@ -58,8 +58,22 @@ const restart = async (instanceName) => {
     });
 }
 
+const deleteInstance = async (instanceName) => {
+  return await http
+    .delete("/instance/delete/:instance", {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
 import settings from "./instanceSettingsController.js";
 import group from "./instanceGroupController.js";
+import chat from "./instanceChatController.js";
 
 export default {
   fetchAll,
@@ -67,7 +81,9 @@ export default {
   connect,
   logout,
   restart,
+  delete: deleteInstance,
   ...settings,
-  group
+  group,
+  chat
 
 };

src/views/Home.vue

@@ -32,7 +32,7 @@
       :items-per-page="10"
     >
     <template v-slot:no-data>
-      <v-card v-if="!loading" variant="outlined">
+      <v-card v-if="!loading" variant="outlined" class="my-4">
         <v-card-text>
           <div class="text-center">
             <v-icon size="70">mdi-server-network-off</v-icon>
@@ -42,6 +42,7 @@
       </v-card>
     </template>
 
+    <!-- eslint-disable-next-line vue/valid-v-slot -->
     <template v-slot:item.instance.instanceName="{ item }">
       <b>{{ item.instance.instanceName }}</b>  
     </template>
@@ -63,26 +64,30 @@
           {{ statusMapper[item.instance.status].text }}
         </v-chip>
       </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
       <template v-slot:item.actions="{ item }">
         <v-btn
           :disabled="loading"
           :to="`/${item.instance.instanceName}`"
           icon
-          variant="text"
-          size="small"
-          class="mr-2"
+          size="x-small"
+          class="mr-1"
+          variant="tonal"
+          color="info"
         >
-          <v-icon>mdi-pencil</v-icon>
+          <v-icon>mdi-cog</v-icon>
         </v-btn>
-        <!-- <v-btn
-          :disabled="loading"
-          @click="AppStore.selectInstance(item.instance)"
+        <v-btn
+          :disabled="loading || !!loadingDelete"
+          :loading="loadingDelete === item.instance.instanceName"
+          @click="deleteInstance(item.instance.instanceName)"
           icon
-          variant="text"
-          size="small"
+          variant="tonal"
+          color="error"
+          size="x-small"
         >
           <v-icon>mdi-delete</v-icon>
-        </v-btn> -->
+        </v-btn>
       </template>
     </v-data-table>
 
@@ -97,6 +102,7 @@
 import { useAppStore } from "@/store/app";
 import CreateInstance from "@/components/modal/CreateInstance";
 import statusMapper from "@/helpers/mappers/status";
+import instanceController from "@/services/instanceController";
 
 export default {
   name: "HomeInstance",
@@ -106,6 +112,7 @@ export default {
   data: () => ({
     AppStore: useAppStore(),
     loading: false,
+    loadingDelete: false,
     error: false,
     statusMapper: statusMapper,
     headers: [
@@ -123,6 +130,24 @@ export default {
     addInstance() {
       this.$refs.createInstanceModal.open();
     },
+    async deleteInstance(instanceName) {
+      try {
+        this.loadingDelete = instanceName;
+        const confirm = window.confirm(
+          `Tem certeza que deseja excluir a instância ${instanceName}?`
+        );
+        if (!confirm) return;
+
+
+        await instanceController.logout(instanceName).catch(() => {});
+        await instanceController.delete(instanceName);
+        await this.AppStore.reconnect();
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loadingDelete = false;
+      }
+    },
     async getInstances() {
       try {
         this.loading = true;