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

fix RED-3352: deactivate multiselect on page change

Browse Source
This commit is contained in:
Dan Percic 2022-03-01 17:38:31 +02:00
parent 7b479acb63
commit e92bf44487
5 changed files with 31 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div *ngIf="multiSelectActive$ | async" class="multi-select"> <div *ngIf="multiSelectService.active$ | async" class="multi-select">
<div class="selected-wrapper"> <div class="selected-wrapper">
<iqser-round-checkbox <iqser-round-checkbox
(click)="!!selectedAnnotations?.length && selectAnnotations.emit()" (click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
@ -68,7 +68,7 @@
></iqser-circle-button> ></iqser-circle-button>
</div> </div>
<div [class.lower-height]="(multiSelectActive$ | async) || (state.isReadonly$ | async)" class="annotations-wrapper"> <div [class.lower-height]="(multiSelectService.active$ | async) || (state.isReadonly$ | async)" class="annotations-wrapper">
<div <div
#quickNavigation #quickNavigation
(keydown)="preventKeyDefault($event)" (keydown)="preventKeyDefault($event)"
@ -135,7 +135,7 @@
</span> </span>
</span> </span>
<div *ngIf="multiSelectActive$ | async"> <div *ngIf="multiSelectService.active$ | async">
<div <div
(click)="selectAllOnActivePage()" (click)="selectAllOnActivePage()"
class="all-caps-label primary pointer" class="all-caps-label primary pointer"

55
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts
View File

@ -53,12 +53,10 @@ export class FileWorkloadComponent {
displayedAnnotations = new Map<number, AnnotationWrapper[]>(); displayedAnnotations = new Map<number, AnnotationWrapper[]>();
@Input() selectedAnnotations: AnnotationWrapper[]; @Input() selectedAnnotations: AnnotationWrapper[];
@Input() activeViewerPage: number; @Input() activeViewerPage: number;
@Input() shouldDeselectAnnotationsOnPageChange: boolean;
@Input() dialogRef: MatDialogRef<unknown>; @Input() dialogRef: MatDialogRef<unknown>;
@Input() file!: File; @Input() file!: File;
@Input() annotationActionsTemplate: TemplateRef<unknown>; @Input() annotationActionsTemplate: TemplateRef<unknown>;
@Input() viewer: WebViewerInstance; @Input() viewer: WebViewerInstance;
@Output() readonly shouldDeselectAnnotationsOnPageChangeChange = new EventEmitter<boolean>();
@Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>(); @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();
@Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>(); @Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>();
@Output() readonly selectPage = new EventEmitter<number>(); @Output() readonly selectPage = new EventEmitter<number>();
@ -66,7 +64,6 @@ export class FileWorkloadComponent {
displayedPages: number[] = []; displayedPages: number[] = [];
pagesPanelActive = true; pagesPanelActive = true;
readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>; readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
readonly multiSelectActive$: Observable<boolean>;
readonly multiSelectInactive$: Observable<boolean>; readonly multiSelectInactive$: Observable<boolean>;
readonly showExcludedPages$: Observable<boolean>; readonly showExcludedPages$: Observable<boolean>;
readonly title$: Observable<string>; readonly title$: Observable<string>;
@ -88,7 +85,6 @@ export class FileWorkloadComponent {
private readonly _annotationProcessingService: AnnotationProcessingService, private readonly _annotationProcessingService: AnnotationProcessingService,
) { ) {
this.displayedAnnotations$ = this._displayedAnnotations$; this.displayedAnnotations$ = this._displayedAnnotations$;
this.multiSelectActive$ = this._multiSelectActive$;
this.multiSelectInactive$ = this._multiSelectInactive$; this.multiSelectInactive$ = this._multiSelectInactive$;
this.showExcludedPages$ = this._showExcludedPages$; this.showExcludedPages$ = this._showExcludedPages$;
this.isHighlights$ = this._isHighlights$; this.isHighlights$ = this._isHighlights$;
@ -140,16 +136,6 @@ export class FileWorkloadComponent {
); );
} }
private get _multiSelectActive$() {
const disableDeselectOnPageChange = (value: boolean) => {
if (value) {
this.shouldDeselectAnnotationsOnPageChange = false;
this.shouldDeselectAnnotationsOnPageChangeChange.emit(false);
}
};
return this.multiSelectService.active$.pipe(tap(disableDeselectOnPageChange), shareDistinctLast());
}
private get _firstSelectedAnnotation() { private get _firstSelectedAnnotation() {
return this.selectedAnnotations?.length ? this.selectedAnnotations[0] : null; return this.selectedAnnotations?.length ? this.selectedAnnotations[0] : null;
} }
@ -303,15 +289,11 @@ export class FileWorkloadComponent {
// Displayed page doesn't have annotations // Displayed page doesn't have annotations
if ($event.key === 'ArrowDown') { if ($event.key === 'ArrowDown') {
const nextPage = this._nextPageWithAnnotations(); const nextPage = this._nextPageWithAnnotations();
this.shouldDeselectAnnotationsOnPageChange = false;
this.shouldDeselectAnnotationsOnPageChangeChange.emit(false);
this.selectAnnotations.emit([this.displayedAnnotations.get(nextPage)[0]]); this.selectAnnotations.emit([this.displayedAnnotations.get(nextPage)[0]]);
return; return;
} }
const prevPage = this._prevPageWithAnnotations(); const prevPage = this._prevPageWithAnnotations();
this.shouldDeselectAnnotationsOnPageChange = false;
this.shouldDeselectAnnotationsOnPageChangeChange.emit(false);
const prevPageAnnotations = this.displayedAnnotations.get(prevPage); const prevPageAnnotations = this.displayedAnnotations.get(prevPage);
this.selectAnnotations.emit([prevPageAnnotations[prevPageAnnotations.length - 1]]); this.selectAnnotations.emit([prevPageAnnotations[prevPageAnnotations.length - 1]]);
return; return;
@ -319,6 +301,8 @@ export class FileWorkloadComponent {
const page = this._firstSelectedAnnotation.pageNumber; const page = this._firstSelectedAnnotation.pageNumber;
const pageIdx = this.displayedPages.indexOf(page); const pageIdx = this.displayedPages.indexOf(page);
const nextPageIdx = pageIdx + 1;
const previousPageIdx = pageIdx - 1;
const annotationsOnPage = this.displayedAnnotations.get(page); const annotationsOnPage = this.displayedAnnotations.get(page);
const idx = annotationsOnPage.findIndex(a => a.id === this._firstSelectedAnnotation.id); const idx = annotationsOnPage.findIndex(a => a.id === this._firstSelectedAnnotation.id);
@ -326,22 +310,33 @@ export class FileWorkloadComponent {
if (idx + 1 !== annotationsOnPage.length) { if (idx + 1 !== annotationsOnPage.length) {
// If not last item in page // If not last item in page
this.selectAnnotations.emit([annotationsOnPage[idx + 1]]); this.selectAnnotations.emit([annotationsOnPage[idx + 1]]);
} else if (pageIdx + 1 < this.displayedPages.length) { } else if (nextPageIdx < this.displayedPages.length) {
// If not last page // If not last page
const nextPageAnnotations = this.displayedAnnotations.get(this.displayedPages[pageIdx + 1]); for (let i = nextPageIdx; i < this.displayedPages.length; i++) {
this.shouldDeselectAnnotationsOnPageChange = false; const nextPageAnnotations = this.displayedAnnotations.get(this.displayedPages[i]);
this.shouldDeselectAnnotationsOnPageChangeChange.emit(false); if (nextPageAnnotations) {
this.selectAnnotations.emit([nextPageAnnotations[0]]); this.selectAnnotations.emit([nextPageAnnotations[0]]);
break;
}
}
} }
} else if (idx !== 0) { return;
}
if (idx !== 0) {
// If not first item in page // If not first item in page
this.selectAnnotations.emit([annotationsOnPage[idx - 1]]); return this.selectAnnotations.emit([annotationsOnPage[idx - 1]]);
} else if (pageIdx) { }
if (pageIdx) {
// If not first page // If not first page
const prevPageAnnotations = this.displayedAnnotations.get(this.displayedPages[pageIdx - 1]); for (let i = previousPageIdx; i > 0; i--) {
this.shouldDeselectAnnotationsOnPageChange = false; const prevPageAnnotations = this.displayedAnnotations.get(this.displayedPages[i]);
this.shouldDeselectAnnotationsOnPageChangeChange.emit(false); if (prevPageAnnotations) {
this.selectAnnotations.emit([prevPageAnnotations[prevPageAnnotations.length - 1]]); this.selectAnnotations.emit([prevPageAnnotations[prevPageAnnotations.length - 1]]);
break;
}
}
} }
} }

