Ajusta layout

src/routes/videos/index.vue

@@ -1,68 +1,123 @@
 <template>
-  <div class="user-list q-pa-md">
-    <q-card
-      flat
-      bordered
-      class="q-pa-sm q-mb-lg"
-      :class="{
-        'bg-grey-2': !$q.dark.isActive,
-      }"
-    >
-      <div class="row q-pa-sm q-gutter-md">
-        <div class="col-3">
-          <TextField label="Título" />
+  <div class="videos-page">
+    <section class="app-page__header">
+      <div>
+        <h2 class="app-page__title">Biblioteca de vídeos</h2>
+        <p class="app-page__subtitle">
+          Filtre os vídeos processados pela IA, acompanhe o status dos recortes e inicie novas captações
+          em poucos cliques.
+        </p>
+      </div>
+
+      <div class="app-actions-bar">
+        <Button
+          variant="ghost"
+          icon="sym_o_refresh"
+          label="Atualizar"
+          @click="handleSearch(pagination)"
+        />
+        <Button icon="sym_o_add" label="Novo vídeo" @click="handleAddVideo" />
+      </div>
+    </section>
+
+    <q-card flat bordered class="videos-page__filters app-card">
+      <div class="videos-page__filters-head">
+        <div>
+          <h3>Filtrar resultados</h3>
+          <span>Refine a busca por título, identificador ou situação.</span>
         </div>
-        <div class="col-3">
-          <TextField label="Video ID" />
-        </div>
-        <div class="col-3">
-          <Dropdown
-            v-model="select"
-            label="Situação"
-            clearable
-            :options="situations"
-            :loading="situationsLoading"
+
+        <div class="videos-page__filters-actions">
+          <Button
+            variant="ghost"
+            color="secondary"
+            text-color="primary"
+            icon="sym_o_close"
+            label="Limpar filtros"
+            :disabled="!hasFilters"
+            @click="resetFilters"
           />
         </div>
       </div>
 
-      <div class="row q-pa-sm">
-        <div class="col-6">
-          <Button
-            label="Buscar"
-            :loading="loading"
-            @click="handleSearch(pagination)"
-            fullWidth
-          />
-        </div>
-        <div class="col-6">
-          <Button label="Teste" @click="handleTeste()" fullWidth />
-        </div>
+      <div class="videos-page__filters-grid">
+        <TextField
+          v-model="filters.title"
+          label="Título"
+          placeholder="Ex.: Cortes da live com convidados"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_title" color="primary" />
+          </template>
+        </TextField>
+
+        <TextField
+          v-model="filters.videoId"
+          label="Video ID"
+          placeholder="Ex.: x9-YRAYhesI"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_confirmation_number" color="primary" />
+          </template>
+        </TextField>
+
+        <Dropdown
+          v-model="filters.situations"
+          label="Situação"
+          clearable
+          :options="situations"
+          :loading="situationsLoading"
+          multiple
+        />
+      </div>
+
+      <div class="videos-page__filters-footer">
+        <Button
+          label="Buscar vídeos"
+          icon="sym_o_search"
+          :loading="loading"
+          :disabled="loading"
+          @click="handleSearch({ ...pagination, page: 1 })"
+        />
       </div>
     </q-card>
 
     <Table
+      key="videos-table"
+      class="videos-page__table"
+      title="Resultados"
+      subtitle="Veja os vídeos cadastrados, a quantidade de clipes e o status de processamento."
       :columns="columns"
       :rows="rows"
       :pagination="pagination"
       :loading="loading"
-      key="table-videos"
       @update:pagination="updatePagination"
     >
-      <template #no-data>
-        <div
-          class="full-width row flex-center q-gutter-sm"
-          style="font-size: 1.3em"
-        >
-          <span> Não há vídeos </span>
-        </div>
+      <template #actions>
+        <Button
+          variant="ghost"
+          icon="sym_o_download"
+          label="Exportar CSV"
+          @click="handleExport"
+        />
+      </template>
+
+      <template #empty-message>
+        Nenhum vídeo encontrado para os filtros selecionados.
+      </template>
+
+      <template #body="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div class="videos-page__cell">
+              <div class="videos-page__cell-label">{{ col.label }}</div>
+              <div class="videos-page__cell-value">{{ col.value }}</div>
+            </div>
+          </q-td>
+        </q-tr>
       </template>
     </Table>
   </div>
