Adiciona rota para novo video

src/routes/videos/index.vue

@@ -16,7 +16,13 @@
           <TextField label="Video ID" />
         </div>
         <div class="col-3">
-          <q-select outlined :options="['Ativo', 'Inativo']" label="Situação" />
+          <Dropdown
+            v-model="select"
+            label="Situação"
+            clearable
+            :options="situations"
+            :loading="situationsLoading"
+          />
         </div>
       </div>
 
@@ -29,6 +35,9 @@
             fullWidth
           />
         </div>
+        <div class="col-6">
+          <Button label="Teste" @click="handleTeste()" fullWidth />
+        </div>
       </div>
     </q-card>
 
@@ -50,12 +59,17 @@
       </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>
 import Button from "@components/Button";
 import Table from "@components/Table";
 import TextField from "@components/TextField";
+import Dropdown from "@components/Dropdown";
 
 import { API } from "@config/axios";
 import { getErrorMessage } from "@utils/axios";
@@ -97,6 +111,7 @@ export default {
     Button,
     Table,
     TextField,
+    Dropdown,
   },
   data() {
     return {
@@ -112,17 +127,28 @@ export default {
         hasNext: false,
         hasPrev: false,
       },
+      situations: [],
+      situationsLoading: false,
+      select: [],
     };
   },
+  mounted() {
+    this.getSituation();
+  },
   methods: {
     async handleSearch(pagination) {
       try {
         this.loading = true;
 
+        const baseParams = {
+          situation: this.select,
+        };
+
         const { data } = await API.get("/videos", {
           params: {
             perPage: pagination.perPage,
             page: pagination.page,
+            ...baseParams,
           },
         });
 
@@ -140,6 +166,41 @@ export default {
     updatePagination(pagination) {
       this.handleSearch(pagination);
     },
+    async getSituation() {
+      try {
+        this.situationsLoading = true;
+
+        const { data } = await API.get("/videos/situacoes");
+
+        this.situations = data;
+      } catch (error) {
+        this.$q.notify({
+          type: "negative",
+          message: getErrorMessage(error, "Erro ao buscar situações"),
+        });
+      } finally {
+        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");
+    },
   },
 };
 </script>