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);
}
}