feat: campos obligatorios

app/views/posts/_required_checkbox.haml

@@ -0,0 +1,19 @@
+-#
+  Para el controlador required-checkbox necesitamos un checkbox oculto
+  que es obligatorio según si alguno de los checkboxes reales está
+  seleccionado o no.  Al ser obligatorio, va a tener feedback de
+  validación.  Sin embargo, como está oculto, no podemos mostrar el
+  mensaje de validación nativo del navegador.
+
+  @param :required [Boolean]
+  @param :name [String,Symbol]
+  @param :initial [Boolean]
+  @param :feedback [String]
+  @param :type [String]
+
+- if required
+  - local_assigns[:feedback] ||= t('.required')
+  - local_assigns[:type] ||= 'checkbox'
+
+  %input.form-control.d-none{ type: local_assigns[:type], name: name, data: { target: 'required-checkbox.required', action: 'invalid->required-checkbox#invalid' }, required: initial }
+  .invalid-feedback.mt-0= local_assigns[:feedback]

app/views/posts/attributes/_new_array.haml

@@ -4,8 +4,10 @@
   id = id_for(base, attribute)
   name = "#{base}[#{attribute}][]"
   form_id = random_id
+  controllers = %w[modal array enter]
+  controllers << 'required-checkbox' if metadata.required
 
-%div{ data: { controller: "modal array enter#{' required-checkbox' if metadata.required}", 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
+%div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
     .col.mb-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
@@ -18,9 +20,7 @@
     .d-flex.align-items-center.justify-content-between
       %div
         = label_tag id, post_label_t(attribute, post: post), class: 'mb-0'
-        - if metadata.required
+        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?
-          %input.form-control.d-none{ type: 'checkbox', name: name, data: { target: 'required-checkbox.required', action: 'invalid->required-checkbox#invalid' }, required: metadata.value.empty? }
-          .invalid-feedback.mt-0= t('.required')
       = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
   -# Mostramos la lista de valores actuales.
 

app/views/posts/attributes/_new_belongs_to.haml

@@ -17,8 +17,10 @@
   post_modal_id = random_id
   post_form_loaded_id = random_id
   value_list_id = random_id
+  controllers = %w[modal array]
+  controllers << 'required-checkbox' if metadata.required
 
-%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
+%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
@@ -26,7 +28,9 @@
   .form-group
     = hidden_field_tag name, ''
     .d-flex.align-items-center.justify-content-between
-      = label_tag id, post_label_t(attribute, post: post)
+      %div
+        = label_tag id, post_label_t(attribute, post: post), class: 'mb-0'
+        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?, type: 'radio'
       = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
 
   -# Mostramos la lista de valores actuales.

app/views/posts/attributes/_new_has_and_belongs_to_many.haml

@@ -17,8 +17,10 @@
   post_modal_id = random_id
   post_form_loaded_id = random_id
   value_list_id = random_id
+  controllers = %w[modal array]
+  controllers << 'required-checkbox' if metadata.required
 
-%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
+%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
@@ -26,8 +28,11 @@
   .form-group
     = hidden_field_tag name, ''
     .d-flex.align-items-center.justify-content-between
+      %div
         = label_tag id, post_label_t(attribute, post: post)
+        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?
       = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
+
   -# Mostramos la lista de valores actuales.
 
     Al aceptar el modal, se vacía el listado y se completa en base a
@@ -55,7 +60,7 @@
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_has_many.haml

@@ -17,8 +17,10 @@
   post_modal_id = random_id
   post_form_loaded_id = random_id
   value_list_id = random_id
+  controllers = %w[modal array]
+  controllers << 'required-checkbox' if metadata.required
 
-%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
+%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
@@ -26,8 +28,11 @@
   .form-group
     = hidden_field_tag name, ''
     .d-flex.align-items-center.justify-content-between
+      %div
         = label_tag id, post_label_t(attribute, post: post)
+        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?
       = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
+
   -# Mostramos la lista de valores actuales.
 
     Al aceptar el modal, se vacía el listado y se completa en base a
@@ -55,7 +60,7 @@
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_predefined_array.haml

@@ -6,8 +6,10 @@
   id = id_for(base, attribute)
   name = "#{base}[#{attribute}][]"
   form_id = random_id
+  controllers = %w[modal array]
+  controllers << 'required-checkbox' if metadata.required
 
-%div{ data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
+%div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
     .col.mb-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
@@ -15,7 +17,9 @@
   .form-group
     = hidden_field_tag name, ''
     .d-flex.align-items-center.justify-content-between
+      %div
         = label_tag id, post_label_t(attribute, post: post)
+        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?
       = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
 
   -# Mostramos la lista de valores actuales.
@@ -44,7 +48,7 @@
         -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
         - metadata.values.each_pair do |value, key|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
 
     - content_for :"#{id}_footer" do
       -# Alinear los botones a la derecha

app/views/posts/attributes/_new_predefined_value.haml

@@ -17,8 +17,10 @@
   post_modal_id = random_id
   post_form_loaded_id = random_id
   value_list_id = random_id
+  controllers = %w[modal array]
+  controllers << 'required-checkbox' if metadata.required
 
-%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
+%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
@@ -26,7 +28,9 @@
   .form-group
     = hidden_field_tag name, ''
     .d-flex.align-items-center.justify-content-between
+      %div
         = label_tag id, post_label_t(attribute, post: post)
+        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?, type: 'radio'
       = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
 
   -# Mostramos la lista de valores actuales.