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

styled apply/discard buttons and added some logic

Browse Source
This commit is contained in:
Edi Cziszter 2022-02-20 15:46:43 +02:00 committed by Dan Percic
parent e1140d9c4b
commit 56a2bd44d4
3 changed files with 60 additions and 40 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,15 +83,3 @@
}
}
}
.apply-button {
font-size: 11px;
font-weight: 600;
color: variables.$red-1;
}
.discard-button {
font-size: 11px;
font-weight: 600;
color: variables.$grey-1;
}

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

@ -44,6 +44,17 @@ import Tools = Core.Tools;
import TextTool = Tools.TextTool;
import Annotation = Core.Annotations.Annotation;
interface IHeaderElement {
type: string;
element?: string;
dataElement?: string;
img?: string;
title?: string;
toolGroup?: string;
render?: () => void;
onClick?: () => void;
}
enum RotationTypes {
LEFT,
RIGHT,
@ -92,6 +103,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
annotationManager: Core.AnnotationManager;
utils: PdfViewerUtils;
rotations = new Map<number, number>();
rotationActionsShown = false;
private _selectedText = '';
constructor(
@ -383,34 +395,54 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
'annotationGroupButton',
]);
const rotateConfirmationHeaderItems = [
const rotateConfirmationHeaderItems: IHeaderElement[] = [
{
type: 'customElement',
render: () => {
const paragraph = document.createElement('p');
paragraph.classList.add('apply-button');
paragraph.innerText = 'APPLY';
paragraph.style.cssText = `
font-size: 11px;
font-weight: 600;
color: #DD4D50FF;
cursor: pointer;
margin: 0 12px;
`;
paragraph.addEventListener('click', async () => {
await firstValueFrom(
this._fileManagementService.rotatePage(
{
pages: Object.fromEntries(this.rotations),
},
this.dossier.dossierId,
this.stateService.fileId,
),
);
this.rotations = new Map<number, number>();
});
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');
paragraph.innerText = 'DISCARD';
paragraph.style.cssText = `
font-size: 11px;
font-weight: 600;
color: #283241FF;
cursor: pointer;
`;
paragraph.addEventListener('click', () => {
this.rotations = new Map<number, number>();
});
return paragraph;
},
onClick: () => {
this.rotations = new Map<number, number>();
},
},
];
const headerItems = [
const headerItems: IHeaderElement[] = [
{
type: 'divider',
dataElement: dataElements.TOGGLE_TOOLTIPS_DIVIDER,
@ -472,10 +504,10 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
];
this.instance.UI.setHeaderItems(header => {
const originalHeaderItems = header.getItems();
const originalHeaderItems = header.getItems() as IHeaderElement[];
originalHeaderItems.splice(8, 0, ...headerItems);
const compareHeaderItems = [
const compareHeaderItems: IHeaderElement[] = [
{
type: 'actionButton',
element: 'compare',
@ -517,23 +549,23 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
});
}
private _showRotationConfirmationButtons(rotateConfirmationHeaderItems) {
private _showRotationConfirmationButtons(rotateConfirmationHeaderItems: IHeaderElement[]) {
const rotationValues = Array.from(this.rotations.values());
console.log(rotationValues);
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);
});
if (!this.rotationActionsShown) {
this.instance.UI.setHeaderItems(header => {
const existingHeaderItems = header.getItems() as IHeaderElement[];
existingHeaderItems.splice(18, 0, ...rotateConfirmationHeaderItems);
this.rotationActionsShown = true;
});
}
} else {
this.instance.UI.setHeaderItems(header => {
let existingHeaderItems = header.getItems();
existingHeaderItems.forEach(item => {
if (item.type === 'customElement') {
existingHeaderItems.splice(existingHeaderItems.indexOf(item, 0));
}
});
const existingHeaderItems = header.getItems() as IHeaderElement[];
existingHeaderItems.splice(18, 2);
this.rotationActionsShown = false;
});
}
}

4
apps/red-ui/src/assets/config/config.json
View File

@ -1,7 +1,7 @@
{
"ADMIN_CONTACT_NAME": null,
"ADMIN_CONTACT_URL": null,
"API_URL": "https://dev-05.iqser.cloud/redaction-gateway-v1",
"API_URL": "https://dev-04.iqser.cloud/redaction-gateway-v1",
"APP_NAME": "RedactManager",
"AUTO_READ_TIME": 3,
"BACKEND_APP_VERSION": "4.4.40",
@ -17,7 +17,7 @@
"MAX_RETRIES_ON_SERVER_ERROR": 3,
"OAUTH_CLIENT_ID": "redaction",
"OAUTH_IDP_HINT": null,
"OAUTH_URL": "https://dev-05.iqser.cloud/auth/realms/redaction",
"OAUTH_URL": "https://dev-04.iqser.cloud/auth/realms/redaction",
"RECENT_PERIOD_IN_HOURS": 24,
"SELECTION_MODE": "structural",
"MANUAL_BASE_URL": "https://docs.redactmanager.com/preview"