Filtering the data

Here you will find an explanation of how the list of metadata is filtered.

Structure

Filters

Filter (corresponds to a project field)
-> Filter option

Metadata

Metadata
-> Field that isn't filterable
-> Field that matches a filter and has 1 value
-> Field that matches a filter and can have multiple values

Metadata and Factsheet fields can be blank.

Rules

On page load all projects are displayed.

Once a filter options are selected a project will only be shown if it meets the following conditions:

• There must be at least one match for each one of the active* filters
• A field* with a single value must match at least one of the selected filter options from a filter
• A field* with multiple values must have at least one value that matches at least one of the selected filter options from a filter

*an active filter is one which has had 1 or more options selected by the user
**applies to fields that match a filter

Code

The filtering function is in the Table.vue file. There are two main arrays that are involved in filtering, these are:

• The array of metadata (this.items)
• The array of filter options that have been selected by the user (this.$store.state.selectedFilterOptions)

Walkthrough

1. The array of active metadata that are to be displayed in the table is cleared to prevent duplication.

this.$store.commit('clearActiveItems')

2. All metadata are looped over

this.items.forEach(item => {
  ...
})

3. For each set of metadata loop over the filters

this.$store.state.selectedFilterOptions.forEach(filter => {
  ...
})

4. If a filter option has been selected for that filter check to see if it matches a value in the corresponding field

if (filter.options.length !== 0) {
  ...
}

5. If the corresponding field is of type boolean check to see if the field is null

// check the boolean value for filters with type boolean
if (filter.type === 'boolean'){

  filter.options.forEach(option => {
    
    if (option.toLowerCase() === filter.name) {
      if(item[filter.name] !== null) optionMatch = true
    } else {
      if (item[filter.name] === null) optionMatch = true
    }
  })

}

6. If the corresponding field can have multiple values loop over the array and check for a match for each value.

else if(filter.type === 'multiple') {

  const arrayOfValues = item[filter.name]

  arrayOfValues.forEach(value => {
    filter.options.forEach(option => {
      if (value == option) optionMatch = true
    })        
  })
}

7. Otherwise check the single string value

else {
  filter.options.forEach(option => {
    if (item[filter.name] == option) optionMatch = true
  })
}

8. Add the id of the project to the active items array if it matches at least one filter option from the active filters. See rules above for more detailed information about the logic.

// once filterMatch is set to false it will always be false and the item
// will not be shown because it did match at least one option in every active filter
filterMatch = filterMatch && optionMatch

// only push the item id into the active items array if there are no fails
if (filterMatch) {
  this.$store.commit('updateActiveItems', item.id)
}