mirror of
https://0xacab.org/sutty/sutty
synced 2024-11-26 08:06:23 +00:00
57 lines
3 KiB
Text
57 lines
3 KiB
Text
-#
|
|
Genera un listado de checkboxes entre los que se puede elegir para
|
|
guardar, pero no se pueden agregar nuevos.
|
|
|
|
:ruby
|
|
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: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
|
|
%template{ data: { 'array-target': 'placeholder' } }
|
|
.col.mb-3{ 'aria-hidden': 'true' }
|
|
%span.placeholder.w-100
|
|
|
|
.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
|
|
renderizaciones con HTMX. Para poder hacer eso, tenemos que poder
|
|
acceder a todos los items dentro del modal (como array.item) y
|
|
enviar el valor al endpoint que devuelve uno por uno. Esto lo
|
|
tenemos disponible en Stimulus, pero queremos usar HTMX o técnica
|
|
similar para poder renderizar del lado del servidor.
|
|
|
|
Para poder cancelar, mantenemos el estado original y desactivamos
|
|
o activamos los ítemes según estén incluidos en esa lista o no.
|
|
%ul.placeholder-glow{ data: { 'array-target': 'current' } }
|
|
- metadata.values.invert.slice(*metadata.value).each_value do |value|
|
|
= render 'posts/new_array_value', value: value
|
|
|
|
= render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
|
|
- content_for :"#{id}_header" do
|
|
.form-group.flex-grow-1.mb-0
|
|
= label_tag id, post_label_t(attribute, post: post)
|
|
%input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
|
|
|
|
- content_for :"#{id}_body" do
|
|
.form-group.mb-0{ id: "#{id}_body" }
|
|
-# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
|
|
- metadata.values.each_pair do |value, key|
|
|
= render 'targets/array/item', class: 'mb-2', value: key, 'human-value': value do
|
|
= render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }
|
|
|
|
- content_for :"#{id}_footer" do
|
|
-# Alinear los botones a la derecha
|
|
.flex-grow-1
|
|
= render 'bootstrap/btn', content: t('.accept'), action: 'array#accept modal#hide', class: 'm-0 mr-1'
|
|
= render 'bootstrap/btn', content: t('.cancel'), action: 'array#cancel modal#hide', class: 'm-0'
|