List View Filters UI

[zubricks]

This feature will include updates to the list view by improving the UX for filters, specifically:

• Filters on a per user basis - each user can specify how they see documents. e.g. if you’ve got a massive collection and an user wants a filtered list only for them, this update will make that possible.
• Predefined Filters on the config level that all users have access to → e.g. view by Status (Draft/Published)
• Hide Filters - provide the ability to hide certain filters as needed

[willviles]

If predefined filters were built as its own CRUDdable entity for each collection rather than defined via a static config, then a pretty cool feature would be to allow users to save different named filter configurations and optionally share with other users.

For example, consider a Report collection, used by a Customer Support team. It'd be awesome if they could create specific filters, such as:

Filter Config Name	SQL like Query	Share
Q4 2023 Unpublished Tier 1 Customer Reports	WHERE campaign = "q4-2023" AND status = "unpublished" AND tier = "TIER_1"	true
GB Reports without Account Manager	WHERE country = "GB" AND "accountManager" IS NULL	true
My Q1 2024 Reports	WHERE campaign = "q1-2024" AND "accountManager" = "123"	false
My Reports	WHERE "accountManager" = {currentUser.id} 👀	true

It's an advanced feature, but could be quite powerful, especially if implemented with RBAC of the entity.

[BrianJM]

I'm looking forward to this feature.

• Common workflows start from simple filters. End users currently need to perform ~10 clicks to set a single field filter (start to finish), and a ~4+ clicks per additional field.
• Once a user creates a filter and clicks on a record, there is no way to navigate back to the list view (that had the previously defined filter)

In the interim, I may forcefully open List View links in a new tab.

[DanRibbens]

Once a user creates a filter and clicks on a record, there is no way to navigate back to the list view (that had the previously defined filter)

The back button in the browser will retain the filters since all of that is pushed to the URL.

I'm not trying to detract from the points you made, definitely need this feature regardless. I just think it's useful to know that the router is helpful.

[DanRibbens]

This feature is coming up right after our work on moving to next.js which is moving along nicely. For anyone that can't wait this long I wanted to offer a workaround solution.

You could add links to filtered collections by creating custom components to add to your collection's admin.components in the BeforeList, BeforeListTable or admin.components.List.action arrays.

The easiest way to build up the link is to make your filter selections using the UI controls and copy the URL to be added to a link in the component. Ideally you can import components from Payload to match the same UI design.

For example if you wanted to have a link so that your admin users could quickly see a list of articles they have written, you could something like this:

const MyPostsLink: React.FC = (props) => {
  const { user } = useAuth()

  return (
    <Pill aria-label="My Posts" to={`/admin/collections/posts?where[author][equals]=${user.id}`}>
      My Posts
    </Pill>
  )
}

[yfi]

The filter rules bar is quite big and pushes the list down out of view. Especially with more complex filters that have 3+ rows.
More crucially, it is possible to minimize the filter rules while filters are still being applied on the list. At this point there is no visual indicator that filters are applied and rows seem to be missing.

Some ideas:

1. Display a compact summary of currently applied filters on the list component itself.
2. Give the filter toggle a more "active" appearance when filters are applied. So when filters are applied, and the filter rules bar is minimized the filter pill is highlighted and shows the filter count... ie. Filters (3)
3. Separate the filter toggle from the search bar and group it with the filter rules bar. This bar would expand to define filter rules as it currently does, and when minimized it could display a summary of applied filters.

I like solution 3 because this would be a nice place to add the features discussed in this thread. Maybe something like this:
Add a "save as preset" button to the rules dialog. This button captures the filter params from the current url and saves it to a presets collection along with a short name, user/roles info etc.

You can then display the presets in this dedicated filter bar, even when it's minimized. Something like this:
[ [ preset 1 ] [ preset 2 ] [ preset 3 ] < - - - - - - - - - - - - -> [ More Filters ▼ ] ]

[ More Filters ] expands the full filter rules.

I am using a very rudimentary version of this in the collection.description component.

Another place to display the saved presets could be as sidenav subitems of the collection.
It's how directus does it. It's clean and minimal but confuses me sometimes since it's not always apparent i'm in a filtered view.

p.s. You guys built a fantastic product. Can't wait for the next version.