From 36d72bc420227338f1c3d6b52306183a74f9d69b Mon Sep 17 00:00:00 2001
From: Nuria Pacheco <npacheco@sei.cmu.edu>
Date: Mon, 29 Apr 2024 15:38:50 -0400
Subject: [PATCH] Fixed features to not use data source

---
 .../admin-articles.component.ts               |  2 -
 .../admin-cards/admin-cards.component.ts      |  2 -
 .../admin-collections.component.ts            |  2 -
 .../admin-exhibit-articles.component.ts       |  3 +-
 .../admin-exhibits.component.ts               |  2 -
 .../admin-team-users.component.html           | 11 +--
 .../admin-team-users.component.ts             | 84 +++++++++++++++----
 .../admin-teams/admin-teams.component.ts      |  1 -
 .../admin-users/admin-users.component.html    |  8 +-
 .../admin-users/admin-users.component.ts      | 65 +++++++++-----
 10 files changed, 120 insertions(+), 60 deletions(-)

diff --git a/src/app/components/admin/admin-articles/admin-articles.component.ts b/src/app/components/admin/admin-articles/admin-articles.component.ts
index 5083435..19387c2 100755
--- a/src/app/components/admin/admin-articles/admin-articles.component.ts
+++ b/src/app/components/admin/admin-articles/admin-articles.component.ts
@@ -231,9 +231,7 @@ export class AdminArticlesComponent implements OnInit, OnDestroy {
   }
 
   clearFilter() {
-    this.filterString = '';
     this.filterControl.setValue('');
-    this.loadInitialData();
   }
 
   sortChanged(sort: Sort) {
diff --git a/src/app/components/admin/admin-cards/admin-cards.component.ts b/src/app/components/admin/admin-cards/admin-cards.component.ts
index 3e7b44e..488f3d4 100755
--- a/src/app/components/admin/admin-cards/admin-cards.component.ts
+++ b/src/app/components/admin/admin-cards/admin-cards.component.ts
@@ -184,9 +184,7 @@ export class AdminCardsComponent implements OnInit, OnDestroy {
   }
 
   clearFilter() {
-    this.filterString = '';
     this.filterControl.setValue('');
-    this.loadInitialData();
   }
 
   sortChanged(sort: Sort) {
diff --git a/src/app/components/admin/admin-collections/admin-collections.component.ts b/src/app/components/admin/admin-collections/admin-collections.component.ts
index 8c3b4d6..6954cfb 100755
--- a/src/app/components/admin/admin-collections/admin-collections.component.ts
+++ b/src/app/components/admin/admin-collections/admin-collections.component.ts
@@ -155,9 +155,7 @@ export class AdminCollectionsComponent implements OnInit, OnDestroy {
   }
 
   clearFilter() {
-    this.filterString = '';
     this.filterControl.setValue('');
-    this.loadInitialData();
   }
 
   sortChanged(sort: Sort) {
diff --git a/src/app/components/admin/admin-exhibit-articles/admin-exhibit-articles.component.ts b/src/app/components/admin/admin-exhibit-articles/admin-exhibit-articles.component.ts
index 552cb86..3c75b6b 100644
--- a/src/app/components/admin/admin-exhibit-articles/admin-exhibit-articles.component.ts
+++ b/src/app/components/admin/admin-exhibit-articles/admin-exhibit-articles.component.ts
@@ -143,8 +143,7 @@ export class AdminExhibitArticlesComponent implements OnDestroy, OnInit {
   }
 
   clearFilter() {
-    this.filterString = '';
-    this.loadInitialData();
+    this.filterControl.setValue('');
   }
 
   sortChanged(sort: Sort) {
diff --git a/src/app/components/admin/admin-exhibits/admin-exhibits.component.ts b/src/app/components/admin/admin-exhibits/admin-exhibits.component.ts
index 669d53f..bdf1e9c 100755
--- a/src/app/components/admin/admin-exhibits/admin-exhibits.component.ts
+++ b/src/app/components/admin/admin-exhibits/admin-exhibits.component.ts
@@ -29,8 +29,6 @@ import { TeamUserDataService } from 'src/app/data/team-user/team-user-data.servi
 export class AdminExhibitsComponent implements OnInit, OnDestroy {
   @Input() userList: User[];
   @Input() teamList: Team[];
-  // @Input() pageSize: number;
-  // @Input() pageIndex: number;
   pageSize = 10;
   pageIndex = 0;
   collectionList: Collection[] = [];
diff --git a/src/app/components/admin/admin-team-users/admin-team-users.component.html b/src/app/components/admin/admin-team-users/admin-team-users.component.html
index ba95249..e15873e 100644
--- a/src/app/components/admin/admin-team-users/admin-team-users.component.html
+++ b/src/app/components/admin/admin-team-users/admin-team-users.component.html
@@ -34,7 +34,7 @@
       >
         <mat-icon
           style="transform: scale(0.85);"
-          svgIcon="ic_cancel_circle"
+          svgIcon="ic_clear"
         ></mat-icon>
       </button>
     </div>
@@ -52,6 +52,7 @@
       #table
       [dataSource]="userDataSource"
       matSort
+      (matSortChange)="onSortChange($event)"
     >
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header
@@ -86,13 +87,6 @@
     </mat-table>
 
     <div *ngIf="userDataSource.filteredData.length === 0">No results found</div>
-    <mat-paginator
-      #paginator
-      [pageSize]="defaultPageSize"
-      [showFirstLastButtons]="true"
-      (page)="pageEvent = $event"
-    >
-    </mat-paginator>
   </div>
 
   <div class="spacer">&nbsp;</div>
@@ -122,6 +116,7 @@
       #table
       [dataSource]="teamUserDataSource"
       matSort
+      (matSortChange)="onSortTeamChange($event)"
     >
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header
diff --git a/src/app/components/admin/admin-team-users/admin-team-users.component.ts b/src/app/components/admin/admin-team-users/admin-team-users.component.ts
index 611a2cf..e211a84 100644
--- a/src/app/components/admin/admin-team-users/admin-team-users.component.ts
+++ b/src/app/components/admin/admin-team-users/admin-team-users.component.ts
@@ -8,8 +8,8 @@ import {
   Input,
   ViewChild,
 } from '@angular/core';
-import { LegacyPageEvent as PageEvent, MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatSort, MatSortable } from '@angular/material/sort';
+import { LegacyPageEvent as PageEvent} from '@angular/material/legacy-paginator';
+import { Sort, MatSortable } from '@angular/material/sort';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { Team, TeamUser, User } from 'src/app/generated/api';
 import { TeamQuery } from 'src/app/data/team/team.query';
@@ -18,6 +18,7 @@ import { TeamUserQuery } from 'src/app/data/team-user/team-user.query';
 import { UserDataService } from 'src/app/data/user/user-data.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { UntypedFormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-admin-team-users',
@@ -35,13 +36,12 @@ export class AdminTeamUsersComponent implements OnDestroy, OnInit {
   displayedTeamColumns: string[] = ['name', 'user'];
   userDataSource = new MatTableDataSource<User>(new Array<User>());
   teamUserDataSource = new MatTableDataSource<TeamUser>(new Array<TeamUser>());
-  filterControl = this.userDataService.filterControl;
+  filterControl = new UntypedFormControl();
   filterString = '';
   defaultPageSize = 100;
   pageEvent: PageEvent;
   private unsubscribe$ = new Subject();
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  sort: Sort = {active: 'name', direction: 'asc'};
 
   constructor(
     private teamQuery: TeamQuery,
@@ -68,8 +68,14 @@ export class AdminTeamUsersComponent implements OnDestroy, OnInit {
   }
 
   ngOnInit() {
-    this.sort.sort(<MatSortable>{ id: 'name', start: 'asc' });
-    this.userDataSource.sort = this.sort;
+    this.filterControl.valueChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+      this.filterString = this.filterControl.value;
+      this.applyFilter();
+    });
+    this.userDataService.userList.pipe(takeUntil(this.unsubscribe$)).subscribe(users => {
+      this.userList = users;
+      this.applyFilter();
+    });
     this.filterControl.setValue('');
     this.teamUsers = this.teamUserQuery.getAll().filter(tu => tu.teamId === this.teamId);
     this.otherTeamUsers = this.teamUserQuery.getAll().filter(tu => tu.teamId !== this.teamId);
@@ -100,8 +106,60 @@ export class AdminTeamUsersComponent implements OnDestroy, OnInit {
       }
     });
     this.userDataSource = new MatTableDataSource(newAllUsers);
-    this.userDataSource.sort = this.sort;
-    this.userDataSource.paginator = this.paginator;
+  }
+
+  applyFilter() {
+    const searchTerm = this.filterControl.value ? this.filterControl.value.toLowerCase() : '';
+    const filteredData = this.userList.filter(user =>
+      !searchTerm || user.name.toLowerCase().includes(searchTerm)
+    );
+    this.sortUserData(filteredData);
+  }
+
+  sortUserData(data: User[]) {
+    data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        case 'name':
+          return this.compare(a.name, b.name, isAsc);
+        case 'id':
+          return this.compare(a.id, b.id, isAsc);
+        default:
+          return 0;
+      }
+    });
+    this.userDataSource.data = data;
+  }
+
+  sortTeamUserData(teamUserData: TeamUser[]) {
+    teamUserData.sort((a, b) => {
+      const aName = this.getUserName(a.userId).toLowerCase(); // Assumption: getUserName resolves the user's name by ID
+      const bName = this.getUserName(b.userId).toLowerCase();
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        case 'name':
+          return this.compare(aName, bName, isAsc);
+        case 'isObserver':
+          return this.compare(String(a.isObserver), String(b.isObserver), isAsc);
+        default:
+          return 0;
+      }
+    });
+    this.teamUserDataSource.data = teamUserData;
+  }
+
+  compare(a: string, b: string, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  onSortChange(sort: Sort) {
+    this.sort = sort;
+    this.applyFilter();
+  }
+
+  onSortTeamChange(sort: Sort) {
+    this.sort = sort;
+    this.sortTeamUserData(this.teamUsers);
   }
 
   getUserName(id: string) {
@@ -125,14 +183,6 @@ export class AdminTeamUsersComponent implements OnDestroy, OnInit {
     this.teamUserDataService.setObserverValue(teamUserId, value);
   }
 
-  compare(a: string, b: string, isAsc: boolean) {
-    if (a === null || b === null) {
-      return 0;
-    } else {
-      return (a.toLowerCase() < b.toLowerCase() ? -1 : 1) * (isAsc ? 1 : -1);
-    }
-  }
-
   onAnotherTeam(userId: string): boolean {
     return this.otherTeamUsers.some(tu => tu.userId === userId);
   }
diff --git a/src/app/components/admin/admin-teams/admin-teams.component.ts b/src/app/components/admin/admin-teams/admin-teams.component.ts
index 23aa0e3..9b27537 100755
--- a/src/app/components/admin/admin-teams/admin-teams.component.ts
+++ b/src/app/components/admin/admin-teams/admin-teams.component.ts
@@ -134,7 +134,6 @@ export class AdminTeamsComponent implements OnInit, OnDestroy {
   }
 
   clearFilter() {
-    this.filterString = '';
     this.filterControl.setValue('');
   }
 
diff --git a/src/app/components/admin/admin-users/admin-users.component.html b/src/app/components/admin/admin-users/admin-users.component.html
index df2982a..03301eb 100755
--- a/src/app/components/admin/admin-users/admin-users.component.html
+++ b/src/app/components/admin/admin-users/admin-users.component.html
@@ -17,12 +17,12 @@
     svgIcon="ic_magnify_search"
   ></mat-icon>
   <mat-form-field style="width: 300px;">
-    <input matInput [formControl]="filterControl" placeholder="Search" class="mat-form-field"/>
+    <input matInput [formControl]="filterControl" placeholder="Search" class="mat-form-field" (click)="applyFilter()"/>
   </mat-form-field>
   <div style="width: 30px;">
     <button
       mat-icon-button
-      (click)="applyFilter('')"
+      (click)="clearFilter()"
       style="outline: none;"
       title="Clear Search"
     >
@@ -35,7 +35,7 @@
   <div>
     <mat-paginator
       #paginator
-      [length]="userList?.length"
+      [length]="filteredUserList?.length"
       [pageIndex]="pageIndex"
       [pageSize]="pageSize"
       [pageSizeOptions]="[5, 10, 15, 20, 25, 50, 100, 200]"
@@ -56,7 +56,7 @@
   </section>
 
   <mat-expansion-panel
-    *ngFor="let user of paginateUsers()"
+    *ngFor="let user of displayedUsers"
     [disabled]="true"
   >
     <mat-expansion-panel-header class="mat-row" *ngIf="!isLoading">
diff --git a/src/app/components/admin/admin-users/admin-users.component.ts b/src/app/components/admin/admin-users/admin-users.component.ts
index 21a11fe..815a7f3 100755
--- a/src/app/components/admin/admin-users/admin-users.component.ts
+++ b/src/app/components/admin/admin-users/admin-users.component.ts
@@ -16,6 +16,7 @@ import { AdminUserEditDialogComponent } from 'src/app/components/admin/admin-use
 import { DialogService } from 'src/app/services/dialog/dialog.service';
 import { UserDataService } from 'src/app/data/user/user-data.service';
 import { Observable} from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-admin-users',
@@ -27,6 +28,7 @@ export class AdminUsersComponent implements OnInit {
   @Input() permissionList: Permission[];
   pageSize = 10;
   pageIndex = 0;
+  filteredUserList: User [] = [];
   @Output() removeUserPermission = new EventEmitter<UserPermission>();
   @Output() addUserPermission = new EventEmitter<UserPermission>();
   @Output() addUser = new EventEmitter<User>();
@@ -34,8 +36,11 @@ export class AdminUsersComponent implements OnInit {
   addingNewUser = false;
   isLoading = false;
   topbarColor = '#ef3a47';
-  filterControl: UntypedFormControl = this.userDataService.filterControl;
-  filterString: Observable<string>;
+  private unsubscribe$ = new Subject();
+  sort: Sort = { active: 'name', direction: 'asc' };
+  filterControl = new UntypedFormControl();
+  filterString = '';
+  displayedUsers: User [] = [];
 
   constructor(
     private dialog: MatDialog,
@@ -46,10 +51,18 @@ export class AdminUsersComponent implements OnInit {
     this.topbarColor = this.settingsService.settings.AppTopBarHexColor
       ? this.settingsService.settings.AppTopBarHexColor
       : this.topbarColor;
+    this.filterControl.valueChanges
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((term) => {
+        this.filterString = term.trim().toLowerCase();
+        this.applyFilter();
+      });
   }
 
   ngOnInit() {
-    this.filterControl.setValue(this.filterString);
+    this.applyFilter();
   }
 
   hasPermission(permissionId: string, user: User) {
@@ -105,35 +118,47 @@ export class AdminUsersComponent implements OnInit {
     this.userDataService.deleteUser(user);
   }
 
-  applyFilter(filterValue: string) {
-    this.filterControl.setValue(filterValue);
+  applyFilter() {
+    this.filteredUserList = this.userList.filter(user =>
+      !this.filterString ||
+      user.name.toLowerCase().includes(this.filterString)
+    );
+
+    this.sortChanged(this.sort);
+  }
+
+  clearFilter() {
+    this.filterControl.setValue('');
   }
 
   sortChanged(sort: Sort) {
-    this.userList.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      const compareResult = this.compare(a.name.toLowerCase(), b.name.toLowerCase());
-      return isAsc ? compareResult : -compareResult;
-    });
+    this.sort = sort;
+    this.filteredUserList.sort((a, b) => this.sortUsers(a, b, sort.active, sort.direction));
+    this.paginateUsers();
+  }
+
+  sortUsers(a: User, b: User, column: string, direction: string) {
+    const isAsc = direction !== 'desc';
+    switch (column) {
+      case 'name':
+        return (
+          (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1) *
+          (isAsc ? 1 : -1)
+        );
+      default:
+        return 0;
+    }
   }
 
   paginatorEvent(page: PageEvent) {
     this.pageIndex = page.pageIndex;
     this.pageSize = page.pageSize;
+    this.paginateUsers();
   }
 
   paginateUsers() {
     const startIndex = this.pageIndex * this.pageSize;
-    return this.userList.slice(startIndex, startIndex + this.pageSize);
+    this.displayedUsers = this.filteredUserList.slice(startIndex, startIndex + this.pageSize);
   }
 
-  private compare(a: string, b: string) {
-    if (a < b) {
-      return -1;
-    }
-    if (a > b) {
-      return 1;
-    }
-    return 0;
-  }
 }