feat: array.item reutilizable #16718

app/javascript/controllers/array_controller.js

@@ -108,7 +108,7 @@ export default class extends Controller {
       if (!this.isChecked(itemTarget)) continue;
 
       this.originalValue.push(itemTarget.dataset.value);
-      this.newArrayValueURL.searchParams.set("value", itemTarget.dataset.value);
+      this.newArrayValueURL.searchParams.set("value", itemTarget.dataset?.humanValue || itemTarget.dataset?.value);
 
       const placeholder = this.placeholderTarget.content.firstElementChild.cloneNode(true);
 

app/views/posts/attributes/_new_array.haml

@@ -48,7 +48,7 @@
       .form-group.mb-0{ id: "#{id}_body" }
         -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba.
         - metadata.values.each do |value|
-          .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
+          = render 'targets/array/item', value: value, class: 'mb-2' do
             = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
 
     - content_for :"#{id}_footer" do

app/views/posts/attributes/_new_belongs_to.haml

@@ -58,7 +58,7 @@
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
-          .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
+          = render 'targets/array/item', value: uuid, 'human-value': value, class: 'mb-2' do
             = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, type: 'radio'
 
     -#

app/views/posts/attributes/_new_has_and_belongs_to_many.haml

@@ -59,7 +59,7 @@
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
-          .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
+          = render 'targets/array/item', value: uuid, 'human-value': value, class: 'mb-2' do
             = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
 
     -#

app/views/posts/attributes/_new_has_many.haml

@@ -59,7 +59,7 @@
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
-          .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
+          = render 'targets/array/item', value: uuid, 'human-value': value, class: 'mb-2' do
             = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
 
     -#

app/views/posts/attributes/_new_predefined_array.haml

@@ -47,7 +47,7 @@
       .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: 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', target: 'required-checkbox.checkbox' }
 
     - content_for :"#{id}_footer" do

app/views/posts/attributes/_new_predefined_value.haml

@@ -57,7 +57,7 @@
     - 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 'targets/array/item', value: value, class: 'mb-2' do
             = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: (metadata.value == key), content: value, type: 'radio'
 
     - content_for :"#{id}_footer" do

app/views/posts/new_array.haml

@@ -1,6 +1,6 @@
 - item_id = random_id
 
-.mb-2{ id: item_id, data: { target: 'array.item', 'searchable-value': @value.remove_diacritics.downcase, value: @value } }
+= render 'targets/array/item', value: @value, class: 'mb-2', id: item_id do
   .d-flex.flex-row.flex-wrap
     .flex-grow-1
       = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @value, checked: true, content: @value

app/views/posts/new_belongs_to_value.haml

@@ -1,2 +1,2 @@
-.mb-2{ data: { target: 'array.item', 'searchable-value': @value.remove_diacritics.downcase, value: @uuid } }
+= render 'targets/array/item', value: @uuid, 'human-value': @value, class: 'mb-2' do
   = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @uuid, checked: true, content: @value, type: 'radio'

app/views/posts/new_has_many_value.haml

@@ -1,2 +1,2 @@
-.mb-2{ data: { target: 'array.item', 'searchable-value': @value.remove_diacritics.downcase, value: @uuid } }
+= render 'targets/array/item', value: @uuid, 'human-value': @value, class: 'mb-2' do
   = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @uuid, checked: true, content: @value

app/views/targets/array/_item.haml

@@ -0,0 +1,21 @@
+-#
+  Un item de un array.
+
+  Además de los valores por defecto, se pueden pasar otros atributos
+  para el div del ítem.
+
+  @param :value [String] El valor (requerido)
+  @param :human-value [String] El valor legible por humanes (opcional)
+  @param :searchable-value [String] El valor para usar en el filtro (opcional)
+
+:ruby
+  local_assigns[:'human-value'] ||= value
+  local_assigns[:'searchable-value'] ||= local_assigns[:'human-value'].remove_diacritics.downcase
+  local_assigns.delete(:value)
+
+  data   = local_assigns.delete(:data)
+  data ||= {}
+  data[:'human-value'] = local_assigns.delete(:'human-value')
+  data[:'searchable-value'] = local_assigns.delete(:'searchable-value')
+
+%div{ **local_assigns, data: { target: 'array.item', value: value, **data } }= yield

config/locales/en.yml

@@ -722,8 +722,6 @@ en:
     validation:
       invalid: "Some fields need attention! Please search for the fields marked as not valid."
       submitting: "Saving changes, please wait..."
-    new_array:
-      remove: "Remove"
     attributes:
       add: Add
       title:
@@ -967,3 +965,7 @@ en:
       edit: "Edit"
     alert:
       saved: "Changes were saved!"
+  targets:
+    array:
+      item:
+        remove: "Remove"

config/locales/es.yml

@@ -730,8 +730,6 @@ es:
     validation:
       invalid: "¡Te falta completar algunos campos! Busca los que estén marcados como no válidos."
       submitting: "Guardando, por favor espera..."
-    new_array:
-      remove: "Eliminar"
     attributes:
       add: Agregar
       title:
@@ -977,3 +975,7 @@ es:
       edit: "Editar"
     alert:
       saved: "¡Cambios guardados!"
+  targets:
+    array:
+      item:
+        remove: "Eliminar"