From 8cb9e71204d39a5585dcad3c7a49a7d9d7008c60 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Wed, 5 Jan 2022 16:05:35 +0200
Subject: [PATCH] WIP on 'Configuration of CSV settings for file attributes'

---
 .../src/app/modules/admin/admin.module.ts     |  2 +
 ...butes-configurations-dialog.component.html | 48 +++++++++++++++++++
 ...butes-configurations-dialog.component.scss |  0
 ...ributes-configurations-dialog.component.ts | 31 ++++++++++++
 ...e-attributes-listing-screen.component.html |  9 ++++
 ...ile-attributes-listing-screen.component.ts |  4 ++
 .../admin/services/admin-dialog.service.ts    |  5 ++
 ...e-attribute-encoding-types-translations.ts |  8 ++++
 apps/red-ui/src/assets/i18n/en.json           | 17 +++++++
 libs/common-ui                                |  2 +-
 .../file-attributes/file-attribute-config.ts  |  7 +++
 11 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/translations/file-attribute-encoding-types-translations.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index 7fcf4642b..6ed502c5b 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -48,6 +48,7 @@ import { SmtpConfigService } from './services/smtp-config.service';
 import { UploadDictionaryDialogComponent } from './dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
 import { GeneralConfigFormComponent } from './screens/general-config/general-config-form/general-config-form.component';
 import { SmtpFormComponent } from './screens/general-config/smtp-form/smtp-form.component';
