From 32afe7b3af1c2b8825115dc00c58ad25153b0f6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20P=C3=B6mp?= <jp@poemp.net>
Date: Mon, 5 Aug 2024 16:05:10 +0200
Subject: [PATCH] feat(octra): gear icon next to file name allows to change
 import options

---
 .../octra-dropzone.component.html             |  29 +-
 .../octra-dropzone.component.scss             |  17 +-
 .../octra-dropzone.component.ts               |  40 +--
 apps/octra/src/app/core/obj/objects.ts        |   5 +
 .../tool-configurator.component.ts            | 248 +++++++++---------
 5 files changed, 182 insertions(+), 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
index 38d0dd9e0..0ae61a8c4 100644
--- 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
index 5641965e8..7ab60062b 100644
--- 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
index fca2f3cdb..e5c4e7fd0 100644
--- 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,27 +152,24 @@ 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 &&
@@ -181,6 +177,7 @@ export class OctraDropzoneComponent extends DefaultComponent {
                 !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
index 28635b926..3bf843b5d 100644
--- 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;
diff --git a/libs/ngx-components/src/lib/components/form-generator/tool-configurator.component.ts b/libs/ngx-components/src/lib/components/form-generator/tool-configurator.component.ts
index 4276981d0..03309f013 100644
--- a/libs/ngx-components/src/lib/components/form-generator/tool-configurator.component.ts
+++ b/libs/ngx-components/src/lib/components/form-generator/tool-configurator.component.ts
@@ -40,59 +40,63 @@ export class ToolConfiguratorComponent
       const defaultValue = schema['default'];
       if (typeof items === 'object') {
         if (items['type'] === 'string') {
-          result.push(
-            new ConfigurationArrayControl(
-              name!,
-              {
-                title: schema['title'] ?? name,
-                type: 'text',
-                value: jsonValue ?? defaultValue,
-                defaultValue,
-                description: schema['description'],
-                ignore: false,
-                context: items['enum'],
-                dependsOn: schema['dependsOn'],
-                toggleable: schema['toggleable'],
-              },
-              this.form
-            )
+          const control = new ConfigurationArrayControl(
+            name!,
+            {
+              title: schema['title'] ?? name,
+              type: 'text',
+              value: jsonValue ?? defaultValue,
+              defaultValue,
+              description: schema['description'],
+              ignore: false,
+              context: items['enum'],
+              dependsOn: schema['dependsOn'],
+              toggleable: schema['toggleable'],
+            },
+            this.form
           );
+
+          control.toggled =
+            json && name !== undefined && Object.keys(json).includes(name);
+          result.push(control);
         } else if (items['type'] === 'number') {
-          result.push(
-            new ConfigurationArrayControl(
-              name!,
-              {
-                title: schema['title'] ?? name,
-                type: 'number',
-                value: jsonValue ?? defaultValue,
-                defaultValue,
-                description: schema['description'],
-                ignore: false,
-                context: items['enum'],
-                dependsOn: schema['dependsOn'],
-                toggleable: schema['toggleable'],
-              },
-              this.form
-            )
+          const control = new ConfigurationArrayControl(
+            name!,
+            {
+              title: schema['title'] ?? name,
+              type: 'number',
+              value: jsonValue ?? defaultValue,
+              defaultValue,
+              description: schema['description'],
+              ignore: false,
+              context: items['enum'],
+              dependsOn: schema['dependsOn'],
+              toggleable: schema['toggleable'],
+            },
+            this.form
           );
+          control.toggled =
+            json && name !== undefined && Object.keys(json).includes(name);
+          result.push(control);
         } else if (items['type'] === 'integer') {
-          result.push(
-            new ConfigurationArrayControl(
-              name!,
-              {
-                title: schema['title'] ?? name,
-                toggleable: schema['toggleable'],
-                type: 'integer',
-                value: jsonValue ?? defaultValue,
-                defaultValue,
-                description: schema['description'],
-                dependsOn: schema['dependsOn'],
-                ignore: false,
-                context: items['enum'],
-              },
-              this.form
-            )
+          const control = new ConfigurationArrayControl(
+            name!,
+            {
+              title: schema['title'] ?? name,
+              toggleable: schema['toggleable'],
+              type: 'integer',
+              value: jsonValue ?? defaultValue,
+              defaultValue,
+              description: schema['description'],
+              dependsOn: schema['dependsOn'],
+              ignore: false,
+              context: items['enum'],
+            },
+            this.form
           );
+          control.toggled =
+            json && name !== undefined && Object.keys(json).includes(name);
+          result.push(control);
         }
       } else {
         // TODO add
@@ -124,45 +128,87 @@ export class ToolConfiguratorComponent
       const ignore = ['version', '$schema'].includes(name);
 
       if (schema['type'] === 'boolean') {
-        result.push(
-          new ConfigurationSwitchControl(
-            name,
-            {
-              title: title ?? name,
-              value: jsonValue ?? defaultValue,
-              defaultValue,
-              description,
-              ignore,
-              dependsOn,
-              toggleable,
-            },
-            this.form
-          )
+        const control = new ConfigurationSwitchControl(
+          name,
+          {
+            title: title ?? name,
+            value: jsonValue ?? defaultValue,
+            defaultValue,
+            description,
+            ignore,
+            dependsOn,
+            toggleable,
+          },
+          this.form
         );
+        control.toggled =
+          json && name !== undefined && Object.keys(json).includes(name);
+        result.push(control);
       } else if (schema['type'] === 'number') {
-        result.push(
-          new ConfigurationNumberControl(
-            name,
-            {
-              title: title ?? name,
-              type: 'number',
-              value: jsonValue ?? defaultValue,
-              defaultValue,
-              description,
-              dependsOn,
-              toggleable,
-              ignore,
-            },
-            this.form
-          )
+        const control = new ConfigurationNumberControl(
+          name,
+          {
+            title: title ?? name,
+            type: 'number',
+            value: jsonValue ?? defaultValue,
+            defaultValue,
+            description,
+            dependsOn,
+            toggleable,
+            ignore,
+          },
+          this.form
         );
+        control.toggled =
+          json && name !== undefined && Object.keys(json).includes(name);
+        result.push(control);
       } else if (schema['type'] === 'integer') {
-        result.push(
-          new ConfigurationNumberControl(
+        const control = new ConfigurationNumberControl(
+          name,
+          {
+            title: title ?? name,
+            type: 'integer',
+            value: jsonValue ?? defaultValue,
+            defaultValue,
+            description,
+            ignore,
+            toggleable,
+            dependsOn,
+          },
+          this.form
+        );
+        control.toggled =
+          json && name !== undefined && Object.keys(json).includes(name);
+        result.push(control);
+      } else if (schema['type'] === 'string') {
+        let control: ConfigurationControl = new ConfigurationSelectControl(
+          name,
+          {
+            title: title ?? name,
+            value: jsonValue ?? defaultValue,
+            defaultValue,
+            description,
+            ignore,
+            toggleable,
+            dependsOn,
+            context: enumValues?.map((a) => ({
+              label: a,
+              value: a,
+            })),
+          },
+          this.form
+        );
+        control.toggled =
+          json && name !== undefined && Object.keys(json).includes(name);
+
+        if (enumValues) {
+          // select
+          result.push(control);
+        } else {
+          control = new ConfigurationTextControl(
             name,
             {
               title: title ?? name,
-              type: 'integer',
               value: jsonValue ?? defaultValue,
               defaultValue,
               description,
@@ -171,46 +217,10 @@ export class ToolConfiguratorComponent
               dependsOn,
             },
             this.form
-          )
-        );
-      } else if (schema['type'] === 'string') {
-        if (enumValues) {
-          // select
-          result.push(
-            new ConfigurationSelectControl(
-              name,
-              {
-                title: title ?? name,
-                value: jsonValue ?? defaultValue,
-                defaultValue,
-                description,
-                ignore,
-                toggleable,
-                dependsOn,
-                context: enumValues.map((a) => ({
-                  label: a,
-                  value: a,
-                })),
-              },
-              this.form
-            )
-          );
-        } else {
-          result.push(
-            new ConfigurationTextControl(
-              name,
-              {
-                title: title ?? name,
-                value: jsonValue ?? defaultValue,
-                defaultValue,
-                description,
-                ignore,
-                toggleable,
-                dependsOn,
-              },
-              this.form
-            )
           );
+          control.toggled =
+            json && name !== undefined && Object.keys(json).includes(name);
+          result.push(control);
         }
       }
     }