From d66d548d42f8783ac7f53c960acfac56ddf41a63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina.teudan.ext@knecon.com>
Date: Mon, 26 Jun 2023 18:12:19 +0300
Subject: [PATCH] RED-4590: Refactor - table item component for dossier
 attributes listing

---
 ...it-dossier-attribute-dialog.component.html |  2 +-
 ...edit-dossier-attribute-dialog.component.ts | 32 +++++---------
 ...r-attributes-listing-screen.component.html | 44 ++++---------------
 ...r-attributes-listing-screen.component.scss |  4 --
 ...ier-attributes-listing-screen.component.ts |  4 +-
 .../dossier-attributes-listing.module.ts      |  3 +-
 .../table-item/table-item.component.html      | 31 +++++++++++++
 .../table-item/table-item.component.scss      |  3 ++
 .../table-item/table-item.component.ts        | 19 ++++++++
 apps/red-ui/src/assets/config/config.json     |  8 ++--
 10 files changed, 81 insertions(+), 69 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts

diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
index c793c3bab..2b6b09f4a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
@@ -1,7 +1,7 @@
 <section class="dialog">
     <div [innerHTML]="'add-edit-dossier-attribute.title' | translate : titleTranslateParams" class="dialog-header heading-l"></div>
 
-    <form [formGroup]="form">
+    <form (submit)="save()" [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
                 <label [translate]="'add-edit-dossier-attribute.form.label'"></label>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
index 6ee8c9116..52c973b00 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
@@ -1,8 +1,8 @@
-import { Component, HostListener, Inject, OnDestroy } from '@angular/core';
+import { Component, Inject, OnDestroy } from '@angular/core';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent, IqserEventTarget } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';
 import { HttpErrorResponse } from '@angular/common/http';
 import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
@@ -41,16 +41,6 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
         type: this.data.dossierAttribute ? 'edit' : 'create',
     };
 
-    constructor(
-        private readonly _dossierAttributesService: DossierAttributesService,
-        protected readonly _dialogRef: MatDialogRef<AddEditDossierAttributeDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierAttributeDialogData,
-    ) {
-        super(_dialogRef, !!data.dossierAttribute);
-        this.form = this.#form;
-        this.initialFormValue = this.form.getRawValue();
-    }
-
     get changed(): boolean {
         if (!this.dossierAttribute) {
             return true;
@@ -79,6 +69,16 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
         });
     }
 
+    constructor(
+        private readonly _dossierAttributesService: DossierAttributesService,
+        protected readonly _dialogRef: MatDialogRef<AddEditDossierAttributeDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierAttributeDialogData,
+    ) {
+        super(_dialogRef, !!data.dossierAttribute);
+        this.form = this.#form;
+        this.initialFormValue = this.form.getRawValue();
+    }
+
     async save() {
         this._loadingService.start();
 
@@ -99,12 +99,4 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
             this._dialogRef.close(true);
         }
     }
-
-    @HostListener('window:keydown.Enter', ['$event'])
-    async onEnter(event: KeyboardEvent) {
-        const node = (event.target as IqserEventTarget).localName;
-        if (this.form.valid && this.changed && node !== 'textarea') {
-            await this.save();
-        }
-    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index fd73206fc..f97dd07a5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -17,7 +17,7 @@
 
 <ng-template #bulkActions>
     <iqser-circle-button
-        (action)="openConfirmDeleteAttributeDialog($event)"
+        (action)="openConfirmDeleteAttributeDialog()"
         *ngIf="canEditDossierAttributes && (listingService.areSomeSelected$ | async)"
         [tooltip]="'dossier-attributes-listing.bulk.delete' | translate"
         [type]="circleButtonTypes.dark"
@@ -35,9 +35,9 @@
         <iqser-icon-button
             (action)="openAddEditAttributeDialog()"
             *ngIf="canEditDossierAttributes"
+            [attr.help-mode-key]="'create_new_dossier_attribute'"
             [label]="'dossier-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            [attr.help-mode-key]="'create_new_dossier_attribute'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </div>
@@ -49,39 +49,11 @@
     </ul>
 </ng-template>
 
-<!--TODO: move to a separate component-->
 <ng-template #tableItemTemplate let-entity="entity">
-    <div *ngIf="cast(entity) as attribute">
-        <div [matTooltip]="attribute.label" class="cell" matTooltipPosition="above">
-            <span class="clamp-1">{{ attribute.label }}</span>
-        </div>
-
-        <div [matTooltip]="attribute.placeholder" class="cell" matTooltipClass="break-all" matTooltipPosition="above">
-            <span class="small-label clamp-1">{{ attribute.placeholder }}</span>
-        </div>
-
-        <div class="cell">
-            <span class="small-label">{{ translations[attribute.type] | translate }}</span>
-        </div>
-
-        <div class="cell">
-            <div *ngIf="canEditDossierAttributes" class="action-buttons">
-                <div [attr.help-mode-key]="'edit_delete_dossier_attributes'">
-                    <iqser-circle-button
-                        (action)="openAddEditAttributeDialog(attribute)"
-                        [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-                        [type]="circleButtonTypes.dark"
-                        icon="iqser:edit"
-                    ></iqser-circle-button>
-
-                    <iqser-circle-button
-                        (action)="openConfirmDeleteAttributeDialog($event, [attribute])"
-                        [tooltip]="'dossier-attributes-listing.action.delete' | translate"
-                        [type]="circleButtonTypes.dark"
-                        icon="iqser:trash"
-                    ></iqser-circle-button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <redaction-table-item
+        (openAddEditAttributeDialog)="openAddEditAttributeDialog($event)"
+        (openConfirmDeleteAttributeDialog)="openConfirmDeleteAttributeDialog($event)"
+        [attribute]="entity"
+        [canEditDossierAttributes]="canEditDossierAttributes"
+    ></redaction-table-item>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
index 895341ea9..1d1e62c50 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
@@ -7,7 +7,3 @@
         margin: 5px 0;
     }
 }
