Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hungle00/rondo_form
Same as Cocoon, but using StimulusJS https://rubygems.org/gems/rondo_form
https://github.com/hungle00/rondo_form
rails stimulusjs
Last synced: 5 days ago
JSON representation
Same as Cocoon, but using StimulusJS https://rubygems.org/gems/rondo_form
- Host: GitHub
- URL: https://github.com/hungle00/rondo_form
- Owner: hungle00
- License: mit
- Created: 2023-06-13T07:28:08.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-06T03:57:30.000Z (28 days ago)
- Last Synced: 2024-12-21T15:06:19.383Z (12 days ago)
- Topics: rails, stimulusjs
- Language: Ruby
- Homepage:
- Size: 35.2 KB
- Stars: 65
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# RondoForm
Handle dynamic nested forms, same as Cocoon, but using StimulusJS
## Installation
Install the gem and add to the application's Gemfile by executing:
$ bundle add rondo_form
Or inside the Gemfile add the following
$ gem 'rondo_form', '~> 1.0'
Run the installation task:
$ rails g rondo_form:install
## Usage
For example, you have `Project` model, which has `has_many` relationship with `Task` model:
```
rails g scaffold Project name:string description:string
rails g model Task description:string done:boolean project:belongs_to
```
You need to add `accepts_nested_attributes_for` to `Project` model:
```rb
class Project < ApplicationRecord
has_many :tasks, dependent: :destroy
accepts_nested_attributes_for :tasks, reject_if: :all_blank, allow_destroy: true
end
```
### Sample with SimpleForm
The RondoForm gem adds two helper functions: `link_to_add_association` and `link_to_remove_association`.
More details about two view helpers [here](#view-helpers).
The example below illustrates the way to use it.
In your `projects/_form` partial:
``` erb
<%= simple_form_for(@project) do |f| %>
<%= f.input :name %>
<%= f.input :description %>
Tasks
<%= f.simple_fields_for :tasks do |task| %>
<%= render "task_fields", f: task %>
<% end %>
<%= link_to_add_association "Add Task", f, :tasks %>
<%= f.button :submit %>
<% end %>
```
In your `_task_fields` partial:
``` erb
<%= f.input :description %>
<%= f.input :done, as: :boolean %>
<%= link_to_remove_association "Remove Task", f %>
```
#### Controller
Using projects example, in your controller ProjectsController, your params method should look like:
``` ruby
def project_params
params.require(:project).permit(:name, :description, tasks_attributes: [:description, :done, :_destroy, :id])
end
```
params `:_destroy` allow to delete tasks and `:id` allow to update tasks on update action
### Demo
View details implement for manual Rails form at this PR [dynamic nested form with rondo_form](https://github.com/hungle00/rails-opus/pull/15/files)
## View helpers
#### `link_to_add_association(name, form_builder, render_options, html_options, &block)`
### Signatures
```ruby
link_to_add_association(name, form_builder, render_options, html_options)
# Link text is passed in as name
link_to_add_association(form_builder, render_options, html_options, &block)
# Link text is passed in as a block
```
### Options
- `render_options: hash containing options for Rails' render helper` - This is passed to the Rails `render` helper to
provide the options that are desired when rendering your association fields. If no special requirements are needed,
can be passed as `nil` or and empty hash `{}`.
- `html_options: hash containing options for Rails' link_to helper` - This is passed to the Rails `link_to` helper to
provide the options that are desired when rendering your association fields. If no special requirements are needed,
can be passed as `nil` or and empty hash `{}`.
#### `link_to_remove_association(name, form_builder, html_options, &block)`
### Signatures
```ruby
link_to_remove_association(name, form_builder, html_options)
# Link text is passed in as name
link_to_remove_association(form_builder, html_options, &block)
# Link text is passed in as a block
```
### Options
- `html_options: hash containing options for Rails' link_to helper` - This is passed to the Rails `link_to` helper to
provide the options that are desired when rendering your association fields. If no special requirements are needed,
can be passed as `nil` or and empty hash `{}`.
## Stimulus convention
- I named Stimulus controller `nested-rondo`, feel free to change the name of `data-controller` to match your purpose
- `data-nested-rondo-target="fieldContain"` must be added to an element that wraps all nested fields, the new field will be appended to this element.
- `data-nested-rondo-field-class-value` is used to detect the element that needs to be removed. Its value must match the class name of an element that wraps the partial. If you do not declare it, it will default remove the closest parent element.
- The partial added when clicking `link_to_add_association` is named for the association name with the `_fields` suffix. In this example, the partial is named `task_fields`. You can change the partial name by passing the `partial_name` option to `link_to_add_association`.
**Import Maps**
- If you use `importmap`. it auto loads eagerly all controllers defined in the import map under `controllers/**/*_controller`,
so you maybe don't need under code.
```js
import NestedRondoController from "./nested_rondo_controller"
lazyLoadControllersFrom("nested-rondo", NestedRondoController)
```
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/hungle00/rondo_form.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).