From 02f4f33115c6cd0902f8c5db4d13fc4ed3f5bfd7 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 8 May 2023 14:45:37 +0300
Subject: [PATCH] RED-6410 - File attributes in-place editing look & feel
 changes in file list

---
 .../file-attribute.component.html             | 38 +++++++++----------
 .../file-attribute.component.ts               |  8 ++--
 2 files changed, 24 insertions(+), 22 deletions(-)

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
index 9cd1b42bd..4ccdb5001 100644
--- 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
@@ -1,5 +1,5 @@
 <div class="file-attribute">
-    <div class="value">
+    <div class="value" (click)="editFileAttribute($event)">
         <span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
         <ng-template #date>
             <span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
@@ -24,23 +24,23 @@
                 <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
             </div>
         </div>
-
-        <ng-template #input>
-            <div class="edit-input" stopPropagation>
-                <form (submit)="save()" [formGroup]="form">
-                    <iqser-dynamic-input
-                        (closedDatepicker)="closedDatepicker = $event"
-                        (keydown.escape)="close()"
-                        [formControlName]="fileAttribute.id"
-                        [id]="fileAttribute.id"
-                        [type]="fileAttribute.type"
-                    ></iqser-dynamic-input>
-
-                    <iqser-circle-button (action)="save()" [disabled]="disabled" [icon]="'iqser:check'" class="save"></iqser-circle-button>
-
-                    <iqser-circle-button (action)="close()" [icon]="'iqser:close'"></iqser-circle-button>
-                </form>
-            </div>
-        </ng-template>
     </ng-container>
 </div>
+
+<ng-template #input>
+    <div class="edit-input" stopPropagation>
+        <form (submit)="save()" [formGroup]="form">
+            <iqser-dynamic-input
+                (closedDatepicker)="closedDatepicker = $event"
+                (keydown.escape)="close()"
+                [formControlName]="fileAttribute.id"
+                [id]="fileAttribute.id"
+                [type]="fileAttribute.type"
+            ></iqser-dynamic-input>
+
+            <iqser-circle-button (action)="save()" [disabled]="disabled" [icon]="'iqser:check'" class="save"></iqser-circle-button>
+
+            <iqser-circle-button (action)="close()" [icon]="'iqser:close'"></iqser-circle-button>
+        </form>
+    </div>
+</ng-template>
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
index 982983b49..b4e1b40b4 100644
--- 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
@@ -59,8 +59,10 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     }
 
     async editFileAttribute($event: MouseEvent): Promise<void> {
-        $event.stopPropagation();
-        this.#toggleEdit();
+        if (!this.file.isInitialProcessing && this.permissionsService.canEditFileAttributes(this.file, this.dossier)) {
+            $event.stopPropagation();
+            this.#toggleEdit();
+        }
     }
 
     async save() {
@@ -139,7 +141,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     #focusOnEditInput(): void {
         setTimeout(() => {
             const input = document.getElementById(this.fileAttribute.id);
-            input.focus();
+            input?.focus();
         }, 100);
     }
 }