+import { FileAttributesConfigurationsDialogComponent } from './dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,
@@ -58,6 +59,7 @@ const dialogs = [
     SmtpAuthDialogComponent,
     AddEditUserDialogComponent,
     ConfirmDeleteUsersDialogComponent,
+    FileAttributesConfigurationsDialogComponent,
     FileAttributesCsvImportDialogComponent,
     AddEditDossierAttributeDialogComponent,
     UploadDictionaryDialogComponent,
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
new file mode 100644
index 000000000..baea014f3
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
@@ -0,0 +1,48 @@
+<section class="dialog">
+    <div class="dialog-header heading-l" translate="file-attributes-configurations.title"></div>
+
+    <form [formGroup]="form">
+        <div class="dialog-content">
+            <div class="iqser-input-group w-300">
+                <mat-slide-toggle color="primary" formControlName="supportCsvMapping">{{
+                    'file-attributes-configurations.form.support-csv-mapping' | translate
+                }}</mat-slide-toggle>
+            </div>
+            <ng-container *ngIf="form.value.supportCsvMapping">
+                <div class="iqser-input-group required w-250">
+                    <label translate="file-attributes-configurations.form.key-column"></label>
+                    <input
+                        [placeholder]="'file-attributes-configurations.form.key-column' | translate"
+                        formControlName="keyColumn"
+                        name="keyColumn"
+                        type="text"
+                    />
+                </div>
+                <div class="iqser-input-group required w-110">
+                    <label translate="file-attributes-configurations.form.delimitator"></label>
+                    <input
+                        [placeholder]="'file-attributes-configurations.form.delimitator' | translate"
+                        formControlName="delimitator"
+                        name="delimitator"
+                        type="text"
+                    />
+                </div>
+                <div class="iqser-input-group w-150 required">
+                    <label translate="file-attributes-configurations.form.encoding-type"></label>
+                    <mat-select formControlName="encodingType">
+                        <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
+                            {{ translations[type] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </div>
+            </ng-container>
+        </div>
+        <div class="dialog-actions">
+            <button (click)="save()" color="primary" mat-flat-button>
+                {{ 'file-attributes-configurations.save' | translate }}
+            </button>
+
+            <div class="all-caps-label cancel" translate="file-attributes-configurations.cancel"></div>
+        </div>
+    </form>
+</section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
new file mode 100644
index 000000000..e570e5a7e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FileAttributeEncodingTypes } from '../../../../../../../../libs/red-domain/src';
+import { fileAttributeEncodingTypesTranslations } from '../../translations/file-attribute-encoding-types-translations';
+
+@Component({
+    templateUrl: './file-attributes-configurations-dialog.component.html',
+    styleUrls: ['./file-attributes-configurations-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileAttributesConfigurationsDialogComponent {
+    readonly form: FormGroup;
+    readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
+    readonly translations = fileAttributeEncodingTypesTranslations;
+
+    constructor(private readonly _formBuilder: FormBuilder, readonly dialogRef: MatDialogRef<FileAttributesConfigurationsDialogComponent>) {
+        this.form = this._getForm();
+    }
+
+    save() {}
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            supportCsvMapping: [false],
+            keyColumn: [''],
+            delimitator: [''],
+            encodingType: [FileAttributeEncodingTypes.UTF8],
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index f820ff322..3cb293336 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -65,6 +65,15 @@
             tooltipPosition="above"
         ></iqser-circle-button>
 
+        <iqser-circle-button
+            (action)="openConfigurationsDialog($event)"
+            *ngIf="currentUser.isAdmin"
+            [tooltip]="'file-attributes-listing.configurations' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="iqser:settings"
+            tooltipPosition="above"
+        ></iqser-circle-button>
+
         <iqser-icon-button
             (action)="openAddEditAttributeDialog($event)"
             *ngIf="currentUser.isAdmin"
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index f2e07904d..897f9095a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -87,6 +87,10 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         });
     }
 
+    openConfigurationsDialog($event: MouseEvent) {
+        this._dialogService.openDialog('fileAttributesConfigurations', $event, null);
+    }
+
     openConfirmDeleteAttributeDialog($event: MouseEvent, fileAttribute?: IFileAttributeConfig) {
         this._dialogService.openDialog('deleteFileAttribute', $event, fileAttribute, async () => {
             this._loadingService.start();
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 8eaf8a2b5..8b5ac7db1 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -13,6 +13,7 @@ import { AddEditDossierAttributeDialogComponent } from '../dialogs/add-edit-doss
 import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
 import { AddEditJustificationDialogComponent } from '../screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component';
 import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
+import { FileAttributesConfigurationsDialogComponent } from '../dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -21,6 +22,7 @@ type DialogType =
     | 'addEditFileAttribute'
     | 'deleteFileAttribute'
     | 'importFileAttributes'
+    | 'fileAttributesConfigurations'
     | 'addEditUser'
     | 'deleteUsers'
     | 'smtpAuthConfig'
@@ -50,6 +52,9 @@ export class AdminDialogService extends DialogService<DialogType> {
         deleteFileAttribute: {
             component: ConfirmDeleteFileAttributeDialogComponent,
         },
+        fileAttributesConfigurations: {
+            component: FileAttributesConfigurationsDialogComponent,
+        },
         importFileAttributes: {
             component: FileAttributesCsvImportDialogComponent,
             dialogConfig: largeDialogConfig,
diff --git a/apps/red-ui/src/app/modules/admin/translations/file-attribute-encoding-types-translations.ts b/apps/red-ui/src/app/modules/admin/translations/file-attribute-encoding-types-translations.ts
new file mode 100644
index 000000000..91a99e3cb
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/translations/file-attribute-encoding-types-translations.ts
@@ -0,0 +1,8 @@
+import { FileAttributeEncodingType } from '@red/domain';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+export const fileAttributeEncodingTypesTranslations: { [key in FileAttributeEncodingType]: string } = {
+    UTF8: _('file-attribute-encoding-types.utf8'),
+    ASCII: _('file-attribute-encoding-types.ascii'),
+    ISO: _('file-attribute-encoding-types.iso'),
+};
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 1f3977ece..c9928ae4f 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -938,12 +938,28 @@
   },
   "exact-date": "{day} {month} {year} at {hour}:{minute}",
   "file": "File",
+  "file-attribute-encoding-types": {
+    "ascii": "ASCII",
+    "iso": "ISO",
+    "utf8": "UTF-8"
+  },
   "file-attribute-types": {
     "date": "Date",
     "number": "Number",
     "text": "Free Text"
   },
   "file-attributes": "File Attributes",
+  "file-attributes-configurations": {
+    "cancel": "Cancel",
+    "form": {
+      "delimitator": "Delimitator",
+      "encoding-type": "Encoding Type",
+      "key-column": "Key Column",
+      "support-csv-mapping": "Support CSV Mapping"
+    },
+    "save": "Save Configurations",
+    "title": "Configurations"
+  },
   "file-attributes-csv-import": {
     "action": {
       "cancel-edit-name": "Cancel",
@@ -1009,6 +1025,7 @@
     "bulk-actions": {
       "delete": "Delete Selected Attributes"
     },
+    "configurations": "Configurations",
     "error": {
       "conflict": "File-Attribute with this name already exists!",
       "generic": "Failed to add File-Attribute"
diff --git a/libs/common-ui b/libs/common-ui
index 0610684e8..45a12070b 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 0610684e8fb963fab1f7dd51fd850a7b47287fca
+Subproject commit 45a12070bfe5c9aa36f24c4e08da157796e881ab
diff --git a/libs/red-domain/src/lib/file-attributes/file-attribute-config.ts b/libs/red-domain/src/lib/file-attributes/file-attribute-config.ts
index 2219fc90b..d667eb8f1 100644
--- a/libs/red-domain/src/lib/file-attributes/file-attribute-config.ts
+++ b/libs/red-domain/src/lib/file-attributes/file-attribute-config.ts
@@ -17,3 +17,10 @@ export const FileAttributeConfigTypes = {
     TEXT: 'TEXT',
 } as const;
 export type FileAttributeConfigType = keyof typeof FileAttributeConfigTypes;
+
+export const FileAttributeEncodingTypes = {
+    UTF8: 'UTF8',
+    ASCII: 'ASCII',
+    ISO: 'ISO',
+} as const;
+export type FileAttributeEncodingType = keyof typeof FileAttributeEncodingTypes;