Adicione primeiros dados da tabela

src/auth/router.js

@@ -73,35 +73,37 @@ const hasPermission = (requiredPermissions = []) => {
   );
 };
 
-router.beforeEach((to, from, next) => {
-  if (to.meta.title) {
-    document.title = to.meta.title;
-  }
+// router.beforeEach((to, from, next) => {
+//   if (to.meta.title) {
+//     document.title = to.meta.title;
+//   }
 
-  // if (to.matched.some((record) => record.meta.requiresAuth)) {
-  if (!isAuthenticated()) {
-    next({
-      path: "/login",
-      query: { redirect: to.fullPath },
-    });
+//   console.log(to, from);
 
-    return;
-  }
+//   // if (to.matched.some((record) => record.meta.requiresAuth)) {
+//   if (!isAuthenticated()) {
+//     next({
+//       path: "/login",
+//     });
 
-  //   const requiredPermissions = to.meta.permissions || [];
+//     return;
+//   }
 
-  //   if (requiredPermissions.length > 0 && !hasPermission(requiredPermissions)) {
-  //     next({ path: "/unauthorized" });
+//   //   const requiredPermissions = to.meta.permissions || [];
 
-  //     return;
-  //   }
-  // }
+//   //   if (requiredPermissions.length > 0 && !hasPermission(requiredPermissions)) {
+//   //     next({ path: "/unauthorized" });
 
-  // if (to.matched.some((record) => record.meta.guest) && isAuthenticated()) {
-  //   next({ path: "/" });
+//   //     return;
+//   //   }
+//   // }
 
-  //   return;
-  // }
+//   // if (to.matched.some((record) => record.meta.guest) && isAuthenticated()) {
+//   //   next({ path: "/" });
 
-  next();
-});
+//   //   return;
+//   // }
+
+//   next();
+//   return;
+// });

src/components/Button/index.vue

@@ -7,6 +7,7 @@
     :type="type"
     :disable="loading || disabled"
     :text-color="textColor"
+    :full-width="fullWidth"
   />
 </template>
 

src/components/Table/index.vue

@@ -6,7 +6,6 @@
       :columns="columns"
       :row-key="rowKey"
       :loading="loading"
-      row-key="name"
       flat
       bordered
       virtual-scroll
@@ -24,7 +23,7 @@
     <div class="row q-mt-md">
       <div class="col-8 flex justify-end">
         <q-pagination
-          v-model="pagination.currentPage"
+          v-model="pagination.page"
           color="primary"
           :max="pagination.totalPages"
           size="md"
@@ -32,10 +31,7 @@
       </div>
 
       <div class="col-4 flex justify-end items-center">
-        <span class="text-grey-5"
-          >Mostrando {{ pagination.currentPage }} de
-          {{ pagination.totalItems }}</span
-        >
+        <span class="text-grey-5">Total: {{ pagination.total }}</span>
       </div>
     </div>
   </q-card>
@@ -61,6 +57,11 @@ export default {
       required: false,
       default: "name",
     },
+    rowKey: {
+      type: String,
+      required: false,
+      default: "id",
+    },
     title: {
       type: String,
       required: false,
@@ -86,6 +87,7 @@ export default {
     return {
       columns: props.columns,
       rows: props.rows,
+      rowKey: props.rowKey,
     };
   },
 };

src/components/TextField/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-sm">
+  <div>
     <div>
       <span>{{ label }} {{ required ? "*" : "" }}</span>
     </div>

src/config/axios.js

@@ -17,3 +17,15 @@ API.interceptors.request.use((config) => {
 
   return config;
 });
+
+API.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response.status === 401) {
+      Cookies.remove("token");
+      window.location.href = "/login";
+    }
+
+    return Promise.reject(error);
+  }
+);

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from "vue";
-import { Quasar } from "quasar";
+import { Notify, Quasar } from "quasar";
 
 import quasarLang from "quasar/lang/pt-BR";
 
