Currently, I am working on developing a social platform for our sailing club using Angular2/Firebase/AngularFire. The initial module aims to enable users to search for a club member based on various criteria (filters), which are approximately 10 in number. In the process of building this feature, I had to do extensive research to find a workaround for the lack of query capabilities within Firebase. To address this challenge, I created a component to handle the filters with a child routed component responsible for displaying a list of members successfully filtered by the user. Additionally, a click handler is implemented to allow routing to the profile of the selected member. The filter component structure includes: An HTML template featuring radio buttons for selecting filters such as gender. Upon selection, the 'onFilter' method is triggered.
Filter Component
<div class="radio">
<label>
<input type="radio" name="genderRadios" id="genderRadioM" value="genderMale" (click)="onFilter('crewGender', 'M')">
Male
</label>
</div>
The 'onFilter' method's purpose is to update the filter array with the new values retrieved from the 'crewService' service.
constructor(private crewService: CrewService) {}
onFilter(myType, myParam) {
this.crewFilter = this.crewService.updateFilter(myType, myParam);
}
This section showcases how the 'CrewService' manages filtering:
Firebase Service handler (CrewService)
updateFilter(myType, myParam){
this.crewFilter[myType] = myParam;
return this.crewFilter;
}
As illustrated, the 'crewFilter' array stores key:value pairs for all applied filters. The 'CrewService' service contains a method that utilizes this array to filter the AngularFire list and create a 'FirebaseListObservable' object.
@Injectable()
export class CrewService {
private crewFilter:any[] = [];
crews:FirebaseListObservable<any[]>;
constructor(private af: AngularFire) {}
getCrews() {
this.crews = this.af.database.list('/crew').map(items => {
const filtered = items.filter(item => {
let match:boolean = true;
for (let i in this.crewFilter) {
if(this.crewFilter[i] !== 'A') {
if (item[i] !== this.crewFilter[i]) match = false;
}
}
return match;
});
return filtered;
}) as FirebaseListObservable<any[]>;
Any assistance or advice would be greatly appreciated!
Thank you
Tony