From d2e6dc873061fd763fa7664924b0138780cea014 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Tue, 31 Jan 2023 17:31:30 +0200
Subject: [PATCH] RED-5445 - Adding value to file attribute in file list

---
 .../file-attribute.component.html             | 12 ++++
 .../file-attribute.component.scss             | 16 +++++
 .../file-attribute.component.ts               | 48 +++++++++++++
 .../table-item/table-item.component.html      |  4 +-
 .../table-item/table-item.component.scss      |  7 ++
 ...file-attribute-value-dialog.component.html | 28 ++++++++
 ...t-file-attribute-value-dialog.component.ts | 71 +++++++++++++++++++
 .../dossier-overview.module.ts                |  8 +++
 .../src/app/modules/shared/pipes/date.pipe.ts |  6 +-
 apps/red-ui/src/assets/i18n/redact/de.json    | 16 +++++
 apps/red-ui/src/assets/i18n/redact/en.json    | 16 +++++
 apps/red-ui/src/assets/i18n/scm/de.json       | 16 +++++
 apps/red-ui/src/assets/i18n/scm/en.json       | 16 +++++
 libs/common-ui                                |  2 +-
 14 files changed, 262 insertions(+), 4 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
new file mode 100644
index 000000000..243191ab2
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
@@ -0,0 +1,12 @@
+<div class="file-attribute">
+    <span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
+    <ng-template #date>
+        <span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
+    </ng-template>
+    <iqser-circle-button
+        (action)="editFileAttribute($event)"
+        [icon]="'iqser:edit'"
+        [disabled]="!fileAttribute.editable"
+        [tooltip]="'file-attribute.actions.edit' | translate"
+    ></iqser-circle-button>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss
new file mode 100644
index 000000000..59c76f5c6
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss
@@ -0,0 +1,16 @@
+.file-attribute {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    iqser-circle-button {
+        display: none;
+    }
+
+    &:hover {
+        iqser-circle-button {
+            display: block;
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
new file mode 100644
index 000000000..6316b5473
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
+import { MatDialog } from '@angular/material/dialog';
+import {
+    EditFileAttributeValueData,
+    EditFileAttributeValueDialogComponent,
+} from '../../../dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component';
+import { defaultDialogConfig, Toaster } from '@iqser/common-ui';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+    selector: 'redaction-file-attribute [fileAttribute] [file]',
+    templateUrl: './file-attribute.component.html',
+    styleUrls: ['./file-attribute.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileAttributeComponent {
+    @Input() fileAttribute!: IFileAttributeConfig;
+
+    @Input() file: File;
+
+    constructor(private readonly _dialog: MatDialog, private readonly _toaster: Toaster) {}
+
+    get isDate(): boolean {
+        return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
+    }
+
+    get fileAttributeValue(): string {
+        return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id];
+    }
+
+    async editFileAttribute($event: MouseEvent): Promise<void> {
+        $event?.stopPropagation();
+
+        const dialogRef = this._dialog.open<EditFileAttributeValueDialogComponent, EditFileAttributeValueData>(
+            EditFileAttributeValueDialogComponent,
+            { ...defaultDialogConfig, data: { fileAttribute: this.fileAttribute, file: this.file } },
+        );
+        const result = await firstValueFrom(dialogRef.afterClosed());
+
+        if (result) {
+            this._toaster.success(_('file-attribute.update.success'));
+        } else if (result === false) {
+            this._toaster.error(_('file-attribute.update.error'));
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
index ed9d28e61..12de4c9b8 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
@@ -10,8 +10,8 @@
     <redaction-date-column [date]="file.redactionModificationDate" [isError]="file.isError"></redaction-date-column>
 </div>
 
-<div *ngFor="let config of displayedAttributes" [matTooltip]="file.fileAttributes.attributeIdToValue[config.id]" class="cell">
-    <span class="clamp-3"> {{ file.fileAttributes.attributeIdToValue[config.id] || '-' }}</span>
+<div *ngFor="let config of displayedAttributes" class="cell editable">
+    <redaction-file-attribute [file]="file" [fileAttribute]="config"></redaction-file-attribute>
 </div>
 
 <!-- always show A for error-->
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
index 396e6bfb4..4aa16c810 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
@@ -21,3 +21,10 @@
         }
     }
 }
+
+.editable {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html b/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html
new file mode 100644
index 000000000..75e0bb0f3
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html
@@ -0,0 +1,28 @@
+<section class="dialog">
+    <form (submit)="save()" [formGroup]="form">
+        <div translate="edit-file-attribute-value-dialog.header" class="dialog-header heading-l"></div>
+
+        <div class="dialog-content">
+            <iqser-dynamic-input
+                [formControlName]="fileAttribute.id"
+                [id]="fileAttribute.id"
+                [label]="fileAttribute.label"
+                [type]="fileAttribute.type"
+                [classList]="'w-full'"
+            >
+            </iqser-dynamic-input>
+        </div>
+
+        <div class="dialog-actions">
+            <iqser-icon-button
+                [disabled]="disabled"
+                [label]="'edit-file-attribute-value-dialog.actions.save' | translate"
+                [submit]="true"
+                [type]="iconButtonTypes.primary"
+            ></iqser-icon-button>
+            <div class="all-caps-label cancel" translate="edit-file-attribute-value-dialog.actions.cancel" mat-dialog-close></div>
+        </div>
+    </form>
+
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+</section>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts b/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts
new file mode 100644
index 000000000..0e686ed56
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts
@@ -0,0 +1,71 @@
+import { Component, Inject } from '@angular/core';
+import { File, IFileAttributeConfig } from '@red/domain';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { BaseDialogComponent } from '@iqser/common-ui';
+import { UntypedFormGroup } from '@angular/forms';
+import { firstValueFrom } from 'rxjs';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
+import { FilesService } from '@services/files/files.service';
+
+export interface EditFileAttributeValueData {
+    readonly fileAttribute: IFileAttributeConfig;
+    readonly file: File;
+}
+
+@Component({
+    templateUrl: './edit-file-attribute-value-dialog.component.html',
+})
+export class EditFileAttributeValueDialogComponent extends BaseDialogComponent {
+    readonly #file: File;
+    readonly fileAttribute: IFileAttributeConfig;
+
+    constructor(
+        private readonly _fileAttributesService: FileAttributesService,
+        private readonly _filesService: FilesService,
+        protected readonly _dialogRef: MatDialogRef<EditFileAttributeValueDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) readonly data: EditFileAttributeValueData,
+    ) {
+        super(_dialogRef);
+
+        this.#file = data.file;
+        this.fileAttribute = data.fileAttribute;
+
+        if (this.#noFileAttributes) {
+            this.#initFileAttributes();
+        }
+
+        this.form = this.#getForm();
+        this.initialFormValue = this.form.getRawValue();
+    }
+
+    get #noFileAttributes(): boolean {
+        return JSON.stringify(this.#file.fileAttributes.attributeIdToValue) === '{}';
+    }
+
+    #initFileAttributes() {
+        const configs = this._fileAttributesService.getFileAttributeConfig(this.#file.dossierTemplateId).fileAttributeConfigs;
+        configs.forEach(config => (this.#file.fileAttributes.attributeIdToValue[config.id] = null));
+    }
+
+    #getForm(): UntypedFormGroup {
+        const config = {};
+        const fileAttributes = this.#file.fileAttributes.attributeIdToValue;
+        Object.keys(fileAttributes).forEach(key => {
+            config[key] = [fileAttributes[key]];
+        });
+        return this._formBuilder.group(config);
+    }
+
+    async save(): Promise<void> {
+        try {
+            const attributeIdToValue = this.form.getRawValue();
+            await firstValueFrom(
+                this._fileAttributesService.setFileAttributes({ attributeIdToValue }, this.#file.dossierId, this.#file.fileId),
+            );
+            await firstValueFrom(this._filesService.reload(this.#file.dossierId, this.#file));
+            this._dialogRef.close(true);
+        } catch (e) {
+            this._dialogRef.close(false);
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
index bbd8b101c..faa4488b7 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
@@ -6,6 +6,7 @@ import {
     IqserButtonsModule,
     IqserHelpModeModule,
     IqserIconsModule,
+    IqserInputsModule,
     IqserListingModule,
     IqserLoadingModule,
     IqserPermissionsModule,
@@ -24,6 +25,8 @@ import { FileWorkloadComponent } from './components/table-item/file-workload/fil
 import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
 import { DossierOverviewScreenHeaderComponent } from './components/screen-header/dossier-overview-screen-header.component';
 import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
+import { FileAttributeComponent } from './components/table-item/file-attribute/file-attribute.component';
+import { EditFileAttributeValueDialogComponent } from './dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component';
 
 const routes: Routes = [
     {
@@ -36,13 +39,17 @@ const routes: Routes = [
     },
 ];
 
+const dialogs = [EditFileAttributeValueDialogComponent];
+
 @NgModule({
     declarations: [
+        ...dialogs,
         DossierOverviewScreenComponent,
         DossierOverviewBulkActionsComponent,
         DossierDetailsComponent,
         DossierDetailsStatsComponent,
         FileWorkloadComponent,
+        FileAttributeComponent,
         TableItemComponent,
         WorkflowItemComponent,
         DossierOverviewScreenHeaderComponent,
@@ -63,6 +70,7 @@ const routes: Routes = [
         IqserSharedModule,
         IqserScrollbarModule,
         IqserPermissionsModule,
+        IqserInputsModule,
     ],
 })
 export class DossierOverviewModule {}
diff --git a/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts b/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
index a3ef1f066..6284c47e4 100644
--- a/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
+++ b/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
@@ -26,7 +26,11 @@ export class DatePipe extends BaseDatePipe implements PipeTransform {
                 return this._getExactDate(value);
             }
         }
-        return super.transform(value, format, timezone, locale || this._translateService.currentLang);
+        try {
+            return super.transform(value, format, timezone, locale || this._translateService.currentLang);
+        } catch (e) {
+            return '-';
+        }
     }
 
     private _getTimeFromNow(value: string) {
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 317a036ff..3acc5a9bd 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -1152,6 +1152,13 @@
     },
     "side-nav-title": "Konfiguration"
   },
+  "edit-file-attribute-value-dialog": {
+    "actions": {
+      "cancel": "",
+      "save": ""
+    },
+    "header": ""
+  },
   "entities-listing": {
     "action": {
       "delete": "Wörterbuch löschen",
@@ -1228,6 +1235,15 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "actions": {
+      "edit": ""
+    },
+    "update": {
+      "error": "",
+      "success": ""
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "",
     "form": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 8d34f5731..327d32d4b 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -1152,6 +1152,13 @@
     },
     "side-nav-title": "Configurations"
   },
+  "edit-file-attribute-value-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "save": "Save"
+    },
+    "header": "Edit file attribute"
+  },
   "entities-listing": {
     "action": {
       "delete": "Delete Entity",
@@ -1228,6 +1235,15 @@
     "number": "Number",
     "text": "Free Text"
   },
+  "file-attribute": {
+    "actions": {
+      "edit": "Edit"
+    },
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index ed28e6911..06adc6cb3 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -1152,6 +1152,13 @@
     },
     "side-nav-title": "Konfiguration"
   },
+  "edit-file-attribute-value-dialog": {
+    "actions": {
+      "cancel": "",
+      "save": ""
+    },
+    "header": ""
+  },
   "entities-listing": {
     "action": {
       "delete": "Wörterbuch löschen",
@@ -1228,6 +1235,15 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "actions": {
+      "edit": ""
+    },
+    "update": {
+      "error": "",
+      "success": ""
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "",
     "form": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 9d87c1bc3..5a3190ba4 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -1152,6 +1152,13 @@
     },
     "side-nav-title": "Configurations"
   },
+  "edit-file-attribute-value-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "save": "Save"
+    },
+    "header": "Edit file attribute"
+  },
   "entities-listing": {
     "action": {
       "delete": "Delete Entity",
@@ -1228,6 +1235,15 @@
     "number": "Number",
     "text": "Free Text"
   },
+  "file-attribute": {
+    "actions": {
+      "edit": "Edit"
+    },
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
diff --git a/libs/common-ui b/libs/common-ui
index 40e640bc6..484ff6eed 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 40e640bc62992879f3dbb2479f288beb27bbdf27
+Subproject commit 484ff6eed59fee2a35a61069943da2af46b3f17a