Added some filtering to participant component

apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { Participant } from '@dafa-models/participant.model';
 import { SortBy } from '@dafa-models/sort-by.model';
 import { ParticipantsService } from '@dafa-services/api/participants.service';
@@ -12,10 +12,11 @@ import { ParticipantsService } from '@dafa-services/api/participants.service';
 export class ParticipantsListComponent {
   @Input() participants: Participant[];
   @Input() sortBy: SortBy | null;
+  @Output() sorted = new EventEmitter<keyof Participant>();
 
   constructor(private participantsService: ParticipantsService) {}
 
   handleSort(key: keyof Participant): void {
-    this.participantsService.setSortKey(key);
+    this.sorted.emit(key);
   }
 }

apps/dafa-web/src/app/pages/participants/participants.component.html

@@ -17,9 +17,17 @@
   </form>
 
   <dafa-participants-list
-    *ngIf="participants$ | async as participants; else loadingRef"
+    *ngIf="activeParticipants$ | async as participants; else loadingRef"
     [participants]="participants"
-    [sortBy]="sortBy$ | async"
+    [sortBy]="activeParticipantsSortBy$ | async"
+    (sorted)="handleActiveParticipantsSort($event)"
+  ></dafa-participants-list>
+
+  <dafa-participants-list
+    *ngIf="followUpParticipants$ | async as participants; else loadingRef"
+    [participants]="participants"
+    [sortBy]="followUpParticipantsSortBy$ | async"
+    (sorted)="handleFollowUpParticipantsSort($event)"
   ></dafa-participants-list>
 
   <ng-template #loadingRef>

apps/dafa-web/src/app/pages/participants/participants.component.ts

