Feature #34420
open
Improve query columns selector by using a custom multi select with sortable items
0%
Description
The current query columns selector UI consists of two multi select elements wit left/right arrows to move the columns from the available to selected columns and up/down to change the column position. This solution works decent when you have only a few columns (10 from my experience), but when you have more than that, it becomes a nightmare because you need to scroll through the available columns. Also, changing the position requires lots of clicks.
I tried to improve this by using an existing javascript solution, but I didn't find anything light enough to be confident that it will be accepted.
Inspired from the existing quick jump solution, I've created a custom multiselect:
- fewer clicks required when you select at least two columns
- searchable: you can search for columns using the search box
- sortable: using drag & drop in the same way as other sortable items from Redmine (tracker, custom fields, etc)
- less space required the UI (it will allows us to redesign a little bit the fields under Options fieldset)
- no other dependencies.
I'll post a patch in a few days.
Files
Updated by Mischa The Evil over 3 years ago
Is this supposed to be going to support multi-column order sorting like the current implementation does? I am interested to see what your approach is.
Updated by Marius BĂLTEANU over 3 years ago
Mischa The Evil wrote:
Is this supposed to be going to support multi-column order sorting like the current implementation does? I am interested to see what your approach is.
In my working version it supports sorting only one by one (using the green handler) and I didn't take into consideration selecting multiple columns for sorting (to be honest, I never sorted multiple columns from one action), but I'll take a look on this as well.
Do you consider this feature a must?
Updated by Marius BĂLTEANU over 3 years ago
- File wip_custom_dropdown_with_sortable_items.patch wip_custom_dropdown_with_sortable_items.patch added
Here is a patch only for demo/testing purposes, most of the features are implemented, but is still needs some work to be ready.
Updated by Mischa The Evil about 3 years ago
Nice to see you are making progress with this. For convenience would it be excellent if you could upload a screenshot of your latest iteration.
Marius BALTEANU wrote:
[...] I didn't take into consideration selecting multiple columns for sorting (to be honest, I never sorted multiple columns from one action), but I'll take a look on this as well.
It's something you'll quickly turn to when there are lots of custom columns that needs to be sorted/switched. Then it sometimes pays of to edit multiple columns simultaneously. However, I think that when column sorting using drag-and-drop is implemented, this potential need for especially multi-column sorting might vanish altogether.
Marius BALTEANU wrote:
Do you consider this feature a must?
No, not per se. See my previous comment above. I just looked at your initial proposal via the screenshot and compared what I saw, feature-wise, with the currently available functionality to see if there were potential feature-regressions introduced with this UI-change proposal. As this remained unclear from the screenshot, I just asked about it specifically.
FWIW, for when you had missed it within your latest patch, just a quick note of caution: please be aware that there is at least one (other) edge-case, namely the valid case where there are none inline columns selected. This is possible only with at least one block column enabled (observed with the description column).
Updated by Marius BĂLTEANU about 3 years ago
- File 0001-Improve-query-columns-selector-by-replacing-the-comb.patch 0001-Improve-query-columns-selector-by-replacing-the-comb.patch added
I'm adding for testing purposes a patch that replaces the existing element with a custom multi select dropdown. All the features are working, but the patch still needs some code optimisations and tests.
The patch is build using the new view component that is supported natively in Rails 6.1, and compatible with Rails 5.0+ via an included monkey patch (https://viewcomponent.org). This component aims to be reusable.
To test it, apply the patch and run bundle install.
Any feedback is welcome!
Updated by Bernhard Rohloff about 3 years ago
I've tried your patch and there are things I like, and also things I don't like about it.
What I really like is the full text search to add new columns and the ability to rearrange the columns by drag and drop.
On the other hand I've missed the list of currently selected columns. It felt counter intuitive to first click on the drop-down menu
to see the selected ones. Sorting the items after activating them was sometimes difficult if they where on the bottom of the list.
My favorite solution would be a drop-down menu to add the new columns and a persistent list where I can sort the items by dragging them around. I haven't tried the patch on mobile which would also be quite interesting to see how this works out.
Updated by Marius BĂLTEANU about 3 years ago
Bernhard Rohloff wrote:
I've tried your patch and there are things I like, and also things I don't like about it.
Thanks Bernhard for testing the patch so quickly and for your feedback! I've broke your response in 3 topics:
What I really like is the full text search to add new columns and the ability to rearrange the columns by drag and drop.
On the other hand I've missed the list of currently selected columns. It felt counter intuitive to first click on the drop-down menu
to see the selected ones.
That was my first thought as well, but when I started to dig into this, I came to the conclusion that it's not so useful from the following reasons:My favorite solution would be a drop-down menu to add the new columns and a persistent list where I can sort the items by dragging them around.
- you already have the list of selected columns in the table header (it should be enough if you have a few columns, for more, you need a search mechanism anyway).
- listing the selected columns eats a lot of space in the UI. You can try add all columns and see how it looks now (please note that the the multi select shows only the first 10 columns, for more you need to scroll). Even if we list them one after another (as "tags"), it could become a long list of columns that is always listed under the Options fieldset.
- most of the platforms that I use and I've researched for this use a similar mechanism to select the columns.
Sorting the items after activating them was sometimes difficult if they where on the bottom of the list.
Can you tell me more about this? You experienced issues or it was just hard to drag the last column to the top of the list? If you just want to add a column to the end of the selected columns, it is enough to select it without sorting it.
I haven't tried the patch on mobile which would also be quite interesting to see how this works out.
Me neither, I've in plan to do it, but it should be almost the same experience.