Pull request #344: VM/RED-2853

Merge in RED/ui from VM/RED-2853 to master

* commit 'f5771d135cb8ae4f3687ac0f03ee3b2274715bc4':
  added save logic
  extended base dialog for file attributes configurations dialog and updated form
  added existing configuration to the form
  WIP on 'Configuration of CSV settings for file attributes'

apps/red-ui/src/app/modules/admin/admin.module.ts

@@ -46,6 +46,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';
 import { SharedAdminModule } from './shared/shared-admin.module';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
 
@@ -58,6 +59,7 @@ const dialogs = [
     SmtpAuthDialogComponent,
     AddEditUserDialogComponent,
     ConfirmDeleteUsersDialogComponent,
+    FileAttributesConfigurationsDialogComponent,
     FileAttributesCsvImportDialogComponent,
     AddEditDossierAttributeDialogComponent,
     UploadDictionaryDialogComponent,

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html

@@ -0,0 +1,50 @@
+<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.delimiter"></label>
+                    <input
+                        [placeholder]="'file-attributes-configurations.form.delimiter' | translate"
+                        formControlName="delimiter"
+                        name="delimiter"
+                        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()" [disabled]="disabled" 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>
+
+    <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
+</section>

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FileAttributeEncodingTypes, IFileAttributesConfig } from '../../../../../../../../libs/red-domain/src';
+import { fileAttributeEncodingTypesTranslations } from '../../translations/file-attribute-encoding-types-translations';
+import { BaseDialogComponent, Toaster } from '../../../../../../../../libs/common-ui/src';
+import { DossierTemplatesService } from '../../../../services/entity-services/dossier-templates.service';
+import { firstValueFrom } from 'rxjs';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { FileAttributesService } from '../../../../services/entity-services/file-attributes.service';
+
+@Component({
+    templateUrl: './file-attributes-configurations-dialog.component.html',
+    styleUrls: ['./file-attributes-configurations-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileAttributesConfigurationsDialogComponent extends BaseDialogComponent {
+    private readonly _configuration: IFileAttributesConfig = this._data;
+
+    readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
+    readonly translations = fileAttributeEncodingTypesTranslations;
+
+    constructor(
+        private readonly _formBuilder: FormBuilder,
+        private readonly _dossierTemplatesService: DossierTemplatesService,
+        private readonly _fileAttributesService: FileAttributesService,
+        private readonly _toaster: Toaster,
+        protected readonly _injector: Injector,
+        protected readonly _dialogRef: MatDialogRef<FileAttributesConfigurationsDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) private _data: IFileAttributesConfig,
+    ) {
+        super(_injector, _dialogRef);
+        this.form = this._getForm();
+        this.initialFormValue = this.form.getRawValue();
+    }
+
+    get disabled() {
+        if (!this.changed) {
+            return true;
+        }
+        if (!this.form.get('supportCsvMapping').value) {
+            return false;
+        }
+        return !this.valid;
+    }
+
+    async save() {
+        this._configuration.keyColumn = this.form.get('keyColumn').value;
+        this._configuration.delimiter = this.form.get('delimiter').value;
+        this._configuration.encoding = this.form.get('encodingType').value;
+
+        try {
+            await firstValueFrom(
+                this._fileAttributesService.setFileAttributeConfig(
+                    this._configuration,
+                    this._dossierTemplatesService.activeDossierTemplateId,
+                ),
+            );
+            this._toaster.success(_('file-attributes-configurations.update.success'));
+        } catch (e) {
+            this._toaster.error(_('file-attributes-configurations.update.error'));
+        }
+
+        this._dialogRef.close();
+    }
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            supportCsvMapping: [!!this._configuration.filenameMappingColumnHeaderName],
+            keyColumn: [this._configuration.keyColumn || '', [Validators.required]],
+            delimiter: [this._configuration.delimiter || '', [Validators.required]],
+            encodingType: [this._configuration.encoding || FileAttributeEncodingTypes['UTF-8'], [Validators.required]],
+        });
+    }
+}

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"

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts

@@ -129,6 +129,10 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         );
     }
 
+    openConfigurationsDialog($event: MouseEvent) {
+        this._dialogService.openDialog('fileAttributesConfigurations', $event, this._existingConfiguration);
+    }
+
     private async _createNewFileAttributeAndRefreshView(newValue: IFileAttributeConfig): Promise<void> {
         await firstValueFrom(
             this._fileAttributesService.setFileAttributesConfig(newValue, this._dossierTemplatesService.activeDossierTemplateId),

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'
     | 'deleteAttribute'
     | 'importFileAttributes'
+    | 'fileAttributesConfigurations'
     | 'addEditUser'
     | 'deleteUsers'
     | 'smtpAuthConfig'
@@ -52,6 +54,9 @@ export class AdminDialogService extends DialogService<DialogType> {
             component: ConfirmDeleteAttributeDialogComponent,
             dialogConfig: { disableClose: false },
         },
+        fileAttributesConfigurations: {
+            component: FileAttributesConfigurationsDialogComponent,
+        },
         importFileAttributes: {
             component: FileAttributesCsvImportDialogComponent,
             dialogConfig: { ...largeDialogConfig, ...{ disableClose: false } },

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 } = {
+    'UTF-8': _('file-attribute-encoding-types.utf8'),
+    ASCII: _('file-attribute-encoding-types.ascii'),
+    ISO: _('file-attribute-encoding-types.iso'),
+};

apps/red-ui/src/assets/i18n/en.json

@@ -1006,12 +1006,32 @@
   },
   "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": {
+      "delimiter": "Delimiter",
+      "encoding-type": "Encoding Type",
+      "key-column": "Key Column",
+      "support-csv-mapping": "Support CSV Mapping"
+    },
+    "save": "Save Configurations",
+    "title": "Configurations",
+    "update": {
+      "error": "Failed to update the configuration!",
+      "success": "Configuration has been updated successfully!"
+    }
+  },
   "file-attributes-csv-import": {
     "action": {
       "cancel-edit-name": "Cancel",
@@ -1077,6 +1097,7 @@
     "bulk-actions": {
       "delete": "Delete Selected Attributes"
     },
+    "configurations": "Configurations",
     "error": {
       "conflict": "File-Attribute with this name already exists!",
       "generic": "Failed to add File-Attribute"

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 = {
+    'UTF-8': 'UTF-8',
+    ASCII: 'ASCII',
+    ISO: 'ISO',
+} as const;
+export type FileAttributeEncodingType = keyof typeof FileAttributeEncodingTypes;

libs/red-domain/src/lib/file-attributes/file-attributes-config.ts

@@ -3,7 +3,7 @@ import { IFileAttributeConfig } from './file-attribute-config';
 export interface IFileAttributesConfig {
     delimiter?: string;
     encoding?: string;
+    keyColumn?: string
     filenameMappingColumnHeaderName?: string;
-
     fileAttributeConfigs?: IFileAttributeConfig[];
 }