@@ -12,8 +12,10 @@ import { BehaviorSubject, Observable } from 'rxjs';
 })
 export class ParticipantsComponent {
   private _searchValue$ = new BehaviorSubject<string>('');
-  participants$: Observable<Participant[]> = this.participantsService.participants$;
+  activeParticipants$: Observable<Participant[]> = this.participantsService.activeParticipants$;
-  sortBy$: Observable<SortBy | null> = this.participantsService.sortBy$;
+  followUpParticipants$: Observable<Participant[]> = this.participantsService.followUpParticipants$;
+  activeParticipantsSortBy$: Observable<SortBy | null> = this.participantsService.activeParticipantsSortBy$;
+  followUpParticipantsSortBy$: Observable<SortBy | null> = this.participantsService.followUpParticipantsSortBy$;
 
   constructor(private participantsService: ParticipantsService) {}
 
@@ -28,4 +30,12 @@ export class ParticipantsComponent {
   handleSearchInput($event: CustomEvent): void {
     this._searchValue$.next($event.detail.target.value);
   }
+
+  handleActiveParticipantsSort(key: keyof Participant): void {
+    this.participantsService.setActiveParticipantsSortKey(key);
+  }
+
+  handleFollowUpParticipantsSort(key: keyof Participant): void {
+    this.participantsService.setFollowUpParticipantsSortKey(key);
+  }
 }

apps/dafa-web/src/app/services/api/participants.service.ts

@@ -3,14 +3,24 @@ import { Injectable } from '@angular/core';
 import { environment } from '@dafa-environment';
 import { Participant } from '@dafa-models/participant.model';
 import { SortBy } from '@dafa-models/sort-by.model';
+import { sort } from '@dafa-utils/sort.util';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+function filterParticipants(participants: Participant[], searchFilter: string): Participant[] {
+  return participants.filter(participant => {
+    const searchValueExistsInName = participant.fullName.toLowerCase().includes(searchFilter.toLowerCase());
+    const searchValueExistsInErrandNumber = participant.errandNumber.toString().includes(searchFilter);
+
+    return searchValueExistsInName || searchValueExistsInErrandNumber;
+  });
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class ParticipantsService {
-  private _participants$: Observable<Participant[]> = this.httpClient
+  private _allParticipants$: Observable<Participant[]> = this.httpClient
     .get<Participant[]>(`${environment.apiBase}/participants`)
     .pipe(
       map(participants =>
@@ -20,34 +30,33 @@ export class ParticipantsService {
         }))
       )
     );
-  private _sortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
+  private _activeParticipantsSortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
-  public sortBy$: Observable<SortBy> = this._sortBy$.asObservable();
+  public activeParticipantsSortBy$: Observable<SortBy> = this._activeParticipantsSortBy$.asObservable();
+  private _followUpParticipantsSortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
+  public followUpParticipantsSortBy$: Observable<SortBy> = this._followUpParticipantsSortBy$.asObservable();
   private _searchFilter$ = new BehaviorSubject<string>('');
   public searchFilter$: Observable<string> = this._searchFilter$.asObservable();
 
-  public participants$: Observable<Participant[]> = combineLatest([
+  public filteredParticipants$: Observable<Participant[]> = combineLatest([
-    this._sortBy$,
+    this._allParticipants$,
-    this._participants$,
     this._searchFilter$,
+  ]).pipe(map(([participants, searchFilter]) => filterParticipants(participants, searchFilter)));
+
+  public activeParticipants$: Observable<Participant[]> = combineLatest([
+    this.filteredParticipants$,
+    this._activeParticipantsSortBy$,
   ]).pipe(
-    map(([sortBy, participants, searchFilter]) => {
+    map(([participants, sortBy]) => {
-      const filteredParticipants = participants.filter(participant => {
+      return sortBy ? sort(participants, sortBy) : participants;
-        const searchValueExistsInName = participant.fullName.toLowerCase().includes(searchFilter.toLowerCase());
+    })
-        const searchValueExistsInErrandNumber = participant.errandNumber.toString().includes(searchFilter);
+  );
 
-        return searchValueExistsInName || searchValueExistsInErrandNumber;
+  public followUpParticipants$: Observable<Participant[]> = combineLatest([
-      });
+    this.filteredParticipants$,
-
+    this._followUpParticipantsSortBy$,
-      if (sortBy) {
+  ]).pipe(
-        const reverse = sortBy.reverse ? -1 : 1;
+    map(([participants, sortBy]) => {
-        return [...filteredParticipants].sort((a, b) => {
+      return sortBy ? sort(participants, sortBy) : participants;
-          const first = a[sortBy.key];
-          const second = b[sortBy.key];
-
-          return reverse * (+(first > second) - +(second > first));
-        });
-      }
-      return participants;
     })
   );
 
@@ -55,15 +64,16 @@ export class ParticipantsService {
     this._searchFilter$.next(value);
   }
 
-  public setSortKey(key: keyof Participant) {
+  public setActiveParticipantsSortKey(key: keyof Participant) {
-    const currentSortBy = this._sortBy$.getValue();
+    const currentSortBy = this._activeParticipantsSortBy$.getValue();
-    let reverse = false;
+    const reverse = currentSortBy?.key === key ? !currentSortBy.reverse : false;
+    this._activeParticipantsSortBy$.next({ key, reverse });
+  }
 
-    if (currentSortBy?.key === key) {
+  public setFollowUpParticipantsSortKey(key: keyof Participant) {
-      reverse = !currentSortBy.reverse;
+    const currentSortBy = this._followUpParticipantsSortBy$.getValue();
-    }
+    const reverse = currentSortBy?.key === key ? !currentSortBy.reverse : false;
-
+    this._followUpParticipantsSortBy$.next({ key, reverse });
-    this._sortBy$.next({ key, reverse });
   }
 
   constructor(private httpClient: HttpClient) {}

apps/dafa-web/src/app/utils/sort.util.ts

@@ -0,0 +1,12 @@
+import { SortBy } from '@dafa-models/sort-by.model';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function sort(data: any[], sortBy: SortBy): any[] {
+  const reverse = sortBy.reverse ? -1 : 1;
+  return [...data].sort((a, b) => {
+    const first = a[sortBy.key];
+    const second = b[sortBy.key];
+
+    return reverse * (+(first > second) - +(second > first));
+  });
+}