5
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts
View File

@ -67,7 +67,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
@Input() dossier: Dossier; @Input() dossier: Dossier;
@Input() canPerformActions = false; @Input() canPerformActions = false;
@Input() annotations: AnnotationWrapper[]; @Input() annotations: AnnotationWrapper[];
@Input() shouldDeselectAnnotationsOnPageChange = true;
@Output() readonly fileReady = new EventEmitter(); @Output() readonly fileReady = new EventEmitter();
@Output() readonly annotationSelected = new EventEmitter<string[]>(); @Output() readonly annotationSelected = new EventEmitter<string[]>();
@Output() readonly manualAnnotationRequested = new EventEmitter<ManualRedactionEntryWrapper>(); @Output() readonly manualAnnotationRequested = new EventEmitter<ManualRedactionEntryWrapper>();
@ -266,9 +265,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
}); });
this.documentViewer.addEventListener('pageNumberUpdated', (pageNumber: number) => { this.documentViewer.addEventListener('pageNumberUpdated', (pageNumber: number) => {
if (this.shouldDeselectAnnotationsOnPageChange) { this.utils.deselectAllAnnotations();
this.utils.deselectAllAnnotations();
}
this._ngZone.run(() => this.pageChanged.emit(pageNumber)); this._ngZone.run(() => this.pageChanged.emit(pageNumber));
return this._handleCustomActions(); return this._handleCustomActions();
}); });

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
View File

