From 91a7cb9b440141120aa2927bd26df590e1e5ce86 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 15 Feb 2023 16:37:39 +0200 Subject: [PATCH] RED-5445 - Adding value to file attribute in file list --- .../file-attribute.component.html | 33 +++++-- .../file-attribute.component.scss | 46 +++++++++- .../file-attribute.component.ts | 90 +++++++++++++++---- .../table-item/table-item.component.html | 2 +- ...file-attribute-value-dialog.component.html | 28 ------ ...t-file-attribute-value-dialog.component.ts | 71 --------------- .../dossier-overview.module.ts | 4 - .../file-actions/file-actions.component.html | 2 +- .../file-actions/file-actions.component.ts | 2 + .../file-attributes.service.ts | 2 + libs/common-ui | 2 +- 11 files changed, 146 insertions(+), 136 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html delete mode 100644 apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts 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 7ea0512c1..7df95fc85 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,11 +3,30 @@ {{ 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 59c76f5c6..b40c8b172 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 @@ -1,15 +1,53 @@ .file-attribute { + height: 100%; + width: 100%; display: flex; - flex-direction: row; align-items: center; - justify-content: flex-start; - iqser-circle-button { + .edit-button, + .edit { + position: absolute; display: none; + 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 { + margin-top: 0; + } + + .edit { + width: 300%; + display: block; + + form { + display: flex; + gap: 5px; + align-items: center; + z-index: 10; + width: 75%; + } + + iqser-dynamic-input { + width: 75%; + margin-top: 0; + } } &:hover { - iqser-circle-button { + .edit-button { display: block; } } 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 bccfa7e75..4f2b58feb 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,29 +1,46 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain'; -import { MatDialog } from '@angular/material/dialog'; -import { - EditFileAttributeValueData, - EditFileAttributeValueDialogComponent, -} from '../../../dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component'; -import { defaultDialogConfig, Toaster } from '@iqser/common-ui'; -import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { firstValueFrom } from 'rxjs'; +import { BaseFormComponent, 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, Observable } from 'rxjs'; +import { FilesService } from '@services/files/files.service'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @Component({ selector: 'redaction-file-attribute [fileAttribute] [file] [dossier]', templateUrl: './file-attribute.component.html', styleUrls: ['./file-attribute.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FileAttributeComponent { +export class FileAttributeComponent extends BaseFormComponent implements OnInit { @Input() fileAttribute!: IFileAttributeConfig; @Input() file!: File; @Input() dossier!: Dossier; + isInEditMode = false; + readonly isEditingFileAttribute$: BehaviorSubject; - constructor(private readonly _dialog: MatDialog, private readonly _toaster: Toaster, readonly permissionsService: PermissionsService) {} + constructor( + private readonly _fileAttributesService: FileAttributesService, + private readonly _toaster: Toaster, + private readonly _formBuilder: FormBuilder, + private readonly _filesService: FilesService, + readonly permissionsService: PermissionsService, + ) { + super(); + this.isEditingFileAttribute$ = this._fileAttributesService.isEditingFileAttribute$; + } + + ngOnInit(): void { + if (this.#noFileAttributes) { + this.#initFileAttributes(); + } + + this.form = this.#getForm(); + this.initialFormValue = this.form.getRawValue(); + } get isDate(): boolean { return this.fileAttribute.type === FileAttributeConfigTypes.DATE; @@ -33,19 +50,54 @@ export class FileAttributeComponent { return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id]; } + get #noFileAttributes(): boolean { + return JSON.stringify(this.file.fileAttributes.attributeIdToValue) === '{}'; + } + + #initFileAttributes() { + const configs = this._fileAttributesService.getFileAttributeConfig(this.file.dossierTemplateId).fileAttributeConfigs; + configs.forEach(config => (this.file.fileAttributes.attributeIdToValue[config.id] = null)); + } + async editFileAttribute($event: MouseEvent): Promise { $event?.stopPropagation(); + this.#toggleEdit(); + } - const dialogRef = this._dialog.open( - EditFileAttributeValueDialogComponent, - { ...defaultDialogConfig, data: { fileAttribute: this.fileAttribute, file: this.file } }, - ); - const result = await firstValueFrom(dialogRef.afterClosed()); + #getForm(): UntypedFormGroup { + const config = {}; + const fileAttributes = this.file.fileAttributes.attributeIdToValue; + Object.keys(fileAttributes).forEach(key => { + config[key] = [fileAttributes[key]]; + }); + return this._formBuilder.group(config); + } - if (result) { + async save($event?: MouseEvent): Promise { + $event.stopPropagation(); + + try { + const attributeIdToValue = this.form.getRawValue(); + await firstValueFrom( + this._fileAttributesService.setFileAttributes({ attributeIdToValue }, this.file.dossierId, this.file.fileId), + ); + await firstValueFrom(this._filesService.reload(this.file.dossierId, this.file)); + this.initialFormValue = this.form.getRawValue(); this._toaster.success(_('file-attribute.update.success')); - } else if (result === false) { + } catch (e) { this._toaster.error(_('file-attribute.update.error')); } + + this.#toggleEdit(); + } + + close($event: MouseEvent): void { + $event?.stopPropagation(); + this.#toggleEdit(); + } + + #toggleEdit(): void { + this.isInEditMode = !this.isInEditMode; + this.isEditingFileAttribute$.next(this.isInEditMode); } } diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html index 0aec299a8..60d8510f2 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html +++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html @@ -10,7 +10,7 @@ -
+
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html b/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html deleted file mode 100644 index 75e0bb0f3..000000000 --- a/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html +++ /dev/null @@ -1,28 +0,0 @@ -
-
-
- -
- - -
- -
- -
-
-
- - -
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts b/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts deleted file mode 100644 index 0e686ed56..000000000 --- a/apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { Component, Inject } from '@angular/core'; -import { File, IFileAttributeConfig } from '@red/domain'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { BaseDialogComponent } from '@iqser/common-ui'; -import { UntypedFormGroup } from '@angular/forms'; -import { firstValueFrom } from 'rxjs'; -import { FileAttributesService } from '@services/entity-services/file-attributes.service'; -import { FilesService } from '@services/files/files.service'; - -export interface EditFileAttributeValueData { - readonly fileAttribute: IFileAttributeConfig; - readonly file: File; -} - -@Component({ - templateUrl: './edit-file-attribute-value-dialog.component.html', -}) -export class EditFileAttributeValueDialogComponent extends BaseDialogComponent { - readonly #file: File; - readonly fileAttribute: IFileAttributeConfig; - - constructor( - private readonly _fileAttributesService: FileAttributesService, - private readonly _filesService: FilesService, - protected readonly _dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) readonly data: EditFileAttributeValueData, - ) { - super(_dialogRef); - - this.#file = data.file; - this.fileAttribute = data.fileAttribute; - - if (this.#noFileAttributes) { - this.#initFileAttributes(); - } - - this.form = this.#getForm(); - this.initialFormValue = this.form.getRawValue(); - } - - get #noFileAttributes(): boolean { - return JSON.stringify(this.#file.fileAttributes.attributeIdToValue) === '{}'; - } - - #initFileAttributes() { - const configs = this._fileAttributesService.getFileAttributeConfig(this.#file.dossierTemplateId).fileAttributeConfigs; - configs.forEach(config => (this.#file.fileAttributes.attributeIdToValue[config.id] = null)); - } - - #getForm(): UntypedFormGroup { - const config = {}; - const fileAttributes = this.#file.fileAttributes.attributeIdToValue; - Object.keys(fileAttributes).forEach(key => { - config[key] = [fileAttributes[key]]; - }); - return this._formBuilder.group(config); - } - - async save(): Promise { - try { - const attributeIdToValue = this.form.getRawValue(); - await firstValueFrom( - this._fileAttributesService.setFileAttributes({ attributeIdToValue }, this.#file.dossierId, this.#file.fileId), - ); - await firstValueFrom(this._filesService.reload(this.#file.dossierId, this.#file)); - this._dialogRef.close(true); - } catch (e) { - this._dialogRef.close(false); - } - } -} diff --git a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts index faa4488b7..3e2a64bfb 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts @@ -26,7 +26,6 @@ import { WorkflowItemComponent } from './components/workflow-item/workflow-item. import { DossierOverviewScreenHeaderComponent } from './components/screen-header/dossier-overview-screen-header.component'; import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component'; import { FileAttributeComponent } from './components/table-item/file-attribute/file-attribute.component'; -import { EditFileAttributeValueDialogComponent } from './dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component'; const routes: Routes = [ { @@ -39,11 +38,8 @@ const routes: Routes = [ }, ]; -const dialogs = [EditFileAttributeValueDialogComponent]; - @NgModule({ declarations: [ - ...dialogs, DossierOverviewScreenComponent, DossierOverviewBulkActionsComponent, DossierDetailsComponent, 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 e6c423c21..d12686b9a 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/modules/shared-dossiers/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts index b0f239d00..54f8cd0c2 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts @@ -32,6 +32,7 @@ import { FileAssignService } from '../../services/file-assign.service'; import { ViewerHeaderService } from '../../../pdf-viewer/services/viewer-header.service'; import { ROTATION_ACTION_BUTTONS } from '../../../pdf-viewer/utils/constants'; import { ROLES } from '@users/roles'; +import { FileAttributesService } from '@services/entity-services/file-attributes.service'; @Component({ selector: 'redaction-file-actions [file] [type] [dossier]', @@ -96,6 +97,7 @@ export class FileActionsComponent implements OnChanges { private readonly _activeDossiersService: ActiveDossiersService, private readonly _fileManagementService: FileManagementService, private readonly _userPreferenceService: UserPreferenceService, + readonly fileAttributesService: FileAttributesService, @Optional() private readonly _documentInfoService: DocumentInfoService, @Optional() private readonly _excludedPagesService: ExcludedPagesService, ) {} 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 e23363a5b..e724e48a7 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 @@ -14,6 +14,8 @@ export class FileAttributesService extends EntitiesService({}); + readonly isEditingFileAttribute$ = new BehaviorSubject(false); + /** * Get the file attributes that can be used at importing csv. */ diff --git a/libs/common-ui b/libs/common-ui index 9891c2bf6..b91586c47 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 9891c2bf67285a4e2a46fdeadd2999919e5dcaf4 +Subproject commit b91586c470d502a505e1a78938ad72397cb51888