From 6ebecb50717ff5a7402eb89b4541842b60ac7727 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 4 Mar 2022 15:22:09 +0200 Subject: [PATCH] show rotation buttons only to reviewers --- .../pdf-viewer/pdf-viewer.component.ts | 125 +++++++++--------- .../services/page-rotation.service.ts | 2 +- 2 files changed, 63 insertions(+), 64 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index 391bd054a..6ec2139d2 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -45,7 +45,7 @@ import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; const ALLOWED_KEYBOARD_SHORTCUTS: readonly string[] = ['+', '-', 'p', 'r', 'Escape'] as const; -const dataElements = { +const elements = { ADD_REDACTION: 'add-redaction', ADD_DICTIONARY: 'add-dictionary', ADD_RECTANGLE: 'add-rectangle', @@ -55,17 +55,16 @@ const dataElements = { ROTATE_RIGHT_BUTTON: 'rotateRightButton', APPLY_ROTATION: 'applyRotation', DISCARD_ROTATION: 'discardRotation', - RECTANGLE_TOOL_DIVIDER: 'rectangleToolDivider', TOGGLE_TOOLTIPS: 'toggle-tooltips', ANNOTATION_POPUP: 'annotationPopup', COMPARE_BUTTON: 'compareButton', CLOSE_COMPARE_BUTTON: 'closeCompareButton', } as const; -function getDivider(dataElement = dataElements.RECTANGLE_TOOL_DIVIDER) { +function getDivider(hiddenOn?: readonly ('desktop' | 'mobile' | 'tablet')[]) { return { type: 'divider', - dataElement, + hidden: hiddenOn, }; } @@ -227,8 +226,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha const filename = (await this.stateService.file).filename ?? 'document.pdf'; this.instance.UI.loadDocument(currentDocument, { filename }); - this.instance.UI.disableElements([dataElements.CLOSE_COMPARE_BUTTON]); - this.instance.UI.enableElements([dataElements.COMPARE_BUTTON]); + this.instance.UI.disableElements([elements.CLOSE_COMPARE_BUTTON]); + this.instance.UI.enableElements([elements.COMPARE_BUTTON]); this.utils.navigateToPage(1); } @@ -303,7 +302,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this.documentViewer.addEventListener('textSelected', async (quads, selectedText, pageNumber: number) => { this._selectedText = selectedText; - const textActions = [dataElements.ADD_DICTIONARY, dataElements.ADD_FALSE_POSITIVE]; + const textActions = [elements.ADD_DICTIONARY, elements.ADD_FALSE_POSITIVE]; const file = await this.stateService.file; @@ -351,9 +350,9 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private _toggleRectangleAnnotationAction(readonly = false) { if (!readonly) { - this.instance.UI.enableElements([dataElements.ADD_RECTANGLE]); + this.instance.UI.enableElements([elements.ADD_RECTANGLE]); } else { - this.instance.UI.disableElements([dataElements.ADD_RECTANGLE]); + this.instance.UI.disableElements([elements.ADD_RECTANGLE]); } } @@ -380,11 +379,10 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha 'annotationStyleEditButton', 'annotationGroupButton', ]); - const { APPLY_ROTATION, DISCARD_ROTATION, TOGGLE_TOOLTIPS, CLOSE_COMPARE_BUTTON } = dataElements; const applyRotation: IHeaderElement = { type: 'customElement', - dataElement: APPLY_ROTATION, + dataElement: elements.APPLY_ROTATION, render: () => { const paragraph = document.createElement('p'); paragraph.innerText = 'APPLY'; @@ -401,7 +399,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha }; const discardRotation: IHeaderElement = { type: 'customElement', - dataElement: DISCARD_ROTATION, + dataElement: elements.DISCARD_ROTATION, render: () => { const paragraph = document.createElement('p'); paragraph.innerText = 'DISCARD'; @@ -426,13 +424,13 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha { type: 'actionButton', element: 'tooltips', - dataElement: TOGGLE_TOOLTIPS, + dataElement: elements.TOGGLE_TOOLTIPS, img: this._toggleTooltipsIcon, title: this._toggleTooltipsBtnTitle, onClick: async () => { await this._userPreferenceService.toggleFilePreviewTooltipsPreference(); this._updateTooltipsVisibility(); - this.instance.UI.updateElement(TOGGLE_TOOLTIPS, { + this.instance.UI.updateElement(elements.TOGGLE_TOOLTIPS, { title: this._toggleTooltipsBtnTitle, img: this._toggleTooltipsIcon, }); @@ -442,41 +440,36 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha { type: 'toolGroupButton', toolGroup: 'rectangleTools', - dataElement: dataElements.SHAPE_TOOL_GROUP_BUTTON, + dataElement: elements.SHAPE_TOOL_GROUP_BUTTON, img: this._convertPath('/assets/icons/general/rectangle.svg'), title: 'annotation.rectangle', }, divider, + { + type: 'actionButton', + element: 'tooltips', + dataElement: elements.ROTATE_LEFT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-left.svg'), + onClick: () => { + this._pageRotationService.addRotation(this.utils.currentPage, RotationTypes.LEFT); + this._showRotationConfirmationButtons(); + }, + }, + { + type: 'actionButton', + element: 'tooltips', + dataElement: elements.ROTATE_RIGHT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-right.svg'), + onClick: () => { + this._pageRotationService.addRotation(this.utils.currentPage, RotationTypes.RIGHT); + this._showRotationConfirmationButtons(); + }, + }, + applyRotation, + discardRotation, + divider, ]; - if (await this._pageRotationService.canRotate) { - headerItems.push( - { - type: 'actionButton', - element: 'tooltips', - dataElement: dataElements.ROTATE_LEFT_BUTTON, - img: this._convertPath('/assets/icons/general/rotate-left.svg'), - onClick: () => { - this._pageRotationService.addRotation(this.utils.currentPage, RotationTypes.LEFT); - this._showRotationConfirmationButtons(); - }, - }, - { - type: 'actionButton', - element: 'tooltips', - dataElement: dataElements.ROTATE_RIGHT_BUTTON, - img: this._convertPath('/assets/icons/general/rotate-right.svg'), - onClick: () => { - this._pageRotationService.addRotation(this.utils.currentPage, RotationTypes.RIGHT); - this._showRotationConfirmationButtons(); - }, - }, - applyRotation, - discardRotation, - divider, - ); - } - this.instance.UI.setHeaderItems(header => { const originalHeaderItems = header.getItems() as IHeaderElement[]; originalHeaderItems.splice(8, 0, ...headerItems); @@ -485,7 +478,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha { type: 'actionButton', element: 'compare', - dataElement: dataElements.COMPARE_BUTTON, + dataElement: elements.COMPARE_BUTTON, img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), title: 'Compare', onClick: () => { @@ -495,7 +488,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha { type: 'actionButton', element: 'closeCompare', - dataElement: CLOSE_COMPARE_BUTTON, + dataElement: elements.CLOSE_COMPARE_BUTTON, img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), title: 'Leave Compare Mode', onClick: async () => { @@ -508,7 +501,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha originalHeaderItems.splice(9, 0, ...compareHeaderItems); }); - this.instance.UI.disableElements([CLOSE_COMPARE_BUTTON, APPLY_ROTATION, DISCARD_ROTATION]); + this.instance.UI.disableElements([elements.CLOSE_COMPARE_BUTTON, elements.APPLY_ROTATION, elements.DISCARD_ROTATION]); const dossierTemplateId = this.dossier.dossierTemplateId; @@ -522,15 +515,15 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private _showRotationConfirmationButtons() { const rotationValues = Array.from(this._pageRotationService.rotations.values()); - const { APPLY_ROTATION, DISCARD_ROTATION } = dataElements; + const rotationElements = [elements.APPLY_ROTATION, elements.DISCARD_ROTATION]; if (rotationValues.length > 0 && rotationValues.find(v => v !== 0)) { if (!this._pageRotationService.isRotated) { - this.instance.UI.enableElements([APPLY_ROTATION, DISCARD_ROTATION]); + this.instance.UI.enableElements(rotationElements); this._pageRotationService.setRotation(true); } } else { - this.instance.UI.disableElements([APPLY_ROTATION, DISCARD_ROTATION]); + this.instance.UI.disableElements(rotationElements); this._pageRotationService.setRotation(false); } } @@ -589,7 +582,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this.instance.UI.annotationPopup.add([ { type: 'actionButton', - dataElement: dataElements.ADD_RECTANGLE, + dataElement: elements.ADD_RECTANGLE, img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'), title: this.#getTitle(ManualRedactionEntryTypes.REDACTION), onClick: () => this._addRectangleManualRedaction(), @@ -609,7 +602,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha } private _cleanUpSelectionAndButtonState() { - const rectangleElements = [dataElements.SHAPE_TOOL_GROUP_BUTTON, dataElements.RECTANGLE_TOOL_DIVIDER]; + const rectangleElements = [elements.SHAPE_TOOL_GROUP_BUTTON]; this.utils.deselectAllAnnotations(); this.instance.UI.disableElements(rectangleElements); this.instance.UI.enableElements(rectangleElements); @@ -649,14 +642,14 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha textPopups.push({ type: 'actionButton', - dataElement: dataElements.ADD_REDACTION, + dataElement: elements.ADD_REDACTION, img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'), title: this.#getTitle(ManualRedactionEntryTypes.REDACTION), onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.REDACTION), }); textPopups.push({ type: 'actionButton', - dataElement: dataElements.ADD_DICTIONARY, + dataElement: elements.ADD_DICTIONARY, img: this._convertPath('/assets/icons/general/pdftron-action-add-dict.svg'), title: this.#getTitle(ManualRedactionEntryTypes.DICTIONARY), onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY), @@ -680,14 +673,15 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private async _handleCustomActions() { this.instance.UI.setToolMode('AnnotationEdit'); - const { ANNOTATION_POPUP, ADD_RECTANGLE, ADD_REDACTION, SHAPE_TOOL_GROUP_BUTTON } = dataElements; - const elements = [ - ADD_REDACTION, - ADD_RECTANGLE, + const elementsToToggle = [ + elements.ADD_REDACTION, + elements.ADD_RECTANGLE, 'add-false-positive', - SHAPE_TOOL_GROUP_BUTTON, + elements.SHAPE_TOOL_GROUP_BUTTON, 'rectangleToolDivider', - ANNOTATION_POPUP, + elements.ANNOTATION_POPUP, + elements.ROTATE_LEFT_BUTTON, + elements.ROTATE_RIGHT_BUTTON, ]; const isCurrentPageExcluded = this.utils.isCurrentPageExcluded(await this.stateService.file); @@ -698,19 +692,24 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha } catch (e) { // happens } - this.instance.UI.enableElements(elements); + this.instance.UI.enableElements(elementsToToggle); if (this._selectedText.length > 2) { - this.instance.UI.enableElements([dataElements.ADD_DICTIONARY, dataElements.ADD_FALSE_POSITIVE]); + this.instance.UI.enableElements([elements.ADD_DICTIONARY, elements.ADD_FALSE_POSITIVE]); } return; } - let elementsToDisable = [...elements, ADD_RECTANGLE]; + let elementsToDisable = [...elementsToToggle, elements.ADD_RECTANGLE]; if (isCurrentPageExcluded) { - const allowedActionsWhenPageExcluded: string[] = [ANNOTATION_POPUP, ADD_RECTANGLE, ADD_REDACTION, SHAPE_TOOL_GROUP_BUTTON]; + const allowedActionsWhenPageExcluded: string[] = [ + elements.ANNOTATION_POPUP, + elements.ADD_RECTANGLE, + elements.ADD_REDACTION, + elements.SHAPE_TOOL_GROUP_BUTTON, + ]; elementsToDisable = elementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element)); } else { this.instance.UI.disableTools(['AnnotationCreateRectangle']); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/page-rotation.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/page-rotation.service.ts index f8ab2a2ad..fe226363b 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/page-rotation.service.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/page-rotation.service.ts @@ -21,7 +21,7 @@ export class PageRotationService { } get canRotate() { - return this._screenState.file.then(file => this._permissionsService.isReviewerOrApprover(file)); + return this._screenState.file.then(file => this._permissionsService.isFileAssignee(file)); } setRotation(value: boolean): void {