From 2f6c896f0a4d16eb8715347ba8eb3bed745050bb Mon Sep 17 00:00:00 2001
From: Gabriel Pastori <58153955+gabrielpastori1@users.noreply.github.com>
Date: Sun, 7 Jan 2024 17:19:01 -0300
Subject: [PATCH] add EventsSelect component

---
 lib/api/migrateToMongo/migrators/instance.js  |  12 +-
 package.json                                  |   2 +-
 src/components/global/EventsSelect.vue        |  99 ++++++++++++++
 src/components/instance/settings/Rabbitmq.vue |  20 +--
 src/components/instance/settings/Webhook.vue  |  43 +-----
 .../instance/settings/Websocket.vue           |  18 +--
 src/components/modal/ConnectPhone.vue         | 129 ++++++++++++++----
 src/i18n/en.js                                |   4 +
 src/i18n/es.js                                |   4 +
 src/i18n/pt.js                                |   8 +-
 10 files changed, 241 insertions(+), 98 deletions(-)
 create mode 100644 src/components/global/EventsSelect.vue

diff --git a/lib/api/migrateToMongo/migrators/instance.js b/lib/api/migrateToMongo/migrators/instance.js
index 734358a..7dd3013 100644
--- a/lib/api/migrateToMongo/migrators/instance.js
+++ b/lib/api/migrateToMongo/migrators/instance.js
@@ -34,14 +34,22 @@ module.exports = async (instanceName, options, progressBars, conn, connInstance)
       const collectionName = file.key || instanceName
       const collection = (!file.secondaryConnection ? conn : connInstance).collection(collectionName)
 
-      const data = JSON.parse(fs.readFileSync(file.path, 'utf8'))
+      var data;
+      try {
+        data = JSON.parse(fs.readFileSync(file.path, 'utf8'))
+      } catch (err) {
+        continue;
+      }
+
+
       if (Array.isArray(data)) continue
       data._id = file.path.split('\\').pop().split('.')[0]
       await collection.findOneAndUpdate({ _id: data._id }, { $set: data }, { upsert: true })
-      progress.increment()
     } catch (err) {
       progress.stop()
       throw { err, file }
+    } finally {
+      progress.increment()
     }
   }
 }
