Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resource Table Component #2972

Merged
merged 12 commits into from
Aug 29, 2024
Merged

Conversation

kulturbande
Copy link
Contributor

@kulturbande kulturbande commented Jul 21, 2024

What is this pull request for?

Add an experimental resource table component. The idea is to make it easier to create resource tables without duplicating the table structure and be in sync between the index view and the row partial.

All tables (except page nodes table in page dialog) are using the page component. It works the same way as before, but it should be easier to create new resource views and maybe we can extend the behavior to provide other views (e.g. grid view).

Screenshots

An example:

Aufnahme 2024-07-24 at 10 36 13@2x

Checklist

  • I have followed Pull Request guidelines
  • I have added a detailed description into each commit message
  • I have added tests to cover this change

@kulturbande kulturbande requested a review from a team as a code owner July 21, 2024 19:36
@kulturbande kulturbande marked this pull request as draft July 21, 2024 19:37
@kulturbande
Copy link
Contributor Author

Reopend #2785, Github can't reopen a PR, if the branch was forced pushed...

@kulturbande kulturbande force-pushed the resource-table-component branch from 6e36c25 to 5ce71c7 Compare July 21, 2024 20:33
Copy link

codecov bot commented Jul 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.46%. Comparing base (b203ffd) to head (026ed13).
Report is 21 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2972      +/-   ##
==========================================
+ Coverage   96.44%   96.46%   +0.01%     
==========================================
  Files         233      237       +4     
  Lines        6307     6392      +85     
==========================================
+ Hits         6083     6166      +83     
- Misses        224      226       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@kulturbande kulturbande force-pushed the resource-table-component branch from 5ce71c7 to 8ec6171 Compare July 21, 2024 21:17
app/views/alchemy/admin/resources/index.html.erb Outdated Show resolved Hide resolved
app/views/alchemy/admin/resources/index.html.erb Outdated Show resolved Hide resolved
app/views/alchemy/admin/resources/index.html.erb Outdated Show resolved Hide resolved
app/views/alchemy/admin/resources/index.html.erb Outdated Show resolved Hide resolved
app/components/alchemy/admin/resource/table.rb Outdated Show resolved Hide resolved
app/views/alchemy/admin/resources/index.html.erb Outdated Show resolved Hide resolved
app/components/alchemy/admin/resource/table.rb Outdated Show resolved Hide resolved
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch 11 times, most recently from d32458c to d25861d Compare July 24, 2024 08:26
@sascha-karnatz sascha-karnatz marked this pull request as ready for review July 24, 2024 08:27
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch from d25861d to 42b9b3c Compare July 24, 2024 08:54
@kulturbande kulturbande changed the title A Proposal: A resource table component Resource Table Component Jul 24, 2024
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch 3 times, most recently from 56582a5 to 0b3b09a Compare August 2, 2024 14:30
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch from 0b3b09a to 8deb5ee Compare August 19, 2024 08:03
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work 🍰

Some minor questions

app/assets/stylesheets/alchemy/admin/tables.scss Outdated Show resolved Hide resolved
app/components/alchemy/admin/resource/table.rb Outdated Show resolved Hide resolved
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch from 8deb5ee to 8688b13 Compare August 28, 2024 13:48
Add first try of a resource table. It is pretty raw and does not create the right output, but it is only a proposal.
Use the resource table - component for the default resource views.
Use the new table component for the language index - view and remove the old implementation.
Draw a check - icon if the value is boolean and is truthy. This was done previously in the view, but it is now easier to reuse these behavior in the table component.
The params - hash is at least in test environments not always set and it is better to use the default Rails methods to get the path to the controller.
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch from 8688b13 to 70ab4d7 Compare August 28, 2024 14:14
app/components/alchemy/admin/resource/header.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/resource/table.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/resource/table.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/resource/table.rb Outdated Show resolved Hide resolved
@tvdeyen tvdeyen added this to the 7.3 milestone Aug 28, 2024
The implementation is pretty verbose, because the table itself has a lot of extra functionalities. It is not possible to use the default delete and edit buttons, because of different redirect links in the button configuration.
Use the new table component also for the page table. This table also has a lot of custom logic inside, that makes the configuration a bit verbose.
Use the new table component to render the tags table. The CSS had to be adjusted to change the width of the table columns.
Move the Button configuration into an own component and use the many slot mechanic of ViewComponent to render each container for each button.
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch from 70ab4d7 to c1068ce Compare August 29, 2024 09:40
module Alchemy
module Admin
module Resource
# Renders a container for a button, which evaluate CanCanCan and shows a tooltip. This
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment seems to be wrong

Use more view components to simplify the table and make it more readable. This also improves the before_render - method in the table. The content - "hack" is now not necessary anymore, because the view_context isn't used anymore and all other view components are placed as slots in the table.
The button method was a bit misleading, because it was providing only a container for a button. It now uses the with_action method, which is provided by the ViewComponent slot.
The variable is representing the header text of the column and is way easier to understand than the name label.
@sascha-karnatz sascha-karnatz force-pushed the resource-table-component branch from c1068ce to 026ed13 Compare August 29, 2024 10:02
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, awesome work @kulturbande 🥳

@tvdeyen tvdeyen enabled auto-merge August 29, 2024 10:05
@tvdeyen tvdeyen merged commit 5415233 into AlchemyCMS:main Aug 29, 2024
35 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants