RED-6382 & RED-6973

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

@@ -28,11 +28,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     readonly #subscriptions = new Subscription();
     readonly #shouldClose = computed(
         () =>
-            this.fileAttributesService.isEditingFileAttribute() &&
-            !!this.file &&
-            !!this.fileAttribute &&
-            (this.fileAttribute.id !== this.fileAttributesService.openAttributeEdit() ||
-                this.file.fileId !== this.fileAttributesService.fileEdit()),
+            (this.fileAttributesService.isEditingFileAttribute() &&
+                this.file &&
+                this.fileAttribute &&
+                (this.fileAttribute.id !== this.fileAttributesService.openAttributeEdit() ||
+                    this.file.fileId !== this.fileAttributesService.fileEdit())) ||
+            !this.fileAttributesService.openAttributeEdits().length,
     );
 
     constructor(
@@ -95,7 +96,9 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     async editFileAttribute($event: MouseEvent): Promise<void> {
         if (!this.file.isInitialProcessing && this.permissionsService.canEditFileAttributes(this.file, this.dossier)) {
             $event.stopPropagation();
-            this.fileAttributesService.openAttributeEdits.mutate(value => value.push(this.fileAttribute.id));
+            this.fileAttributesService.openAttributeEdits.mutate(value =>
+                value.push({ attribute: this.fileAttribute.id, file: this.file.id }),
+            );
             this.#toggleEdit();
             this.fileAttributesService.setFileEdit(this.file.fileId);
             this.fileAttributesService.setOpenAttributeEdit(this.fileAttribute.id);
@@ -129,7 +132,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
             this.#toggleEdit();
             this.fileAttributesService.openAttributeEdits.mutate(value => {
                 for (let index = 0; index < value.length; index++) {
-                    if (value[index] === this.fileAttribute.id) {
+                    if (JSON.stringify(value[index]) === JSON.stringify({ attribute: this.fileAttribute.id, file: this.file.id })) {
                         value.splice(index, 1);
                     }
                 }
@@ -155,7 +158,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         });
         return this._formBuilder.group(config, {
             validators: control =>
-                !control.get(this.fileAttribute.id).value?.trim().length && !this.fileAttributeValue ? { emptyString: true } : null,
+                !control.get(this.fileAttribute.id)?.value?.trim().length && !this.fileAttributeValue ? { emptyString: true } : null,
         });
     }
 

apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html

@@ -1,4 +1,8 @@
-<div [class.help-mode-active]="helpModeService?.isHelpModeActive$ | async" class="workflow-item">
+<div
+    [class.help-mode-active]="helpModeService?.isHelpModeActive$ | async"
+    class="workflow-item"
+    (mousedown)="fileAttributesService.resetEdit()"
+>
     <div class="details-wrapper">
         <div class="details">
             <div

apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, Optional, View
 import { Dossier, File, IFileAttributeConfig } from '@red/domain';
 import { HelpModeService } from '@iqser/common-ui';
 import { Debounce } from '@iqser/common-ui/lib/utils';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 
 @Component({
     selector: 'redaction-workflow-item [file] [dossier] [displayedAttributes]',
@@ -15,7 +16,11 @@ export class WorkflowItemComponent implements OnInit {
     @Input() displayedAttributes: IFileAttributeConfig[];
     width: number;
 
-    constructor(private readonly _changeRef: ChangeDetectorRef, @Optional() readonly helpModeService: HelpModeService) {}
+    constructor(
+        readonly fileAttributesService: FileAttributesService,
+        private readonly _changeRef: ChangeDetectorRef,
+        @Optional() readonly helpModeService: HelpModeService,
+    ) {}
 
     ngOnInit(): void {
         const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {

apps/red-ui/src/app/services/entity-services/file-attributes.service.ts

@@ -29,6 +29,11 @@ export class FileAttributesService extends EntitiesService<IFileAttributeConfig,
         this.fileEdit.set(fileId);
     }
 
+    resetEdit() {
+        this.openAttributeEdits.set([]);
+        this.fileEdit.set('');
+        this.openAttributeEdit.set('');
+    }
     /**
      * Get the file attributes that can be used at importing csv.
      */