diff --git a/app/models/metadata_new_predefined_array.rb b/app/models/metadata_new_predefined_array.rb new file mode 100644 index 00000000..8c15155f --- /dev/null +++ b/app/models/metadata_new_predefined_array.rb @@ -0,0 +1,4 @@ +# frozen_string_literal: true + +# Nueva interfaz para arrays predefinidos +class MetadataNewPredefinedArray < MetadataPredefinedArray; end diff --git a/app/views/posts/attribute_ro/_new_predefined_array.haml b/app/views/posts/attribute_ro/_new_predefined_array.haml new file mode 100644 index 00000000..88a82626 --- /dev/null +++ b/app/views/posts/attribute_ro/_new_predefined_array.haml @@ -0,0 +1,5 @@ +%tr{ id: attribute } + %th= post_label_t(attribute, post: post) + %td + - metadata.value.each do |v| + %span.badge.badge-primary{ dir: dir, lang: locale }= metadata.values.key v diff --git a/app/views/posts/attributes/_new_predefined_array.haml b/app/views/posts/attributes/_new_predefined_array.haml new file mode 100644 index 00000000..5203c12b --- /dev/null +++ b/app/views/posts/attributes/_new_predefined_array.haml @@ -0,0 +1,48 @@ +-# + Genera un listado de checkboxes entre los que se puede elegir para + guardar, pero no se pueden agregar nuevos. + +:ruby + id = "#{base}_#{attribute}" + name = "#{base}[#{attribute}][]" + form_id = "form-#{Nanoid.generate}" + +%div{ data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } } + .form-group + = hidden_field_tag name, '' + = label_tag id, post_label_t(attribute, post: post) + -# 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. + .row.row-cols-1.row-cols-md-2{ data: { target: 'array.current' } } + - metadata.values.slice(*metadata.value).each_key do |value| + = render 'posts/new_array_value', value: value + + = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show' + + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] 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: { target: 'array.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| + .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } } + = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: key, checked: metadata.value.include?(key), content: value + + - 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' diff --git a/config/locales/en.yml b/config/locales/en.yml index 88b1db19..375a52b5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -724,6 +724,11 @@ en: new_array: remove: "Remove" attributes: + new_predefined_array: + edit: "Edit" + filter: "Start typing to filter..." + accept: "Accept" + cancel: "Cancel" new_array: edit: "Edit" filter: "Start typing to filter..." diff --git a/config/locales/es.yml b/config/locales/es.yml index 4945c19f..a7ae423b 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -732,6 +732,11 @@ es: new_array: remove: "Eliminar" attributes: + new_predefined_array: + edit: "Editar" + filter: "Empezá a escribir para filtrar..." + accept: "Aceptar" + cancel: "Cancelar" new_array: edit: "Editar" filter: "Empezá a escribir para filtrar..."