Ajuste de layout

src/components/Table/index.vue

@@ -1,14 +1,16 @@
 <template>
   <q-card class="q-pa-md" flat bordered>
     <q-table
+      :key="key + '-' + pagination.perPage"
       :title="title"
       :rows="rows"
       :columns="columns"
       :row-key="rowKey"
       :loading="loading"
+      :pagination="{ rowsPerPage: pagination.perPage, page: pagination.page }"
+      :rows-per-page-options="[10, 25, 50, 100]"
       flat
       bordered
-      virtual-scroll
       hide-pagination
     >
       <template v-slot:loading>
@@ -21,7 +23,19 @@
     </q-table>
 
     <div class="row q-mt-md">
-      <div class="col-8 flex justify-end">
+      <div class="col-2 flex items-center">
+        <q-select
+          filled
+          v-model="pagination.perPage"
+          :options="[10, 25, 50, 100]"
+          emit-value
+          map-options
+          :disable="loading || rows.length === 0"
+          @update:model-value="updatePagination({ perPage: $event })"
+        />
+      </div>
+
+      <div class="col-8 flex justify-center">
         <q-pagination
           v-model="pagination.page"
           color="primary"
@@ -29,11 +43,11 @@
           :max="pagination.totalPages"
           :disable="loading"
           input
-          @update:model-value="updatePagination"
+          @update:model-value="updatePagination({ page: $event })"
         />
       </div>
 
-      <div class="col-4 flex justify-end items-center">
+      <div class="col-2 flex justify-end items-center">
         <span class="text-grey-5">Total: {{ pagination.total }}</span>
       </div>
     </div>
@@ -46,6 +60,10 @@ import has from "lodash/has";
 export default {
   name: "Table",
   props: {
+    key: {
+      type: String,
+      default: "table-clipperia",
+    },
     columns: {
       type: Array,
       required: true,
@@ -87,8 +105,17 @@ export default {
   },
   emits: ["update:pagination"],
   methods: {
-    updatePagination(page) {
+    updatePagination({ page, perPage }) {
-      this.$emit("update:pagination", { ...this.pagination, page });
+      const newPagination = { ...this.pagination };
+
+      if (page) {
+        newPagination.page = page;
+      }
+      if (perPage) {
+        newPagination.perPage = perPage;
+      }
+
+      this.$emit("update:pagination", newPagination);
     },
   },
 };

src/routes/videos/index.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="user-list q-pa-md">
-    <q-card flat bordered class="q-pa-sm q-mb-lg">
+    <q-card
-      <div class="row q-pa-sm q-gutter-sm">
+      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>
         <div class="col-3">
-          <TextField label="URL" />
+          <TextField label="Video ID" />
         </div>
         <div class="col-3">
-          <TextField label="VideoID" />
+          <q-select outlined :options="['Ativo', 'Inativo']" label="Situação" />
         </div>
       </div>
 
@@ -30,7 +37,7 @@
       :rows="rows"
       :pagination="pagination"
       :loading="loading"
-      row-key="id"
+      key="table-videos"
       @update:pagination="updatePagination"
     >
       <template #no-data>
@@ -84,19 +91,6 @@ const columns = [
   },
 ];
 
-/*
-{
-    "id": 195,
-    "title": "VIDA EXTRATERRESTRE: FINALMENTE ENCONTRADA A EVIDÊNCIA + AGUARDADA...",
-    "url": "https://www.youtube.com/watch?v=2iU7oAmQROQ",
-    "situation": "CONCLUIDO",
-    "clips_quantity": 3,
-    "videoid": "2iU7oAmQROQ",
-    "filename": "VIDA_EXTRATERRESTRE_FINALMENTE_ENCONTRADA_A_EVIDENCIA_AGUARDADA_medium.mp4",
-    "datetime_download": "Invalid Date"
-}
-*/
-
 export default {
   name: "UserList",
   components: {