RED-5445 - last comments fixes

apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html

@@ -3,7 +3,7 @@
     <ng-template #date>
         <span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
     </ng-template>
-    <ng-container *ngIf="(isEditingFileAttribute$ | async) === false || isInEditMode">
+    <ng-container *ngIf="(selectedFile$ | async) === false && ((isEditingFileAttribute$ | async) === false || isInEditMode)">
         <div class="edit-button" *ngIf="!isInEditMode">
             <iqser-circle-button
                 id="edit-attribute-button"
@@ -21,6 +21,7 @@
                     [id]="fileAttribute.id"
                     [type]="fileAttribute.type"
                     [classList]="'w-full'"
+                    (keydown.escape)="close()"
                 >
                 </iqser-dynamic-input>
 

apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss

@@ -4,6 +4,18 @@
     display: flex;
     align-items: center;
 
+    .edit-button {
+        transform: translate(-25%);
+        background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 60%);
+
+        #edit-attribute-button {
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            left: 50%;
+        }
+    }
+
     .edit-button,
     .edit {
         position: absolute;
@@ -11,17 +23,7 @@
         top: 0;
         height: 100%;
         width: 150%;
-        transform: translate(-25%);
         z-index: 1;
-        background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 60%);
-
-        #edit-attribute-button,
-        form {
-            position: absolute;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            left: 50%;
-        }
     }
 
     iqser-dynamic-input {
@@ -32,12 +34,18 @@
         width: 300%;
         display: block;
 
+        background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 95%);
+
         form {
             display: flex;
             gap: 5px;
             align-items: center;
             z-index: 10;
             width: 75%;
+
+            position: absolute;
+            top: 50%;
+            transform: translate(0%, -50%);
         }
 
         iqser-dynamic-input {

apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts

@@ -1,13 +1,15 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
-import { BaseFormComponent, Toaster } from '@iqser/common-ui';
+import { BaseFormComponent, ListingService, Toaster } from '@iqser/common-ui';
 import { PermissionsService } from '@services/permissions.service';
 import { FormBuilder, UntypedFormGroup } from '@angular/forms';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
-import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
 import { FilesService } from '@services/files/files.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import dayjs from 'dayjs';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, map, tap } from 'rxjs/operators';
 
 @Component({
     selector: 'redaction-file-attribute [fileAttribute] [file] [dossier]',
@@ -23,16 +25,28 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
     @Input() dossier!: Dossier;
     isInEditMode = false;
     readonly isEditingFileAttribute$: BehaviorSubject<boolean>;
+    readonly selectedFile$: Observable<boolean>;
 
     constructor(
         private readonly _fileAttributesService: FileAttributesService,
         private readonly _toaster: Toaster,
         private readonly _formBuilder: FormBuilder,
         private readonly _filesService: FilesService,
+        private readonly _router: Router,
+        private readonly _listingService: ListingService<File>,
         readonly permissionsService: PermissionsService,
     ) {
         super();
         this.isEditingFileAttribute$ = this._fileAttributesService.isEditingFileAttribute$;
+
+        _router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            this.close();
+        });
+
+        this.selectedFile$ = this._listingService.selectedLength$.pipe(
+            map(selectedLength => !!selectedLength),
+            tap(() => this.close()),
+        );
     }
 
     ngOnInit(): void {
@@ -98,9 +112,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
         this.#toggleEdit();
     }
 
-    close($event: MouseEvent): void {
+    close($event?: MouseEvent): void {
         $event?.stopPropagation();
-        this.#toggleEdit();
+        if (this.isInEditMode) {
+            this.form = this.#getForm();
+            this.#toggleEdit();
+        }
     }
 
     #formatAttributeValue(attrValue) {
@@ -110,5 +127,16 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
     #toggleEdit(): void {
         this.isInEditMode = !this.isInEditMode;
         this.isEditingFileAttribute$.next(this.isInEditMode);
+
+        if (this.isInEditMode) {
+            this.#focusOnEditInput();
+        }
+    }
+
+    #focusOnEditInput(): void {
+        setTimeout(() => {
+            const input = document.getElementById(this.fileAttribute.id);
+            input.focus();
+        }, 100);
     }
 }