btcpayserver
btcpayserver copied to clipboard
btcpayserver
Improve invoice filtering UI
Currently, invoice filtering is cryptic and people aren't really aware they can toggle the filter.
Some good suggestions were made in this discussion, but TLDR:
- Add a multiselect drop down for store & status filtering (bear in mind user should be able to filter by mutliple stores, statuses).
- instead of typing startDate, endDate -> show 2 datepickers for start and end date;
This PR from 2019 can server as an inspiration, but ideally we should tend towards simplicity. https://github.com/btcpayserver/btcpayserver/pull/771
Another question would be how to make the toggle more obvious since people weren't really aware of these options.
What do you think about a solution like this? Could also be used for date (from - to) and amount (from - to).
Instead of the dropdown-icon we could also use the "filter" icon. Maybe this would also clarify the function on the left side of the search input field.
I'm aware that this is not working for stores. Maybe we find another idea to tackle this problem.
Few thoughts on the above:
-
Being able to filter by status is important, a critical feature to surface, so definitely agree, conceptually
-
However, shouldn't be incorporated into the table header (imo) -- adds noise at too low of a hierarchical level -- ideally whatever pattern we develop, we should be able to leverage as a consistent pattern across all table views -- don't feel this approach, at this low of a level in the header, enables max flexibility in the future (e.g. updating the "status" -> "expired" text on selection), but the dropdown could be expanded to incorporate more -- mobile limitations and considerations (resolvable, but worth noting)
-
Could be a drop-down, could be a tabbed menu, etc.. still agnostic until we determine a few more details
-
Additionally, we need to be considering all of the filter functionality, not just a subset of the filters, otherwise we're left with a dropdown selector for one, and the rest tucked back behind the current functionality, not ideal, imo. -- Few considerations, how accessible are some filters vs. others, etc..
After exploring a few things as well, I think labelling this a "good-first-issue", as a design task, is inaccurate. This table view, and the component table / filter pattern touches the entire app, and shouldn't be patch-worked, but a holistic solution that scales from complex (this) to simple, across all views, even if some of the implementation to improve this is done in patch-work.
Early Thinking & Exploration (TBU)
Exploring as a more flexible set of components:
There are still a few aspects of this that are early/tbd to meet all of the requirements:
- the "switch" of all/this store
- how we want to handle filtering / prioritization these
- what we want the "search" input field for
But hopefully this will get some discussion rolling. Will likely have another iteration of everything in 1-2 views by this weekend.
Might also explore trying to condense all of this into an even smaller set of UI, but this was the first attempt at laying it all out there for us to consider.
OLD: Started scraping together some of the components, which led to the above, but sharing for posterity:
Mass Actions Exploration:
OLD: Early exploration, some elements might be worth exploring further, but didn't address the root issues:
Sharing for inspiration or discussion.
More progress. Refined the thinking and focused solely on Invoices in this exploration .. but will apply the thinking to all other views to see how well it would all hold up:
Extracted all of the filterable content into a few labeled examples with the mobile counterparts:
Showed examples with "Start/End" vs. "All Time", another small variation we could explore depending on feedback.
As noted, if we try to extract a "simple" status tab, we need to allow for the "exception" filtering, if we intend to maintain that support.
Singular filter, could scale well, but conceptually it's a bit complex and less intuitive, ideally we flatten out and simplify all of the options to make the functionality more accessible, but thought I'd share as it's still interesting...
Only other functional pattern that crossed my mind was multi-select per dropdown filter (other ways we could explore this as well), but wanted to see if this is something we might want to support, e.g:
This doesn't include the table / action / multi-action table mocks, will likely post those independently to keep the discussion more focused, and @dennisreimann will be showing some of the progress on this front soon I believe. cc @pavlenex
Progress:
The "Time" filter needs to be addressed, we could even split into Start/End with the calendars, but this might be worth a discussion.
Additionally, the header & seach/filter could stay fixed on scroll on desktop potentially .. some stuff to explore here
Desktop
### Mobile
