add mais funcoes na criacao de video

src/auth/router.js

@@ -8,6 +8,11 @@ import Videos from "@/routes/videos";
 import NewVideo from "@/routes/videos/new";
 import Login from "@/routes/auth/Login";
 
+export const MENUS = {
+  VIDEOS: "VIDEOS",
+  USUARIOS: "USUARIOS",
+};
+
 const getUserRoles = () => {
   const rolesFromCookie = Cookies.get("user_roles"); // TODO: Tirar as permissões do usuário
 
@@ -33,6 +38,7 @@ export const routes = [
       title: "Vídeos",
       permissions: [roles.VIDEOS_LIST],
       showinModal: true,
+      menu: MENUS.VIDEOS,
     },
   },
   {
@@ -44,6 +50,7 @@ export const routes = [
       title: "Novo Vídeo",
       permissions: [roles.VIDEOS_LIST],
       showinModal: false,
+      menu: MENUS.VIDEOS,
     },
   },
   {

src/routes/videos/new.vue

@@ -50,18 +50,109 @@
         </div>
 
         <div class="row q-pa-sm">
-          <div class="col-3">
+          <div class="col-12">
+            <DisplayValue label="Descrição" :value="video.description" />
+          </div>
+        </div>
+
+        <div class="row q-pa-sm">
+          <div class="col-4">
             <DisplayValue label="Video ID" :value="video.id" />
           </div>
 
-          <div class="col-3">
+          <div class="col-4">
             <DisplayValue label="Duração" :value="getDuration()" />
           </div>
 
-          <div class="col-3">
+          <div class="col-4">
             <DisplayValue label="Data de Postagem" :value="getDateVideo()" />
           </div>
         </div>
+
+        <div class="row q-pa-sm">
+          <div class="col-4">
+            <DisplayValue
+              label="Visualizações"
+              :value="convertoToNumberFormat(video.view_count)"
+            />
+          </div>
+
+          <div class="col-4">
+            <DisplayValue
+              label="Likes"
+              :value="convertoToNumberFormat(video.like_count)"
+            />
+          </div>
+
+          <div class="col-4">
+            <DisplayValue
+              label="Comentários"
+              :value="convertoToNumberFormat(video.comment_count)"
+            />
+          </div>
+        </div>
+
+        <div class="row q-pa-sm">
+          <div class="col-6">
+            <DisplayValue
+              label="Categorias"
+              :value="video.categories.join(', ')"
+            />
+          </div>
+
+          <div class="col-12 q-mt-md">
+            <div style="color: #999; font-weight: bold">Tags</div>
+
+            <div class="row q-mt-sm">
+              <div v-for="tag in video.tags" :key="tag">
+                <q-chip color="primary">{{ tag }}</q-chip>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <q-separator class="q-mt-md" />
+
+        <div class="row q-mt-md q-pa-sm">
+          <span class="text-center text-h6">Canal</span>
+        </div>
+
+        <div class="row q-pa-sm">
+          <div class="col-4">
+            <q-tooltip :offset="[-200, 0]">
+              Clique para abrir no youtube
+            </q-tooltip>
+            <a :href="video.channel_url" target="_blank">
+              <DisplayValue label="Canal" :value="video.channel" />
+            </a>
+          </div>
+
+          <div class="col-4">
+            <DisplayValue
+              label="Inscritos"
+              :value="convertoToNumberFormat(video.channel_follower_count)"
+            />
+          </div>
+
+          <div class="col-4">
+            <DisplayValue label="Identificador" :value="video.channel_id" />
+          </div>
+        </div>
+
+        <q-separator v-if="video.thumbnail" class="q-mt-md" />
+
+        <div v-if="video.thumbnail" class="row q-mt-md q-pa-sm">
+          <span class="text-center text-h6">Thumbnail</span>
+        </div>
+
+        <div v-if="video.thumbnail" class="row q-pa-sm">
+          <img
+            :src="video.thumbnail"
+            alt="Thumbnail"
+            height="300"
+            width="500"
+          />
+        </div>
       </div>
 
       <div v-else class="user-list q-pa-md">
@@ -70,6 +161,23 @@
         </p>
       </div>
     </q-card>
+
+    <q-card flat bordered>
+      <div class="row justify-between q-pa-sm">
+        <div>
+          <Button label="Voltar" color="negative" @click="handleCancel" />
+        </div>
+
+        <div>
+          <Button
+            label="Cadastrar"
+            @click="handleSave"
+            :loading="saveLoading"
+            :disabled="!video.id"
+          />
+        </div>
+      </div>
+    </q-card>
   </div>
 </template>
 
@@ -86,39 +194,39 @@ import { getErrorMessage } from "@utils/axios";
 
 dayjs.extend(duration);
 
-const mock = {
+// const mock = {
-  id: "x9-YRAYhesI",
+//   id: "x9-YRAYhesI",
-  title:
+//   title:
-    "PROVEI A COMIDA DO EXÉRCITO CHINÊS - TROPA DE ELITE DA CHINA, PACOTE RARO",
+//     "PROVEI A COMIDA DO EXÉRCITO CHINÊS - TROPA DE ELITE DA CHINA, PACOTE RARO",
-  thumbnail: "https://i.ytimg.com/vi_webp/x9-YRAYhesI/maxresdefault.webp",
+//   thumbnail: "https://i.ytimg.com/vi_webp/x9-YRAYhesI/maxresdefault.webp",
-  description:
+//   description:
-    "Hoje iremos experimentar o mais novo pacote de ração militar das forças de elite da China, um dos pacotes de MRE mais difíceis e raros! Vamos comparar para ver se esse pacote é superior ao do exército do Brasil!?",
+//     "Hoje iremos experimentar o mais novo pacote de ração militar das forças de elite da China, um dos pacotes de MRE mais difíceis e raros! Vamos comparar para ver se esse pacote é superior ao do exército do Brasil!?",
-  channel_id: "UCcFgREmujdPHvA7I_VOmgIA",
+//   channel_id: "UCcFgREmujdPHvA7I_VOmgIA",
-  channel_url: "https://www.youtube.com/channel/UCcFgREmujdPHvA7I_VOmgIA",
+//   channel_url: "https://www.youtube.com/channel/UCcFgREmujdPHvA7I_VOmgIA",
-  duration: 1534,
+//   duration: 1534,
-  view_count: 352973,
+//   view_count: 352973,
-  webpage_url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
+//   webpage_url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
-  categories: ["People & Blogs"],
+//   categories: ["People & Blogs"],
-  tags: [
+//   tags: [
-    "area secreta",
+//     "area secreta",
-    "mre",
+//     "mre",
-    "camping",
+//     "camping",
-    "balian",
+//     "balian",
-    "acampamento",
+//     "acampamento",
-    "comida do exército",
+//     "comida do exército",
-    "ração militar",
+//     "ração militar",
-    "sobrevivi",
+//     "sobrevivi",
-    "24 horas",
+//     "24 horas",
-    "acampando",
+//     "acampando",
-    "comida chinesa",
+//     "comida chinesa",
-  ],
+//   ],
-  comment_count: 785,
+//   comment_count: 785,
-  like_count: 26175,
+//   like_count: 26175,
-  channel: "Área Secreta",
+//   channel: "Área Secreta",
-  channel_follower_count: 10700000,
+//   channel_follower_count: 10700000,
-  uploader: "Área Secreta",
+//   uploader: "Área Secreta",
-  timestamp: 1740956718,
+//   timestamp: 1740956718,
-};
+// };
 
 export default {
   name: "NewVideo",
@@ -131,7 +239,7 @@ export default {
     return {
       url: "",
       loading: false,
-      video: mock,
+      video: {},
     };
   },
   methods: {
@@ -167,6 +275,13 @@ export default {
 
       return duration.format("HH:mm:ss");
     },
+    convertoToNumberFormat(number) {
+      const formatter = new Intl.NumberFormat("pt-BR", {
+        maximumSignificantDigits: 3,
+      });
+
+      return formatter.format(number);
+    },
   },
 };
 </script>
@@ -175,4 +290,9 @@ export default {
 .user-list {
   margin: 0 auto;
 }
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
 </style>