From e1140d9c4b5ef7e6d6ea5972679dd5a9e34eb876 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Fri, 18 Feb 2022 14:11:12 +0200
Subject: [PATCH] added customeElements to header

---
 .../pdf-viewer/pdf-viewer.component.scss      | 12 +++
 .../pdf-viewer/pdf-viewer.component.ts        | 90 +++++++++++--------
 2 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss
index 40e50e4c7..05714771a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss
@@ -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;
+}
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 252d8a003..d6939f862 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
@@ -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);