@@ -21,7 +21,7 @@ app.use(Quasar, {
   config: {
     dark: "auto",
   },
-  plugins: {},
+  plugins: { Notify },
   lang: quasarLang,
 });
 

src/routes/videos/index.vue

@@ -1,26 +1,42 @@
 <template>
   <div class="user-list q-pa-md">
     <q-card flat bordered class="q-pa-sm q-mb-lg">
-      <div class="row">
-        <div class="col-4">
-          <TextField label="Nome" required />
+      <div class="row q-pa-sm q-gutter-sm">
+        <div class="col-3">
+          <TextField label="Título" />
+        </div>
+        <div class="col-3">
+          <TextField label="URL" />
+        </div>
+        <div class="col-3">
+          <TextField label="VideoID" />
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-4">
-          <Button label="Buscar" @click="handleSearch" />
+      <div class="row q-pa-sm">
+        <div class="col-6">
+          <Button
+            label="Buscar"
+            :loading="loading"
+            @click="handleSearch"
+            fullWidth
+          />
         </div>
       </div>
     </q-card>
 
-    <Table :columns="columns" :rows="rows" :pagination="pagination">
+    <Table
+      :columns="columns"
+      :rows="rows"
+      :pagination="pagination"
+      row-key="id"
+    >
       <template #no-data>
         <div
           class="full-width row flex-center q-gutter-sm"
           style="font-size: 1.3em"
         >
-          <span> Infelizmente, não há dados para serem mostrados </span>
+          <span> Não há vídeos </span>
         </div>
       </template>
     </Table>
@@ -31,42 +47,16 @@
 import Button from "@components/Button";
 import Table from "@components/Table";
 import TextField from "@components/TextField";
+
 import { API } from "@config/axios";
+import { getErrorMessage } from "@utils/axios";
 
 const columns = [
   {
-    name: "name",
-    required: true,
-    label: "Dessert (100g serving)",
+    name: "id",
+    label: "Identificador",
     align: "left",
-    field: (row) => row.name,
-    format: (val) => `${val}`,
-    sortable: true,
-  },
-  {
-    name: "calories",
-    align: "center",
-    label: "Calories",
-    field: "calories",
-    sortable: true,
-  },
-  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
-  { name: "carbs", label: "Carbs (g)", field: "carbs" },
-  { name: "protein", label: "Protein (g)", field: "protein" },
-  { name: "sodium", label: "Sodium (mg)", field: "sodium" },
-  {
-    name: "calcium",
-    label: "Calcium (%)",
-    field: "calcium",
-    sortable: true,
-    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
-  },
-  {
-    name: "iron",
-    label: "Iron (%)",
-    field: "iron",
-    sortable: true,
-    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
+    field: "id",
   },
 ];
 
@@ -81,21 +71,31 @@ export default {
     return {
       columns,
       rows: [],
+      loading: false,
       pagination: {
-        currentPage: 1,
+        page: 1,
         totalPages: 1,
-        totalItems: 10,
+        total: 10,
+        perPage: 10,
       },
     };
   },
   methods: {
     async handleSearch() {
       try {
+        this.loading = true;
+
         const { data } = await API.get("/videos");
 
-        console.log(data);
+        this.rows = data.content;
+        this.pagination = data.pagination;
       } catch (error) {
-        console.log(error);
+        this.$q.notify({
+          type: "negative",
+          message: getErrorMessage(error, "Erro ao buscar vídeos"),
+        });
+      } finally {
+        this.loading = false;
       }
     },
   },

src/utils/axios.js

@@ -0,0 +1,9 @@
+import { isAxiosError } from "axios";
+
+export function getErrorMessage(error, defaultMessage = "Erro inesperado") {
+  if (isAxiosError(error)) {
+    return error.response.data.message;
+  }
+
+  return error?.message ?? defaultMessage;
+}