feat(octra): gear icon next to file name allows to change import options

IPS-LMU · Aug 5, 2024 · 32afe7b · 32afe7b
1 parent 76a32f2
commit 32afe7b
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 157 deletions.
diff --git a/apps/octra/src/app/core/component/octra-dropzone/octra-dropzone.component.html b/apps/octra/src/app/core/component/octra-dropzone/octra-dropzone.component.html
@@ -1,14 +1,6 @@
 <octra-drop-zone #dropzone (afterdrop)="afterDrop()" [height]="height">
   <table [hidden]="files.length === 0" class="dropzone-table position-relative">
     <tr *ngFor="let file of files">
-      <td>
-        <i
-          class="bi bi-trash3-fill icon-delete"
-          (click)="onDeleteEntry(file.name)"
-          style="font-size: 14px; color: dimgray"
-        ></i>
-      </td>
-      <td>{{ getDropzoneFileString(file) }}</td>
       <td class="text-center">
         <i
           class="bi bi-x-lg icon-invalid"
@@ -62,11 +54,28 @@
           </div>
         </ng-container>
       </td>
+      <td>{{ getDropzoneFileString(file) }}</td>
+      <td>
+        <i
+          class="bi bi-trash3-fill icon-delete"
+          (click)="onDeleteEntry(file.name)"
+          style="font-size: 14px; color: dimgray"
+        ></i>
+      </td>
+      <td>
+        <i [ngStyle]="{
+          'visibility': file.needsOptions ? 'visible': 'hidden'
+        }"
+           class="bi bi-gear-fill ms-1"
+           (click)="openImportOptionsModal(file)"
+           style="font-size: 14px; color: dimgray"
+        ></i>
+      </td>
     </tr>
   </table>
   <span *ngIf="files.length === 0" class="position-relative">{{
-    'dropzone.drag&drop here' | transloco
-  }}</span>
+      'dropzone.drag&drop here' | transloco
+    }}</span>
 </octra-drop-zone>
 <div
   (click)="showSupported()"

diff --git a/apps/octra/src/app/core/component/octra-dropzone/octra-dropzone.component.scss b/apps/octra/src/app/core/component/octra-dropzone/octra-dropzone.component.scss
@@ -1,7 +1,3 @@
-.icon-success {
-  color: green;
-}
-
 .icon-invalid {
   color: red;
 }
@@ -27,10 +23,6 @@
   padding-right: 5px;
 }
 
-.icon-delete {
-  cursor: pointer;
-}
-
 .dropzone-table tbody td {
 }
 
@@ -47,3 +39,12 @@
 .progress-bar {
   font-size: 0.7rem;
 }
+
+.bi-check-lg {
+  color: green;
+  font-weight: bold;
+}
+
+.bi-trash3-fill {
+  color: red;
+}
diff --git a/apps/octra/src/app/core/component/octra-dropzone/octra-dropzone.component.ts b/apps/octra/src/app/core/component/octra-dropzone/octra-dropzone.component.ts
@@ -110,7 +110,6 @@ export class OctraDropzoneComponent extends DefaultComponent {
         );
         break;
       } else {
-        const extension = file.name.substring(file.name.lastIndexOf('.'));
         this.dropFiles('transcript');
         this._files.push(fileProcess);
 
@@ -153,34 +152,32 @@ export class OctraDropzoneComponent extends DefaultComponent {
               this._oaudiofile!.name.lastIndexOf('.')
             );
 
-            let options: any = undefined;
             const optionsSchema: any = converter.needsOptionsForImport(
               ofile,
               this._oaudiofile!
             );
+            fileProgress.needsOptions = optionsSchema;
+            fileProgress.converter = converter;
 
             if (optionsSchema) {
-              options = await this.openImportOptionsModal(
-                optionsSchema,
-                converter.defaultImportOptions,
-                converter
-              );
+              await this.openImportOptionsModal(fileProgress);
             }
 
             const importResult: ImportResult | undefined = converter.import(
               ofile,
               this._oaudiofile!,
-              options
+              fileProgress.options
             );
 
-            const setAnnotation = () => {
+            const setAnnotation = async () => {
               if (
                 this._oaudiofile !== undefined &&
                 importResult !== undefined &&
                 importResult.annotjson !== undefined &&
                 !importResult.error
               ) {
                 fileProgress.status = 'valid';
+
                 if (
                   fileProgress.name !==
                     audioName + AppInfo.converters[i].extension &&
@@ -278,7 +275,7 @@ export class OctraDropzoneComponent extends DefaultComponent {
               };
               this._files.push(audioProcess);
             } else {
-              setAnnotation();
+              await setAnnotation();
             }
 
             fileProgress.checked_converters++;
@@ -442,23 +439,26 @@ export class OctraDropzoneComponent extends DefaultComponent {
     });
   }
 
-  private async openImportOptionsModal(
-    needsOptions: any,
-    value: any,
-    converter: Converter
-  ): Promise<any> {
+  protected async openImportOptionsModal(
+    fileProgress: FileProgress
+  ): Promise<void> {
+    this.dropzone.clicklocked = true;
+    // make sure, that event click does not trigger
+
+    this.subscribe(timer(300), () => {
+      this.dropzone.clicklocked = false;
+    });
     const result = await this.modService.openModal<
       typeof ImportOptionsModalComponent,
       any
     >(ImportOptionsModalComponent, ImportOptionsModalComponent.options, {
-      schema: needsOptions,
-      value,
-      converter,
+      schema: fileProgress.needsOptions,
+      value: fileProgress.options,
+      converter: fileProgress.converter,
     });
 
     if (result.action === 'apply') {
-      return result.result;
+      fileProgress.options = result.result;
     }
-    return value;
   }
 }
diff --git a/apps/octra/src/app/core/obj/objects.ts b/apps/octra/src/app/core/obj/objects.ts
@@ -1,9 +1,14 @@
+import { Converter } from '@octra/annotation';
+
 export interface FileProgress {
   status: 'progress' | 'valid' | 'invalid';
   name: string;
   type: string;
   size: number;
   file: File;
+  needsOptions?: any;
+  options?: any;
+  converter?: Converter;
   content?: string | ArrayBuffer;
   checked_converters: number;
   progress: number;