From 1e413e57f5f5a9271bbf43a647672747db59ec9e Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Fri, 17 May 2024 17:47:18 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20relaci=C3=B3n=20de=201:n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/models/metadata_new_has_many.rb           |  4 ++
 .../posts/attribute_ro/_new_has_many.haml     |  6 +++
 app/views/posts/attributes/_new_has_many.haml | 44 +++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 app/models/metadata_new_has_many.rb
 create mode 100644 app/views/posts/attribute_ro/_new_has_many.haml
 create mode 100644 app/views/posts/attributes/_new_has_many.haml

diff --git a/app/models/metadata_new_has_many.rb b/app/models/metadata_new_has_many.rb
new file mode 100644
index 00000000..3bf37d45
--- /dev/null
+++ b/app/models/metadata_new_has_many.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+# Interfaz nueva para uno a muchos
+class MetadataNewHasMany < MetadataHasMany; end
diff --git a/app/views/posts/attribute_ro/_new_has_many.haml b/app/views/posts/attribute_ro/_new_has_many.haml
new file mode 100644
index 00000000..d6b51a7a
--- /dev/null
+++ b/app/views/posts/attribute_ro/_new_has_many.haml
@@ -0,0 +1,6 @@
+%tr{ id: attribute }
+  %th= post_label_t(attribute, post: post)
+  %td
+    %ul{ dir: dir, lang: locale }
+      - metadata.has_many.each do |p|
+        %li= link_to p.title.value, site_post_path(site, p.id)
diff --git a/app/views/posts/attributes/_new_has_many.haml b/app/views/posts/attributes/_new_has_many.haml
new file mode 100644
index 00000000..9477998d
--- /dev/null
+++ b/app/views/posts/attributes/_new_has_many.haml
@@ -0,0 +1,44 @@
+-#
+  Genera un listado de checkboxes entre los que se puede elegir para guardar
+: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 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" }
+        - 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
+      .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'