From 6dc613e0f5368b3830bd563fbfdd026f936e76f3 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 9 Oct 2023 21:38:15 +0300
Subject: [PATCH] RED-7673 - Resize accept and decline actions not available in
 the document viewer

---
 .../annotation-actions.component.html         |  4 +--
 .../annotation-actions.component.scss         | 15 ++++++++++
 .../annotation-actions.component.ts           |  4 ++-
 .../pdf-annotation-actions.service.ts         | 29 ++++++++++++++++---
 .../assets/icons/general/disabled-check.svg   | 11 +++++++
 5 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 apps/red-ui/src/assets/icons/general/disabled-check.svg

diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html
index d0216b725..cfaff2b27 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html
@@ -7,10 +7,10 @@
     <ng-container *ngIf="resizing && annotationPermissions.canResizeAnnotation">
         <iqser-circle-button
             (action)="acceptResize()"
-            *ngIf="resized"
             [tooltipPosition]="tooltipPosition"
-            [tooltip]="'annotation-actions.resize-accept.label' | translate"
+            [tooltip]="resized ? ('annotation-actions.resize-accept.label' | translate) : ''"
             [type]="buttonType"
+            [class.disabled]="!resized"
             icon="iqser:check"
         ></iqser-circle-button>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss
index f77411ebb..7705470bf 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss
@@ -16,4 +16,19 @@
     &.always-visible {
         display: flex;
     }
+
+    .disabled {
+        ::ng-deep button {
+            cursor: default;
+            color: #a8a8a8;
+        }
+
+        ::ng-deep .mat-ripple-element {
+            display: none;
+        }
+
+        ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
+            display: none;
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
index 61748b376..24cf21584 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
@@ -127,7 +127,9 @@ export class AnnotationActionsComponent implements OnChanges {
     }
 
     acceptResize() {
-        return this.annotationActionsService.acceptResize(this.#annotations[0]);
+        if (this.resized) {
+            return this.annotationActionsService.acceptResize(this.#annotations[0]);
+        }
     }
 
     cancelResize() {
diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts
index 7312cdf41..dd33d80f7 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts
@@ -33,14 +33,19 @@ export class PdfAnnotationActionsService {
             const firstAnnotation = annotations[0];
             // if we already entered resize-mode previously
             if (firstAnnotation.id === this.#annotationManager.resizingAnnotationId) {
-                const acceptResizeButton = this.#getButton('check', _('annotation-actions.resize-accept.label'), () =>
-                    this.#annotationActionsService.acceptResize(firstAnnotation),
-                );
+                let acceptResizeButton;
+                if (this.#annotationManager.annotationHasBeenResized) {
+                    acceptResizeButton = this.#getButton('check', _('annotation-actions.resize-accept.label'), () =>
+                        this.#annotationActionsService.acceptResize(firstAnnotation),
+                    );
+                } else {
+                    acceptResizeButton = this.#getDisabledCheckButton();
+                }
                 const cancelResizeButton = this.#getButton('close', _('annotation-actions.resize-cancel.label'), () =>
                     this.#annotationActionsService.cancelResize(firstAnnotation),
                 );
 
-                return this.#annotationManager.annotationHasBeenResized ? [acceptResizeButton, cancelResizeButton] : [cancelResizeButton];
+                return [acceptResizeButton, cancelResizeButton];
             }
 
             const resizeButton = this.#getButton('resize', _('annotation-actions.resize.label'), () =>
@@ -108,6 +113,22 @@ export class PdfAnnotationActionsService {
         };
     }
 
+    #getDisabledCheckButton(): IHeaderElement {
+        return {
+            type: 'customElement',
+            render: () => {
+                const button = document.createElement('button');
+                button.className = 'Button';
+                button.style.setProperty('pointer-events', 'none');
+                const img = document.createElement('img');
+                img.src = this.#convertPath('/assets/icons/general/disabled-check.svg');
+                button.appendChild(img);
+
+                return button;
+            },
+        };
+    }
+
     #getAnnotationsPermissions(annotations: AnnotationWrapper[]): AnnotationPermissions {
         const dossier = this.#state.dossier();
         const isApprover = this.#permissionsService.isApprover(dossier);
diff --git a/apps/red-ui/src/assets/icons/general/disabled-check.svg b/apps/red-ui/src/assets/icons/general/disabled-check.svg
new file mode 100644
index 000000000..6f59761ea
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/disabled-check.svg
@@ -0,0 +1,11 @@
+<svg id="Capa_1" style="enable-background:new 0 0 426.667 426.667;" version="1.1"
+     viewBox="0 0 426.667 426.667" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
+<g>
+	<g>
+		<path fill="#a8a8a8" d="M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375
+			l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4
+			c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z" />
+	</g>
+</g>
+</svg>