Added some filtering to participant component

This commit is contained in:
Erik Tiekstra
2021-03-29 12:51:49 +02:00
committed by Erik Tiekstra
parent 99db911f39
commit 8a9b0049d4
5 changed files with 78 additions and 37 deletions

View File

@@ -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 });
public sortBy$: Observable<SortBy> = this._sortBy$.asObservable();
private _activeParticipantsSortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
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([
this._sortBy$,
this._participants$,
public filteredParticipants$: Observable<Participant[]> = combineLatest([
this._allParticipants$,
this._searchFilter$,
]).pipe(map(([participants, searchFilter]) => filterParticipants(participants, searchFilter)));
public activeParticipants$: Observable<Participant[]> = combineLatest([
this.filteredParticipants$,
this._activeParticipantsSortBy$,
]).pipe(
map(([sortBy, participants, searchFilter]) => {
const filteredParticipants = participants.filter(participant => {
const searchValueExistsInName = participant.fullName.toLowerCase().includes(searchFilter.toLowerCase());
const searchValueExistsInErrandNumber = participant.errandNumber.toString().includes(searchFilter);
map(([participants, sortBy]) => {
return sortBy ? sort(participants, sortBy) : participants;
})
);
return searchValueExistsInName || searchValueExistsInErrandNumber;
});
if (sortBy) {
const reverse = sortBy.reverse ? -1 : 1;
return [...filteredParticipants].sort((a, b) => {
const first = a[sortBy.key];
const second = b[sortBy.key];
return reverse * (+(first > second) - +(second > first));
});
}
return participants;
public followUpParticipants$: Observable<Participant[]> = combineLatest([
this.filteredParticipants$,
this._followUpParticipantsSortBy$,
]).pipe(
map(([participants, sortBy]) => {
return sortBy ? sort(participants, sortBy) : participants;
})
);
@@ -55,15 +64,16 @@ export class ParticipantsService {
this._searchFilter$.next(value);
}
public setSortKey(key: keyof Participant) {
const currentSortBy = this._sortBy$.getValue();
let reverse = false;
public setActiveParticipantsSortKey(key: keyof Participant) {
const currentSortBy = this._activeParticipantsSortBy$.getValue();
const reverse = currentSortBy?.key === key ? !currentSortBy.reverse : false;
this._activeParticipantsSortBy$.next({ key, reverse });
}
if (currentSortBy?.key === key) {
reverse = !currentSortBy.reverse;
}
this._sortBy$.next({ key, reverse });
public setFollowUpParticipantsSortKey(key: keyof Participant) {
const currentSortBy = this._followUpParticipantsSortBy$.getValue();
const reverse = currentSortBy?.key === key ? !currentSortBy.reverse : false;
this._followUpParticipantsSortBy$.next({ key, reverse });
}
constructor(private httpClient: HttpClient) {}