feat: add API integration for uploading file

apps/portal/src/app/features/file-processor/file-processor.component.ts

@@ -18,6 +18,8 @@ export class FileProcessorComponent implements OnInit {
 
   summaries: Summary[] = [];
 
+  jobIds: number[] = [];
+
   constructor(
     private fileService: FileService,
     private messageService: MessageService,
@@ -27,40 +29,42 @@ export class FileProcessorComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    const jobIds = [8, 9, 10, 11, 12, 13, 14]; // Once file upload api is integrated will change this code
-    this.fileService.fetchSummaries(jobIds).subscribe(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (result: any) => {
-        this.summaries = result.data.summaries.summaries;
-        this.jobDetail = this.summaries.map((summary) => ({
-          fileName: summary.inputFile.split('_')[1],
-          status: summary.status,
-          timestamp: new Date(summary.createdOn).toLocaleString(),
-          summary: summary.outputText,
-        }));
-      },
-      (error) => {
-        if (error.status === 0) {
-          this.translateService.get('ERRORS.UNHANDLED_ERROR').subscribe((translation: string) => {
-            this.messageService.add({
-              key: 'tst',
-              severity: 'error',
-              summary: 'Network Error',
-              detail: translation,
+    this.fileService.jobIds$.subscribe((jobIds) => {
+      this.fileService.fetchSummaries(jobIds).subscribe(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (result: any) => {
+          this.summaries = result.data.summaries.summaries;
+          this.jobDetail = this.summaries.map((summary) => ({
+            fileName: summary.inputFile.split('_')[1],
+            status: summary.status,
+            timestamp: new Date(summary.createdOn).toLocaleString(),
+            summary: summary.outputText,
+          }));
+          this.jobDetail.reverse();
+        },
+        (error) => {
+          if (error.status === 0) {
+            this.translateService.get('ERRORS.UNHANDLED_ERROR').subscribe((translation: string) => {
+              this.messageService.add({
+                key: 'tst',
+                severity: 'error',
+                summary: 'Network Error',
+                detail: translation,
+              });
             });
-          });
-        } else {
-          this.translateService.get('ERRORS.API_ERROR').subscribe((translation: string) => {
-            this.messageService.add({
-              key: 'tst',
-              severity: 'error',
-              summary: 'Error',
-              detail: translation,
+          } else {
+            this.translateService.get('ERRORS.API_ERROR').subscribe((translation: string) => {
+              this.messageService.add({
+                key: 'tst',
+                severity: 'error',
+                summary: 'Error',
+                detail: translation,
+              });
             });
-          });
-        }
-      },
-    );
+          }
+        },
+      );
+    });
   }
 
   // eslint-disable-next-line class-methods-use-this

apps/portal/src/app/features/file.service.ts

@@ -1,21 +1,41 @@
 import { Injectable } from '@angular/core';
 import { Apollo } from 'apollo-angular';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { GraphqlService } from '../graphql/graphql.service';
-import { fetchFileStatus } from '../graphql/graphql.queries';
+import { fetchFileStatus, uploadFileMutation } from '../graphql/graphql.queries';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FileService {
+  private jobIdsSubject = new BehaviorSubject<number[]>([]);
+
+  jobIds$ = this.jobIdsSubject.asObservable();
+
   constructor(
     private graphqlService: GraphqlService,
     private apollo: Apollo,
-  ) {}
+  ) {
+    this.jobIdsSubject.next(JSON.parse(localStorage.getItem('jobIds') || '[]'));
+  }
+
+  updateJobIds(jobId: number): void {
+    const jobIds = [...this.jobIdsSubject.value, jobId];
+    localStorage.setItem('jobIds', JSON.stringify(jobIds));
+    this.jobIdsSubject.next(jobIds);
+  }
 
   fetchSummaries(jobIds: number[]) {
     const jobIdsString = JSON.stringify(jobIds);
     const queryWithJobIdsString = fetchFileStatus(jobIdsString);
 
     return this.graphqlService.query(queryWithJobIdsString);
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  uploadFile(file: File): Observable<any> {
+    const variables = { inputFile: file };
+
+    return this.graphqlService.mutate(uploadFileMutation, variables);
+  }
 }

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html

@@ -11,18 +11,14 @@
       <p-button (click)="fileInput.click()" severity="success">{{
         'TRANSCRIPT.BUTTONS.UPLOAD' | translate
       }}</p-button>
-      <span *ngIf="selectedFileName" class="file-name absolute text-base">{{
-        selectedFileName
+      <span *ngIf="selectedFileName" class="file-name text-base">{{ selectedFileName }}</span>
+      <span *ngIf="limitError" class="error">{{ 'TRANSCRIPT.ERRORS.FILE_SIZE' | translate }}</span>
+      <span *ngIf="invalidTypeError" class="error">{{
+        'TRANSCRIPT.ERRORS.FILE_TYPE' | translate
       }}</span>
       <p-button (click)="summarizeTranscript()">{{
         'TRANSCRIPT.BUTTONS.SUMMARIZE' | translate
       }}</p-button>
-      <span *ngIf="limitError" class="error absolute">{{
-        'TRANSCRIPT.ERRORS.FILE_SIZE' | translate
-      }}</span>
-      <span *ngIf="invalidTypeError" class="error absolute">{{
-        'TRANSCRIPT.ERRORS.FILE_TYPE' | translate
-      }}</span>
     </div>
     <app-file-processor></app-file-processor>
   </div>

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.ts

@@ -1,5 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { ApolloQueryResult } from '@apollo/client';
+import { MessageService } from 'primeng/api';
+import { FileService } from '../file.service';
 
 @Component({
   selector: 'app-transcript-analyzer',
@@ -8,7 +11,11 @@ import { TranslateService } from '@ngx-translate/core';
   encapsulation: ViewEncapsulation.None,
 })
 export class TranscriptAnalyzerComponent {
-  constructor(private translate: TranslateService) {
+  constructor(
+    private translate: TranslateService,
+    private fileService: FileService,
+    private messageService: MessageService,
+  ) {
     this.translate.setDefaultLang('en');
   }
 
@@ -22,6 +29,8 @@ export class TranscriptAnalyzerComponent {
 
   selectedFileName = '';
 
+  selectedFile: File | null = null;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onFileSelected(event: any): void {
     const file: File = event.target.files[0];
@@ -31,14 +40,17 @@ export class TranscriptAnalyzerComponent {
         this.limitError = false;
         this.invalidTypeError = true;
         this.selectedFileName = '';
+        this.selectedFile = null;
       } else if (!this.isValidFileSize(file)) {
         this.invalidTypeError = false;
         this.limitError = true;
         this.selectedFileName = '';
+        this.selectedFile = null;
       } else {
         this.selectedFileName = file.name;
         this.limitError = false;
         this.invalidTypeError = false;
+        this.selectedFile = file;
       }
     }
   }
@@ -55,6 +67,51 @@ export class TranscriptAnalyzerComponent {
   // eslint-disable-next-line
   summarizeTranscript(): void {
     // eslint-disable-next-line
-    alert('summarizing');
+    if (!this.selectedFile) {
+      this.translate.get('TRANSCRIPT.ERRORS.NO_FILE').subscribe((translation: string) => {
+        this.messageService.add({
+          key: 'tst',
+          severity: 'error',
+          summary: '',
+          detail: translation,
+        });
+      });
+      return;
+    }
+
+    this.fileService.uploadFile(this.selectedFile).subscribe(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (result: ApolloQueryResult<any>) => {
+        const jobId = result?.data?.createSummary?.jobId;
+
+        if (jobId) {
+          const jobIdsArray = JSON.parse(localStorage.getItem('jobIds') || '[]');
+          jobIdsArray.push(jobId);
+          localStorage.setItem('jobIds', JSON.stringify(jobIdsArray));
+          this.fileService.updateJobIds(jobId);
+        }
+      },
+      (error) => {
+        if (error.status === 0) {
+          this.translate.get('ERRORS.UNHANDLED_ERROR').subscribe((translation: string) => {
+            this.messageService.add({
+              key: 'tst',
+              severity: 'error',
+              summary: 'Network Error',
+              detail: translation,
+            });
+          });
+        } else {
+          this.translate.get('TRANSCRIPT.ERRORS.FILE_UPLOAD').subscribe((translation: string) => {
+            this.messageService.add({
+              key: 'tst',
+              severity: 'error',
+              summary: '',
+              detail: translation,
+            });
+          });
+        }
+      },
+    );
   }
 }

apps/portal/src/app/graphql/graphql.queries.ts

@@ -20,3 +20,11 @@ query FetchSummaries{
   }
 }
 `;
+
+export const uploadFileMutation = gql`
+  mutation ($file: Upload!) {
+    createSummary(createSummaryInput: { inputFile: $file }) {
+      jobId
+    }
+  }
+`;

apps/portal/src/app/graphql/graphql.service.ts

@@ -17,4 +17,20 @@ export class GraphqlService {
 
     return queryRef.valueChanges;
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mutate(mutation: DocumentNode, variables: any): Observable<any> {
+    return this.apollo.mutate({
+      mutation,
+      variables: { file: variables.inputFile },
+      context: {
+        hasUpload: true,
+        useMultipart: true,
+        headers: {
+          'content-type': 'application/json',
+          'x-apollo-operation-name': 'createSummary',
+        },
+      },
+    });
+  }
 }

apps/portal/src/assets/i18n/en.json

@@ -6,7 +6,9 @@
   "TRANSCRIPT": {
     "ERRORS": {
       "FILE_TYPE": "Please upload a VTT or TXT file only.",
-      "FILE_SIZE": "File size should not exceed 10 MB."
+      "FILE_SIZE": "File size should not exceed 10 MB.",
+      "NO_FILE": "Please select a file.",
+      "FILE_UPLOAD": "File upload failed. Please try again."
     },
     "BUTTONS": {
       "UPLOAD": "Upload File",