Corrige tabela e paginacao

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+pnpm-lock.yaml
 
 node_modules
 dist

src/components/Table/index.vue

@@ -12,7 +12,7 @@
       hide-pagination
     >
       <template v-slot:loading>
-        <q-inner-loading color="primary" />
+        <q-inner-loading showing color="primary" />
       </template>
 
       <template v-slot:no-data>
@@ -25,8 +25,11 @@
         <q-pagination
           v-model="pagination.page"
           color="primary"
-          :max="pagination.totalPages"
           size="md"
+          :max="pagination.totalPages"
+          :disable="loading"
+          input
+          @update:model-value="updatePagination"
         />
       </div>
 
@@ -41,54 +44,52 @@
 import has from "lodash/has";
 
 export default {
+  name: "Table",
   props: {
     columns: {
       type: Array,
       required: true,
-      validator: (value) => value.some((item) => has(item, ["name", "label"])),
+      validator: (value) =>
+        Array.isArray(value) &&
+        value.every((col) => has(col, "name") && has(col, "label")),
     },
     rows: {
       type: Array,
       required: true,
-      validator: (value) => value.some((item) => has(item, ["name", "label"])),
+      validator: (value) => Array.isArray(value),
     },
     rowName: {
       type: String,
-      required: false,
       default: "name",
     },
     rowKey: {
       type: String,
-      required: false,
       default: "id",
     },
-    title: {
-      type: String,
-      required: false,
-    },
+    title: String,
     loading: {
       type: Boolean,
-      required: false,
       default: false,
     },
     pagination: {
       type: Object,
       required: false,
       default: {
-        sortBy: "desc",
-        descending: false,
-        currentPage: 1,
+        page: 1,
+        direction: "desc",
+        perPage: 10,
+        total: 10,
         totalPages: 1,
-        totalItems: 10,
+        hasNext: false,
+        hasPrev: false,
       },
     },
   },
-  setup(props) {
-    return {
-      columns: props.columns,
-      rows: props.rows,
-      rowKey: props.rowKey,
-    };
+  emits: ["update:pagination"],
+  methods: {
+    updatePagination(page) {
+      this.$emit("update:pagination", { ...this.pagination, page });
+    },
   },
 };
 </script>

src/routes/videos/index.vue

@@ -18,7 +18,7 @@
           <Button
             label="Buscar"
             :loading="loading"
-            @click="handleSearch"
+            @click="handleSearch(pagination)"
             fullWidth
           />
         </div>
@@ -29,7 +29,9 @@
       :columns="columns"
       :rows="rows"
       :pagination="pagination"
+      :loading="loading"
       row-key="id"
+      @update:pagination="updatePagination"
     >
       <template #no-data>
         <div
@@ -58,8 +60,43 @@ const columns = [
     align: "left",
     field: "id",
   },
+  {
+    name: "title",
+    label: "Título",
+    align: "center",
+    field: "title",
+  },
+  {
+    name: "clips_quantity",
+    label: "Clipes",
+    align: "left",
+    field: "clips_quantity",
+  },
+  {
+    name: "videoid",
+    label: "VideoID",
+    field: "videoid",
+  },
+  {
+    name: "situation",
+    label: "Situação",
+    field: "situation",
+  },
 ];
 
+/*
+{
+    "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: {
@@ -74,18 +111,26 @@ export default {
       loading: false,
       pagination: {
         page: 1,
-        totalPages: 1,
-        total: 10,
+        direction: "desc",
         perPage: 10,
+        total: 10,
+        totalPages: 1,
+        hasNext: false,
+        hasPrev: false,
       },
     };
   },
   methods: {
-    async handleSearch() {
+    async handleSearch(pagination) {
       try {
         this.loading = true;
 
-        const { data } = await API.get("/videos");
+        const { data } = await API.get("/videos", {
+          params: {
+            perPage: pagination.perPage,
+            page: pagination.page,
+          },
+        });
 
         this.rows = data.content;
         this.pagination = data.pagination;
@@ -98,6 +143,9 @@ export default {
         this.loading = false;
       }
     },
+    updatePagination(pagination) {
+      this.handleSearch(pagination);
+    },
   },
 };
 </script>