all: smoother sorting (fixes #9929) (#9933)

Co-authored-by: dogi <dogi@users.noreply.github.com>

Author: Mutugiii

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.22.84",
+  "version": "0.22.85",
   "myplanet": {
     "latest": "v0.55.45",
     "min": "v0.53.91"

src/app/courses/courses.component.ts

@@ -14,7 +14,7 @@ import { map, switchMap, takeUntil } from 'rxjs/operators';
 import { FuzzySearchService } from '../shared/fuzzy-search.service';
 import {
   filterSpecificFields, composeFilterFunctions, createDeleteArray, filterTags,
-  commonSortingDataAccessor, selectedOutOfFilter, filterShelf, trackById, filterIds, filterAdvancedSearch, filterSpecificFieldsHybrid
+  commonSortingDataAccessor, filterShelf, trackById, filterIds, filterAdvancedSearch, filterSpecificFieldsHybrid
 } from '../shared/table-helpers';
 import * as constants from './constants';
 import { languages } from '../shared/languages';
@@ -26,7 +26,7 @@ import { CouchService } from '../shared/couchdb.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
 import { DialogsPromptComponent } from '../shared/dialogs/dialogs-prompt.component';
 import { CoursesService } from './courses.service';
-import { dedupeShelfReduce, doesMarkdownPreviewTruncate, findByIdInArray, hasMarkdownImages, itemsShown } from '../shared/utils';
+import { dedupeShelfReduce, doesMarkdownPreviewTruncate, findByIdInArray, hasMarkdownImages } from '../shared/utils';
 import { StateService } from '../shared/state.service';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
 import { DialogGuardService } from '../shared/dialogs/dialog-guard.service';
@@ -88,6 +88,7 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
     return this.courses;
   }
   courses = new MatTableDataSource();
+  private renderedRows: any[] = [];
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(CoursesSearchComponent) searchComponent: CoursesSearchComponent;
@@ -188,6 +189,7 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
     this.userShelf = this.userService.shelf;
     this.courses.filterPredicate = this.filterPredicate;
     this.courses.sortingDataAccessor = commonSortingDataAccessor;
+    this.courses.connect().pipe(takeUntil(this.onDestroy$)).subscribe(rows => this.renderedRows = rows);
     this.coursesService.coursesListener$(this.parent).pipe(
       takeUntil(this.onDestroy$),
       switchMap((courses: any) => this.parent && courses !== undefined ?
@@ -341,17 +343,15 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
-    return this.selection.selected.length === itemsShown(this.paginator);
+    return this.renderedRows.length > 0 && this.renderedRows.every((row: any) => this.selection.isSelected(row._id));
   }
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */
   masterToggle() {
-    const start = this.paginator.pageIndex * this.paginator.pageSize;
-    const end = start + this.paginator.pageSize;
     if (this.isAllSelected()) {
       this.selection.clear();
     } else {
-      this.courses.filteredData.slice(start, end).forEach((row: any) => this.selection.select(row._id));
+      this.renderedRows.forEach((row: any) => this.selection.select(row._id));
     }
   }
 
@@ -380,7 +380,10 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
   }
 
   removeFilteredFromSelection() {
-    this.selection.deselect(...selectedOutOfFilter(this.courses.filteredData, this.selection, this.paginator));
+    queueMicrotask(() => {
+      const visible = new Set(this.renderedRows.map((row: any) => row._id));
+      this.selection.deselect(...this.selection.selected.filter(id => !visible.has(id)));
+    });
   }
 
   onSearchChange({ items, category }) {

src/app/manager-dashboard/manager-fetch.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { of } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { of, Subject } from 'rxjs';
+import { switchMap, takeUntil } from 'rxjs/operators';
 import { CouchService } from '../shared/couchdb.service';
 import { StateService } from '../shared/state.service';
 import { ManagerService } from './manager.service';
@@ -12,7 +12,7 @@ import {
   MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow,
   MatRowDef, MatRow, MatNoDataRow
 } from '@angular/material/table';
-import { findByIdInArray, itemsShown } from '../shared/utils';
+import { findByIdInArray } from '../shared/utils';
 import { commonSortingDataAccessor } from '../shared/table-helpers';
 import { SyncService } from '../shared/sync.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
@@ -43,14 +43,16 @@ import { MatCheckbox } from '@angular/material/checkbox';
   ]
 })
 
