From 9648bc135de314064cd37732c58a4412a6f4ad41 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Tue, 28 May 2024 18:18:29 -0300
Subject: [PATCH] feat: predefined value

---
 app/models/metadata_new_predefined_value.rb   |  4 ++
 .../attribute_ro/_new_predefined_value.haml   |  3 +
 .../attributes/_new_predefined_value.haml     | 61 +++++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 app/models/metadata_new_predefined_value.rb
 create mode 100644 app/views/posts/attribute_ro/_new_predefined_value.haml
 create mode 100644 app/views/posts/attributes/_new_predefined_value.haml

diff --git a/app/models/metadata_new_predefined_value.rb b/app/models/metadata_new_predefined_value.rb
new file mode 100644
index 00000000..ff839759
--- /dev/null
+++ b/app/models/metadata_new_predefined_value.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+# Nueva interfaz
+class MetadataNewPredefinedValue < MetadataPredefinedValue; end
diff --git a/app/views/posts/attribute_ro/_new_predefined_value.haml b/app/views/posts/attribute_ro/_new_predefined_value.haml
new file mode 100644
index 00000000..67642e2c
--- /dev/null
+++ b/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
diff --git a/app/views/posts/attributes/_new_predefined_value.haml b/app/views/posts/attributes/_new_predefined_value.haml
new file mode 100644
index 00000000..9975cd11
--- /dev/null
+++ b/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'