feat: predefined value

app/models/metadata_new_predefined_value.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+# Nueva interfaz
+class MetadataNewPredefinedValue < MetadataPredefinedValue; end

app/views/posts/attribute_ro/_new_predefined_value.haml

@@ -0,0 +1,3 @@
+%tr{ id: attribute }
+  %th= post_label_t(attribute, post: post)
+  %td{ dir: dir, lang: locale }= metadata.value

app/views/posts/attributes/_new_predefined_value.haml

@@ -0,0 +1,61 @@
+-#
+  Genera un listado de radios entre los que se puede elegir solo uno para
+  guardar.  Podemos elegir entre los artículos ya cargados o agregar uno
+  nuevo.
+
+  Al agregar uno nuevo, se abre un segundo modal que carga el formulario
+  correspondiente vía HTMX. El formulario tiene que cargarse por fuera
+  del formulario principal porque no se pueden anidar.
+
+:ruby
+  id = id_for(base, attribute)
+  name = "#{base}[#{attribute}]"
+  form_id = "form-#{Nanoid.generate}"
+  modal_id = "modal-#{Nanoid.generate}"
+  post_id = "post-#{Nanoid.generate}"
+  post_form_id = "post-form-#{Nanoid.generate}"
+  post_modal_id = "post-modal-#{Nanoid.generate}"
+  post_form_loaded_id = "post-loaded-#{Nanoid.generate}"
+  value_list_id = "#{id}_body"
+
+%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) } }
+  %template{ data: { target: 'array.placeholder' } }
+    .col.p-3{ 'aria-hidden': 'true' }
+      %span.placeholder.w-100
+
+  .form-group
+    = hidden_field_tag name, ''
+    .d-flex.align-items-center.justify-content-between
+      = label_tag id, post_label_t(attribute, post: post)
+      = 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.
+  .row.row-cols-3.row-cols-md-4.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+    - unless metadata.empty?
+      = render 'posts/new_array_value', metadata.values[metadata.value]
+
+  = 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: value_list_id }
+        - 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 == key), content: value, type: 'radio'
+
+    - content_for :"#{id}_footer" do
+      = 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'