add search and fix chatwoot save

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.2",
+  "version": "0.4.3",
   "main": "dist",
   "engines": {
     "node": ">=16.0.0"

src/components/instance/settings/Chatwoot.vue

@@ -139,11 +139,12 @@
               v-model="chatwootData.auto_create"
               label="Conversa pendente"
               :disabled="loading || !AppStore.versionSatisfies('>=1.6.0')"
-              :error-messages="[
+              :hint="[
                 !AppStore.versionSatisfies('>=1.6.0')
                   ? 'Disponível a partir da versão 1.6.0'
                   : undefined,
               ]"
+              :persistent-hint="!AppStore.versionSatisfies('>=1.6.0')"
               hide-details="auto"
               class="mb-3"
               density="compact"

src/views/Home.vue

@@ -25,18 +25,57 @@
     </div>
 
     <v-row dense>
-      <v-col cols="12" v-if="instances.length === 0 || loading">
+      <v-col cols="12" v-if="loading">
         <v-progress-linear v-if="loading" indeterminate color="info" />
         <v-alert type="info" class="mb-4" v-else :loading="loading" outlined>
-          {{ loading ? "Carregando..." : "Nenhuma instância encontrada" }}
+          Carregando...
         </v-alert>
       </v-col>
-
+      <v-col v-else cols="12">
+        <div class="d-flex gap-2 flex-wrap">
+          <v-text-field
+            v-model="search"
+            label="Pesquisar"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+          />
+          <v-btn-toggle
+            v-model="statusFilter"
+            variant="outlined"
+            divided
+            mandatory
+          >
+            <v-btn
+              :value="false"
+              :disabled="loading"
+              :loading="loading"
+              variant="outlined"
+              size="x-small"
+            >
+              Todos
+            </v-btn>
+            <v-btn
+              v-for="[key, item] in Object.entries(statusMapper)"
+              :key="item.text"
+              :value="key"
+              :color="item.color"
+              :disabled="loading"
+              :loading="loading"
+              variant="outlined"
+              size="x-small"
+            >
+              {{ item.text }}
+            </v-btn>
+          </v-btn-toggle>
+        </div>
+      </v-col>
+      <template v-if="filteredInstances.length !== 0">
         <v-col
           cols="12"
           sm="6"
           lg="4"
-        v-for="{ instance } in instances"
+          v-for="{ instance } in filteredInstances"
           :key="instance.instanceName"
         >
           <v-card
@@ -71,17 +110,6 @@
                 <h5>{{ instance.instanceName }}</h5>
               </div>
               <div class="ml-auto flex-shrink-0">
-              <!-- <v-btn
-                :disabled="loading"
-                :to="`/${instance.instanceName}`"
-                icon
-                size="x-small"
-                class="mr-1"
-                variant="tonal"
-                color="info"
-              >
-                <v-icon>mdi-cog</v-icon>
-              </v-btn> -->
                 <v-btn
                   :disabled="loading || !!loadingDelete"
                   :loading="loadingDelete === instance.instanceName"
@@ -97,6 +125,12 @@
             </div>
           </v-card>
         </v-col>
+      </template>
+      <v-col v-else cols="12">
+        <v-alert type="info" class="mb-4" outlined>
+          Nenhuma instância encontrada
+        </v-alert>
+      </v-col>
     </v-row>
     <v-alert v-if="error" type="error">
       {{ error }}
@@ -122,16 +156,8 @@ export default {
     loadingDelete: false,
     error: false,
     statusMapper: statusMapper,
-    headers: [
+    statusFilter: false,
-      {
+    search: "",
-        title: "Nome",
-        align: "start",
-        sortable: true,
-        key: "instance.instanceName",
-      },
-      { title: "Status", key: "instance.status" },
-      { title: "Ações", key: "actions", sortable: false, align: "center" },
-    ],
   }),
   methods: {
     addInstance() {
@@ -176,10 +202,25 @@ export default {
     loading() {
       return this.loadingInner || this.AppStore.connecting;
     },
-
     instances() {
       return this.AppStore.instances;
     },
+    filteredInstances() {
+      const instances = this.instances.filter((instance) => {
+        if (!this.statusFilter) return true;
+        return instance.instance.status === this.statusFilter;
+      });
+
+      if (!this.search) return instances;
+      return instances.filter((instance) => {
+        const search = this.search.trim().toLowerCase();
+
+        return (
+          instance.instance.instanceName.toLowerCase().includes(search) ||
+          instance.instance.owner.toLowerCase().includes(search)
+        );
+      });
+    },
   },
   mounted() {},
 };