dropdown_pills added to elements;

cityremade commented 1 month ago

Now filter[in] supports multi select with values as pills; Config inside in-filter: "dropdown_pills": true

dbauszus-glx commented 1 month ago

The duplicate code issue has been resolved in https://github.com/GEOLYTIX/xyz/pull/1284/commits/20d3b48473aa9ba3e620bc9adb7826bebac38f09

Inside the filter.mjs I add pills to be dropdown_pills, ie. true || false/undefined

  if (filter.dropdown || filter.dropdown_pills) {

    const dropdown = mapp.ui.elements.dropdown({
      pills: filter.dropdown_pills,
      multi: true,
      placeholder: 'Select Multiple',
      entries: filter[filter.type].map(val => ({
        title: val,
        option: val,
        selected: chkSet.has(val)
      })),
      callback: async (e, options) => {

        if (!options.length) {

          // Remove empty array filter.
          delete layer.filter.current[filter.field]
        } else {

          // Set filter values array from options.
          Object.assign(layer.filter.current, {
            [filter.field]: {
              [filter.type]: options
            }
          })
        }

        applyFilter(layer)
      }
    })

    return mapp.utils.html.node`<div class="filter">${dropdown}`
  }

In the dropdown.mjs I add the pills element to params.pills if true.

  params.pills &&= mapp.ui.elements.pills({
    pills: [...params.selectedTitles],
    addCallback: (val, _pills) => {
      params.callback?.(null, [..._pills]);
    },
    removeCallback: (val, _pills) => {

      // deselect value in the list
      const item = ul.find(li => li.title === val);
      item.classList.remove('selected');
      params.selectedTitles.delete(item.title);
      params.selectedOptions.delete(item.dataset.option);
      params.callback?.(null, [..._pills]);
    }
  });

A dropdown pills by definition will always be a dropdown multi and I made the mistake of introducing the dropdown_multi element before thinking this through which leaves us now with this technical debt module.

export default (params) => {

  console.warn('mapp.ui.elements.dropdown should be used with the multi flag')

  params.multi = true

  return mapp.ui.elements.dropdown(params)
}

dbauszus-glx commented 1 month ago

I've added a maxHeight param for dropdowns.

This is set to 300 for filter.