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

RED-9861: fixed bulk-select issues.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-08-12 13:22:47 +03:00
parent e6a3b1a585
commit f82cdcf5bb
3 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -44,34 +44,9 @@
</ng-template>
</ng-container>
<div *ngIf="multiSelectService.active()" 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>
@if (!isDocumine) {
<ng-container [ngTemplateOutlet]="multiSelectTemplate()"></ng-container>
}
<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>

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

@ -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;
@ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef;
private readonly _annotationsElement = viewChild<ElementRef>('annotationsElement');
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) {
const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll(`div[anotation-page-header="${page}"]`);
if (this._annotationsElement()) {
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) {
const elements: HTMLElement[] = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${page}`);
if (this._quickNavigationElement()) {
const elements: HTMLElement[] = this._quickNavigationElement().nativeElement.querySelectorAll(`#quick-nav-page-${page}`);
FileWorkloadComponent._scrollToFirstElement(elements);
}
}