diff --git a/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html index 8e8451696..b8eaf7cbf 100644 --- a/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html +++ b/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html @@ -1,16 +1,18 @@
-
+
+ {{ confirmationDialogInput.title | translate: confirmationDialogInput.translateParams }} +
-

+

diff --git a/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts b/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts index c5761b8f7..90a243adc 100644 --- a/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts +++ b/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts @@ -7,12 +7,14 @@ export class ConfirmationDialogInput { public question?: string; public confirmationText?: string; public denyText?: string; + public translateParams?: {}; 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() { @@ -20,7 +22,8 @@ export class ConfirmationDialogInput { title: 'common.confirmation-dialog.title', question: 'common.confirmation-dialog.description', confirmationText: 'common.confirmation-dialog.confirm', - denyText: 'common.confirmation-dialog.deny' + denyText: 'common.confirmation-dialog.deny', + translateParams: {} }); } } diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index 5fc08a369..bbdd81c2d 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/apps/red-ui/src/app/dialogs/dialog.service.ts @@ -149,6 +149,23 @@ export class DialogService { return ref; } + public openRemoveFromDictionaryDialog($event: MouseEvent, annotation: AnnotationWrapper, cb?: Function): MatDialogRef { + $event.stopPropagation(); + const ref = this._dialog.open(ConfirmationDialogComponent, { + ...dialogConfig, + data: new ConfirmationDialogInput({ + question: 'confirmation-dialog.remove-from-dictionary.question', + translateParams: { entry: annotation.value, dictionary: annotation.dictionary } + }) + }); + ref.afterClosed().subscribe(async (result) => { + if (result) { + if (cb) cb(); + } + }); + return ref; + } + public openDeleteDictionaryDialog($event: MouseEvent, dictionary: TypeValue, cb?: Function): MatDialogRef { $event.stopPropagation(); const ref = this._dialog.open(ConfirmationDialogComponent, dialogConfig); diff --git a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss index 3b503ab33..d9aa71af1 100644 --- a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss +++ b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss @@ -4,12 +4,14 @@ position: absolute; right: 0; top: 0; - height: 40px; + height: 100%; + box-sizing: border-box; display: none; - align-items: center; justify-content: flex-end; width: 120px; - padding-right: 16px; + padding-right: 8px; + padding-top: 8px; + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f9fafb, #f9fafb, #f9fafb); .confirm.active { background-color: $grey-2; diff --git a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts index 7706b5551..f875544e0 100644 --- a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts +++ b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts @@ -5,6 +5,7 @@ import { TypeValue } from '@redaction/red-ui-http'; import { ManualAnnotationService } from '../service/manual-annotation.service'; import { Observable } from 'rxjs'; import { PermissionsService } from '../../../common/service/permissions.service'; +import { DialogService } from '../../../dialogs/dialog.service'; @Component({ selector: 'redaction-annotation-actions', @@ -23,7 +24,8 @@ export class AnnotationActionsComponent implements OnInit { constructor( public appStateService: AppStateService, public permissionsService: PermissionsService, - private readonly _manualAnnotationService: ManualAnnotationService + private readonly _manualAnnotationService: ManualAnnotationService, + private readonly _dialogService: DialogService ) {} ngOnInit(): void { @@ -70,8 +72,9 @@ export class AnnotationActionsComponent implements OnInit { } suggestRemoveAnnotation($event: MouseEvent, annotation: AnnotationWrapper, removeFromDictionary: boolean) { - $event.stopPropagation(); - this._processObsAndEmit(this._manualAnnotationService.removeOrSuggestRemoveAnnotation(annotation, removeFromDictionary)); + this._dialogService.openRemoveFromDictionaryDialog($event, annotation, () => { + this._processObsAndEmit(this._manualAnnotationService.removeOrSuggestRemoveAnnotation(annotation, removeFromDictionary)); + }); } undoDirectAction($event: MouseEvent, annotation: AnnotationWrapper) { diff --git a/apps/red-ui/src/app/screens/file/model/annotation.wrapper.ts b/apps/red-ui/src/app/screens/file/model/annotation.wrapper.ts index 05853fe1d..0bab6c3c9 100644 --- a/apps/red-ui/src/app/screens/file/model/annotation.wrapper.ts +++ b/apps/red-ui/src/app/screens/file/model/annotation.wrapper.ts @@ -22,6 +22,7 @@ export class AnnotationWrapper { firstTopLeftPoint: Point; id: string; content: string; + value: string; manual: boolean; userId: string; typeLabel: string; @@ -114,6 +115,7 @@ export class AnnotationWrapper { annotationWrapper.redaction = redactionLogEntry.redacted; annotationWrapper.hint = redactionLogEntry.hint; annotationWrapper.dictionary = redactionLogEntry.type; + annotationWrapper.value = redactionLogEntry.value; annotationWrapper.firstTopLeftPoint = redactionLogEntry.positions[0]?.topLeft; annotationWrapper.pageNumber = redactionLogEntry.positions[0]?.page; annotationWrapper.positions = redactionLogEntry.positions; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 3304587a5..35bc685ee 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -479,6 +479,9 @@ "delete-file": { "title": "Confirm deletion", "question": "Do you wish to proceed?" + }, + "remove-from-dictionary": { + "question": "Are you sure you want to remove {{entry}} from the {{dictionary}} dictionary?" } }, "add-edit-dictionary": {