add contact list

src/components/instance/InstanceBody.vue

@@ -30,6 +30,7 @@ import Typebot from "./settings/Typebot.vue";
 
 import MyGroups from "./message/MyGroups.vue";
 import MyChats from "./message/MyChats.vue";
+import MyContacts from "./message/MyContacts.vue";
 import HasWhatsapp from "./message/HasWhatsapp.vue";
 export default {
   components: {
@@ -42,6 +43,7 @@ export default {
     MyGroups,
     MyChats,
     HasWhatsapp,
+    MyContacts,
   },
   data: () => ({
     tab: "settings",
@@ -50,13 +52,20 @@ export default {
         id: "settings",
         icon: "mdi-cog",
         title: "Configurações",
-        components: ["Options","Webhook", "Websocket", "Rabbitmq", "Chatwoot", "Typebot"],
+        components: [
+          "Options",
+          "Webhook",
+          "Websocket",
+          "Rabbitmq",
+          "Chatwoot",
+          "Typebot",
+        ],
       },
       {
         id: "message",
         icon: "mdi-message",
         title: "Mensagens",
-        components: ["HasWhatsapp","MyGroups", "MyChats"],
+        components: ["HasWhatsapp", "MyContacts", "MyGroups", "MyChats"],
       },
     ],
   }),

src/components/instance/message/MyContacts.vue

@@ -0,0 +1,166 @@
+<template>
+  <v-card variant="outlined" :loading="loading">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
+      <v-icon start>mdi-account-box</v-icon>
+      Meus contatos
+      <v-spacer></v-spacer>
+      <v-btn
+        size="small"
+        icon
+        :disabled="loading"
+        variant="tonal"
+        @click.stop="toggleExpanded"
+        :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: 'pushName', sortable: true },
+          {
+            title: 'Número',
+            value: 'id',
+          },
+        ]"
+        :items="contacts"
+        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.pushName="{ item }">
+          <div>
+            <v-avatar size="40" class="mr-2">
+              <v-img
+                v-if="item.profilePictureUrl"
+                :src="item.profilePictureUrl"
+              />
+              <v-icon v-else size="40">mdi-account-circle</v-icon>
+            </v-avatar>
+            <b>{{ item.pushName }}</b>
+            <v-chip v-if="item.id === instance.instance.owner" size="x-small" label color="success">
+              Instância
+            </v-chip>
+          </div>
+        </template>
+
+        <!-- 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>
+      </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" }],
+    contacts: [],
+    copied: [],
+    search: "",
+  }),
+
+  methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
+    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 loadContacts() {
+      try {
+        this.loading = true;
+        this.error = false;
+        const contacts = await instanceController.chat.getContacts(
+          this.instance.instance.instanceName
+        );
+
+        this.contacts = contacts.filter((c) => !c.id.includes("@g.us"));
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  watch: {
+    expanded: {
+      handler() {
+        if (this.expanded) this.loadContacts();
+      },
+    },
+  },
+};
+</script>
+
+<style></style>

src/services/instanceChatController.js

@@ -26,8 +26,21 @@ const hasWhatsapp = async (instanceName, numbers) => {
       throw error.response?.data || error.response || error;
     });
 }
+const getContacts = async (instanceName, numbers) => {
+  return await http
+    .post("/chat/findContacts/:instance", { numbers }, {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
 
 export default {
   getAll: getAll,
-  hasWhatsapp: hasWhatsapp
+  hasWhatsapp: hasWhatsapp,
+  getContacts: getContacts
 }

src/views/Instance.vue

@@ -45,7 +45,6 @@ export default {
     },
   },
   computed: {
-   
     instance() {
       return this.AppStore.getInstance(this.$route.params.id);
     },