From dc0f89441a645ecf9d94526e04a591173208dd8f Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 4 Jun 2021 01:06:15 +0300 Subject: [PATCH] Move delete dossier action to edit modal --- .../watermark/watermark-screen.component.scss | 4 - .../modules/app-config/app-config.service.ts | 1 + .../dossier-details.component.scss | 4 - .../dossier-listing-actions.component.html | 9 -- .../dossier-listing-actions.component.ts | 6 -- .../edit-dossier-dialog.component.html | 6 +- .../edit-dossier-dialog.component.ts | 17 ++-- .../edit-dossier-general-info.component.html | 10 +++ .../edit-dossier-general-info.component.scss | 5 ++ .../edit-dossier-general-info.component.ts | 36 +++++++- .../dossier-listing-screen.component.ts | 4 +- .../dossier-overview-screen.component.html | 8 -- .../dossier-overview-screen.component.ts | 6 -- .../services/dossiers-dialog.service.ts | 16 +++- .../confirmation-dialog.component.html | 38 ++++----- .../confirmation-dialog.component.ts | 82 ++++++++++++------- apps/red-ui/src/assets/config/config.json | 3 +- apps/red-ui/src/assets/i18n/de.json | 5 +- apps/red-ui/src/assets/i18n/en.json | 11 ++- .../src/assets/styles/red-page-layout.scss | 8 ++ docker/red-ui/docker-entrypoint.sh | 2 + 21 files changed, 173 insertions(+), 108 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss index ba1d0ec3b..894f778bd 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss @@ -93,7 +93,3 @@ .mb-5 { margin-bottom: 5px; } - -.mb-8 { - margin-bottom: 8px; -} diff --git a/apps/red-ui/src/app/modules/app-config/app-config.service.ts b/apps/red-ui/src/app/modules/app-config/app-config.service.ts index 1c4c52df6..b0689d802 100644 --- a/apps/red-ui/src/app/modules/app-config/app-config.service.ts +++ b/apps/red-ui/src/app/modules/app-config/app-config.service.ts @@ -17,6 +17,7 @@ export enum AppConfigKey { ADMIN_CONTACT_URL = 'ADMIN_CONTACT_URL', AUTO_READ_TIME = 'AUTO_READ_TIME', MAX_FILE_SIZE_MB = 'MAX_FILE_SIZE_MB', + DELETE_RETENTION_HOURS = 'DELETE_RETENTION_HOURS', APP_NAME = 'APP_NAME', // TODO diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss index 3aa1137c2..d9237bea3 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss @@ -54,7 +54,3 @@ .mt-12 { margin-top: 12px; } - -.mt-24 { - margin-top: 24px; -} diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html index 6cb4e7741..8be653dd8 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html @@ -1,14 +1,5 @@
- - - { - this.actionPerformed.emit(); - }); - } - openEditDossierDialog($event: MouseEvent, dossier: DossierWrapper) { this._dialogService.openEditDossierDialog($event, dossier, () => { this.actionPerformed.emit(); diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html index f0797ef1a..a29eeb977 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html @@ -52,15 +52,13 @@ (updateDossier)="updatedDossier($event)" *ngIf="activeNav === 'dossier-dictionary'" [dossierWrapper]="dossierWrapper" - > - + > - + >
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts index 75e75cfce..19536ef71 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts @@ -41,11 +41,11 @@ export class EditDossierDialogComponent { private readonly _notificationService: NotificationService, private readonly _translateService: TranslateService, private readonly _changeRef: ChangeDetectorRef, - public dialogRef: MatDialogRef, + private readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) - public data: { dossierWrapper: DossierWrapper; afterSave: Function } + private readonly _data: { dossierWrapper: DossierWrapper; afterSave: Function } ) { - this.dossierWrapper = data.dossierWrapper; + this.dossierWrapper = _data.dossierWrapper; } get activeNavItem(): { key: string; title?: string } { @@ -67,13 +67,18 @@ export class EditDossierDialogComponent { null, NotificationType.SUCCESS ); + if (updatedDossier) { this.dossierWrapper = updatedDossier; } + this._changeRef.detectChanges(); - if (this.data.afterSave) { - this.data.afterSave(); - } + + this.afterSave(); + } + + afterSave() { + if (this._data?.afterSave) this._data.afterSave(); } async save() { diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html index 45c01361e..0fe55be18 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html @@ -67,4 +67,14 @@
+ +
+ +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss index 5f0dc4fd5..72971f622 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss @@ -16,3 +16,8 @@ margin-right: 16px; } } + +.dialog-actions { + border-top: none; + padding: 0; +} diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts index 76838c65a..a7cdbde62 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts @@ -5,6 +5,16 @@ import { AppStateService } from '../../../../../state/app-state.service'; import * as moment from 'moment'; import { DossierWrapper } from '../../../../../state/model/dossier.wrapper'; import { EditDossierSectionInterface } from '../edit-dossier-section.interface'; +import { DossiersDialogService } from '../../../services/dossiers-dialog.service'; +import { PermissionsService } from '../../../../../services/permissions.service'; +import { Router } from '@angular/router'; +import { MatDialogRef } from '@angular/material/dialog'; +import { EditDossierDialogComponent } from '../edit-dossier-dialog.component'; +import { + NotificationService, + NotificationType +} from '../../../../../services/notification.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'redaction-edit-dossier-general-info', @@ -14,15 +24,21 @@ import { EditDossierSectionInterface } from '../edit-dossier-section.interface'; export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSectionInterface { dossierForm: FormGroup; hasDueDate: boolean; - reportTypesEnum = Object.values(DossierTemplateModel.ReportTypesEnum); + readonly reportTypesEnum = Object.values(DossierTemplateModel.ReportTypesEnum); dossierTemplates: DossierTemplateModel[]; @Input() dossierWrapper: DossierWrapper; @Output() updateDossier = new EventEmitter(); constructor( + readonly permissionsService: PermissionsService, private readonly _appStateService: AppStateService, - private readonly _formBuilder: FormBuilder + private readonly _formBuilder: FormBuilder, + private readonly _dialogService: DossiersDialogService, + private readonly _router: Router, + private readonly _editDossierDialogRef: MatDialogRef, + private readonly _notificationService: NotificationService, + private readonly _translateService: TranslateService ) {} get changed() { @@ -96,6 +112,22 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti this.updateDossier.emit(updatedDossier); } + openDeleteDossierDialog($event: MouseEvent) { + this._dialogService.openDeleteDossierDialog($event, this.dossierWrapper, () => { + this._editDossierDialogRef.componentInstance.afterSave(); + this._editDossierDialogRef.close(); + this._router.navigate(['main', 'dossiers']).then(() => this._notifyDossierDeleted()); + }); + } + + private _notifyDossierDeleted() { + this._notificationService.showToastNotification( + this._translateService.instant('edit-dossier-dialog.delete-successful'), + null, + NotificationType.SUCCESS + ); + } + private _filterInvalidDossierTemplates() { this.dossierTemplates = this._appStateService.dossierTemplates.filter(r => { if (this.dossierWrapper?.dossierTemplateId === r.dossierTemplateId) { diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts index 7266b22e4..f4f1bb404 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts @@ -183,9 +183,9 @@ export class DossierListingScreenComponent } openAddDossierDialog(): void { - this._dialogService.openAddDossierDialog(addResponse => { + this._dialogService.openAddDossierDialog(async addResponse => { this._calculateData(); - this._router.navigate([`/main/dossiers/${addResponse.dossier.dossierId}`]); + await this._router.navigate([`/main/dossiers/${addResponse.dossier.dossierId}`]); if (addResponse.addMembers) { this.openAssignDossierOwnerDialog(null, addResponse.dossier); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index b3aaa9214..9a3d652fb 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -46,14 +46,6 @@ tooltip="dossier-overview.header-actions.edit" tooltipPosition="below" > - - - - - - - - { - this._router.navigate(['/main/dossiers']); - }); - } - openAssignDossierMembersDialog(): void { this._dialogService.openAssignTeamMembersDialog(null, this.activeDossier, () => { this.reloadDossiers(); diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts index 5305b42bf..2401e51b9 100644 --- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts @@ -14,7 +14,8 @@ import { ForceRedactionDialogComponent } from '../dialogs/force-redaction-dialog import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { ConfirmationDialogComponent, - ConfirmationDialogInput + ConfirmationDialogInput, + TitleColors } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component'; import { DossierWrapper } from '@state/model/dossier.wrapper'; import { DocumentInfoDialogComponent } from '../dialogs/document-info-dialog/document-info-dialog.component'; @@ -28,6 +29,7 @@ import { EditDossierDialogComponent } from '../dialogs/edit-dossier-dialog/edit- import { FileStatusWrapper } from '../../../models/file/file-status.wrapper'; import { AssignReviewerApproverDialogComponent } from '../dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component'; import { TeamMembersDialogComponent } from '../dialogs/team-members-dialog/team-members-dialog.component'; +import { AppConfigService } from '../../app-config/app-config.service'; const dialogConfig = { width: '662px', @@ -46,7 +48,8 @@ export class DossiersDialogService { private readonly _fileManagementControllerService: FileManagementControllerService, private readonly _notificationService: NotificationService, private readonly _manualAnnotationService: ManualAnnotationService, - private readonly _manualRedactionControllerService: ManualRedactionControllerService + private readonly _manualRedactionControllerService: ManualRedactionControllerService, + private readonly _appConfigService: AppConfigService ) {} openDeleteFilesDialog( @@ -192,11 +195,18 @@ export class DossiersDialogService { cb?: Function ): MatDialogRef { $event.stopPropagation(); + const period = this._appConfigService.getConfig('DELETE_RETENTION_HOURS'); const ref = this._dialog.open(ConfirmationDialogComponent, { ...dialogConfig, data: new ConfirmationDialogInput({ title: 'confirmation-dialog.delete-dossier.title', - question: 'confirmation-dialog.delete-dossier.question' + titleColor: TitleColors.PRIMARY, + question: 'confirmation-dialog.delete-dossier.question', + details: 'confirmation-dialog.delete-dossier.details', + confirmationText: 'confirmation-dialog.delete-dossier.confirmation-text', + requireInput: true, + denyText: 'confirmation-dialog.delete-dossier.deny-text', + translateParams: { dossierName: dossier.dossierName, period: period } }) }); diff --git a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html index a39da3077..b22049838 100644 --- a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html +++ b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html @@ -1,30 +1,30 @@
-
- {{ confirmationDialogInput.title | translate: confirmationDialogInput.translateParams }} +
+ {{ config.title }}
-

+

+

+ +
+ + +
- - +
+ {{ config.denyText }} +
; - constructor(options: ConfirmationDialogInput) { - this.title = options.title || ConfirmationDialogInput.default().title; - this.question = options.question || ConfirmationDialogInput.default().question; - this.confirmationText = - options.confirmationText || ConfirmationDialogInput.default().confirmationText; - this.denyText = options.denyText || ConfirmationDialogInput.default().denyText; - this.translateParams = - options.translateParams || ConfirmationDialogInput.default().translateParams; - } - - static default() { - return new ConfirmationDialogInput({ - title: 'common.confirmation-dialog.title', - question: 'common.confirmation-dialog.description', - confirmationText: 'common.confirmation-dialog.confirm', - denyText: 'common.confirmation-dialog.deny', - translateParams: {} - }); + constructor(options?: ConfirmationDialogInput) { + this.title = options?.title || 'common.confirmation-dialog.title'; + this.titleColor = options?.titleColor || TitleColors.DEFAULT; + this.question = options?.question || 'common.confirmation-dialog.description'; + this.details = options?.details || ''; + this.confirmationText = options?.confirmationText || 'common.confirmation-dialog.confirm'; + this.requireInput = options?.requireInput || false; + this.denyText = options?.denyText || 'common.confirmation-dialog.deny'; + this.translateParams = options?.translateParams || {}; } } @Component({ - selector: 'redaction-confirmation-dialog', templateUrl: './confirmation-dialog.component.html', styleUrls: ['./confirmation-dialog.component.scss'] }) export class ConfirmationDialogComponent { + config: ConfirmationDialogInput; + inputValue = ''; + readonly inputLabel: string; + private readonly _inputLabelKey = 'confirmation-dialog.delete-dossier.input-label'; + constructor( + private readonly _dialogRef: MatDialogRef, private readonly _translateService: TranslateService, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public confirmationDialogInput: ConfirmationDialogInput + @Inject(MAT_DIALOG_DATA) private readonly _confirmationDialogInput: ConfirmationDialogInput ) { - if (!confirmationDialogInput) { - this.confirmationDialogInput = ConfirmationDialogInput.default(); - } + this.config = _confirmationDialogInput ?? new ConfirmationDialogInput(); + this.config = this.translate(this.config); + this.inputLabel = + this.translate(this._inputLabelKey) + ` '${this.config.confirmationText}'`; } - deny() { - this.dialogRef.close(); + get isDeleteAction() { + return this.config?.titleColor === TitleColors.PRIMARY; } - confirm() { - this.dialogRef.close(true); + confirmationDoesNotMatch(): boolean { + return this.inputValue.toLowerCase() !== this.config.confirmationText.toLowerCase(); + } + + deny(): void { + this._dialogRef.close(); + } + + confirm(): void { + this._dialogRef.close(true); + } + + translate(obj: T): T { + if (typeof obj === 'string') + return this._translateService.instant(obj, this.config.translateParams); + + const stringKeys = Object.keys(obj).filter(key => typeof key === 'string' && !!obj[key]); + stringKeys.forEach(key => (obj[key] = this.translate(obj[key]))); + + return obj; } } diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 37d237754..c9c9c08ef 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -10,5 +10,6 @@ "LICENSE_START": "01-01-2021", "LICENSE_END": "31-12-2021", "LICENSE_PAGE_COUNT": 1000000, - "MAX_FILE_SIZE_MB": 100 + "MAX_FILE_SIZE_MB": 100, + "DELETE_RETENTION_HOURS": 96 } diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 53091e865..b795d7942 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -614,8 +614,9 @@ "question": "Möchten Sie fortfahren?" }, "delete-dossier": { - "title": "Dossier löschen", - "question": "Möchten Sie fortfahren?" + "title": "Dossier {{dossierName}}", + "question": "Möchten Sie fortfahren?", + "confirmation-text": "Lösche Dossier" } }, "add-edit-file-attribute": { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 62f59a244..7a0c749f3 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -200,7 +200,8 @@ "entries": "{{length}} entries" }, "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab.", - "change-successful": "Dossier was updated." + "change-successful": "Dossier was updated.", + "delete-successful": "Dossier was deleted." }, "dossier-details": { "title": "Dossier Details", @@ -657,8 +658,12 @@ "question": "Do you wish to proceed?" }, "delete-dossier": { - "title": "Delete Dossier", - "question": "Do you wish to proceed?" + "title": "Delete {{dossierName}}", + "question": "Are you sure you want to delete this dossier?", + "details": "Deleted dossiers are sent to trash. They can be restored up to {{period}} days from their deletion.", + "input-label": "To proceed please type below", + "confirmation-text": "Delete Dossier", + "deny-text": "Keep Dossier" } }, "add-edit-file-attribute": { diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 3acd99cec..6da8319a1 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -241,10 +241,18 @@ section.settings { margin-top: 20px; } +.mt-24 { + margin-top: 24px; +} + .mt-32 { margin-top: 32px; } +.mb-8 { + margin-bottom: 8px !important; +} + .pb-24 { padding-bottom: 24px; } diff --git a/docker/red-ui/docker-entrypoint.sh b/docker/red-ui/docker-entrypoint.sh index 24897ad05..7d1f4cae9 100755 --- a/docker/red-ui/docker-entrypoint.sh +++ b/docker/red-ui/docker-entrypoint.sh @@ -9,6 +9,7 @@ ADMIN_CONTACT_NAME="${ADMIN_CONTACT_NAME:-}" ADMIN_CONTACT_URL="${ADMIN_CONTACT_URL:-}" AUTO_READ_TIME="${AUTO_READ_TIME:-1.5}" MAX_FILE_SIZE_MB="${MAX_FILE_SIZE_MB:-50}" +DELETE_RETENTION_HOURS="${DELETE_RETENTION_HOURS:-96}" BACKEND_APP_VERSION="${BACKEND_APP_VERSION:-4.7.0}" @@ -34,6 +35,7 @@ echo '{ "APP_NAME":"'"$APP_NAME"'", "AUTO_READ_TIME":'"$AUTO_READ_TIME"', "MAX_FILE_SIZE_MB":"'"$MAX_FILE_SIZE_MB"'", + "DELETE_RETENTION_HOURS":"'"$DELETE_RETENTION_HOURS"'", "API_URL":"'"$API_URL"'" }' > /usr/share/nginx/html/ui/assets/config/config.json