Manejo de Formularios Anidados con Cocoon en Rails

Contenido del curso

Introducción

Entorno de desarollo

Nuestra primera aplicación

Proyecto del curso: primeros pasos

Proyecto del curso: usuarios

Proyecto del curso: interacciones

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:25

Manejo de Formularios Anidados con Cocoon en Rails

Curso de Introducción a Ruby on Rails

Clase 26 de 36

Clase 26 / 36

Recursos

¿Cómo manejar formularios anidados en HTML con múltiples modelos?

Manejar formularios anidados en proyectos HTML puede ser un desafío, especialmente cuando intervienen más de un modelo. Para facilitar este proceso, existe una herramienta llamada Cocoon, que es particularmente útil en entornos Rails. En esta clase, aprenderemos a integrar dos modelos: Task y Participant, utilizando esta potente gema.

¿Cómo instalamos Cocoon?

Para comenzar a usar Cocoon, el primer paso es instalarla en tu proyecto. Este procedimiento involucra tanto Ruby como JavaScript, debido a una dependencia necesaria.

Añadir Cocoon al Gemfile: Ubica el archivo Gemfile en tu editor y en alguna línea, como por ejemplo la 29, agrega gem 'cocoon'.
Instalar la gema: Navega a la consola de comandos y ejecuta:
```
bundle install
```
o su alias bi.
Dependencias de JavaScript: Cocoon requiere algunas dependencias, principalmente relacionadas con jQuery. Aunque Cocoon aún no está completamente migrada a la nueva versión de Rails, se puede utilizar una versión específica desde un commit en GitHub.

Configurar Webpack: Modifica en tu archivo application.json, ubicado en app/javascript/packs/application.js, usando import para incluir Cocoon. Configura jQuery y otras dependencias en environment.js dentro de la carpeta config/webpack.

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default']
}));

module.exports = environment;

¿Cómo enlazamos participantes con tareas?

Una vez configurado Cocoon, es momento de enlazar nuestro modelo Participant al formulario de tareas mediante un formulario simple anidado.

Configuración del formulario: Dentro de la carpeta app/views/tasks, ubica el formulario al que quieres asociar los participantes.

Uso de Simple Fields Form: Este método del SimpleForm permite asociar un modelo anidado.

= f.simple_fields_for :participants do |p|
  .participant-fields
    = render 'participant_fields', f: p

Creación de un parcial: Este parcial alojará la configuración del modelo Participant, y se denominará _participant_fields.
```
.nested-fields
  = f.input :user_id, collection: User.all - [current_user]
  = f.input :role
```

¿Cómo ajustamos el modelo Participant?

Es crucial configurar correctamente el modelo Participant para que la asociación y los roles se manejen adecuadamente.

Referencias y modelos: Asegúrate que el modelo Participant tiene asociaciones establecidas apropiadamente con las tareas y usuarios.

Rol de los participantes: Para determinar roles, el modelo Participant puede tener un atributo entero que especifique si un usuario es responsable o seguidor.

def role_description
  case role
  when 1
    'Responsable'
  when 2
    'Seguidor'
  else
    'Sin definir'
  end
end

Evitar que el CurrentUser aparezca en el listado: Utiliza operaciones con arrays para excluir al usuario actual de los selects.

Incorporar Cocoon para manejar formularios anidados en Rails es una habilidad crucial que simplifica el desarrollo al permitir asociaciones complejas entre modelos. Nunca dudes en explorar nuevas configuraciones y sigue practicando para dominar estas herramientas, con lo cual enriquecerás tus proyectos y habilidades.

braison crece

Hace 4 años

Posible solución para nested forms en Rails 7 utilizando esbuild como bundler de JS

No he sido capaz de utilizar cocoon con rails 7 (aunque seguramente sea posible, he acabado desistiendo).

En su lugar he decidido utilizar la gema vanila-nested https://github.com/arielj/vanilla-nested.

La cual es una alternativa al uso de cocoon sin necesidad de utilizar jQuery

Pasos a seguir:

bundle add vanilla-nested
yarn add vanilla-nested
Añadir la siguiente línea al archivo app/assets/config/manifest.js //= require vanilla_nested
Añadir la siguiente línea al archivo app/javascript/application.js

import "vanilla-nested"

Permitir atributos anidados en el modelo Task

accepts_nested_attributes_for :participating_users, reject_if: :all_blank, allow_destroy: true

Asignar los valores relaccionales a cada modelo, como indica Johan en el video (has_many, belongs_to, etc), y filtrar los parámetros permitidos en el controlador tasks_controller, como se muestra en el video.
app/views/tasks/_form.html.haml:

