Filter UI Modification

[kohsah]

Current UI

Currently the filters on the pages are static blocks:

This needs to be changed to something more dynamic, taking the years filter as an example to something like--

Currently filters are monolothic. I choose a filter linking and the listing is for that filter. It isnt possible to combine (add, remove) filters on a listing. So the idea is to have "pluggable" filters.

Currently the filters are technically individual components. They need to have different UI/UX depending on the context and need to be functionally connected.

Enhanced UI

Here is the enhancement described in depth, from a macro level, down to a micro level : (click on the images to view it in full resolution)

This is how it would look on the page (the reading order is that of the numbered call-outs ..1, 2, 3...)

Here is a zoomed in view of the stacked filters:

And here is a functional view of a specific filter :

[kohsah]

This [1] is a proposed format for filter section output, asumming the following options have been selected:

• country: burkina faso, mauritius
• languages: english, french
• years: 2016, 2015
• keywords: abandon de poste, 2 mois de préav

Points of note:

• The combinator within a filter is always an OR: A document can obviously not be from 2 countries - the combinator "burkina faso" , "mauritius" is an OR - docs from both countries. Similarly the combinator for for "english" , "french" is an OR - includes documents in english or french.

• The combinator between filters (i.e. country, languages) is always an AND - i.e. (documents from burkina faso OR mauritius) AND (documents in English or French) - or more simply -- "documents from Burkina Faso or Mauritius which are in English or French"

[1] --

{
  "search": {
      "countries": [
        {
            "code": "bf",
            "count": "558",
            "#text": "Burkina Faso"
        },
        {
            "code": "mu",
            "count": "22",
            "#text": "Mauritius"
        }
      ],
      "langs" : [
        {
            "code": "eng",
            "count": "23",
            "#text": "English"
        },
        {
            "code": "fra",
            "count": "557",
            "#text": "Français"
        }      
      ],
      "years" : [
        {
            "year": "2016",
            "count": "548"
        },
        {
            "year": "2015",
            "count": "7"
        }     
      ],
      "keywords": [
           {
                "value": "2MoisDePréavis",
                "count": "1",
                "showAs": "2 mois de préavis"
            },
            {
                "value": "AbandonDePoste",
                "count": "1",
                "showAs": "Abandon de poste"
            }
       ]
  }
}

[kohsah]

Preliminary implementation of Dynamic filter merged into master ... see video below :

Filter Usage

[kohsah]

Quick filters have been added below the auto-complete in the individual filters clicking those allows quick search by single filters

Still further to do: auto-complete for keyword based filter

[kohsah]

See Issue #9

[Arunadevi]

Are there more details about the functionality of the + button that adds a filter?