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

show rotation buttons only to reviewers

Browse Source
This commit is contained in:
Dan Percic 2022-03-04 15:22:09 +02:00
parent 58fb6a6f93
commit 6ebecb5071
2 changed files with 63 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts
View File

@ -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']);

2
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/page-rotation.service.ts
View File

@ -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 {