From 5f827122aa551cec0006e7bc148f6afc23f91f00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina.teudan.ext@knecon.com>
Date: Thu, 19 Oct 2023 22:18:58 +0300
Subject: [PATCH] RED-7790: File attributes editing: take into account
 Read-Only setting

---
 .../file-attribute.component.html             | 24 +++++++++++--------
 .../file-attribute.component.scss             | 11 +++++++++
 .../file-attribute.component.ts               |  9 ++++++-
 ...component-management-dialog.component.scss |  8 -------
 .../edit-dossier-attributes.component.html    |  1 -
 libs/common-ui                                |  2 +-
 6 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
index fd8750520..4f59aaa5f 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
@@ -1,19 +1,22 @@
 <ng-container *ngIf="configService.listingMode$ | async as mode">
     <div
-        (mousedown)="handleClick($event)"
         (click)="editFileAttribute($event)"
+        (mousedown)="handleClick($event)"
         [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }"
         class="file-attribute"
     >
         <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value">
-            <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
-            <span
-                *ngIf="!isDate; else date"
-                [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
-                [matTooltip]="fileAttributeValue"
-            >
-                {{ fileAttributeValue || '-' }}</span
-            >
+            <mat-icon *ngIf="!fileAttribute.editable" svgIcon="red:read-only"></mat-icon>
+            <div>
+                <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
+                <span
+                    *ngIf="!isDate; else date"
+                    [matTooltip]="fileAttributeValue"
+                    [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
+                >
+                    {{ fileAttributeValue || '-' }}</span
+                >
+            </div>
             <ng-template #date>
                 <span [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
                     {{ fileAttributeValue ? (fileAttributeValue | date: 'd MMM yyyy') : '-' }}</span
@@ -25,7 +28,8 @@
             *ngIf="
                 (fileAttributesService.isEditingFileAttribute() === false || isInEditMode) &&
                 !file.isInitialProcessing &&
-                permissionsService.canEditFileAttributes(file, dossier)
+                permissionsService.canEditFileAttributes(file, dossier) &&
+                fileAttribute.editable
             "
         >
             <div
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
index 4be2056d5..dee53add7 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
@@ -25,6 +25,17 @@
 
     .value {
         z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        mat-icon {
+            min-width: 12px;
+            width: 12px;
+            height: 12px;
+            line-height: 12px;
+            opacity: 0.7;
+        }
     }
 
     .workflow-value {
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
index 682306b65..1075f0c80 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
@@ -49,6 +49,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     @Input() file!: File;
     @Input() dossier!: Dossier;
     @Input() fileNameColumn = false;
+    readonlyAttrs: string[] = [];
     readonly #subscriptions = new Subscription();
     readonly #shouldClose = computed(
         () =>
@@ -187,6 +188,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
 
     #initFileAttributes() {
         const configs = this.fileAttributesService.getFileAttributeConfig(this.file.dossierTemplateId).fileAttributeConfigs;
+        this.readonlyAttrs = configs.filter(config => config.editable === false).map(config => config.id);
         configs.forEach(config => {
             if (!this.file.fileAttributes.attributeIdToValue[config.id]) {
                 this.file.fileAttributes.attributeIdToValue[config.id] = null;
@@ -199,7 +201,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         const fileAttributes = this.file.fileAttributes.attributeIdToValue;
         Object.keys(fileAttributes).forEach(key => {
             const attrValue = fileAttributes[key];
-            config[key] = [dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue];
+            config[key] = [
+                {
+                    value: dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue,
+                    disabled: this.readonlyAttrs.includes(key),
+                },
+            ];
         });
         return this._formBuilder.group(config, {
             validators: [this.#checkEmptyInput(), this.#checkDate()],
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
index 7c1268089..c75e9dc4a 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
@@ -32,14 +32,6 @@
         font-weight: 600;
     }
 
-    .value-content {
-        .value {
-        }
-
-        .actions {
-        }
-    }
-
     .table-header {
         margin: 10px 0;
         border-bottom: 1px solid var(--iqser-separator);
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index 813c9961c..93f577af5 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -12,7 +12,6 @@
 
         <iqser-dynamic-input
             *ngFor="let attr of customAttributes"
-            [canEditInput]="!disabled"
             [classList]="'w-full'"
             [formControlName]="attr.id"
             [id]="attr.id"
diff --git a/libs/common-ui b/libs/common-ui
index df01d0a91..bfaae5adf 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit df01d0a910fe443a11904b74055495ebc5ffc647
+Subproject commit bfaae5adf6522a099a55c7f3546dee3b542c4c33