Update package version and add participants

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolution-manager",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "main": "dist",
   "scripts": {
     "dev": "vite",

src/components/modal/GroupAddParticipantModal.vue

@@ -0,0 +1,141 @@
+<template>
+  <v-dialog v-model="dialog" max-width="600px" :persistent="loading">
+    <v-card :loading="loading">
+      <v-card-title class="justify-space-between d-flex align-center">
+        Adicionar Participantes •
+        {{ group?.subject }}
+      </v-card-title>
+      <v-card-text>
+        <h5 class="mb-2">Adicione participantes ao grupo</h5>
+
+        <v-textarea
+          v-model="participants"
+          label="Participantes (um por linha)"
+          outlined
+          density="comfortable"
+          rows="5"
+          :placeholder="`Um por linha`"
+          :hint="`${prependDDI ? '' : 'DDI + '}DDD + Número\n • ${
+            validParticipants.length
+          } encontrados.`"
+        />
+
+        <div class="d-flex">
+          <v-switch
+            class="flex-shrink-0"
+            v-model="prependDDI"
+            label="Adicionar DDI"
+            color="primary"
+            density="comfortable"
+            hint="Adiciona o DDI automaticamente no início do número"
+          ></v-switch>
+          <v-text-field
+            v-if="prependDDI"
+            class="flex-grow-1"
+            type="number"
+            v-model="ddi"
+            label="DDI"
+            outlined
+            density="comfortable"
+          ></v-text-field>
+        </div>
+
+        <v-alert type="error" v-if="error">
+          {{ Array.isArray(error) ? error.join(", ") : error }}
+        </v-alert>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text @click="dialog = false" :disabled="loading"> Fechar </v-btn>
+        <v-spacer />
+        <v-btn
+          color="success"
+          @click="addToGroup"
+          :loading="loading"
+          :disabled="!validParticipants.length"
+          variant="tonal"
+        >
+          Adicionar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+export default {
+  name: "SettingsModal",
+  data: () => ({
+    dialog: false,
+    loading: false,
+    error: false,
+    participants: "",
+    ddi: "55",
+    prependDDI: true,
+  }),
+  methods: {
+    async addToGroup() {
+      try {
+        this.loading = true;
+        this.error = false;
+
+        const participants = this.validParticipants.map((p) => {
+          if (this.prependDDI) p = `${this.ddi}${p}`;
+          return p.replace(/\D/g, "");
+        });
+
+        await instanceController.group.updateParticipant(
+          this.instance.instance.instanceName,
+          this.group.id,
+          "add",
+          participants
+        );
+
+        this.participants = "";
+        this.dialog = false;
+        this.$emit("success");
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+    open() {
+      this.dialog = true;
+    },
+  },
+  watch: {
+    dialog(val) {
+      if (!val) {
+        this.participants = "";
+        this.error = false;
+        this.prependDDI = true;
+        this.ddi = "55";
+      }
+    },
+  },
+  computed: {
+    validParticipants() {
+      return [
+        ...new Set(
+          this.participants
+            .trim()
+            .split("\n")
+            .filter((p) => p.trim().length > 5)
+        ),
+      ];
+    },
+  },
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["close"],
+};
+</script>

src/components/modal/GroupModal.vue

@@ -34,7 +34,7 @@
             </div>
           </v-card>
 
-          <div class="d-flex justify-space-between mt-4">
+          <div class="d-flex flex-wrap justify-space-between mt-4">
             <h4>
               Participantes
               <v-chip color="info" size="small">
@@ -42,17 +42,39 @@
               </v-chip>
             </h4>
 
-            <div v-if="isAdmin">
+            <div
+              v-if="isAdmin"
+              class="flex-grow-1 d-flex justify-end align-center gap-x-1"
+            >
+              <v-tooltip text="Remover participantes" location="top">
+                <template v-slot:activator="{ props }">
                   <v-btn
+                    v-bind="props"
                     @click="removeParticipants"
                     :loading="deletingInstance"
                     :disabled="selected.length === 0 || btnLoading"
                     color="error"
                     text
-                size="x-small"
+                    size="small"
                   >
-                Remover
+                    <v-icon size="large"> mdi-account-multiple-remove </v-icon>
                   </v-btn>
+                </template>
+              </v-tooltip>
+              <v-tooltip text="Adicionar participantes" location="top">
+                <template v-slot:activator="{ props }">
+                  <v-btn
+                    v-bind="props"
+                    @click="addParticipant"
+                    :disabled="btnLoading"
+                    color="primary"
+                    text
+                    size="small"
+                  >
+                    <v-icon size="large"> mdi-account-multiple-plus </v-icon>
+                  </v-btn>
+                </template>
+              </v-tooltip>
             </div>
           </div>
 
@@ -111,11 +133,21 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+  <GroupAddParticipantModal
+    ref="addParticipant"
+    :instance="instance"
+    :group="group"
+    @success="loadFullInfo(group.id)"
+  />
 </template>
 
 <script>
 import instanceController from "@/services/instanceController";
+import GroupAddParticipantModal from "./GroupAddParticipantModal.vue";
 export default {
+  components: {
+    GroupAddParticipantModal,
+  },
   name: "SettingsModal",
   data: () => ({
     dialog: false,
@@ -132,6 +164,9 @@ export default {
       if (!timestamp) return "";
       return new Date(timestamp).toLocaleString();
     },
+    addParticipant() {
+      this.$refs.addParticipant.open();
+    },
     async removeParticipants() {
       try {
         this.deletingInstance = true;
@@ -146,7 +181,6 @@ export default {
           if (!confirm) return;
         }
 
-
         await instanceController.group.updateParticipant(
           this.instance.instance.instanceName,
           this.group.id,