Better Filtering In JS Apps

Feedback is welcome via @chaluwa

Overview

Data randomly generated from http://www.generatedata.com/ representing info about developers and has the model below :

                [ {
                    "name": "Dara Dunn",
                    "dob": "Oct 12, 1988",
                    "city": "North Vancouver",
                    "country": "Chile",
                    "company": "Dolor Donec Fringilla Associates",
                    "tags": "GDE, Game"
                }, ... ];
            

Every entry has zero or several tags depicting their tech skills or preference. The tags were randomized from the following list :
{{allTags}}

Default (single or mutually exclusive) Filters With Angular

Filtering by either of the data fields works, but also try filtering with two queries (e.g a name and a country, separated by comma) to see that it fails

  {{matchedDevs.length}} of {{allDevsLen}}

Name DOB Company Location
{{dev.name}} {{dev.dob}} {{dev.company}} {{dev.city}}, {{dev.country}}

Multiple, Advanced, and Custom Filters - my experimentation so far

Q1, Q2, Q3, Q4 will display those born in the quarter of the year matching your query.

H1 or H2 will display those born in the half of the year matching your query.

To filter for developers keen on Firebase, type #Firebase. "#Firebase, #PWA" (i.e a comma separated query), will filter for developers keen on Firebase AND PWA. Thus, allowing you apply multiple filters to the data at the same time.

Way to go mehn ...

  {{matchedDevsLen}} of {{allDevsLen}}

Name DOB Company Location
{{dev.name}} {{dev.dob}} {{dev.company}} {{dev.city}}, {{dev.country}}

Possible improvement to this implementation could be to be explicit on how to combine multiple filters. The comma in "#Firebase, #PWA" is a tad ambigious, right now it means, #Firebase AND #PWA. So how do we filter for developers tagged with Firebase but not PWA ?

Maybe we can use "+" to indicate AND, "|" to indicate OR, and "!" to indicate negation, such that "#Firebase +#PWA !Q1" will mean "gimme devs tagged with Firebase and PWA who were not born in Q1", and "#Firebase |#GDE !Q1" will mean "gimme devs tagged with Firebase or GDE who were not born in Q1".
Sounds good ? or too cryptic for app users ?