From d0a1687c5850eb3f4afb2d942d9052e97e58c37e Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 20 Mar 2024 10:11:38 +0200
Subject: [PATCH] RED-8737: made primary attribute editable only by clicking
 the button.

---
 .../file-attribute/file-attribute.component.html          | 8 ++++++--
 .../file-attribute/file-attribute.component.scss          | 5 +++++
 .../components/file-attribute/file-attribute.component.ts | 8 +++++++-
 .../components/table-item/table-item.component.scss       | 5 +++--
 4 files changed, 21 insertions(+), 5 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 7ea57cc77..5b47b90b7 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,6 +1,6 @@
 <ng-container *ngIf="configService.listingMode$ | async as mode">
     <div
-        (click)="editFileAttribute($event)"
+        (click)="handleFieldClick($event)"
         (mousedown)="handleClick($event)"
         [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }"
         class="file-attribute"
@@ -37,7 +37,11 @@
                 *ngIf="!isInEditMode; else input"
                 [attr.help-mode-key]="'edit_file_attributes'"
                 [class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
-                [ngClass]="{ 'workflow-edit-button': mode === 'workflow', 'action-buttons edit-button': !fileNameColumn }"
+                [ngClass]="{
+                    'workflow-edit-button': mode === 'workflow',
+                    'action-buttons edit-button': !fileNameColumn,
+                    'filename-edit-button': fileNameColumn
+                }"
             >
                 <div [ngClass]="{ 'workflow-edit-icon': mode === 'workflow', 'edit-icon': !fileNameColumn }">
                     <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
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 3de6f374c..39e801093 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
@@ -170,6 +170,11 @@
     }
 }
 
+.filename-edit-button:hover {
+    background-color: var(--iqser-grey-6);
+    border-radius: 50%;
+}
+
 .file-attribute:hover {
     &.workflow-attribute {
         background-color: var(--iqser-grey-6);
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 1c3ef8a1f..9346306ed 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
@@ -150,7 +150,13 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         this.#subscriptions.unsubscribe();
     }
 
-    async editFileAttribute($event: MouseEvent): Promise<void> {
+    handleFieldClick($event: MouseEvent) {
+        if (!this.fileNameColumn) {
+            this.editFileAttribute($event);
+        }
+    }
+
+    editFileAttribute($event: MouseEvent) {
         if (
             !this.file.isInitialProcessing &&
             this.permissionsService.canEditFileAttributes(this.file, this.dossier) &&
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 f46bac911..ca71f0d3b 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
@@ -31,9 +31,10 @@
 
 .file-name-cell:hover {
     ::ng-deep.file-name-column {
-        background: var(--iqser-grey-6);
+        .filename-edit-button {
+            width: 24px;
+            height: 24px;
 
-        div {
             mat-icon {
                 visibility: visible;
             }