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

added customeElements to header

Browse Source
This commit is contained in:
Edi Cziszter 2022-02-18 14:11:12 +02:00 committed by Dan Percic
parent 0b64c22121
commit e1140d9c4b
2 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,3 +83,15 @@
}
}
}
.apply-button {
font-size: 11px;
font-weight: 600;
color: variables.$red-1;
}
.discard-button {
font-size: 11px;
font-weight: 600;
color: variables.$grey-1;
}

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

@ -383,6 +383,33 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
'annotationGroupButton',
]);
const rotateConfirmationHeaderItems = [
{
type: 'customElement',
render: () => {
const paragraph = document.createElement('p');
paragraph.classList.add('apply-button');
return paragraph;
},
onClick: async () => {
await firstValueFrom(
this._fileManagementService.rotatePage({ pages: this.rotations }, this.dossier.dossierId, this.stateService.fileId),
);
},
},
{
type: 'customElement',
render: () => {
const paragraph = document.createElement('p');
paragraph.classList.add('discard-button');
return paragraph;
},
onClick: () => {
this.rotations = new Map<number, number>();
},
},
];
const headerItems = [
{
type: 'divider',
@ -425,6 +452,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
img: this._convertPath('/assets/icons/general/rotate-left.svg'),
onClick: () => {
this._addRotation(this.utils.currentPage, RotationTypes.LEFT);
this._showRotationConfirmationButtons(rotateConfirmationHeaderItems);
},
},
{
@ -434,46 +462,15 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
img: this._convertPath('/assets/icons/general/rotate-right.svg'),
onClick: () => {
this._addRotation(this.utils.currentPage, RotationTypes.RIGHT);
this._showRotationConfirmationButtons(rotateConfirmationHeaderItems);
},
},
{
type: 'divider',
dataElement: dataElements.RECTANGLE_TOOL_DIVIDER,
},
];
const rotationValues = Array.from(this.rotations.values());
if (rotationValues.length > 0 && rotationValues.find(v => v !== 0)) {
headerItems.push(
{
type: 'actionButton',
element: 'tooltips',
dataElement: dataElements.ROTATE_RIGHT_BUTTON,
img: this._convertPath('/assets/icons/general/rotate-right.svg'),
onClick: async () => {
await firstValueFrom(
this._fileManagementService.rotatePage(
{ pages: this.rotations },
this.dossier.dossierId,
this.stateService.fileId,
),
);
},
},
{
type: 'actionButton',
element: 'tooltips',
dataElement: dataElements.ROTATE_RIGHT_BUTTON,
img: this._convertPath('/assets/icons/general/rotate-right.svg'),
onClick: () => {
this.rotations = new Map<number, number>();
},
},
);
}
headerItems.push({
type: 'divider',
dataElement: dataElements.RECTANGLE_TOOL_DIVIDER,
});
this.instance.UI.setHeaderItems(header => {
const originalHeaderItems = header.getItems();
originalHeaderItems.splice(8, 0, ...headerItems);
@ -520,6 +517,27 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
});
}
private _showRotationConfirmationButtons(rotateConfirmationHeaderItems) {
const rotationValues = Array.from(this.rotations.values());
if (rotationValues.length > 0 && rotationValues.find(v => v !== 0)) {
this.instance.UI.setHeaderItems(header => {
const existingHeaderItems = header.getItems();
existingHeaderItems.splice(17, 0, ...rotateConfirmationHeaderItems);
console.log(existingHeaderItems);
});
} else {
this.instance.UI.setHeaderItems(header => {
let existingHeaderItems = header.getItems();
existingHeaderItems.forEach(item => {
if (item.type === 'customElement') {
existingHeaderItems.splice(existingHeaderItems.indexOf(item, 0));
}
});
});
}
}
private _addRotation(pageNumber: number, rotationType: RotationType): void {
const sum = rotationType === RotationTypes.LEFT ? 270 : 90;
const pageRotation = this.rotations.get(pageNumber);