new instance layout

src/views/Home.vue

@@ -24,73 +24,84 @@
       </v-btn>
     </div>
 
+    <v-row dense>
+      <v-col cols="12" v-if="instances.length === 0 || loading">
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+        color="info"
+        ></v-progress-linear>
+        <v-alert type="info" class="mb-4" v-else :loading="loading" outlined>
+          {{ loading ? "Carregando..." : "Nenhuma instância encontrada" }}
+        </v-alert>
+      </v-col>
 
-    <v-data-table
-      :headers="headers"
-      :items="instances || []"
-      :loading="loading"
-      :items-per-page="10"
-    >
-    <template v-slot:no-data>
-      <v-card v-if="!loading" variant="outlined" class="my-4">
-        <v-card-text>
-          <div class="text-center">
-            <v-icon size="70">mdi-server-network-off</v-icon>
-            <h3 class="mt-4">Nenhuma instância encontrada</h3>
-          </div>
-        </v-card-text>
-      </v-card>
-    </template>
-
-    <!-- eslint-disable-next-line vue/valid-v-slot -->
-    <template v-slot:item.instance.instanceName="{ item }">
-      <b>{{ item.instance.instanceName }}</b>  
-    </template>
-      <!-- eslint-disable-next-line vue/valid-v-slot -->
-      <template v-slot:item.instance.status="{ item }">
-        <v-chip
-          :color="statusMapper[item.instance.status].color"
-          :text-color="statusMapper[item.instance.status].textColor"
-          size="small"
-          label
-        >
-          <v-icon
-            v-if="statusMapper[item.instance.status].icon"
-            start
-            size="small"
-          >
-            {{ statusMapper[item.instance.status].icon }}
-          </v-icon>
-          {{ statusMapper[item.instance.status].text }}
-        </v-chip>
-      </template>
-      <!-- eslint-disable-next-line vue/valid-v-slot -->
-      <template v-slot:item.actions="{ item }">
-        <v-btn
+      <v-col
+        cols="12"
+        sm="6"
+        lg="4"
+        v-for="{ instance } in instances"
+        :key="instance.instanceName"
+      >
+        <v-card
+          @click="goToInstance(instance)"
+          class="pa-2 rounded-lg"
+          variant="outlined"
           :disabled="loading"
-          :to="`/${item.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 === item.instance.instanceName"
-          @click="deleteInstance(item.instance.instanceName)"
-          icon
-          variant="tonal"
-          color="error"
-          size="x-small"
-        >
-          <v-icon>mdi-delete</v-icon>
-        </v-btn>
-      </template>
-    </v-data-table>
-
+          <div class="d-flex align-center gap-2">
+            <v-avatar size="50">
+              <v-img
+                v-if="instance.profilePictureUrl"
+                :src="instance.profilePictureUrl"
+              />
+              <v-icon v-else>{{ statusMapper[instance.status].icon }}</v-icon>
+            </v-avatar>
+            <div class="flex-shrink-1">
+              <v-chip
+                :color="statusMapper[instance.status].color"
+                size="x-small"
+                label
+              >
+                <v-icon
+                  v-if="statusMapper[instance.status].icon"
+                  start
+                  size="x-small"
+                >
+                  {{ statusMapper[instance.status].icon }}
+                </v-icon>
+                {{ statusMapper[instance.status].text }}
+              </v-chip>
+              <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"
+                @click.stop="deleteInstance(instance.instanceName)"
+                icon
+                variant="tonal"
+                color="error"
+                size="x-small"
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
     <v-alert v-if="error" type="error">
       {{ error }}
     </v-alert>
@@ -123,13 +134,16 @@ export default {
         key: "instance.instanceName",
       },
       { title: "Status", key: "instance.status" },
-      { title: "Ações", key: "actions", sortable: false , align: "center"},
+      { title: "Ações", key: "actions", sortable: false, align: "center" },
     ],
   }),
   methods: {
     addInstance() {
       this.$refs.createInstanceModal.open();
     },
+    goToInstance(instance) {
+      this.$router.push(`/${instance.instanceName}`);
+    },
     async deleteInstance(instanceName) {
       try {
         this.loadingDelete = instanceName;
@@ -138,7 +152,6 @@ export default {
         );
         if (!confirm) return;
 
-
         await instanceController.logout(instanceName).catch(() => {});
         await instanceController.delete(instanceName);
         await this.AppStore.reconnect();
@@ -165,7 +178,6 @@ export default {
       return this.AppStore.instances;
     },
   },
-  mounted() {
-  },
+  mounted() {},
 };
 </script>