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 |

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. The value property is used as key and the text property is used as label by the UI | | bulkOperation | false | true | Adds 'select all' and or 'Deselect all' button |

Options example

[{ value: 'value1', text: 'Checkbox 1' }, { value: 'value2', text: 'Checkbox 2' }]

StringFilter

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

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