5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2025-03-14 23:18:16 +00:00

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

This commit is contained in:
f 2024-06-19 13:14:43 -03:00
commit 6a33fc7a03
No known key found for this signature in database
9 changed files with 61 additions and 40 deletions

View file

@ -90,6 +90,15 @@ $sizes: (
border: none; 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 // TODO: Encontrar la forma de generar esto desde los locales de Rails

View file

@ -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");
}
}
}

View file

@ -20,5 +20,20 @@ export default class extends Controller {
} else { } else {
this.requiredTarget.required = !Array.from(this.checkboxTargets).some(x => x.checked); 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;
}
} }
} }

View file

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

View file

@ -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')
})
})
})

View file

@ -33,7 +33,7 @@
- dir = t("locales.#{@locale}.dir") - dir = t("locales.#{@locale}.dir")
-# Comienza el formulario -# 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 -# Botones de guardado
= render 'posts/submit', site: site, post: post = render 'posts/submit', site: site, post: post

View file

@ -15,11 +15,12 @@
Si la lista es obligatoria, al menos uno de los ítems tiene que Si la lista es obligatoria, al menos uno de los ítems tiene que
estar activado. Logramos esto con un checkbox oculto que se marca estar activado. Logramos esto con un checkbox oculto que se marca
como obligatorio al validar el formulario. 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 .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' = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
-# Mostramos la lista de valores actuales. -# Mostramos la lista de valores actuales.

View file

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

View file

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