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$;
-  sortBy$: Observable<SortBy | null> = this.participantsService.sortBy$;
+  activeParticipants$: Observable<Participant[]> = this.participantsService.activeParticipants$;
+  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);
+  }
 }