From b765541da09e729f33070998a6da6b5b141161d4 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 13 Mar 2024 14:05:10 +0200
Subject: [PATCH] RED-8648: added ellipsis for attribute value in workflow
 mode.

---
 .../file-attribute.component.html             | 25 +++++++++----------
 .../file-attribute.component.scss             |  4 ++-
 .../file-attribute.component.ts               |  5 ++--
 3 files changed, 17 insertions(+), 17 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 9fb4e8771..7ea57cc77 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
@@ -5,23 +5,22 @@
         [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }"
         class="file-attribute"
     >
-        <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value" *ngIf="!isInEditMode || !fileNameColumn">
+        <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value" *ngIf="!isInEditMode || mode === 'workflow'">
             <mat-icon *ngIf="!fileAttribute.editable" [matTooltip]="'readonly' | translate" svgIcon="red:read-only"></mat-icon>
-            <div>
+            <span
+                *ngIf="!isDate; else date"
+                [style.max-width]="attributeValueWidth"
+                [matTooltip]="fileAttributeValue"
+                [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
+            >
                 <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
-                <span
-                    *ngIf="!isDate; else date"
-                    [style.max-width]="attributeValueWidth"
-                    [matTooltip]="fileAttributeValue"
-                    [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
-                >
-                    {{ fileAttributeValue || '-' }}</span
-                >
-            </div>
+                {{ fileAttributeValue || '-' }}
+            </span>
             <ng-template #date>
                 <span [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
-                    {{ fileAttributeValue ? (fileAttributeValue | date: 'd MMM yyyy') : '-' }}</span
-                >
+                    <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
+                    {{ fileAttributeValue ? (fileAttributeValue | date: 'd MMM yyyy') : '-' }}
+                </span>
             </ng-template>
         </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 3fd0b35f7..3de6f374c 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
@@ -49,7 +49,7 @@
 
     .workflow-value {
         display: flex;
-        width: 90%;
+        width: 95%;
 
         b {
             text-transform: uppercase;
@@ -178,6 +178,8 @@
     }
 
     .workflow-value {
+        width: 90%;
+
         b {
             white-space: nowrap;
             overflow: unset;
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 be9b07315..1c3ef8a1f 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
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
+import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
 import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import {
     BaseFormComponent,
@@ -43,7 +43,6 @@ import { TranslateModule } from '@ngx-translate/core';
         NgTemplateOutlet,
         TranslateModule,
     ],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileAttributeComponent extends BaseFormComponent implements OnDestroy {
     isInEditMode = false;
@@ -163,9 +162,9 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
                 ...value,
                 { attribute: this.fileAttribute.id, file: this.file.id },
             ]);
-            this.#toggleEdit();
             this.fileAttributesService.setFileEdit(this.file.fileId);
             this.fileAttributesService.setOpenAttributeEdit(this.fileAttribute.id);
+            this.#toggleEdit();
         }
     }