From 338af3f0fecc8c8ced47445c26bbee0a6e82dd6e Mon Sep 17 00:00:00 2001 From: f Date: Thu, 4 Jul 2024 15:02:17 -0300 Subject: [PATCH] feat: array.item reutilizable #16718 --- .../controllers/array_controller.js | 2 +- app/views/posts/attributes/_new_array.haml | 2 +- .../posts/attributes/_new_belongs_to.haml | 2 +- .../_new_has_and_belongs_to_many.haml | 2 +- app/views/posts/attributes/_new_has_many.haml | 2 +- .../attributes/_new_predefined_array.haml | 2 +- .../attributes/_new_predefined_value.haml | 2 +- app/views/posts/new_array.haml | 2 +- app/views/posts/new_belongs_to_value.haml | 2 +- app/views/posts/new_has_many_value.haml | 2 +- app/views/targets/array/_item.haml | 21 +++++++++++++++++++ config/locales/en.yml | 6 ++++-- config/locales/es.yml | 6 ++++-- 13 files changed, 39 insertions(+), 14 deletions(-) create mode 100644 app/views/targets/array/_item.haml diff --git a/app/javascript/controllers/array_controller.js b/app/javascript/controllers/array_controller.js index db768ef3..fb74a673 100644 --- a/app/javascript/controllers/array_controller.js +++ b/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); diff --git a/app/views/posts/attributes/_new_array.haml b/app/views/posts/attributes/_new_array.haml index b8607627..989d734b 100644 --- a/app/views/posts/attributes/_new_array.haml +++ b/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 diff --git a/app/views/posts/attributes/_new_belongs_to.haml b/app/views/posts/attributes/_new_belongs_to.haml index a187e9ea..20b40140 100644 --- a/app/views/posts/attributes/_new_belongs_to.haml +++ b/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' -# diff --git a/app/views/posts/attributes/_new_has_and_belongs_to_many.haml b/app/views/posts/attributes/_new_has_and_belongs_to_many.haml index 5dd1039b..d70d9eb4 100644 --- a/app/views/posts/attributes/_new_has_and_belongs_to_many.haml +++ b/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' } -# diff --git a/app/views/posts/attributes/_new_has_many.haml b/app/views/posts/attributes/_new_has_many.haml index 805636da..601a7e38 100644 --- a/app/views/posts/attributes/_new_has_many.haml +++ b/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' } -# diff --git a/app/views/posts/attributes/_new_predefined_array.haml b/app/views/posts/attributes/_new_predefined_array.haml index 80a88098..feececc5 100644 --- a/app/views/posts/attributes/_new_predefined_array.haml +++ b/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 diff --git a/app/views/posts/attributes/_new_predefined_value.haml b/app/views/posts/attributes/_new_predefined_value.haml index 5158169d..ba52baf1 100644 --- a/app/views/posts/attributes/_new_predefined_value.haml +++ b/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 diff --git a/app/views/posts/new_array.haml b/app/views/posts/new_array.haml index 77d64b55..9d6e62ea 100644 --- a/app/views/posts/new_array.haml +++ b/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 diff --git a/app/views/posts/new_belongs_to_value.haml b/app/views/posts/new_belongs_to_value.haml index d1f9c3f9..cc66f680 100644 --- a/app/views/posts/new_belongs_to_value.haml +++ b/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' diff --git a/app/views/posts/new_has_many_value.haml b/app/views/posts/new_has_many_value.haml index b9846475..8479f3e4 100644 --- a/app/views/posts/new_has_many_value.haml +++ b/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 diff --git a/app/views/targets/array/_item.haml b/app/views/targets/array/_item.haml new file mode 100644 index 00000000..f89a42e5 --- /dev/null +++ b/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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 52f002e6..ce5a9e36 100644 --- a/config/locales/en.yml +++ b/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" diff --git a/config/locales/es.yml b/config/locales/es.yml index 8fe09758..416c3e1a 100644 --- a/config/locales/es.yml +++ b/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"