Forms using yaaf #3290
Forms using yaaf #3290
Conversation
| @@ -85,6 +85,7 @@ gem "sneakers", "~> 2.11" # rabbitMQ background processing | |||
| gem "state_machines-activerecord" | |||
| gem "strip_attributes" | |||
| gem "turbo-rails", "~> 1.0" | |||
| gem "view_component", "~> 2.56.2" # https://github.com/github/view_component/issues/1390 | |||
| gem "view_component", "~> 3.5" | |||
There was a problem hiding this comment.
Surprise! We're using an old version of View Components, which causes all sorts of problems for form rendering.
| gem "whenever", require: false # Work around https://github.com/javan/whenever/issues/831 | ||
| gem "yaaf" # Form objects |
There was a problem hiding this comment.
A tiny gem that helps with form objects.
| @@ -0,0 +1,29 @@ | |||
| <div data-controller="<%= controller %>" data-<%= controller %>-wrapper-selector-value=".<%= controller %>-wrapper"> | |||
There was a problem hiding this comment.
Part of the strategy is to abstract nested forms. This provides a nested form component that handles creating the template, rendering the rows, providing the elements needed by the nested forms stimulus controller, and rendering the add another button.
| <%# Inserted elements will be injected before that target. %> | ||
| <div data-<%= controller %>-target="target"></div> | ||
|
|
||
| <% if add_another_button? %> |
There was a problem hiding this comment.
Allow a customized add another button to be provided, but provide default.
| @field = field | ||
| @clazz = clazz | ||
| @row = row | ||
| @ordered = ordered |
There was a problem hiding this comment.
This allows specifying that the nested forms are ordered (e.g, authors).
| end | ||
| end | ||
|
|
||
| def affiliations_forms |
There was a problem hiding this comment.
<model>_forms is used to provide a blank form when there are none. This is expected by the nested form component.
| weight: contributor.weight) | ||
| end | ||
|
|
||
| def self.reject_all_blank?(params) |
There was a problem hiding this comment.
For some form objects, some form attributes should be ignored when determining if a form is blank. (These attributes always have values.)
| @@ -0,0 +1,150 @@ | |||
| module Forms | |||
| class Work < Base | |||
There was a problem hiding this comment.
Work is kinda complicated because it needs to handle both the work and work version models. It also has multiple nested forms (authors, contributors, email). This is an example of where a parent model is used.
| @@ -49,5 +49,7 @@ class Application < Rails::Application | |||
| config.report_data = false | |||
| end | |||
| end | |||
|
|
|||
| config.view_component.capture_compatibility_patch_enabled = true | |||
There was a problem hiding this comment.
View Components struggles with forms. This patches some of those problems.
| "@hotwired/stimulus": "^3.2.1", | ||
| "stimulus-autocomplete": "^3.1.0" | ||
| "stimulus-autocomplete": "^3.1.0", | ||
| "stimulus-rails-nested-form": "^4.1.0" |
There was a problem hiding this comment.
Using stimulus-rails-nested-form instead of rolling our own.
|
For the purposes of this proof-of-concept, I implemented a wokes controller (that sits alongside the existing works controller). To create a new work (with the wokes controller): |
|
I only implemented part of the work form: However, it includes authors/contributors which requires double nesting (for affiliations), polymorphism (for authors vs contributors), and ordering (for authors), so, in theory, everything else is easy. |
justinlittman
force-pushed
the
form_spike2
branch
from
e9caa6b to
d141f34
Compare
Why was this change made? 🤔
How was this change tested? 🤨
⚡ ⚠ If this change involves consuming from or writing to another service (or shared file system), run integration test create_object_h2_spec.rb and/or test manually in [stage|qa] environment, in addition to specs. ⚡
Does your change introduce accessibility violations? 🩺
⚡ ⚠ Please ensure this change does not introduce accessibility violations (at the WCAG A or AA conformance levels); if it does, include a rationale. See the Infrastructure accessibility guide for more detail. ⚡