-export class ManagerFetchComponent implements OnInit, AfterViewInit {
+export class ManagerFetchComponent implements OnInit, AfterViewInit, OnDestroy {
   selection = new SelectionModel(true, []);
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   planetConfiguration = this.stateService.configuration;
   displayedColumns = [ 'select', 'item', 'date' ];
   pushedItems = new MatTableDataSource();
   isLoading = true;
+  private renderedRows: any[] = [];
+  private onDestroy$ = new Subject<void>();
 
   constructor(
     private couchService: CouchService,
@@ -64,6 +66,7 @@ export class ManagerFetchComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.isLoading = true;
     this.pushedItems.sortingDataAccessor = commonSortingDataAccessor;
+    this.pushedItems.connect().pipe(takeUntil(this.onDestroy$)).subscribe(rows => this.renderedRows = rows);
 
     this.managerService.getPushedList().subscribe((pushedList: any) => {
       this.pushedItems.data = pushedList.map((item: any) => ({
@@ -81,23 +84,26 @@ export class ManagerFetchComponent implements OnInit, AfterViewInit {
     this.pushedItems.paginator = this.paginator;
   }
 
+  ngOnDestroy() {
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+  }
+
   onPaginateChange(e: PageEvent) {
     this.selection.clear();
   }
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
-    return this.selection.selected.length === itemsShown(this.paginator);
+    return this.renderedRows.length > 0 && this.renderedRows.every((row: any) => this.selection.isSelected(row._id));
   }
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */
   masterToggle() {
-    const start = this.paginator.pageIndex * this.paginator.pageSize;
-    const end = start + this.paginator.pageSize;
     if (this.isAllSelected()) {
       this.selection.clear();
     } else {
-      this.pushedItems.filteredData.slice(start, end).forEach((row: any) => this.selection.select(row._id));
+      this.renderedRows.forEach((row: any) => this.selection.select(row._id));
     }
   }
 

src/app/meetups/meetups.component.ts

@@ -7,7 +7,7 @@ import {
   MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatNoDataRow
 } from '@angular/material/table';
 import { PlanetMessageService } from '../shared/planet-message.service';
-import { filterSpecificFields, selectedOutOfFilter, composeFilterFunctions, filterSpecificFieldsByWord } from '../shared/table-helpers';
+import { filterSpecificFields, composeFilterFunctions, filterSpecificFieldsByWord } from '../shared/table-helpers';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { UserService } from '../shared/user.service';
@@ -16,7 +16,7 @@ import { takeUntil } from 'rxjs/operators';
 import { MeetupService } from './meetups.service';
 import { StateService } from '../shared/state.service';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
-import { findByIdInArray, itemsShown } from '../shared/utils';
+import { findByIdInArray } from '../shared/utils';
 import { MatToolbar } from '@angular/material/toolbar';
 import { MatIconButton, MatMiniFabButton, MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
@@ -59,6 +59,7 @@ import { FeedbackDirective } from '../feedback/feedback.directive';
 export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
 
   meetups = new MatTableDataSource();
+  private renderedRows: any[] = [];
   message = '';
   readonly dbName = 'meetups';
   deleteDialog: any;
@@ -107,6 +108,7 @@ export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
       this.countSelectedShelf(source.selected);
     });
     this.couchService.checkAuthorization('meetups').subscribe((isAuthorized) => this.isAuthorized = isAuthorized);
+    this.meetups.connect().pipe(takeUntil(this.onDestroy$)).subscribe(rows => this.renderedRows = rows);
   }
 
   ngAfterViewInit() {
@@ -115,24 +117,27 @@ export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   isAllSelected() {
-    return this.selection.selected.length === itemsShown(this.paginator);
+    return this.renderedRows.length > 0 && this.renderedRows.every((row: any) => this.selection.isSelected(row._id));
   }
   onPaginateChange(e: PageEvent) {
     this.selection.clear();
   }
 
 
   masterToggle() {
-    const start = this.paginator.pageIndex * this.paginator.pageSize;
-    const end = start + this.paginator.pageSize;
-    this.isAllSelected() ?
-      this.selection.clear() :
-      this.meetups.filteredData.slice(start, end).forEach((row: any) => this.selection.select(row._id));
+    if (this.isAllSelected()) {
+      this.selection.clear();
+    } else {
+      this.renderedRows.forEach((row: any) => this.selection.select(row._id));
+    }
   }
 
   applyFilter(filterValue: string) {
     this.meetups.filter = filterValue;
-    this.selection.deselect(...selectedOutOfFilter(this.meetups.filteredData, this.selection, this.paginator));
+    queueMicrotask(() => {
+      const visible = new Set(this.renderedRows.map((row: any) => row._id));
+      this.selection.deselect(...this.selection.selected.filter(id => !visible.has(id)));
+    });
   }
 
   ngOnDestroy() {

src/app/resources/resources.component.ts

@@ -16,7 +16,7 @@ import { UserService } from '../shared/user.service';
 import { FuzzySearchService } from '../shared/fuzzy-search.service';
 import {
   filterSpecificFields, composeFilterFunctions, filterTags, filterAdvancedSearch, filterShelf,
-  createDeleteArray, commonSortingDataAccessor, filterSpecificFieldsHybrid, selectedOutOfFilter, trackById
+  createDeleteArray, commonSortingDataAccessor, filterSpecificFieldsHybrid, trackById
 } from '../shared/table-helpers';
 import { ResourcesService } from './resources.service';
 import { environment } from '../../environments/environment';
@@ -25,7 +25,7 @@ import { FormControl } from '../../../node_modules/@angular/forms';
 import { PlanetTagInputComponent } from '../shared/forms/planet-tag-input.component';
 import { DialogsListService } from '../shared/dialogs/dialogs-list.service';
 import { DialogsListComponent } from '../shared/dialogs/dialogs-list.component';
-import { doesMarkdownPreviewTruncate, findByIdInArray, hasMarkdownImages, itemsShown } from '../shared/utils';
+import { doesMarkdownPreviewTruncate, findByIdInArray, hasMarkdownImages } from '../shared/utils';
 import { StateService } from '../shared/state.service';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
 import { DialogGuardService } from '../shared/dialogs/dialog-guard.service';
@@ -73,6 +73,7 @@ import { TruncateTextPipe } from '../shared/truncate-text.pipe';
 export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
   isLoading = true;
   resources = new MatTableDataSource();
+  private renderedRows: any[] = [];
   pageEvent: PageEvent;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -194,6 +195,7 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
       this.removeFilteredFromSelection();
     });
     this.selection.changed.subscribe(({ source }) => this.onSelectionChange(source.selected));
+    this.resources.connect().pipe(takeUntil(this.onDestroy$)).subscribe(rows => this.renderedRows = rows);
     this.couchService.checkAuthorization('resources').subscribe((isAuthorized) => this.isAuthorized = isAuthorized);
     this.initialSort = this.route.snapshot.paramMap.get('sort');
   }
@@ -210,7 +212,10 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   removeFilteredFromSelection() {
-    this.selection.deselect(...selectedOutOfFilter(this.resources.filteredData, this.selection, this.paginator));
+    queueMicrotask(() => {
+      const visible = new Set(this.renderedRows.map((row: any) => row._id));
+      this.selection.deselect(...this.selection.selected.filter(id => !visible.has(id)));
+    });
   }
 
 
@@ -234,7 +239,7 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
-    return this.selection.selected.length === itemsShown(this.paginator);
+    return this.renderedRows.length > 0 && this.renderedRows.every((row: any) => this.selection.isSelected(row._id));
   }
 
   applyResFilter(filterResValue: string) {
@@ -243,11 +248,11 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */
   masterToggle() {
-    const start = this.paginator.pageIndex * this.paginator.pageSize;
-    const end = start + this.paginator.pageSize;
-    this.isAllSelected() ?
-      this.selection.clear() :
-      this.resources.filteredData.slice(start, end).forEach((row: any) => this.selection.select(row._id));
+    if (this.isAllSelected()) {
+      this.selection.clear();
+    } else {
+      this.renderedRows.forEach((row: any) => this.selection.select(row._id));
+    }
   }
 
   updateResource(resource) {

src/app/surveys/surveys.component.html

@@ -41,9 +41,8 @@
         <mat-cell *matCellDef="let row">
           <mat-checkbox (change)="$event ? selection.toggle(row._id) : null"
             [checked]="selection.isSelected(row._id)"
-            [disabled]="currentFilter.viewMode === 'adopt'"
-            [matTooltip]="getActionTooltip(row, 'select')"
-            *ngIf="!row.parent === true">
+            [disabled]="!isRowSelectable(row)"
+            [matTooltip]="getActionTooltip(row, 'select')">
           </mat-checkbox>
         </mat-cell>
       </ng-container>
@@ -68,7 +67,7 @@
       <ng-container matColumnDef="action">
         <mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
         <mat-cell *matCellDef="let element">
-          <ng-container *ngIf="!element.parent === true && currentFilter.viewMode !== 'adopt'">
+          <ng-container *ngIf="element.parent !== true && currentFilter.viewMode !== 'adopt'">
             <div [matTooltip]="getActionTooltip(element, 'edit')">
               <button mat-raised-button color="primary" *ngIf="!teamId" (click)="routeToEditSurvey('update', element._id)" [disabled]="element.isArchived">
                 <mat-icon>edit</mat-icon>

src/app/surveys/surveys.component.ts

@@ -13,7 +13,7 @@ import { forkJoin, Observable, Subject, throwError, of } from 'rxjs';
 import { catchError, switchMap, tap, takeUntil } from 'rxjs/operators';
 import { CouchService } from '../shared/couchdb.service';
 import { ChatService } from '../shared/chat.service';
-import { filterSpecificFields, sortNumberOrString, createDeleteArray, selectedOutOfFilter } from '../shared/table-helpers';
+import { filterSpecificFields, sortNumberOrString, createDeleteArray } from '../shared/table-helpers';
 import { SubmissionsService } from '../submissions/submissions.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
 import { StateService } from '../shared/state.service';
@@ -60,6 +60,7 @@ interface SurveyFilterForm {
 export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
   selection = new SelectionModel(true, []);
   surveys = new MatTableDataSource<any>();
+  private renderedRows: any[] = [];
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @Output() surveyCount = new EventEmitter<number>();
@@ -117,6 +118,7 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
     this.couchService.checkAuthorization(this.dbName)
       .pipe(takeUntil(this.onDestroy$)).subscribe((isAuthorized) => this.isAuthorized = isAuthorized);
     this.surveys.connect().pipe(takeUntil(this.onDestroy$)).subscribe(surveys => {
+      this.renderedRows = surveys;
       this.parentCount = surveys.filter(survey => survey.parent === true).length;
       this.surveyCount.emit(surveys.length);
     });
@@ -255,32 +257,26 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
 
   applyFilter(filterValue: string) {
     this.surveys.filter = filterValue;
-    this.selection.deselect(...selectedOutOfFilter(this.surveys.filteredData, this.selection, this.paginator));
+    queueMicrotask(() => {
+      const visibleSelection = new Set(this.renderedRows.map(row => row._id));
+      this.selection.deselect(...this.selection.selected.filter(selectedId => !visibleSelection.has(selectedId)));
+    });
   }
 
   isAllSelected() {
-    const start = this.paginator.pageIndex * this.paginator.pageSize;
-    const end = start + this.paginator.pageSize;
-
-    const selectableRowsInPage = this.surveys.filteredData
-      .slice(start, end)
-      .filter(row => this.isRowSelectable(row));
-
-    return selectableRowsInPage.every(row => this.selection.isSelected(row._id));
+    const selectableRowsInPage = this.renderedRows.filter(row => this.isRowSelectable(row));
+    return selectableRowsInPage.length > 0 && selectableRowsInPage.every(row => this.selection.isSelected(row._id));
   }
 
   isRowSelectable(row: any): boolean {
-    const isDisabled = (row.teamId && this.isManagerRoute) || this.currentFilter.viewMode === 'adopt';
-    return row.parent !== true && !isDisabled;
+    return row.parent !== true && this.currentFilter.viewMode !== 'adopt';
   }
 
   masterToggle() {
-    const start = this.paginator.pageIndex * this.paginator.pageSize;
-    const end = start + this.paginator.pageSize;
     if (this.isAllSelected()) {
       this.selection.clear();
     } else {
-      this.surveys.filteredData.slice(start, end).forEach((row: any) => {
+      this.renderedRows.forEach((row: any) => {
         if (this.isRowSelectable(row)) {
           this.selection.select(row._id);
         }
@@ -598,8 +594,8 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }
 
-    if (survey.teamId && this.isManagerRoute) {
-      return $localize`This is a team created survey`;
+    if (action === 'select' && survey.parent === true) {
+      return $localize`This survey was created on the parent planet and cannot be managed here`;
     }
 
     if (this.currentFilter.viewMode === 'adopt') {