Help combining dropdown filter with range filter

Ask the community
,
4

@ktierney so, I decided to take the challenge and refactored all the code, so now, each dropdown works independently from each other. You can filter for years from a specific year AND up until a specific year.

//You need to rename your dropdowns ids to match the ones in the example for it to work.

import wixData from 'wix-data'

let selectedValues = []
let dropdowns
let filter = wixData.filter()

const filterDataset = (e) => {
  let filterValues = []
  let yearsValues = []
  let filterYears
  let startDate = +$w('#teCyearStart').value
  let endDate = +$w('#teCyearEnd').value
  let finalFilter
  startDate && yearsValues.push(filter.ge('teCyear', startDate))
  endDate && yearsValues.push(filter.le('teCyear', endDate))

  selectedValues = dropdowns
    .map(({ id, value }) => ({ id: id.replace(/\d+/g, ''), value }))
    .filter((d) => d.value)

  if (selectedValues.length > 0) {
    filterValues = selectedValues
      .map((dropdown) =>
        filter.contains(
          dropdown.id,
          dropdown.value === '0' ? '' : dropdown.value
        )
      )
      .reduce((fn, obj, _, array) => (array.length > 1 ? fn.and(obj) : fn))
  } else {
    filterValues = null
  }

  if (yearsValues.length > 0) {
    filterYears = yearsValues.reduce((fn, obj, _, array) =>
      array.length > 1 ? fn.and(obj) : fn
    )
  } else {
    filterYears = null
  }

  finalFilter = filterValues
    ? filterYears
      ? filterValues.and(filterYears)
      : filterValues
    : filterYears
    ? filterYears
    : filter

  $w('#dataset').setFilter(finalFilter)
}

$w.onReady(function () {
  dropdowns = $w('#teCnumber, #country, #region, #tags1, #tags2, #tags3')
  dropdowns.onChange(filterDataset)
  $w('#teCyearStart, #teCyearEnd').onChange(filterDataset)
})