RED-9861: fixed bulk-select issues.

apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html

@@ -6,7 +6,7 @@
         class="mt-6 mr-10"
     ></redaction-annotation-icon>
 
-    <div [class.flex-1]="!isDocumine">
+    <div class="flex-1">
         <div>
             <strong>{{ annotation.superTypeLabel | translate }}</strong>
             &nbsp;

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html

@@ -44,34 +44,9 @@
             </ng-template>
         </ng-container>
 
-        <div *ngIf="multiSelectService.active()" class="multi-select">
+        @if (!isDocumine) {
-            <div class="selected-wrapper">
+            <ng-container [ngTemplateOutlet]="multiSelectTemplate()"></ng-container>
-                <iqser-round-checkbox
+        }
-                    (click)="annotationManager.deselect()"
-                    [indeterminate]="listingService.areSomeSelected$ | async"
-                    type="with-bg"
-                ></iqser-round-checkbox>
-
-                <span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span>
-
-                <redaction-annotation-actions
-                    *ngIf="listingService.areSomeSelected$ | async"
-                    [alwaysVisible]="true"
-                    [annotations]="listingService.selectedEntities$ | async"
-                    [canPerformAnnotationActions]="state.isWritable()"
-                    buttonType="primary"
-                    tooltipPosition="above"
-                ></redaction-annotation-actions>
-            </div>
-
-            <iqser-circle-button
-                (action)="multiSelectService.deactivate()"
-                [tooltip]="'file-preview.tabs.multi-select.close' | translate"
-                [type]="circleButtonTypes.primary"
-                icon="iqser:close"
-                tooltipPosition="before"
-            ></iqser-circle-button>
-        </div>
 
         <div class="annotations-wrapper" [class.documine-direction]="isDocumine">
             <div [class.border-left]="isDocumine">
@@ -158,6 +133,10 @@
                         </div>
                     </div>
 
+                    @if (isDocumine) {
+                        <ng-container [ngTemplateOutlet]="multiSelectTemplate()"></ng-container>
+                    }
+
                     <div
                         #annotationsElement
                         (keydown)="preventKeyDefault($event)"
@@ -263,3 +242,34 @@
 <ng-template #documentInfo>
     <redaction-document-info id="document-info"></redaction-document-info>
 </ng-template>
+
+<ng-template #multiSelect>
+    <div *ngIf="multiSelectService.active()" [class.documine-width]="isDocumine" class="multi-select">
+        <div class="selected-wrapper">
+            <iqser-round-checkbox
+                (click)="annotationManager.deselect()"
+                [indeterminate]="listingService.areSomeSelected$ | async"
+                type="with-bg"
+            ></iqser-round-checkbox>
+
+            <span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span>
+
+            <redaction-annotation-actions
+                *ngIf="listingService.areSomeSelected$ | async"
+                [alwaysVisible]="true"
+                [annotations]="listingService.selectedEntities$ | async"
+                [canPerformAnnotationActions]="state.isWritable()"
+                buttonType="primary"
+                tooltipPosition="above"
+            ></redaction-annotation-actions>
+        </div>
+
+        <iqser-circle-button
+            (action)="multiSelectService.deactivate()"
+            [tooltip]="'file-preview.tabs.multi-select.close' | translate"
+            [type]="circleButtonTypes.primary"
+            icon="iqser:close"
+            tooltipPosition="before"
+        ></iqser-circle-button>
+    </div>
+</ng-template>

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts

@@ -1,5 +1,16 @@
 import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectorRef, Component, computed, effect, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+    ChangeDetectorRef,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    HostListener,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    viewChild,
+} from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -20,7 +31,7 @@ import { AutoUnsubscribe, Debounce, IqserEventTarget } from '@iqser/common-ui/li
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ListItem } from '@models/file/list-item';
 import { TranslateModule } from '@ngx-translate/core';
-import { ComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
+import { WorkflowFileStatuses } from '@red/domain';
 import { workloadTranslations } from '@translations/workload-translations';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { getLocalStorageDataByFileId } from '@utils/local-storage';
@@ -78,8 +89,9 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
     ],
 })
 export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
-    @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef;
+    private readonly _annotationsElement = viewChild<ElementRef>('annotationsElement');
-    @ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef;
+    private readonly _quickNavigationElement = viewChild<ElementRef>('quickNavigation');
+    readonly multiSelectTemplate = viewChild<TemplateRef<any>>('multiSelect');
     readonly #isIqserDevMode = this._userPreferenceService.isIqserDevMode;
     protected readonly iconButtonTypes = IconButtonTypes;
     protected readonly circleButtonTypes = CircleButtonTypes;
@@ -280,18 +292,20 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
     }
 
     scrollAnnotationsToPage(page: number, mode: 'always' | 'if-needed' = 'if-needed'): void {
-        if (this._annotationsElement) {
+        if (this._annotationsElement()) {
-            const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll(`div[anotation-page-header="${page}"]`);
+            const elements: HTMLElement[] = this._annotationsElement().nativeElement.querySelectorAll(
+                `div[anotation-page-header="${page}"]`,
+            );
             FileWorkloadComponent._scrollToFirstElement(elements, mode);
         }
     }
 
     @Debounce()
     scrollToSelectedAnnotation(): void {
-        if (this.listingService.selected.length === 0 || !this._annotationsElement) {
+        if (this.listingService.selected.length === 0 || !this._annotationsElement()) {
             return;
         }
-        const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll(
+        const elements: HTMLElement[] = this._annotationsElement().nativeElement.querySelectorAll(
             `[annotation-id="${this._firstSelectedAnnotation?.id}"]`,
         );
         FileWorkloadComponent._scrollToFirstElement(elements);
@@ -514,8 +528,8 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
     }
 
     #scrollQuickNavigationToPage(page: number) {
-        if (this._quickNavigationElement) {
+        if (this._quickNavigationElement()) {
-            const elements: HTMLElement[] = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${page}`);
+            const elements: HTMLElement[] = this._quickNavigationElement().nativeElement.querySelectorAll(`#quick-nav-page-${page}`);
             FileWorkloadComponent._scrollToFirstElement(elements);
         }
     }