From 538f36aebca530546250033b21f7d5014d3ff01f Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 13 Aug 2024 21:04:47 +0300
Subject: [PATCH] WIP on master

RED-9201 - UI for Component Mapping Tables
---
 ...dd-edit-component-mapping-dialog.component.html |  5 ++---
 ...dd-edit-component-mapping-dialog.component.scss |  5 -----
 .../add-edit-component-mapping-dialog.component.ts | 14 ++++++++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html
index 1d5613b61..8283e05a8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html
@@ -30,7 +30,7 @@
             <div
                 class="row"
                 [matTooltip]="'add-edit-component-mapping.disabled-file-options' | translate"
-                [matTooltipDisabled]="!disabledFileOptions"
+                [matTooltipDisabled]="!form.get('encoding')?.disabled"
                 [matTooltipPosition]="'above'"
             >
                 <div class="iqser-input-group required w-150">
@@ -40,13 +40,12 @@
                         formControlName="delimiter"
                         name="delimiter"
                         type="text"
-                        [class.disabled-file-options]="disabledFileOptions"
                     />
                 </div>
 
                 <div class="iqser-input-group required w-150">
                     <label translate="add-edit-component-mapping.form.encoding-type"></label>
-                    <mat-form-field [class.disabled-file-options]="disabledFileOptions">
+                    <mat-form-field>
                         <mat-select formControlName="encoding">
                             <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
                                 {{ translations[type] | translate }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss
index a7e43f0c6..9f7a553cc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss
@@ -18,11 +18,6 @@
             font-size: 15px;
         }
     }
-
-    .disabled-file-options {
-        opacity: 0.5;
-        pointer-events: none;
-    }
 }
 
 .row:last-child {
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
index 8c7a41109..e8a628491 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
@@ -52,7 +52,6 @@ export class AddEditComponentMappingDialogComponent
 {
     protected readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
     protected readonly translations = fileAttributeEncodingTypesTranslations;
-    #fileChanged = false;
     activeFile: File;
     form!: UntypedFormGroup;
 
@@ -73,13 +72,14 @@ export class AddEditComponentMappingDialogComponent
             const file = new Blob([fileContent.body as Blob], { type: 'text/csv' });
             this.form.get('file').setValue(file);
             this.initialFormValue = this.form.getRawValue();
+            this.#disableEncodingAndDelimiter();
         }
     }
 
     changeFile(file: File) {
-        this.#fileChanged = true;
         this.form.get('file').setValue(file);
         this.form.get('fileName').setValue(file?.name);
+        this.#enableEncodingAndDelimiter();
     }
 
     save() {
@@ -96,7 +96,13 @@ export class AddEditComponentMappingDialogComponent
         });
     }
 
-    get disabledFileOptions() {
-        return this.initialFormValue?.file && !this.#fileChanged;
+    #disableEncodingAndDelimiter() {
+        this.form.get('encoding').disable();
+        this.form.get('delimiter').disable();
+    }
+
+    #enableEncodingAndDelimiter() {
+        this.form.get('encoding').enable();
+        this.form.get('delimiter').enable();
     }
 }