Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-6382: Fix edit value in the workflow view.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2023-07-07 21:01:29 +03:00
parent b22e47cec3
commit af3ceccac2
4 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
View File

@ -2,7 +2,11 @@
<div (click)="editFileAttribute($event)" [ngClass]="{ 'workflow-attribute': mode === 'workflow' }" class="file-attribute">
<div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value">
<b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
<span *ngIf="!isDate; else date" [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
<span
*ngIf="!isDate; else date"
[ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
[matTooltip]="fileAttributeValue"
>
{{ fileAttributeValue || '-' }}</span
>
<ng-template #date>
@ -14,7 +18,7 @@
<ng-container
*ngIf="
((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
(fileAttributesService.isEditingFileAttribute() === false || isInEditMode) &&
!file.isInitialProcessing &&
permissionsService.canEditFileAttributes(file, dossier)
"
@ -36,7 +40,7 @@
<ng-template #input>
<div [ngClass]="{ 'workflow-edit-input': mode === 'workflow' }" class="edit-input" iqserStopPropagation>
<form (submit)="save()" [formGroup]="form">
<form [formGroup]="form">
<iqser-dynamic-input
(closedDatepicker)="closedDatepicker = $event"
(keydown.escape)="close()"

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

@ -1,8 +1,8 @@
import { Component, HostListener, Input, OnDestroy } from '@angular/core';
import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { BaseFormComponent, HelpModeService, ListingService, Toaster } from '@iqser/common-ui';
import { PermissionsService } from '@services/permissions.service';
import { FormBuilder, UntypedFormGroup } from '@angular/forms';
import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
import { firstValueFrom, Subscription } from 'rxjs';
import { FilesService } from '@services/files/files.service';
@ -25,6 +25,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
isInEditMode = false;
closedDatepicker = true;
readonly #subscriptions = new Subscription();
readonly #shouldClose = computed(
() =>
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();

2
apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html
View File

@ -1,4 +1,4 @@
<div *ngIf="isDossierOverviewList && (fileAttributesService.isEditingFileAttribute$ | async) === false" class="action-buttons">
<div *ngIf="isDossierOverviewList && fileAttributesService.isEditingFileAttribute() === false" class="action-buttons">
<ng-container *ngTemplateOutlet="actions"></ng-container>
<redaction-processing-indicator *ngIf="showStatusBar" [file]="file"></redaction-processing-indicator>

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

@ -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<Record<string, IFileAttributesCon
providedIn: 'root',
})
export class FileAttributesService extends EntitiesService<IFileAttributeConfig, FileAttributeConfig> {
readonly fileAttributesConfig$ = new BehaviorSubject<FileAttributesConfigMap>({});
readonly isEditingFileAttribute = signal(false);
readonly openAttributeEdit = signal('');
readonly fileEdit = signal('');
protected readonly _defaultModelPath = 'fileAttributes';
protected readonly _entityClass = FileAttributeConfig;
readonly fileAttributesConfig$ = new BehaviorSubject<FileAttributesConfigMap>({});
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.