-# frozen_string_literal: true
= simple_form_for(@task) do |form|
  = form.error_notification
  = form.error_notification message: form.object.errors[:base].to_sentence if form.object.errors[:base].present?

  .form-inputs
    = form.input :name, label: t('.name')
    = form.input :description, label: t('.description')
    = form.input :due_date, label: t('.due_date')
    = form.association :category, label: t('.category')
    = link_to_add_nested(form , :participating_users, '#participants', partial:'participating_user_fields', link_text:"Agregar")
    #participants 
    
  .form-actions
    = form.button :submit, t('common.submit')

Si nos fijamos en el código, veremos que estamos utilizando un método propio de la gema vanilla-nested: link_to_add_nested.

El cuál recibe varios parámetros (ampliables si se quiere personalizar o configurar):

form -> el constructor del formulario padre (que aplica a @task)
:participating_users -> nombre de la relación de User con Task.

# relacion del modelo Task. Fíjate en el nombre de la relacion
has_many :participating_users, class_name: 'Participant'

#participants -> El id del DOM que será afectado por el click del usuario en "Agregar"
partial: 'participating_user_fields' -> El parcial que se agregará cada vez que el usuario haga click en "Agregar" y que contiene los campos del formulario asociados al participante.
link_text:"Agergar" -> El texto del link

_participating_user_fields.html.haml:

.nested-fields
  = form.input :user_id, as: :select, collection: User.all.map {|u| [u.email, u.id]}, label: t('.user')
  = form.input :role
  = link_to_remove_nested form

Los campos anidados se irán añadiendo al div con id participants que hemos definido en el formulario.

Comentarios (19)19 comentarios

Saul Mendoza

Hace 6 años

Luis Enrique Rodriguez Diaz

Juan Pablo Grisales Quintero

Hace 3 años

Piero Nolte

Joaquín Arturo Beltrán López

Hace 5 años

Edwin Stiven Galviz Quimbayo

Julián Berrío

David Campos

Glorismar Hernández

Kevin Gomez

Hace 2 años

Fernando Mejia Laguna

José Gersain Osorio Morales

Johan Tique

Profesor

Diego Alexander Gomez Chavarria

Eduardo Rafael Romero Bernal

Adam Rebolledo

Nestor Jose Saad Gutierrez

Emerson Espinoza Aguirre

Martín Fernando López Moguel

giordano díaz merino

Héctor Tello

Jonathan MG

Juan Sebastian Herrera Maldonado

josue rodrigo fierro morfin

Sebastian Spadea

Introducción

Curso Completo de Ruby on Rails: Introducción y Proyecto Práctico

Historia y Evolución de Ruby y Ruby on Rails

Entorno de desarollo

Módulos Esenciales de Ruby on Rails

Instalación de Ruby on Rails en Ubuntu 20.04 LTS

Instalación de Ruby on Rails en macOS y Windows 10

Nuestra primera aplicación

Arquitectura MVC y Flujo de Peticiones en Rails

Creación y Configuración de Aplicaciones Web con Ruby on Rails

Creación de Rutas y Controladores en Ruby on Rails

Creación de Modelos y Migraciones en Ruby on Rails

Gestión de Credenciales Seguras en Ruby on Rails

Gestión de Assets y Layouts en Rails: Asset Pipeline y Webpacker

Uso del Generador Scaffold en Ruby on Rails

Migraciones y Consistencia de Modelos en Rails

Migración de Plantillas ERB a Haml en Ruby on Rails

Creación de Formularios Dinámicos con SimpleForm y Haml en Rails

Internacionalización de Aplicaciones Rails con i18n y i18n-tasks

Debugging en Ruby on Rails: Uso de Bybug y Pry

Proyecto del curso: primeros pasos

Desarrollo de un Sistema de Gestión de Tareas con Ruby on Rails

Diseño de Modelos de Datos para un Organizador de Tareas

Creación de Scaffolds y Modelos en Rails con SimpleFrame y Bootstrap

Internacionalización de Formularios en Rails con i18n y SimpleForm

Validaciones de Modelos en Ruby on Rails

Proyecto del curso: usuarios

Autenticación de Usuarios con Devise en Rails

Migración de Llave Foránea: Enlazar Tarea con Usuario en Rails

Integración Visual y Estructural en Rails: Usuario, Tarea y Participante

Manejo de Formularios Anidados con Cocoon en Rails

Formularios Dinámicos en Rails con Cocoon y Validaciones de Unicidad

Permisos y Accesos con KanKan en Aplicaciones Rails

Proyecto del curso: interacciones

Callbacks en Controladores y Modelos en Rails

Automatización de Inserción de Datos en Rails con db:seed

Envío de Correos con ActionMailer en Rails

Creación de notas dinámicas en tareas con Ruby on Rails

Inserciones Dinámicas de Notas con AJAX y SJR en Rails

Mejora de Interfaces con Bootstrap en Aplicaciones Rails

Cierre

Despliegue de Aplicaciones en Heroku con Ruby on Rails

Desarrollo de Aplicaciones Web con Ruby on Rails

Manejo de Formularios Anidados con Cocoon en Rails