# Quick filters


## Features

- Uses Appbase reactivesearch vue component [SelectedFilters](https://docs.appbase.io/docs/reactivesearch/vue/advanced/SelectedFilters/) to get `selectedValues` and `setvalue` using `slot-scope`
- Transformation of complex Appbase response to displayable values
- Display of most relevant filters
- A button with a label of "Filters" to open the filter panel
- Opening / Scrolling into filter panel modal
- A container and a presentational component. A third component holding the `<selected-filters>`

## What it does from a user perspective?
- A user can see the selected filters while browsing the listing
- A user can set the filter value by opening the modal when clicking on a label
- When opening the label the user will be scrolled into the right part of the view of the modal
- The user only sees the most relevant filters which is determined based on actual user data and not all filters

## Possible why's and things to improve
- The `<selected-filters>` component is in its own file due to an issue with rendering this component inside of the container. Ideally we move this inside the container.
- A container is used to split logic from rendering which was a originally a `react` concept that we used in the beginning of the project, but isn't necessarily a thing in `vue`. You can argue making it a single component
- We dispatch a `setFiltersData` vuex event to set the segment data for tracking users
- We do transformation because Appbase gives complex responses in some cases f.e. the `getFiltersToRender` and `getValuesFromArray` and `getSelectedValues` and `getValues` methods
- We could reduce the amount of methods in the `QuickFilterList` component by using a dictionary rather than defining different methods to format each translation
- We shouldn't used computed properties when defining static styles f.e. `leading-6 inline-flex h-9 whitespace-nowrap rounded align-middle cursor-pointer text-center items-center justify-center focus:outline-none border border-solid` because it might be slower. It was historically done because it would blow up the markup
- Change name of `<FilterCountButton>`, because in this case its only displaying a button to open the filters panel

As you can see the component was build 11+ months ago. Basically at the start of the project. It is still one of the first iterations and probably not the best. We could improve it a bit here and there. I do think using the `<selected-filters>` Appbase component makes sense, because we can reuse that component to handle these things and it also interacts with the Appbase state which you can get from Appbase's `<state-provider>` component and is also visible in the `URLParams`.

## Dependency on compnents
- `<Filters>` component containing the modal that contans the filters and Appbase's `<StateProvider` component, and also renders the `<QuickFilters`