From a960b837df159c21f6a5ba39b9b1aeb096020cff Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 5 Jun 2024 00:09:32 +0300 Subject: [PATCH] RED-9201 - UI for Component Mapping Tables --- ...it-component-mapping-dialog.component.html | 66 +++++++++++++++ ...it-component-mapping-dialog.component.scss | 21 +++++ ...edit-component-mapping-dialog.component.ts | 81 +++++++++++++++++++ .../component-mappings-screen.component.ts | 34 +++++++- .../component-mappings.service.ts | 28 +++++++ apps/red-ui/src/assets/config/config.json | 10 +-- apps/red-ui/src/assets/i18n/redact/de.json | 17 ++++ apps/red-ui/src/assets/i18n/redact/en.json | 17 ++++ apps/red-ui/src/assets/i18n/scm/de.json | 17 ++++ apps/red-ui/src/assets/i18n/scm/en.json | 17 ++++ .../component-mapping.model.ts | 6 ++ .../component-mappings/component-mapping.ts | 3 + 12 files changed, 308 insertions(+), 9 deletions(-) create mode 100644 apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html create mode 100644 apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss create mode 100644 apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts 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 new file mode 100644 index 000000000..bb918f40a --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html @@ -0,0 +1,66 @@ +
+
+
+
+
+
+ + +
+ +
+ + {{ data.mapping.version }} + +
+
+ +
+ + +
+ +
+
+ + +
+ +
+ + + + + {{ 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 new file mode 100644 index 000000000..56ceac53a --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss @@ -0,0 +1,21 @@ +.row { + display: flex; + margin-top: 14px; + + > *:not(:last-child) { + margin-right: 16px; + } + + .iqser-input-group { + margin-top: 0; + } + + .version { + margin-left: 50px; + + span { + margin-top: 10px; + font-size: 15px; + } + } +} 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 new file mode 100644 index 000000000..2a9a4a488 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts @@ -0,0 +1,81 @@ +import { Component } from '@angular/core'; +import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialogComponent, IqserUploadFileModule } from '@iqser/common-ui'; +import { FileAttributeEncodingTypes, IComponentMapping } from '@red/domain'; +import { FormBuilder, ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms'; +import { TranslateModule } from '@ngx-translate/core'; +import { NgForOf, NgIf } from '@angular/common'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatDialogClose } from '@angular/material/dialog'; +import { MatOption } from '@angular/material/autocomplete'; +import { MatSelect } from '@angular/material/select'; +import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations'; + +interface DialogData { + mapping: IComponentMapping; +} +interface DialogResult {} + +@Component({ + templateUrl: './add-edit-component-mapping-dialog.component.html', + styleUrls: ['./add-edit-component-mapping-dialog.component.scss'], + standalone: true, + imports: [ + TranslateModule, + ReactiveFormsModule, + NgIf, + MatFormFieldModule, + NgForOf, + CircleButtonComponent, + MatDialogClose, + IqserUploadFileModule, + MatOption, + MatSelect, + IconButtonComponent, + ], +}) +export class AddEditComponentMappingDialogComponent extends IqserDialogComponent< + AddEditComponentMappingDialogComponent, + DialogData, + DialogResult +> { + protected readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes); + protected readonly translations = fileAttributeEncodingTypesTranslations; + protected readonly iconButtonTypes = IconButtonTypes; + form!: UntypedFormGroup; + + constructor(private readonly _formBuilder: FormBuilder) { + super(); + + this.form = this.#getForm(); + } + + get file() { + return this.form.get('file').value; + } + + fileChanged(file: Blob | null) { + if (file) { + const fileReader = new FileReader(); + fileReader.onload = () => { + const binaryContent = fileReader.result; + this.form.get('file').setValue(binaryContent); + }; + fileReader.readAsBinaryString(file as Blob); + } else { + this.form.controls['file'].setValue(''); + } + } + + save() { + this.dialogRef.close({ ...this.data.mapping, ...this.form.getRawValue() }); + } + + #getForm(): UntypedFormGroup { + return this._formBuilder.group({ + name: [this.data?.mapping?.name, Validators.required], + file: [this.data?.mapping?.file, Validators.required], + delimiter: [this.data?.mapping?.delimiter ?? ',', Validators.required], + encodingType: this.encodingTypeOptions.find(e => e === this.data?.mapping?.encodingType) ?? this.encodingTypeOptions[0], + }); + } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts index 510462288..085dcefd9 100644 --- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts @@ -1,14 +1,23 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { ListingComponent, TableColumnConfig, listingProvidersFactory, LoadingService, IconButtonTypes } from '@iqser/common-ui'; +import { + ListingComponent, + TableColumnConfig, + listingProvidersFactory, + LoadingService, + IconButtonTypes, + IqserDialog, +} from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { defaultColorsTranslations } from '@translations/default-colors-translations'; import { Roles } from '@users/roles'; import { getCurrentUser } from '@common-ui/users'; import { User } from '@red/domain'; import { ComponentMapping } from '@red/domain'; -import { combineLatest } from 'rxjs'; +import { combineLatest, firstValueFrom } from 'rxjs'; import { ComponentMappingsService } from '@services/entity-services/component-mappings.service'; import { tap } from 'rxjs/operators'; +import { AddEditComponentMappingDialogComponent } from './add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component'; +import { AdminDialogService } from '../../services/admin-dialog.service'; @Component({ templateUrl: './component-mappings-screen.component.html', @@ -30,6 +39,8 @@ export class ComponentMappingsScreenComponent extends ListingComponent { + // this._loadingService.start(); + // this._loadingService.stop(); + }); + } } diff --git a/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts b/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts index 384af91bc..e3c9ac956 100644 --- a/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts +++ b/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts @@ -7,36 +7,54 @@ const DATA = [ { id: '1', name: 'OECD Number', + file: 'some file name', + delimiter: ',', + encodingType: 'UTF-8', version: 2, searchKey: 'OECD Number', }, { id: '2', name: 'Study Title', + file: 'some file name', + delimiter: ';', + encodingType: 'ASCII', version: 1, searchKey: 'Study Title', }, { id: '3', name: 'Report Number', + file: 'some file name', + delimiter: '.', + encodingType: 'ISO', version: 2, searchKey: 'Report Number', }, { id: '4', name: 'GLP Study', + file: 'some file name', + delimiter: '"', + encodingType: 'UTF-8', version: 5, searchKey: 'GLP Study', }, { id: '5', name: 'Performing Laboratory', + file: 'some file name', + delimiter: ']', + encodingType: 'UTF-8', version: 2, searchKey: 'Performing Laboratory', }, { id: '6', name: 'Test', + file: 'some file name', + delimiter: ';', + encodingType: 'UTF-8', version: 3, searchKey: 'Test', }, @@ -49,4 +67,14 @@ export class ComponentMappingsService extends EntitiesService { return of(DATA); } + + saveData(mapping: any): Observable { + if (!mapping.id) { + mapping.id = (Number(DATA[DATA.length - 1].id) + 1).toString(); + mapping.version = 1; + mapping.searchKey = mapping.name; + } + DATA.push(mapping); + return of(mapping); + } } diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 42bf5941f..2ccc6f6d1 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -1,9 +1,9 @@ { "ADMIN_CONTACT_NAME": null, "ADMIN_CONTACT_URL": null, - "API_URL": "https://dan.iqser.cloud", + "API_URL": "https://frontend2.iqser.cloud", "APP_NAME": "RedactManager", - "IS_DOCUMINE": false, + "IS_DOCUMINE": true, "RULE_EDITOR_DEV_ONLY": false, "AUTO_READ_TIME": 3, "BACKEND_APP_VERSION": "4.4.40", @@ -13,13 +13,13 @@ "MAX_RETRIES_ON_SERVER_ERROR": 3, "OAUTH_CLIENT_ID": "redaction", "OAUTH_IDP_HINT": null, - "OAUTH_URL": "https://dan.iqser.cloud/auth", + "OAUTH_URL": "https://frontend2.iqser.cloud/auth", "RECENT_PERIOD_IN_HOURS": 24, "SELECTION_MODE": "structural", "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview", "ANNOTATIONS_THRESHOLD": 1000, - "THEME": "redact", - "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/", + "THEME": "scm", + "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/", "AVAILABLE_NOTIFICATIONS_DAYS": 30, "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60, "NOTIFICATIONS_THRESHOLD": 1000, diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index f0e9c8432..519e9fcd7 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -94,6 +94,23 @@ }, "save": "Dossier-Vorlage speichern" }, + "add-edit-component-mapping": { + "actions": { + "save": "" + }, + "dialog": { + "title": "" + }, + "form": { + "delimiter": "", + "delimiter-placeholder": "", + "encoding-type": "", + "file": "", + "name": "", + "name-placeholder": "", + "version": "" + } + }, "add-edit-dossier-attribute": { "error": { "generic": "Attribut konnte nicht gespeichert werden!" diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index 992f36c85..dcd8dafe6 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -94,6 +94,23 @@ }, "save": "Save dossier template" }, + "add-edit-component-mapping": { + "actions": { + "save": "Save mapping" + }, + "dialog": { + "title": "{type, select, add{Add New} edit{Edit} other{}} Component Mapping" + }, + "form": { + "delimiter": "", + "delimiter-placeholder": "", + "encoding-type": "", + "file": "Mapping file", + "name": "Mapping name", + "name-placeholder": "Mapping name", + "version": "Version" + } + }, "add-edit-dossier-attribute": { "error": { "generic": "Failed to save attribute" diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index 99d638f9c..527e888e4 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -94,6 +94,23 @@ }, "save": "Dossier-Vorlage speichern" }, + "add-edit-component-mapping": { + "actions": { + "save": "" + }, + "dialog": { + "title": "" + }, + "form": { + "delimiter": "", + "delimiter-placeholder": "", + "encoding-type": "", + "file": "", + "name": "", + "name-placeholder": "", + "version": "" + } + }, "add-edit-dossier-attribute": { "error": { "generic": "Attribut konnte nicht gespeichert werden!" diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index 2b40f93a9..13e936c33 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -94,6 +94,23 @@ }, "save": "Save dossier template" }, + "add-edit-component-mapping": { + "actions": { + "save": "Save mapping" + }, + "dialog": { + "title": "{type, select, add{Add New} edit{Edit} other{}} Component Mapping" + }, + "form": { + "delimiter": "Delimiter", + "delimiter-placeholder": "Delimiter", + "encoding-type": "Encoding type", + "file": "Mapping file", + "name": "Mapping name", + "name-placeholder": "Mapping name", + "version": "Version" + } + }, "add-edit-dossier-attribute": { "error": { "generic": "Failed to save attribute!" diff --git a/libs/red-domain/src/lib/component-mappings/component-mapping.model.ts b/libs/red-domain/src/lib/component-mappings/component-mapping.model.ts index e0efbcccb..35fa1ef58 100644 --- a/libs/red-domain/src/lib/component-mappings/component-mapping.model.ts +++ b/libs/red-domain/src/lib/component-mappings/component-mapping.model.ts @@ -4,11 +4,17 @@ import { IListable } from '@iqser/common-ui'; export class ComponentMapping implements IComponentMapping, IListable { readonly id: string; readonly name: string; + readonly file: string; + readonly delimiter: string; + readonly encodingType: string; readonly version: number; constructor(componentMapping: IComponentMapping) { this.id = componentMapping.id; this.name = componentMapping.name; + this.file = componentMapping.file; + this.delimiter = componentMapping.delimiter; + this.encodingType = componentMapping.encodingType; this.version = componentMapping.version; } diff --git a/libs/red-domain/src/lib/component-mappings/component-mapping.ts b/libs/red-domain/src/lib/component-mappings/component-mapping.ts index eb1465f42..501c4c3d1 100644 --- a/libs/red-domain/src/lib/component-mappings/component-mapping.ts +++ b/libs/red-domain/src/lib/component-mappings/component-mapping.ts @@ -1,5 +1,8 @@ export interface IComponentMapping { id: string; name: string; + file: string; version: number; + delimiter: string; + encodingType: string; }