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 5242f5f5a..b4c80aaa1 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 @@ -2,7 +2,11 @@
{{ fileAttribute.label }}: - + {{ fileAttributeValue || '-' }} @@ -14,7 +18,7 @@
-
+ + this.fileAttributesService.isEditingFileAttribute() && + (this.fileAttribute.id !== this.fileAttributesService.openAttributeEdit() || + this.file.fileId !== this.fileAttributesService.fileEdit()), + ); constructor( router: Router, @@ -46,6 +52,15 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr tap(() => this.close()), ); this.#subscriptions.add(sub2.subscribe()); + + effect( + () => { + if (this.#shouldClose()) { + this.close(); + } + }, + { allowSignalWrites: true }, + ); } get isDate(): boolean { @@ -56,6 +71,13 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id]; } + @HostListener('document:click') + clickOutside() { + if (this.isInEditMode && this.closedDatepicker) { + this.close(); + } + } + ngOnDestroy() { this.#subscriptions.unsubscribe(); } @@ -64,6 +86,8 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr if (!this.file.isInitialProcessing && this.permissionsService.canEditFileAttributes(this.file, this.dossier)) { $event.stopPropagation(); this.#toggleEdit(); + this.fileAttributesService.setFileEdit(this.file.fileId); + this.fileAttributesService.setOpenAttributeEdit(this.fileAttribute.id); } } @@ -95,13 +119,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr } } - @HostListener('document:click') - clickOutside() { - if (this.isInEditMode && this.closedDatepicker) { - this.close(); - } - } - #initFileAttributes() { const configs = this.fileAttributesService.getFileAttributeConfig(this.file.dossierTemplateId).fileAttributeConfigs; configs.forEach(config => { @@ -116,13 +133,16 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr const fileAttributes = this.file.fileAttributes.attributeIdToValue; Object.keys(fileAttributes).forEach(key => { const attrValue = fileAttributes[key]; - config[key] = [dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue]; + config[key] = [ + dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue, + Validators.pattern(/^(\s+\S+\s*)*(?!\s).*$/), + ]; }); return this._formBuilder.group(config); } #formatAttributeValue(attrValue) { - return this.isDate ? attrValue && dayjs(attrValue).format('YYYY-MM-DD') : attrValue; + return this.isDate ? attrValue && dayjs(attrValue).format('YYYY-MM-DD') : attrValue.replaceAll(/\s\s+/g, ' '); } #toggleEdit(): void { @@ -133,7 +153,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr } this.isInEditMode = !this.isInEditMode; - this.fileAttributesService.isEditingFileAttribute$.next(this.isInEditMode); + this.fileAttributesService.isEditingFileAttribute.set(this.isInEditMode); if (this.isInEditMode) { this.#focusOnEditInput(); diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html index b413965aa..95c4b1213 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts b/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts index 5b478953d..0f74df8a5 100644 --- a/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts +++ b/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts @@ -1,5 +1,5 @@ import { EntitiesService } from '@iqser/common-ui'; -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { BehaviorSubject, Observable, of } from 'rxjs'; import { catchError, tap } from 'rxjs/operators'; import { FileAttributeConfig, FileAttributes, IFileAttributeConfig, IFileAttributesConfig } from '@red/domain'; @@ -11,10 +11,22 @@ export type FileAttributesConfigMap = Readonly { + readonly fileAttributesConfig$ = new BehaviorSubject({}); + readonly isEditingFileAttribute = signal(false); + + readonly openAttributeEdit = signal(''); + readonly fileEdit = signal(''); + protected readonly _defaultModelPath = 'fileAttributes'; protected readonly _entityClass = FileAttributeConfig; - readonly fileAttributesConfig$ = new BehaviorSubject({}); - readonly isEditingFileAttribute$ = new BehaviorSubject(false); + + setOpenAttributeEdit(attributeId: string) { + this.openAttributeEdit.set(attributeId); + } + + setFileEdit(fileId: string) { + this.fileEdit.set(fileId); + } /** * Get the file attributes that can be used at importing csv.