-
-  <q-page-sticky position="bottom-right" :offset="[20, 70]">
-    <q-btn fab icon="add" color="accent" @click="handleAddVideo" />
-  </q-page-sticky>
 </template>
 
 <script>
@@ -84,18 +139,18 @@ const columns = [
   {
     name: "title",
     label: "Título",
-    align: "center",
+    align: "left",
     field: "title",
   },
   {
     name: "clips_quantity",
     label: "Clipes",
-    align: "left",
+    align: "center",
     field: "clips_quantity",
   },
   {
     name: "videoid",
-    label: "VideoID",
+    label: "Video ID",
     field: "videoid",
   },
   {
@@ -106,7 +161,7 @@ const columns = [
 ];
 
 export default {
-  name: "UserList",
+  name: "VideosList",
   components: {
     Button,
     Table,
@@ -122,27 +177,54 @@ export default {
         page: 1,
         direction: "desc",
         perPage: 10,
-        total: 10,
+        total: 0,
         totalPages: 1,
         hasNext: false,
         hasPrev: false,
       },
       situations: [],
       situationsLoading: false,
-      select: [],
+      filters: {
+        title: "",
+        videoId: "",
+        situations: [],
+      },
     };
   },
-  mounted() {
-    this.getSituation();
+  computed: {
+    hasFilters() {
+      return (
+        !!this.filters.title ||
+        !!this.filters.videoId ||
+        (Array.isArray(this.filters.situations) && this.filters.situations.length > 0)
+      );
+    },
+  },
+  created() {
+    this.initializePage();
   },
   methods: {
+    async initializePage() {
+      await this.getSituation();
+      await this.handleSearch(this.pagination);
+    },
     async handleSearch(pagination) {
       try {
         this.loading = true;
 
-        const baseParams = {
-          situation: this.select,
-        };
+        const baseParams = {};
+
+        if (this.filters.title) {
+          baseParams.title = this.filters.title;
+        }
+
+        if (this.filters.videoId) {
+          baseParams.videoId = this.filters.videoId;
+        }
+
+        if (Array.isArray(this.filters.situations) && this.filters.situations.length) {
+          baseParams.situation = this.filters.situations;
+        }
 
         const { data } = await API.get("/videos", {
           params: {
@@ -182,31 +264,138 @@ export default {
         this.situationsLoading = false;
       }
     },
-    async handleTeste() {
-      try {
-        const { data } = await API.get("/videos/search", {
-          params: {
-            url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
-          },
-        });
-
-        console.log(data);
-      } catch (error) {
-        this.$q.notify({
-          type: "negative",
-          message: getErrorMessage(error, "Erro ao buscar situações"),
-        });
-      }
-    },
     handleAddVideo() {
       this.$router.push("/videos/new");
     },
+    resetFilters() {
+      this.filters = {
+        title: "",
+        videoId: "",
+        situations: [],
+      };
+
+      this.handleSearch({ ...this.pagination, page: 1 });
+    },
+    handleExport() {
+      if (!this.rows.length) {
+        this.$q.notify({
+          type: "warning",
+          message: "Não há dados para exportar. Ajuste os filtros e tente novamente.",
+        });
+        return;
+      }
+
+      this.$q.notify({
+        type: "info",
+        message: "Exportação em CSV disponível em breve.",
+      });
+    },
   },
 };
 </script>
 
-<style scoped>
-.user-list {
-  margin: 0 auto;
+<style scoped lang="scss">
+.videos-page {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.videos-page__filters h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.videos-page__filters span {
+  color: #475467;
+  font-size: 14px;
+}
+
+.videos-page__filters-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.videos-page__filters-actions {
+  display: flex;
+  align-items: center;
+}
+
+.videos-page__filters-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.videos-page__filters-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
+.videos-page__table {
+  margin-bottom: 32px;
+}
+
+.videos-page__cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.videos-page__cell-label {
+  display: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: #98a2b3;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.videos-page__cell-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: #101828;
+}
+
+body.body--dark .videos-page__filters h3 {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .videos-page__filters span {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+body.body--dark .videos-page__cell-value {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+@media (max-width: 768px) {
+  .videos-page__filters-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .app-actions-bar {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .videos-page__filters-footer {
+    justify-content: stretch;
+  }
+
+  .videos-page__filters-footer > * {
+    width: 100%;
+  }
+
+  .videos-page__cell-label {
+    display: block;
+  }
 }
 </style>