From ab5c76a519ec05b24ba9893c2c15bd917e4773a3 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 23 Feb 2023 12:19:41 +0200 Subject: [PATCH] RED-5445 - last comments fixes --- .../file-attribute.component.html | 3 +- .../file-attribute.component.scss | 28 +++++++++------ .../file-attribute.component.ts | 36 ++++++++++++++++--- 3 files changed, 52 insertions(+), 15 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 7df95fc85..cbe8c5324 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 @@ -3,7 +3,7 @@ {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }} - +
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss index b40c8b172..f713d58ce 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss +++ b/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 { 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 c97d5e1a7..983b37ba8 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 @@ -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; + readonly selectedFile$: Observable; 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, 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); } }