-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
[Admin] Create new Tax Categories #5674
[Admin] Create new Tax Categories #5674
Conversation
a1f978a
to
8f8519f
Compare
As discussed during the core team meeting, I'd give turbo frame a go for this modal, which I have the feeling can be simplified. |
82097d5
to
d863b25
Compare
@kennyadsl I've just updated the PR and its description, video included. It's now leveraging Turbo frames and Turbo streams refreshes. Spec failures are related to the latest release of the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️ wonderful execution, seems straightforward. Thanks, Andrea!
I tracked down the money gem issue to this PR. The change is included in 6.18.0, but not in 6.17.0, both released today 🤷 . |
e266d89
to
efc79a7
Compare
We need to whitelist the ransackable attributes used on the new admin tax categories page, or filtering won't work.
The former ones were not correct, probably just a leftover from a cut and paste.
The component now behaves like a standard dialog: * closes on the current page, rather than redirecting elsewhere; * the close button is a standard dialog closing form; * the `open` attribute is removed, thus allowing ESC keypress to close the modal, and creating a focus trap when open. The previous behavior (i.e. have the modal open by default) is achieved via the new Stimulus controller, which on connect opens the dialog via JS.
This way we can inject arbitrary turbo frames into pages rendered via this component.
The correct method name is `page_actions`, for this reason it was previously not showing. Also, href is changed to a new route from the new admin.
The new version adds cool new features such as page morphing and refreshes. Specifically, we're going to use turbo stream refreshes in a later commit.
The `new` action will render a modal dialog above a list of tax categories, like the `index` action. For this reason, the common controller code is extracted to a private method.
The component renders: 1) a list of tax categories in the background; 2) a dialog modal with the form for creating a new resource. The modal is wrapped into a turbo frame tag, so it can be enclosed in other pages (i.e. the tax categories index) asynchronously.
The `#create` controller action allows the creation of a new tax category. Failed creation re-renders the form with errors within the turbo frame tag, while successful creation is handled via a turbo stream refresh tag that reloads the page. Scroll position is preserved thanks to the custom Turbo meta tag that enables the feature globally on the new admin. Integration specs are added to test the complete feature.
efc79a7
to
5584f93
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing work! 🌟
|
||
export default class extends Controller { | ||
connect() { | ||
this.element.showModal(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
;
semicolons can be omitted.
This PR migrates the creation of new tax categories to the new admin interface.
The new category form is rendered via a modal dialog, which is added to the categories list page via turbo frame. Successful creation leads to a turbo stream page refresh, which updates the category list preserving the query params and the scroll position, for a consistent UX. To enable all the latest turbo features,
turbo-rails
has been updated to version 2.The PR revisits the way our modal component works to make it act like a standard modal. We probably want to revisit existing usage of the modal component to make it compliant with the new behavior and take advantage of Turbo features following the path shown in this PR.
Additionally, the PR solved an issue with filtering on the tax categories list page, which was not functioning correctly.
Please look at the attached video for a visual demo of the fixes and the new feature.
Screen.Recording.2024-03-05.at.09.55.50.mov
Checklist