@molgenis/molgenis-ui-filter v1.11.1

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:

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

Additional filter properties

CheckboxFilter

options example

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

DateTimefilter

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.

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

NumberFilter, RangeFilter

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/.