RED-7673 - Resize accept and decline actions not available in the document viewer

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>
 

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;
+        }
+    }
 }

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() {

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);

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>