molgenis-ui-filter

Filter Container

The filter container takes a descriptive input array to create a set of filters. It will also require a 2 way bound output object to receive the filters state

<filter-container
  v-model="selections"
  :filters="filters"
  :filters-shown="filtersShown"
  :can-edit="true"
/>

Properties

• selections: Will hold the settings set in filters.
• filters: A definition list of all possible filters.
• filtersShown: A array of filter names that will be shown.
• can-edit: if true you will be able to add, move and remove filters.

Events

• update: this event is fired when filtersShown is updated, it will return a new list of selected filters

Filter input object specifications

filters: [ {
    name: 'search',
    label: 'Search',
    description: 'search by name',
    initiallyCollapsed: true,
    placeholder: 'test',
    type: 'string-filter'
}, {
    name: 'country',
    label: 'Countries',
    initiallyCollapsed: false,
    options: [{ value: 'nl', text: 'Nederland' }, { value: 'de', text: 'Duitsland' }, { value: 'be', text: 'België' }],
    type: 'checkbox-filter'
}]

Every filter will have the following global properties:

name	required	default value	description
name	true	na	string: name and id of the filter
label	false		string: name of the filter as used by the UI
description	false		descriptive text that is used by the UI
collapsed	false	true	boolean: Open/Closed state of the card that holds the filter
collapsable	false	true	boolean: Can the card be collapsed. This will force the card to be open by default if set to false
type	true	na	vue object that renders the filter
value	false	empty	the (pre)selected option(s)

The type field takes a VUE object that renders a filter. Note that every object can have additional filter properties

Additional filter properties

CheckboxFilter

name	required	default value	description
options	true	na	describe the checkboxes. This is a function holding a promise holding the options (see example below)
bulkOperation	false	true	adds 'select all' and or 'Deselect all' button
maxVisibleOptions	false	undefined (show all options)	limit the amount of initially shown options

options example

() => {
    return new Promise(
        function (resolve) {
            resolve([{ value: 'value1', text: 'Checkbox 1' }, { value: 'value2', text: 'Checkbox 2' }])
        }
    )
}

DateTimefilter

name	required	default value	description
max	false	null : string	Set the minimal date you can select, needs to be able to be parsed by the Date object
min	false	null : string	Set the maximum date you can select, needs to be able to be parsed by the Date object
opens	false	'right' : string	Set the alignment of the popup. Possible options: 'left', 'right', 'center'
time	false	true : boolean	Add a time selection to the data time picker
range	false	true : boolean	Add a range selection to be able to make a from-to selection

Multifilter

The multifilter is a composite filter. It uses a searchbox, which searches for options. The usecase is to generate a list of checkboxes based on a user query (capped to first 100) when the options are of n length.

name	required	default value	description
options	true	na : Function	describe the checkboxes. This is a function returns a promise which can query and return options (see example below)
placeholder	false	empty : String	fill the placeholder in the searchbox
maxVisibleOptions	false	10 : Number	limit the amount of initially shown options by n
initialDisplayItems	false	5 : Number	Initial set of items to be displayed

options example

(params: object) => {
  const data = await axios.get(url, { params })

  return Promise.resolve(
    data.data.items.map((i: any) => {
      return { value: i.data[*idName*], text: i.data[*attrName*] }
    })
  )
}

StringFilter

name	required	default value	description
placeholder	false		Placeholder in the input field

NumberFilter, RangeFilter

name	required	default value	description
min	false		minimal posible value
max	false		maximal posible value
step	false	1	step size of slider and up/down buttons
useSlider	false	false	show a slider to help pick a number

Resulting output object

The resulting filter status is an object that holds the name fields of the filter description object and the resulting selected values. Note the 2 way vue binding. Feed in the default values by setting them here on object creation.

selections: {
  search: '',
  country: ['nl']
},

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Run your end-to-end tests

yarn run test:e2e

Run your unit tests

yarn run test:unit

How to commit

We use conventional commits to generate changelogs and release notes. Please check: https://www.conventionalcommits.org/

Example

git commit file.ext -m "fix(file.ext): fixes something"

How to publish

Each time a PR is merged a release will be done to NPM. The CHANGELOG.md and GitHub release will be ammended.

The version of the package is based upon convential commits. Check: http://commitizen.github.io/cz-cli/.