-
-.action-buttons > div {
-    display: flex;
-}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
index 52237039e..08396011c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
@@ -12,7 +12,6 @@ import {
 } from '@iqser/common-ui';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
-import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DOSSIER_TEMPLATE_ID, DossierAttributeConfig, IDossierAttributeConfig, User } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
@@ -35,7 +34,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     readonly iconButtonTypes = IconButtonTypes;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
-    readonly translations = dossierAttributeTypesTranslations;
     readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title');
     readonly tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[] = [
         { label: _('dossier-attributes-listing.table-col-names.label'), sortByKey: 'label', width: '2fr' },
@@ -60,7 +58,7 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
         await this.#loadData();
     }
 
-    async openConfirmDeleteAttributeDialog($event: MouseEvent, attributes: DossierAttributeConfig[] = this.listingService.selected) {
+    async openConfirmDeleteAttributeDialog(attributes: DossierAttributeConfig[] = this.listingService.selected) {
         await this._dialogService.deleteAttributes(attributes, this.#dossierTemplateId, this.impactedTemplatesRef, 'dossier', async () => {
             this._loadingService.start();
             const ids = attributes.map(a => a.id);
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
index 5729c4cd7..e7ce656fd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
@@ -12,6 +12,7 @@ import {
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { TableItemComponent } from './table-item/table-item.component';
 
 const routes: IqserRoutes = [
     {
@@ -21,7 +22,7 @@ const routes: IqserRoutes = [
 ];
 
 @NgModule({
-    declarations: [DossierAttributesListingScreenComponent],
+    declarations: [DossierAttributesListingScreenComponent, TableItemComponent],
     imports: [
         CommonModule,
         RouterModule.forChild(routes),
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.html
new file mode 100644
index 000000000..495eeaa2f
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.html
@@ -0,0 +1,31 @@
+<div [matTooltip]="attribute.label" class="cell" matTooltipPosition="above">
+    <span class="clamp-1">{{ attribute.label }}</span>
+</div>
+
+<div [matTooltip]="attribute.placeholder" class="cell" matTooltipClass="break-all" matTooltipPosition="above">
+    <span class="small-label clamp-1">{{ attribute.placeholder }}</span>
+</div>
+
+<div class="cell">
+    <span class="small-label">{{ translations[attribute.type] | translate }}</span>
+</div>
+
+<div class="cell">
+    <div *ngIf="canEditDossierAttributes" class="action-buttons">
+        <div [attr.help-mode-key]="'edit_delete_dossier_attributes'">
+            <iqser-circle-button
+                (action)="openAddEditAttributeDialog.emit(attribute)"
+                [tooltip]="'dossier-attributes-listing.action.edit' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="iqser:edit"
+            ></iqser-circle-button>
+
+            <iqser-circle-button
+                (action)="openConfirmDeleteAttributeDialog.emit([attribute])"
+                [tooltip]="'dossier-attributes-listing.action.delete' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="iqser:trash"
+            ></iqser-circle-button>
+        </div>
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.scss
new file mode 100644
index 000000000..8c2112a71
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.scss
@@ -0,0 +1,3 @@
+.action-buttons > div {
+    display: flex;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts
new file mode 100644
index 000000000..5f2846eb6
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DossierAttributeConfig, IDossierAttributeConfig } from '@red/domain';
+import { CircleButtonTypes } from '@iqser/common-ui';
+import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
+
+@Component({
+    selector: 'redaction-table-item [attribute] [canEditDossierAttributes]',
+    templateUrl: './table-item.component.html',
+    styleUrls: ['./table-item.component.scss'],
+})
+export class TableItemComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = dossierAttributeTypesTranslations;
+
+    @Input() attribute: DossierAttributeConfig;
+    @Input() canEditDossierAttributes: boolean;
+    @Output() openAddEditAttributeDialog = new EventEmitter<IDossierAttributeConfig>();
+    @Output() openConfirmDeleteAttributeDialog = new EventEmitter<DossierAttributeConfig[]>();
+}
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 1ec01c3ae..135b0a653 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://qa5.iqser.cloud/redaction-gateway-v1",
+  "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
   "APP_NAME": "RedactManager",
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -11,13 +11,13 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://qa5.iqser.cloud/auth",
+  "OAUTH_URL": "https://dev-08.iqser.cloud/auth",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "scm",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/",
+  "THEME": "redact",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
   "AVAILABLE_NOTIFICATIONS_DAYS": 30,
   "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
   "NOTIFICATIONS_THRESHOLD": 1000,