[#52147] quick action table headers #16944
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
EinLama
force-pushed
the
feature/52147-quick-action-table-headers
branch
4 times, most recently
from
2261910 to
df3fde6
Compare
EinLama
force-pushed
the
feature/52147-quick-action-table-headers
branch
from
5299c4a to
0a0df25
Compare
WIP - remove column WIP - remove column refactor WIP - move column left or right WIP - small refactor WIP - filter by WIP - style adjustments as discussed with the frontend
Better have many smaller methods than one giant one.
We only offer to move a column to the left when it's not the leftmost column already. Same for the right hand side.
EinLama
force-pushed
the
feature/52147-quick-action-table-headers
branch
from
0a0df25 to
9c26b60
Compare
|
I didn't do a proper review but rather only tried out the PR for a bit. I really enjoyed playing around with it cause the UX felt nicely direct. But while playing around, I stumbled over two things: 
|
Since you can do more things, such as (re)moving a column, it would be a shame to not offer these options. For non-sortable columns, we will just not offer the sort-action.
|
Thanks for the feedback, Jens. I agree and have added a style fix as well as the option to use the action menu on non-sortable columns, too. What's left now is to also allow the "mark as favorite" column to work with the action menu with the same reasoning. Currently looking into that. |
In the project storage module, there is a project list that should not use these quick actions as the columns there are not sortable. Same for custom field settings.
Comment on lines
+120
to
+125
|
|
||
| // When our generic table uses the quick action menu, column headers are cut off and no longer fully readable. | ||
| // This fix ensures that column headers are always displayed. An example for such a table is the project list. | ||
| .generic-table | ||
| .generic-table--action-menu-button | ||
| min-width: max-content !important |
frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
Show resolved
Hide resolved
aaron-contreras
approved these changes
Oct 18, 2024
|
Thank you 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Ticket
https://community.openproject.org/wp/52147
What are you trying to accomplish?
Clicking on the table header in the project list offers a variety of actions to perform on this column.
Sort by a column, move columns around, use a filter by a column value, add or remove columns. All this now at the convenience of a click.
Screenshots
quick_action_table_headers.mov
What approach did you choose and why?
I went with Primers
ActionMenuas it seemed like a good fit. Where possible, existing functionality of the project list was kept. For example, remembering the query parameters for previous changes when making further changes (first sort, then change available columns, then sort again).To interact with the filter component and configure view components, I used Stimulus. All other operations are triggered by visiting a URL.
In general, the quick action table headers should be easily portable to other tables. This is why all of the action menu methods went into the general sort_helper. Model-specific infos such as custom filter mappings (see next paragraph) are provided from the view when calling the component.
About column filter mappings: Some actions are not suitable for certain columns. This depends on the column itself and its position within the table. You cannot move the leftmost column further to the left. At the same time, you cannot filter by columns where we have no fitting filter for. For mapping existing filters to certain columns, I have added constant to
projects_helper.rb. When applying the action menu to other tables, the models must provide their column-filter-mapping in a similar fashion.Merge checklist