From 3f1ee4244b0fbdfe2090a3bea4991413751e30c7 Mon Sep 17 00:00:00 2001
From: JJOAOMARCOSS <andramas.10@gmail.com>
Date: Sat, 7 Dec 2024 23:11:42 -0300
Subject: [PATCH] feat: Criando prototipo de funcao para enviar o arquivo para
 o backend

---
 .../video-views/video-views.component.html    | 50 ++++---------------
 .../video-views/video-views.component.ts      | 29 ++++++++++-
 2 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/app/pages/video-views/video-views.component.html b/src/app/pages/video-views/video-views.component.html
index e7d14b0..42c3ab3 100755
--- a/src/app/pages/video-views/video-views.component.html
+++ b/src/app/pages/video-views/video-views.component.html
@@ -22,10 +22,8 @@
   <main>
     <header>
       <h1>Dados - Vídeos</h1>
-      <button
-        class="download-button w-full h-[50px] max-w-[160px] bg-blue-brand rounded-lg text-white"
-        (click)="exportExcel()"
-      >
+      <button class="download-button w-full h-[50px] max-w-[160px] bg-blue-brand rounded-lg text-white"
+        (click)="exportExcel()">
         Exportar para Excel
       </button>
     </header>
@@ -33,25 +31,13 @@ <h1>Dados - Vídeos</h1>
     <div class="containerConteudo">
       <div class="containerFiltro">
         <div class="filtroItem">
-          <input
-            [(ngModel)]="filterId"
-            (ngModelChange)="filterVideos()"
-            placeholder="Filtrar por ID"
-          />
+          <input [(ngModel)]="filterId" (ngModelChange)="filterVideos()" placeholder="Filtrar por ID" />
         </div>
         <div class="filtroItem">
-          <input
-            [(ngModel)]="filterTitle"
-            (ngModelChange)="filterVideos()"
-            placeholder="Filtrar por Título"
-          />
+          <input [(ngModel)]="filterTitle" (ngModelChange)="filterVideos()" placeholder="Filtrar por Título" />
         </div>
         <div class="filtroItem">
-          <input
-            [(ngModel)]="filterDescription"
-            (ngModelChange)="filterVideos()"
-            placeholder="Filtrar por Descrição"
-          />
+          <input [(ngModel)]="filterDescription" (ngModelChange)="filterVideos()" placeholder="Filtrar por Descrição" />
         </div>
         <div class="filtroItem">
           <div class="dropdown">
@@ -61,11 +47,7 @@ <h1>Dados - Vídeos</h1>
             <div class="conteudoDropdown">
               <div *ngFor="let category of categories">
                 <label>
-                  <input
-                    type="checkbox"
-                    [(ngModel)]="selectedCategories[category]"
-                    (ngModelChange)="filterVideos()"
-                  />
+                  <input type="checkbox" [(ngModel)]="selectedCategories[category]" (ngModelChange)="filterVideos()" />
                   {{ category }}
                 </label>
               </div>
@@ -82,10 +64,7 @@ <h1>Dados - Vídeos</h1>
             <th>Categoria</th>
             <th (click)="changeSortOrder()" class="ordenavel">
               Nº Visualizações
-              <span
-                class="setinha"
-                [ngClass]="{ up: !sortAscending, down: sortAscending }"
-              ></span>
+              <span class="setinha" [ngClass]="{ up: !sortAscending, down: sortAscending }"></span>
             </th>
             <th>Transcrição</th>
           </tr>
@@ -101,20 +80,13 @@ <h1>Dados - Vídeos</h1>
               {{ video.transcript }}
               <!-- Caixa de upload -->
               <form action="upload" method="post" enctype="multipart/form-data">
-                <label for="transcriptFile" class="custom-file-upload">
-                  <i class="fi fi-br-file-download"></i>
-                </label>
-                <input
-                  type="file"
-                  name="transcriptFile"
-                  id="transcriptFile"
-                  accept=".txt"
-                />
+                <input type="file" name="transcriptFile" id="transcriptFile" accept=".txt"
+                  (change)="onFileUpload($event, video)" />
               </form>
             </td>
           </tr>
         </tbody>
-      </table>      
+      </table>
     </div>
   </main>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/video-views/video-views.component.ts b/src/app/pages/video-views/video-views.component.ts
index 9bc04b9..c46a0f8 100755
--- a/src/app/pages/video-views/video-views.component.ts
+++ b/src/app/pages/video-views/video-views.component.ts
@@ -135,7 +135,32 @@ export class VideoViewsComponent {
     this.sortVideos();
     this.isSorted = true;
   }
-  
+
+  onFileUpload(event: Event, video: IVideo): void {
+    const input = event.target as HTMLInputElement;  // Obtém o elemento de input
+
+    if (input.files && input.files[0]) {  // Verifica se um arquivo foi selecionado
+      const file = input.files[0];  // Pega o primeiro arquivo selecionado
+      console.log(Arquivo enviado para o vídeo ID ${video.id}:, file);
+
+      // Associando o nome do arquivo ao transcript do vídeo
+      if (video.id) {
+        video.transcript = file.name;  // Atualiza o nome do arquivo no campo de transcrição do vídeo
+      }
+
+      // Criação do FormData para envio ao backend
+      const formData = new FormData();
+      formData.append('file', file);  // Adiciona o arquivo no FormData
+      if (video.id) formData.append('videoId', video.id.toString());  // Adiciona o ID do vídeo ao FormData
+
+      // Chamada de API para enviar o arquivo ao backend (comentado para quando estiver implementado)
+      // this.videoService.uploadTranscript(formData).subscribe({
+      //   next: (response) => console.log('Upload realizado com sucesso', response),
+      //   error: (error) => console.error('Erro no upload', error),
+      // });
+    }
+}
+
   logoutUser() {
     this.confirmationService.confirm({
       message: 'Tem certeza que deseja sair?',
@@ -169,4 +194,4 @@ export class VideoViewsComponent {
   dummyKeyDown(event: KeyboardEvent): void {
     // Não faz nada
   }
-}
+}
\ No newline at end of file