Merge branch 'issue-15068' into production.panel.sutty.nl

app/assets/stylesheets/application.scss

@@ -90,6 +90,15 @@ $sizes: (
     border: none;
   }
 
+  @include form-validation-state("valid", $cyan, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$white}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"));
+
+  .custom-checkbox {
+    .custom-control-input:checked ~ .custom-control-label {
+      &::after {
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$black}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+      }
+    }
+  }
 }
 
 // TODO: Encontrar la forma de generar esto desde los locales de Rails

app/javascript/controllers/form_validation_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("novalidate", true);
+
+    for (const input of this.element.elements) {
+      if (input.type === "button" || input.type === "submit") continue;
+
+      if (input.dataset.action) {
+        input.dataset.action = `${input.dataset.action} htmx:validation:validate->form-validation#submit`;
+      } else {
+        input.dataset.action = "htmx:validation:validate->form-validation#submit";
+      }
+    }
+  }
+
+  submit(event = undefined) {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    if (this.element.reportValidity()) {
+      this.element.classList.remove("was-validated");
+      this.element.submit();
+    } else {
+      this.element.classList.add("was-validated");
+    }
+  }
+}

app/javascript/controllers/required_checkbox_controller.js

@@ -20,5 +20,20 @@ export default class extends Controller {
     } else {
       this.requiredTarget.required = !Array.from(this.checkboxTargets).some(x => x.checked);
     }
+
+    for (const checkbox of this.checkboxTargets) {
+      if (checkbox === event.target) continue;
+
+      checkbox.required = !event.target.checked;
+    }
+  }
+
+  /*
+   * Si el checkbox es considerado 
+   */
+  invalid(event) {
+    for (const checkbox of this.checkboxTargets) {
+      checkbox.required = true;
+    }
   }
 }

app/javascript/etc/index.js

@@ -4,6 +4,5 @@ import './input-tag'
 import './prosemirror'
 import './timezone'
 import './turbolinks-anchors'
-import './validation'
 import './new_editor'
 import './htmx_abort'

app/javascript/etc/validation.js

@@ -1,34 +0,0 @@
-document.addEventListener('turbolinks:load', () => {
-  // Al enviar el formulario del artículo, aplicar la validación
-  // localmente y actualizar los comentarios para lectores de pantalla.
-  document.querySelectorAll('form').forEach(form => {
-    form.addEventListener('submit', event => {
-      const invalid_help = form.querySelectorAll('.invalid-help')
-      const sending_help = form.querySelectorAll('.sending-help')
-
-      invalid_help.forEach(i => i.classList.add('d-none'))
-      sending_help.forEach(i => i.classList.add('d-none'))
-
-      form.querySelectorAll('[aria-invalid="true"]').forEach(aria => {
-        aria.setAttribute('aria-invalid', false)
-        aria.setAttribute('aria-describedby', aria.parentElement.querySelector('.feedback').id)
-      })
-
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-
-        invalid_help.forEach(i => i.classList.remove('d-none'))
-
-        form.querySelectorAll(':invalid').forEach(invalid => {
-          invalid.setAttribute('aria-invalid', true)
-          invalid.setAttribute('aria-describedby', invalid.parentElement.querySelector('.invalid-feedback').id)
-        })
-      } else {
-        sending_help.forEach(i => i.classList.remove('d-none'))
-      }
-
-      form.classList.add('was-validated')
-    })
-  })
-})

app/views/posts/_form.haml

@@ -33,7 +33,7 @@
 - dir = t("locales.#{@locale}.dir")
 
 -# Comienza el formulario
-= form_tag url, method: method, class: "form post #{extra_class}", multipart: true, data: { controller: 'unsaved-changes', action: 'unsaved-changes#submit beforeunload@window->unsaved-changes#unsaved turbolinks:before-visit@window->unsaved-changes#unsavedTurbolinks', 'unsaved-changes-confirm-value': t('.confirm') } do
+= form_tag url, method: method, class: "form post #{extra_class}", multipart: true, data: { controller: 'unsaved-changes form-validation', action: 'unsaved-changes#submit form-validation#submit beforeunload@window->unsaved-changes#unsaved turbolinks:before-visit@window->unsaved-changes#unsavedTurbolinks', 'unsaved-changes-confirm-value': t('.confirm') } do
   -# Botones de guardado
   = render 'posts/submit', site: site, post: post
 

app/views/posts/attributes/_new_array.haml

@@ -15,11 +15,12 @@
       Si la lista es obligatoria, al menos uno de los ítems tiene que
       estar activado. Logramos esto con un checkbox oculto que se marca
       como obligatorio al validar el formulario.
-    - if metadata.required
-      %input.form-control{ type: 'checkbox', name: name, data: { target: 'required-checkbox.required' }, required: metadata.value.empty? }
-      .invalid-feedback Requerido!
     .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'
+        - if metadata.required
+          %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.
 

config/locales/en.yml

@@ -766,6 +766,7 @@ en:
         edit: "Edit"
       new_array:
         edit: "Edit"
+        required: "Please select at least one option."
       new_has_one:
         edit: "Edit"
       new_belongs_to:

config/locales/es.yml

@@ -774,6 +774,7 @@ es:
         edit: "Editar"
       new_array:
         edit: "Editar"
+        required: "Seleccioná al menos una opción."
       new_has_one:
         edit: "Editar"
       new_belongs_to: