diff --git a/app/views/posts/_required_checkbox.haml b/app/views/posts/_required_checkbox.haml new file mode 100644 index 00000000..22f186a6 --- /dev/null +++ b/app/views/posts/_required_checkbox.haml @@ -0,0 +1,19 @@ +-# + Para el controlador required-checkbox necesitamos un checkbox oculto + que es obligatorio según si alguno de los checkboxes reales está + seleccionado o no. Al ser obligatorio, va a tener feedback de + validación. Sin embargo, como está oculto, no podemos mostrar el + mensaje de validación nativo del navegador. + + @param :required [Boolean] + @param :name [String,Symbol] + @param :initial [Boolean] + @param :feedback [String] + @param :type [String] + +- if required + - local_assigns[:feedback] ||= t('.required') + - local_assigns[:type] ||= 'checkbox' + + %input.form-control.d-none{ type: local_assigns[:type], name: name, data: { target: 'required-checkbox.required', action: 'invalid->required-checkbox#invalid' }, required: initial } + .invalid-feedback.mt-0= local_assigns[:feedback] diff --git a/app/views/posts/attributes/_new_array.haml b/app/views/posts/attributes/_new_array.haml index 86a8f275..e73560c8 100644 --- a/app/views/posts/attributes/_new_array.haml +++ b/app/views/posts/attributes/_new_array.haml @@ -4,8 +4,10 @@ id = id_for(base, attribute) name = "#{base}[#{attribute}][]" form_id = random_id + controllers = %w[modal array enter] + controllers << 'required-checkbox' if metadata.required -%div{ data: { controller: "modal array enter#{' required-checkbox' if metadata.required}", 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } } +%div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } } %template{ data: { target: 'array.placeholder' } } .col.mb-3{ 'aria-hidden': 'true' } %span.placeholder.w-100 @@ -18,9 +20,7 @@ .d-flex.align-items-center.justify-content-between %div = label_tag id, post_label_t(attribute, post: post), class: 'mb-0' - - if metadata.required - %input.form-control.d-none{ type: 'checkbox', name: name, data: { target: 'required-checkbox.required', action: 'invalid->required-checkbox#invalid' }, required: metadata.value.empty? } - .invalid-feedback.mt-0= t('.required') + = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty? = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show' -# Mostramos la lista de valores actuales. diff --git a/app/views/posts/attributes/_new_belongs_to.haml b/app/views/posts/attributes/_new_belongs_to.haml index 5c8844a5..c39176e0 100644 --- a/app/views/posts/attributes/_new_belongs_to.haml +++ b/app/views/posts/attributes/_new_belongs_to.haml @@ -17,8 +17,10 @@ post_modal_id = random_id post_form_loaded_id = random_id value_list_id = random_id + controllers = %w[modal array] + controllers << 'required-checkbox' if metadata.required -%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } +%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } %template{ data: { target: 'array.placeholder' } } .col.p-3{ 'aria-hidden': 'true' } %span.placeholder.w-100 @@ -26,7 +28,9 @@ .form-group = hidden_field_tag name, '' .d-flex.align-items-center.justify-content-between - = label_tag id, post_label_t(attribute, post: post) + %div + = label_tag id, post_label_t(attribute, post: post), class: 'mb-0' + = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?, type: 'radio' = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show' -# Mostramos la lista de valores actuales. 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 8b615173..4ca444cf 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 @@ -17,8 +17,10 @@ post_modal_id = random_id post_form_loaded_id = random_id value_list_id = random_id + controllers = %w[modal array] + controllers << 'required-checkbox' if metadata.required -%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } +%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } %template{ data: { target: 'array.placeholder' } } .col.p-3{ 'aria-hidden': 'true' } %span.placeholder.w-100 @@ -26,8 +28,11 @@ .form-group = hidden_field_tag name, '' .d-flex.align-items-center.justify-content-between - = label_tag id, post_label_t(attribute, post: post) + %div + = label_tag id, post_label_t(attribute, post: post) + = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty? = 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 @@ -55,7 +60,7 @@ .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 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value + = 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' } -# Según la definición del campo, si hay un filtro, tenemos que poder diff --git a/app/views/posts/attributes/_new_has_many.haml b/app/views/posts/attributes/_new_has_many.haml index d211d864..476f2c2f 100644 --- a/app/views/posts/attributes/_new_has_many.haml +++ b/app/views/posts/attributes/_new_has_many.haml @@ -17,8 +17,10 @@ post_modal_id = random_id post_form_loaded_id = random_id value_list_id = random_id + controllers = %w[modal array] + controllers << 'required-checkbox' if metadata.required -%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } +%div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } %template{ data: { target: 'array.placeholder' } } .col.p-3{ 'aria-hidden': 'true' } %span.placeholder.w-100 @@ -26,8 +28,11 @@ .form-group = hidden_field_tag name, '' .d-flex.align-items-center.justify-content-between - = label_tag id, post_label_t(attribute, post: post) + %div + = label_tag id, post_label_t(attribute, post: post) + = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty? = 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 @@ -55,7 +60,7 @@ .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 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value + = 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' } -# Según la definición del campo, si hay un filtro, tenemos que poder diff --git a/app/views/posts/attributes/_new_predefined_array.haml b/app/views/posts/attributes/_new_predefined_array.haml index ca0cdaf2..d5f2110e 100644 --- a/app/views/posts/attributes/_new_predefined_array.haml +++ b/app/views/posts/attributes/_new_predefined_array.haml @@ -6,8 +6,10 @@ id = id_for(base, attribute) name = "#{base}[#{attribute}][]" form_id = random_id + controllers = %w[modal array] + controllers << 'required-checkbox' if metadata.required -%div{ data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } } +%div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } } %template{ data: { target: 'array.placeholder' } } .col.mb-3{ 'aria-hidden': 'true' } %span.placeholder.w-100 @@ -15,7 +17,9 @@ .form-group = hidden_field_tag name, '' .d-flex.align-items-center.justify-content-between - = label_tag id, post_label_t(attribute, post: post) + %div + = label_tag id, post_label_t(attribute, post: post) + = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty? = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show' -# Mostramos la lista de valores actuales. @@ -44,7 +48,7 @@ -# 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: value } } - = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value + = 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 -# Alinear los botones a la derecha diff --git a/app/views/posts/attributes/_new_predefined_value.haml b/app/views/posts/attributes/_new_predefined_value.haml index ae04fd0b..dad716b0 100644 --- a/app/views/posts/attributes/_new_predefined_value.haml +++ b/app/views/posts/attributes/_new_predefined_value.haml @@ -17,8 +17,10 @@ post_modal_id = random_id post_form_loaded_id = random_id value_list_id = random_id + controllers = %w[modal array] + controllers << 'required-checkbox' if metadata.required -%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) } } +%div{ id: modal_id, data: { controller: controllers.join(' '), '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 @@ -26,7 +28,9 @@ .form-group = hidden_field_tag name, '' .d-flex.align-items-center.justify-content-between - = label_tag id, post_label_t(attribute, post: post) + %div + = label_tag id, post_label_t(attribute, post: post) + = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?, type: 'radio' = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show' -# Mostramos la lista de valores actuales.