Refactor paginator selection helper

Author: Saby-Bishops

src/app/courses/courses.component.ts

@@ -25,7 +25,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, findByIdInArray, calculateMdAdjustedLimit } from '../shared/utils';
+import { dedupeShelfReduce, findByIdInArray, calculateMdAdjustedLimit, itemsShown } from '../shared/utils';
 import { StateService } from '../shared/state.service';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
 import { TagsService } from '../shared/forms/tags.service';
@@ -307,8 +307,8 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
-    const itemsShown = Math.min(this.paginator.length - (this.paginator.pageIndex * this.paginator.pageSize), this.paginator.pageSize);
-    return this.selection.selected.length === itemsShown;
+    const visibleItems = itemsShown(this.paginator);
+    return this.selection.selected.length === visibleItems;
   }
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */

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

@@ -9,7 +9,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { MatLegacyPaginator as MatPaginator, LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
-import { findByIdInArray } from '../shared/utils';
+import { findByIdInArray, itemsShown } from '../shared/utils';
 import { SyncService } from '../shared/sync.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
 
@@ -62,8 +62,8 @@ export class ManagerFetchComponent implements OnInit, AfterViewInit {
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
-    const itemsShown = Math.min(this.paginator.length - (this.paginator.pageIndex * this.paginator.pageSize), this.paginator.pageSize);
-    return this.selection.selected.length === itemsShown;
+    const visibleItems = itemsShown(this.paginator);
+    return this.selection.selected.length === visibleItems;
   }
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */

src/app/meetups/meetups.component.ts

@@ -13,7 +13,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 } from '../shared/utils';
+import { findByIdInArray, itemsShown } from '../shared/utils';
 
 @Component({
   templateUrl: './meetups.component.html',
@@ -87,10 +87,10 @@ export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
     this.meetups.sort = this.sort;
   }
 
-  isAllSelected() {
-    const itemsShown = Math.min(this.paginator.length - (this.paginator.pageIndex * this.paginator.pageSize), this.paginator.pageSize);
-    return this.selection.selected.length === itemsShown;
-  }
+  isAllSelected() {
+    const visibleItems = itemsShown(this.paginator);
+    return this.selection.selected.length === visibleItems;
+  }
   onPaginateChange(e: PageEvent) {
     this.selection.clear();
   }

src/app/resources/resources.component.ts

@@ -24,7 +24,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 { findByIdInArray, calculateMdAdjustedLimit } from '../shared/utils';
+import { findByIdInArray, calculateMdAdjustedLimit, itemsShown } from '../shared/utils';
 import { StateService } from '../shared/state.service';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
 import { ResourcesSearchComponent } from './search-resources/resources-search.component';
@@ -202,8 +202,8 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
-    const itemsShown = Math.min(this.paginator.length - (this.paginator.pageIndex * this.paginator.pageSize), this.paginator.pageSize);
-    return this.selection.selected.length === itemsShown;
+    const visibleItems = itemsShown(this.paginator);
+    return this.selection.selected.length === visibleItems;
   }
 
   applyResFilter(filterResValue: string) {

src/app/shared/utils.ts

@@ -79,8 +79,27 @@ export const urlToParamObject = (url: string) => url.split(';').reduce((params,
 
 export const toProperCase = (string: string) => `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 
+export const itemsShown = (paginator?: { length: number; pageIndex: number; pageSize: number }) => {
+  if (!paginator) {
+    return 0;
+  }
+  const remaining = paginator.length - (paginator.pageIndex * paginator.pageSize);
+  return Math.min(Math.max(remaining, 0), paginator.pageSize);
+};
+
 export const stringToHex = (string: string) => string.split('').map(char => char.charCodeAt(0).toString(16)).join('');
 
+export const hexToString = (hex: string) => {
+  if (!hex) {
+    return '';
+  }
+  const matches = hex.match(/.{1,2}/g);
+  if (!matches) {
+    return '';
+  }
+  return matches.map(byte => String.fromCharCode(parseInt(byte, 16))).join('');
+};
+
 export const ageFromBirthDate = (currentTime: number, birthDate: string) => {
   const now = new Date(currentTime);
   const birth = new Date(birthDate);

src/app/users/users-table.component.ts

@@ -19,6 +19,7 @@ import { DialogsPromptComponent } from '../shared/dialogs/dialogs-prompt.compone
 import { UsersService } from './users.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
 import { UserProfileDialogComponent } from './users-profile/users-profile-dialog.component';
+import { itemsShown } from '../shared/utils';
 
 export class TableState {
   isOnlyManagerSelected = false;
@@ -157,8 +158,8 @@ export class UsersTableComponent implements OnInit, OnDestroy, AfterViewInit, On
   }
 
   isAllSelected() {
-    const itemsShown = Math.min(this.paginator.length - (this.paginator.pageIndex * this.paginator.pageSize), this.paginator.pageSize);
-    return this.selection.selected.length === itemsShown;
+    const visibleItems = itemsShown(this.paginator);
+    return this.selection.selected.length === visibleItems;
   }
 
   onlyManagerSelected() {