add EventsSelect component

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

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"

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>

src/components/instance/settings/Rabbitmq.vue

@@ -31,18 +31,7 @@
       </v-alert>
 
       <v-form v-model="valid">
-        <v-select
+        <EventsSelect v-model="rabbitmqData.events" :disabled="loading" />
-          :items="rabbitmqEventsType"
-          v-model="rabbitmqData.events"
-          :disabled="loading"
-          :label="$t('events')"
-          hide-details
-          class="mb-3"
-          multiple
-          outlined
-          dense
-          chips
-        />
       </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,

src/components/instance/settings/Webhook.vue

@@ -43,19 +43,7 @@
             },
           ]"
         />
-
+        <EventsSelect v-model="webhookData.events" :disabled="loading" />
-        <v-select
-          :items="webhookEventsType"
-          v-model="webhookData.events"
-          :disabled="loading"
-          :label="$t('events')"
-          hide-details
-          class="mb-3"
-          multiple
-          outlined
-          dense
-          chips
-        />
 
         <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: {

src/components/instance/settings/Websocket.vue

@@ -26,18 +26,7 @@
       </v-alert>
 
       <v-form v-model="valid">
-        <v-select
+        <EventsSelect v-model="websocketData.events" :disabled="loading" />
-          :items="websocketEventsType"
-          v-model="websocketData.events"
-          :disabled="loading"
-          :label="$t('events')"
-          hide-details
-          class="mb-3"
-          multiple
-          outlined
-          dense
-          chips
-        />
       </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,

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-btn-toggle v-model="connectType" class="d-flex mb-4" color="primary">
-        <v-card
+          <v-btn text value="qr" class="flex-grow-1">
-          v-else
+            <v-icon start>mdi-qrcode-scan</v-icon>
-          width="300px"
+            {{ $t("connectPhone.qr") }}
-          height="300px"
+          </v-btn>
-          variant="outlined"
+          <v-btn text value="code" class="flex-grow-1">
-          elevation="0"
+            <v-icon start>mdi-key</v-icon>
-        >
+            {{ $t("connectPhone.code") }}
-          <v-card-text class="d-flex justify-center align-center h-100">
+          </v-btn>
-            <v-progress-circular v-if="loading" indeterminate color="primary" />
+        </v-btn-toggle>
-            <v-icon v-else-if="error" size="x-large">mdi-qrcode-remove</v-icon>
+        <template v-if="connectType == 'qr'">
-          </v-card-text>
+          <v-img v-if="qrCode" :src="qrCode" width="300px" height="300px" />
-        </v-card>
+          <v-card
-        <v-btn
+            v-else
-          text
+            width="300px"
-          size="small"
+            height="300px"
-          block
+            variant="outlined"
-          @click="loadQr"
+            elevation="0"
-          :loading="loading && qrCode"
+          >
-          :disabled="disabledRefresh || !qrCode"
+            <v-card-text class="d-flex justify-center align-center h-100">
-          variant="tonal"
+              <v-progress-circular
-          class="mt-2"
+                v-if="loading"
-        >
+                indeterminate
-          <v-icon start size="small">mdi-refresh</v-icon>
+                color="primary"
-          {{ $t("refresh") }}
+              />
-        </v-btn>
+              <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
+        } else throw new Error(this.$t("connectPhone.apiGenericError"));
-          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,

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.",

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.",

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",