@ -20,8 +20,8 @@
<redaction-file-actions <redaction-file-actions
[file]="file" [file]="file"
type="file-preview"
fileActionsHelpModeKey="editor_document_features" fileActionsHelpModeKey="editor_document_features"
type="file-preview"
></redaction-file-actions> ></redaction-file-actions>
<iqser-circle-button <iqser-circle-button
@ -72,7 +72,6 @@
[canPerformActions]="canPerformAnnotationActions$ | async" [canPerformActions]="canPerformAnnotationActions$ | async"
[class.hidden]="!ready" [class.hidden]="!ready"
[dossier]="dossier" [dossier]="dossier"
[shouldDeselectAnnotationsOnPageChange]="shouldDeselectAnnotationsOnPageChange"
></redaction-pdf-viewer> ></redaction-pdf-viewer>
</div> </div>
@ -93,7 +92,6 @@
(selectAnnotations)="selectAnnotations($event)" (selectAnnotations)="selectAnnotations($event)"
(selectPage)="selectPage($event)" (selectPage)="selectPage($event)"
*ngIf="!file.excluded" *ngIf="!file.excluded"
[(shouldDeselectAnnotationsOnPageChange)]="shouldDeselectAnnotationsOnPageChange"
[activeViewerPage]="activeViewerPage" [activeViewerPage]="activeViewerPage"
[annotationActionsTemplate]="annotationActionsTemplate" [annotationActionsTemplate]="annotationActionsTemplate"
[annotations]="visibleAnnotations" [annotations]="visibleAnnotations"

5
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
View File

@ -65,7 +65,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
dialogRef: MatDialogRef<unknown>; dialogRef: MatDialogRef<unknown>;
fullScreen = false; fullScreen = false;
shouldDeselectAnnotationsOnPageChange = true;
selectedAnnotations: AnnotationWrapper[] = []; selectedAnnotations: AnnotationWrapper[] = [];
displayPdfViewer = false; displayPdfViewer = false;
activeViewerPage: number = null; activeViewerPage: number = null;
@ -394,9 +393,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
} }
this._scrollViews(); this._scrollViews();
if (!this.multiSelectService.isActive) { this.multiSelectService.deactivate();
this.shouldDeselectAnnotationsOnPageChange = true;
}
// Add current page in URL query params // Add current page in URL query params
const extras: NavigationExtras = { const extras: NavigationExtras = {