diff --git a/package.json b/package.json
index e528797..fe1138b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "evolution-manager",
   "description": "Evolution Manager is an open-source interface for managing the Evolution API, simplifying the creation and administration of API instances with advanced features and diverse integrations.",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "main": "dist",
   "engines": {
     "node": ">=16.0.0"
diff --git a/src/components/global/EventsSelect.vue b/src/components/global/EventsSelect.vue
new file mode 100644
index 0000000..5e41519
--- /dev/null
+++ b/src/components/global/EventsSelect.vue
@@ -0,0 +1,99 @@
+<template>
+  <v-select
+    :items="events"
+    v-model="val"
+    :disabled="disabled"
+    :label="$t('events')"
+    hide-details
+    class="mb-3"
+    multiple
+    outlined
+    dense
+    chips
+  >
+    <template v-slot:prepend-item>
+      <v-list-item ripple @mousedown.prevent @click="toggle">
+        <div class="d-flex align-center gap-x-2 px-2">
+          <v-icon :class="this.val.length ? '' : 'text-medium-emphasis'">
+            {{ icon }}
+          </v-icon>
+          <v-list-item-title class="text-uppercase">
+            {{ $t(`toggleSelect.${allSelected ? "none" : "all"}`) }}
+          </v-list-item-title>
+        </div>
+      </v-list-item>
+      <v-divider class="my-2"></v-divider>
+    </template>
+  </v-select>
+</template>
+
+<script>
+const EVENTS = () => [
+  "APPLICATION_STARTUP",
+  "QRCODE_UPDATED",
+  "MESSAGES_SET",
+  "MESSAGES_UPSERT",
+  "MESSAGES_UPDATE",
+  "MESSAGES_DELETE",
+  "SEND_MESSAGE",
+  "CONTACTS_SET",
+  "CONTACTS_UPSERT",
+  "CONTACTS_UPDATE",
+  "PRESENCE_UPDATE",
+  "CHATS_SET",
+  "CHATS_UPSERT",
+  "CHATS_UPDATE",
+  "CHATS_DELETE",
+  "GROUPS_UPSERT",
+  "GROUP_UPDATE",
+  "GROUP_PARTICIPANTS_UPDATE",
+  "CONNECTION_UPDATE",
+  "CALL",
+  "NEW_JWT_TOKEN",
+];
+
+export default {
+  emits: ["update:modelValue"],
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    events: {
+      type: Array,
+      default: EVENTS,
+    },
+  },
+  computed: {
+    icon() {
+      if (this.allSelected) return "mdi-checkbox-marked";
+      if (this.val.length) return "mdi-minus-box";
+      return "mdi-checkbox-blank-outline";
+    },
+    val: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        console.log(val);
+        this.$emit("update:modelValue", val);
+      },
+    },
+    allSelected() {
+      return this.val.length === this.events.length;
+    },
+  },
+  methods: {
+    toggle() {
+      this.$nextTick(() => {
+        if (this.allSelected) this.val = [];
+        else this.val = EVENTS();
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/instance/settings/Rabbitmq.vue b/src/components/instance/settings/Rabbitmq.vue
index 68a1552..0d479e0 100644
--- a/src/components/instance/settings/Rabbitmq.vue
+++ b/src/components/instance/settings/Rabbitmq.vue
@@ -31,18 +31,7 @@
       </v-alert>
 
       <v-form v-model="valid">
-        <v-select
-          :items="rabbitmqEventsType"
-          v-model="rabbitmqData.events"
-          :disabled="loading"
-          :label="$t('events')"
-          hide-details
-          class="mb-3"
-          multiple
-          outlined
-          dense
-          chips
-        />
+        <EventsSelect v-model="rabbitmqData.events" :disabled="loading" />
       </v-form>
     </v-card-text>
     <v-card-actions v-if="expanded">
@@ -65,16 +54,19 @@
         variant="tonal"
       >
         {{ $t("save") }}
-    </v-btn>
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
 import instanceController from "@/services/instanceController";
-
+import EventsSelect from "@/components/global/EventsSelect.vue";
 export default {
   name: "InstanceRabbitmq",
+  components: {
+    EventsSelect,
+  },
   props: {
     instance: {
       type: Object,
diff --git a/src/components/instance/settings/Webhook.vue b/src/components/instance/settings/Webhook.vue
index e3423ef..a5cc65f 100644
--- a/src/components/instance/settings/Webhook.vue
+++ b/src/components/instance/settings/Webhook.vue
@@ -43,19 +43,7 @@
             },
           ]"
         />
-
-        <v-select
-          :items="webhookEventsType"
-          v-model="webhookData.events"
-          :disabled="loading"
-          :label="$t('events')"
-          hide-details
-          class="mb-3"
-          multiple
-          outlined
-          dense
-          chips
-        />
+        <EventsSelect v-model="webhookData.events" :disabled="loading" />
 
         <div class="d-flex gap-x-4 flex-wrap align-center">
           <div>
@@ -114,7 +102,7 @@
 
 <script>
 import instanceController from "@/services/instanceController";
-
+import EventsSelect from "@/components/global/EventsSelect.vue";
 export default {
   name: "InstanceWebhook",
   props: {
@@ -123,6 +111,9 @@ export default {
       required: true,
     },
   },
+  components: {
+    EventsSelect,
+  },
   data: () => ({
     expanded: false,
     loading: false,
@@ -142,29 +133,7 @@ export default {
       webhook_base64: false,
       webhook_by_events: false,
     },
-    webhookEventsType: [
-      "APPLICATION_STARTUP",
-      "QRCODE_UPDATED",
-      "MESSAGES_SET",
-      "MESSAGES_UPSERT",
-      "MESSAGES_UPDATE",
-      "MESSAGES_DELETE",
-      "SEND_MESSAGE",
-      "CONTACTS_SET",
-      "CONTACTS_UPSERT",
-      "CONTACTS_UPDATE",
-      "PRESENCE_UPDATE",
-      "CHATS_SET",
-      "CHATS_UPSERT",
-      "CHATS_UPDATE",
-      "CHATS_DELETE",
-      "GROUPS_UPSERT",
-      "GROUP_UPDATE",
-      "GROUP_PARTICIPANTS_UPDATE",
-      "CONNECTION_UPDATE",
-      "CALL",
-      "NEW_JWT_TOKEN",
-    ],
+    
   }),
 
   methods: {
diff --git a/src/components/instance/settings/Websocket.vue b/src/components/instance/settings/Websocket.vue
index 9f00c07..0204ac7 100644
--- a/src/components/instance/settings/Websocket.vue
+++ b/src/components/instance/settings/Websocket.vue
@@ -26,18 +26,7 @@
       </v-alert>
 
       <v-form v-model="valid">
-        <v-select
-          :items="websocketEventsType"
-          v-model="websocketData.events"
-          :disabled="loading"
-          :label="$t('events')"
-          hide-details
-          class="mb-3"
-          multiple
-          outlined
-          dense
-          chips
-        />
+        <EventsSelect v-model="websocketData.events" :disabled="loading" />
       </v-form>
     </v-card-text>
     <v-card-actions v-if="expanded">
@@ -67,9 +56,12 @@
 
 <script>
 import instanceController from "@/services/instanceController";
-
+import EventsSelect from "@/components/global/EventsSelect.vue";
 export default {
   name: "InstanceWebsocket",
+  components: {
+    EventsSelect,
+  },
   props: {
     instance: {
       type: Object,
diff --git a/src/components/modal/ConnectPhone.vue b/src/components/modal/ConnectPhone.vue
index 512ce4c..5729bfa 100644
--- a/src/components/modal/ConnectPhone.vue
+++ b/src/components/modal/ConnectPhone.vue
@@ -20,32 +20,74 @@
   <v-dialog v-model="dialog" max-width="350px" :persistent="loading">
     <v-card :loading="loading && qrCode">
       <v-card-text class="pt-6">
-        <v-img v-if="qrCode" :src="qrCode" width="300px" height="300px" />
-        <v-card
-          v-else
-          width="300px"
-          height="300px"
-          variant="outlined"
-          elevation="0"
-        >
-          <v-card-text class="d-flex justify-center align-center h-100">
-            <v-progress-circular v-if="loading" indeterminate color="primary" />
-            <v-icon v-else-if="error" size="x-large">mdi-qrcode-remove</v-icon>
-          </v-card-text>
-        </v-card>
-        <v-btn
-          text
-          size="small"
-          block
-          @click="loadQr"
-          :loading="loading && qrCode"
-          :disabled="disabledRefresh || !qrCode"
-          variant="tonal"
-          class="mt-2"
-        >
-          <v-icon start size="small">mdi-refresh</v-icon>
-          {{ $t("refresh") }}
-        </v-btn>
+        <v-btn-toggle v-model="connectType" class="d-flex mb-4" color="primary">
+          <v-btn text value="qr" class="flex-grow-1">
+            <v-icon start>mdi-qrcode-scan</v-icon>
+            {{ $t("connectPhone.qr") }}
+          </v-btn>
+          <v-btn text value="code" class="flex-grow-1">
+            <v-icon start>mdi-key</v-icon>
+            {{ $t("connectPhone.code") }}
+          </v-btn>
+        </v-btn-toggle>
+        <template v-if="connectType == 'qr'">
+          <v-img v-if="qrCode" :src="qrCode" width="300px" height="300px" />
+          <v-card
+            v-else
+            width="300px"
+            height="300px"
+            variant="outlined"
+            elevation="0"
+          >
+            <v-card-text class="d-flex justify-center align-center h-100">
+              <v-progress-circular
+                v-if="loading"
+                indeterminate
+                color="primary"
+              />
+              <v-icon v-else-if="error" size="x-large">
+                mdi-qrcode-remove
+              </v-icon>
+            </v-card-text>
+          </v-card>
+          <v-btn
+            text
+            size="small"
+            block
+            @click="loadQr"
+            :loading="loading && qrCode"
+            :disabled="disabledRefresh || !qrCode"
+            variant="tonal"
+            class="mt-2"
+          >
+            <v-icon start size="small">mdi-refresh</v-icon>
+            {{ $t("refresh") }}
+          </v-btn>
+        </template>
+        <template v-else-if="connectType == 'code'">
+          <v-text-field
+            v-model="dialogCode"
+            :rules="[(v) => !!v || $t('required')]"
+            :disabled="loading"
+            :label="$t('connectPhone.code')"
+            outlined
+            dense
+            class="mt-2"
+          />
+          <!-- <v-btn
+            text
+            size="small"
+            block
+            @click="AppStore.reconnect(dialogCode)"
+            :loading="loading"
+            :disabled="!dialogCode"
+            variant="tonal"
+            class="mt-2"
+          >
+            <v-icon start size="small">mdi-key</v-icon>
+            {{ $t("connectPhone.connect") }}
+          </v-btn> -->
+        </template>
 
         <v-alert type="error" v-if="error" class="mt-2">
           {{ Array.isArray(error) ? error.join(", ") : error }}
@@ -71,14 +113,17 @@ export default {
   data: () => ({
     dialog: false,
     error: false,
+    connectType: "qr",
 
     loading: false,
-    qrCode: null,
     success: false,
+    qrCode: null,
+
+    phone: "",
+    pairCode: "",
 
     timeout: null,
     disabledRefresh: false,
-
     AppStore: useAppStore(),
   }),
   methods: {
@@ -97,8 +142,7 @@ export default {
           this.dialog = false;
           this.AppStore.reconnect();
           return;
-        } else
-          throw new Error(this.$t('connectPhone.apiGenericError'));
+        } else throw new Error(this.$t("connectPhone.apiGenericError"));
 
         this.timeout = setTimeout(this.loadQr, 40000);
         this.disabledRefresh = true;
@@ -118,6 +162,31 @@ export default {
       await this.AppStore.reconnect();
     },
   },
+  watch: {
+    dialog(val) {
+      if (!val) {
+        clearTimeout(this.timeout);
+        this.qrCode = null;
+        this.error = false;
+      }
+    },
+    connectType(val) {
+      debugger;
+      if (val == "qr") {
+        this.phone = "";
+        this.pairCode = "";
+        this.error = false;
+        this.loadQr();
+      } else {
+        instanceController
+          .logout(this.instance.instance.instanceName)
+          .catch(() => {});
+        this.qrCode = null;
+        this.error = false;
+        clearTimeout(this.timeout);
+      }
+    },
+  },
   props: {
     instance: {
       type: Object,
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 141fef7..0007f94 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -33,6 +33,10 @@ export default {
     connecting: "Connecting",
     open: "Connected",
   },
+  toggleSelect: {
+    all: "Select all",
+    none: "Deselect all",
+  },
   about: {
     title: "About",
     description: "Evolution Manager makes it easy to manage your APIs with an intuitive interface. It was created by independent developers, focusing on improving the user experience and administration of API functionalities.",
diff --git a/src/i18n/es.js b/src/i18n/es.js
index c47afe9..7259a90 100644
--- a/src/i18n/es.js
+++ b/src/i18n/es.js
@@ -33,6 +33,10 @@ export default {
     connecting: "Conectando",
     open: "Conectado",
   },
+  toggleSelect: {
+    all: "Seleccionar todos",
+    none: "Desmarcar todos",
+  },
   about: {
     title: "Acerca de",
     description: "Evolution Manager facilita la gestión de sus API con una interfaz intuitiva. Fue creado por desarrolladores independientes, enfocándose en mejorar la experiencia del usuario y la administración de las funcionalidades API.",
diff --git a/src/i18n/pt.js b/src/i18n/pt.js
index 491d048..5f0b563 100644
--- a/src/i18n/pt.js
+++ b/src/i18n/pt.js
@@ -33,6 +33,10 @@ export default {
     connecting: "Conectando",
     open: "Conectado",
   },
+  toggleSelect: {
+    all: "Selecionar todos",
+    none: "Desmarcar todos",
+  },
   about: {
     title: "Sobre",
     description: "O Evolution Manager facilita a gestão de suas APIs com uma interface intuitiva. Ele foi criado por desenvolvedores independentes, focando em melhorar a experiência do usuário e a administração das funcionalidades da API.",
@@ -66,7 +70,9 @@ export default {
   },
   connectPhone: {
     title: "Telefone não conectado",
-    apiGenericError: "Não foi possível carregar o QR Code, se o erro persistir, reinicie a API e tente novamente."
+    apiGenericError: "Não foi possível carregar o QR Code, se o erro persistir, reinicie a API e tente novamente.",
+    qr: "QR Code",
+    code: "Código",
   },
   options: {
     title: "Comportamento",