RED-5445 - updated input design, abort the editing when the user clicks somewhere else on the screen

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

@@ -3,8 +3,9 @@
     <ng-template #date>
         <span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
     </ng-template>
-    <ng-container *ngIf="(selectedFile$ | async) === false && ((isEditingFileAttribute$ | async) === false || isInEditMode)">
+
-        <div class="edit-button" *ngIf="!isInEditMode">
+    <ng-container *ngIf="(isEditingFileAttribute$ | async) === false || isInEditMode">
+        <div class="edit-button" *ngIf="!isInEditMode; else input">
             <iqser-circle-button
                 id="edit-attribute-button"
                 *ngIf="permissionsService.canEditFileAttributes(file, dossier)"
@@ -14,20 +15,30 @@
                 [tooltip]="'file-attribute.actions.edit' | translate"
             ></iqser-circle-button>
         </div>
-        <div *ngIf="isInEditMode" class="edit">
+        <ng-template #input>
-            <form (submit)="save()" [formGroup]="form">
+            <div class="edit-input" (click)="$event?.stopPropagation()">
-                <iqser-dynamic-input
+                <form (submit)="save()" [formGroup]="form">
-                    [formControlName]="fileAttribute.id"
+                    <iqser-dynamic-input
-                    [id]="fileAttribute.id"
+                        [formControlName]="fileAttribute.id"
-                    [type]="fileAttribute.type"
+                        [id]="fileAttribute.id"
-                    [classList]="'w-full'"
+                        [type]="fileAttribute.type"
-                    (keydown.escape)="close()"
+                        (keydown.escape)="close()"
-                >
+                        (closedDatepicker)="closedDatepicker = $event"
-                </iqser-dynamic-input>
+                    >
+                    </iqser-dynamic-input>
 
-                <iqser-circle-button [icon]="'iqser:check'" [disabled]="disabled" (action)="save($event)"></iqser-circle-button>
+                    <iqser-circle-button
-                <iqser-circle-button [icon]="'iqser:close'" (action)="close($event)"></iqser-circle-button>
+                        class="save"
-            </form>
+                        [icon]="'iqser:check'"
-        </div>
+                        [disabled]="disabled"
+                        (action)="save($event)"
+                    ></iqser-circle-button>
+                    <iqser-circle-button [icon]="'iqser:close'" (action)="close($event)"></iqser-circle-button>
+                </form>
+            </div>
+        </ng-template>
     </ng-container>
 </div>
+
+<!-- A hack to avoid subscribing in component -->
+<ng-container *ngIf="selectedFile$ | async"></ng-container>

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

@@ -5,52 +5,18 @@
     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;
         display: none;
-        top: 0;
+        background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 60%);
         height: 100%;
         width: 150%;
-        z-index: 1;
+        transform: translate(-25%);
-    }
-
-    iqser-dynamic-input {
-        margin-top: 0;
-    }
-
-    .edit {
-        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%;
 
+        iqser-circle-button {
             position: absolute;
             top: 50%;
-            transform: translate(0%, -50%);
+            left: 50%;
-        }
+            transform: translate(-50%, -50%);
-
-        iqser-dynamic-input {
-            width: 75%;
-            margin-top: 0;
         }
     }
 
@@ -59,4 +25,28 @@
             display: block;
         }
     }
+
+    .edit-input {
+        cursor: default;
+        display: flex;
+        z-index: 1;
+        border: solid var(--iqser-grey-4);
+        border-radius: 10px;
+        background: var(--iqser-background);
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+
+        form {
+            margin: 5px;
+            display: flex;
+            align-items: center;
+
+            iqser-dynamic-input {
+                margin-top: 0;
+            }
+
+            .save {
+                margin-left: 7px;
+            }
+        }
+    }
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
 import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import { BaseFormComponent, ListingService, Toaster } from '@iqser/common-ui';
 import { PermissionsService } from '@services/permissions.service';
@@ -24,6 +24,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
 
     @Input() dossier!: Dossier;
     isInEditMode = false;
+    closedDatepicker = true;
     readonly isEditingFileAttribute$: BehaviorSubject<boolean>;
     readonly selectedFile$: Observable<boolean>;
 
@@ -139,4 +140,11 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
             input.focus();
         }, 100);
     }
+
+    @HostListener('document:click')
+    clickOutside() {
+        if (this.isInEditMode && this.closedDatepicker) {
+            this.close();
+        }
+    }
 }

libs/common-ui

@@ -1 +1 @@
-Subproject commit d9a92992c3b6f4700fbbdb3662d981bfe23b979b
+Subproject commit cdfd0b59b4e1f63693366ac5c9e80d3c309d687d