mostrar los errores de carga

app/helpers/application_helper.rb

@@ -63,7 +63,7 @@ module ApplicationHelper
   # Opciones por defecto para el campo de un formulario
   def field_options(attribute, metadata)
     {
-      class: 'form-control',
+      class: "form-control #{invalid(metadata.post, attribute)}",
       required: metadata.required,
       aria: {
         describedby: id_for_help(attribute),

app/views/posts/_attribute_feedback.haml

@@ -1,5 +1,7 @@
 %small.feedback.form-text.text-muted{ id: id_for_help(*attribute) }
   = post_help_t(*attribute, post: post)
-- if metadata.required
-  .invalid-feedback{ id: id_for_feedback(*attribute) }
+.invalid-feedback{ id: id_for_feedback(*attribute) }
+  - if metadata.required
     = t('posts.attributes.required.feedback')
+  - metadata.errors.try :each do |error|
+    = error

app/views/posts/_form.haml

@@ -1,11 +1,7 @@
 - unless post.errors.empty?
   .alert.alert-danger
-    %ul
-      - post.errors.each do |key, error|
-        %li
-          %strong
-            = key.capitalize
-          = [error].flatten.join("\n")
+    %h4= t('.errors.title')
+    %p= t('.errors.help')
 
 -# TODO: habilitar form_for
 :ruby
@@ -24,18 +20,16 @@
   = render 'posts/submit', site: site, post: post
 
   -# Dibuja cada atributo
-  :ruby
-    post.attributes.each do |attribute|
-      # El borrador se muestra distinto
-      next if attribute == :draft
+  - post.attributes.each do |attribute|
+    -# El borrador se muestra distinto
+    - next if attribute == :draft
 
-      metadata = post.send(attribute)
-      type = metadata.type
+    - metadata = post.send(attribute)
+    - type = metadata.type
 
-      haml_io.write render("posts/attributes/#{type}",
-                           post: post, attribute: attribute,
-                           metadata: metadata, site: site)
-    end
+    = render("posts/attributes/#{type}",
+             post: post, attribute: attribute,
+             metadata: metadata, site: site)
 
   -# Botones de guardado
   = render 'posts/submit', site: site, post: post

app/views/posts/attributes/_array.haml

@@ -1,4 +1,4 @@
-.form-group{ class: invalid(post, attribute) }
+.form-group
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
 
   .taggable{ data: { values: metadata.value.join(','),

app/views/posts/attributes/_boolean.haml

@@ -1,6 +1,6 @@
-.form-check{ class: invalid(post, attribute) }
+.form-check
   = check_box_tag "post[#{attribute}", metadata.value, metadata.value,
-    class: 'form-check-input',
+    class: "form-check-input #{invalid(post, attribute)}",
     aria: { describedby: id_for_help(attribute) }
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post),
     class: 'form-check-label'

app/views/posts/attributes/_content.haml

@@ -1,4 +1,4 @@
-.form-group{ class: invalid(post, attribute) }
+.form-group
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata

app/views/posts/attributes/_document_date.haml

@@ -1,4 +1,4 @@
-.form-group{ class: invalid(post, attribute) }
+.form-group
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = date_field 'post', attribute, value: metadata.value.strftime('%F'),
     **field_options(attribute, metadata)

app/views/posts/attributes/_image.haml

@@ -1,5 +1,5 @@
-.form-group{ class: invalid(post, attribute) }
-  - if metadata.value['path'].present?
+.form-group
+  - if metadata.uploaded?
     = image_tag url_for(metadata.static_file),
       alt: metadata.value['description'],
       class: 'img-fluid',
@@ -13,14 +13,14 @@
   .custom-file
     = file_field(*field_name_for('post', attribute, :path),
       **field_options(attribute, metadata),
-      class: 'custom-file-input', accept: 'image/*',
-      data: { preview: "#{attribute}-preview" })
+      class: "custom-file-input #{invalid(post, attribute)}",
+      accept: 'image/*', data: { preview: "#{attribute}-preview" })
     = label_tag "post_#{attribute}_path",
       post_label_t(attribute, :path, post: post), class: 'custom-file-label'
     = render 'posts/attribute_feedback',
       post: post, attribute: [attribute, :path], metadata: metadata
 
-.form-group{ class: invalid(post, attribute) }
+.form-group
   = label_tag "post_#{attribute}_description",
     post_label_t(attribute, :description, post: post)
   = text_field(*field_name_for('post', attribute, :description),

app/views/posts/attributes/_slug.haml

@@ -1,4 +1,4 @@
-.form-group{ class: invalid(post, attribute) }
+.form-group
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = text_field 'post', attribute, value: metadata.value,
     **field_options(attribute, metadata)

app/views/posts/attributes/_string.haml

@@ -1,4 +1,4 @@
-.form-group{ class: invalid(post, attribute) }
+.form-group
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = text_field 'post', attribute, value: metadata.value,
     **field_options(attribute, metadata)

app/views/posts/show.haml

@@ -21,16 +21,14 @@
           -#
             TODO: Cambiar por un método que nos deje interactuar
             directamente con los metadatos
-          :ruby
-            @post.attributes.each do |attr|
-              metadata = @post.send(attr)
-              next unless metadata.front_matter?
+          - @post.attributes.each do |attr|
+            - metadata = @post.send(attr)
+            - next unless metadata.front_matter?
 
-              haml_io.write render("posts/attribute_ro/#{metadata.type}",
-                                   post: @post, attribute: attr,
-                                   metadata: metadata,
-                                   tags: all_html_tags)
-            end
+            = render("posts/attribute_ro/#{metadata.type}",
+                     post: @post, attribute: attr,
+                     metadata: metadata,
+                     tags: all_html_tags)
 
       -# Mostrar todo lo que no va en el front_matter (el contenido)
       - @post.attributes.each do |attr|

config/locales/en.yml

@@ -245,6 +245,9 @@ en:
       title: 'Edit %{site}'
       submit: 'Save changes'
     form:
+      errors:
+        title: There're errors and we couldn't save your changes :(
+        help: Please, look for the invalid fields to fix them
       help:
         name: "Your site's name.  It can only contain numbers and letters."
         design: 'Select the design for your site.  You can change it later.  We add more designs from time to time.'
@@ -309,6 +312,7 @@ en:
       save: 'Save'
       save_draft: 'Save as draft'
       invalid_help: 'Some fields need attention! Please search for the fields marked as invalid.'
+      sending_help: Saving, please wait...
     attributes:
       date:
         label: Date
@@ -347,8 +351,6 @@ en:
     image:
       multiple: 'You can select several images by holding the <kbd>Ctrl</kbd> or <kbd>Cmd</kbd> kbd in your kbdboard.'
     url: 'The address must start with http:// or https://'
-    invalid_help: It looks like the form is incomplete.  Check the red-colored fields to complete it.
-    sending_help: Saving, please wait...
     blank: Nothing
     destroy: Delete
     confirm_destroy: Are you sure?

config/locales/es.yml

@@ -254,6 +254,9 @@ es:
       title: 'Editar %{site}'
       submit: 'Guardar cambios'
     form:
+      errors:
+        title: Hay errores y no pudimos guardar tus cambios :(
+        help: Por favor, busca los campos marcados como inválidos para resolverlos
       help:
         name: 'El nombre de tu sitio que formará parte de la dirección (ejemplo.sutty.nl). Solo puede contener letras minúsculas, números y guiones.'
         title: 'El título de tu sitio puede ser lo que quieras.'
@@ -322,6 +325,7 @@ es:
       save: 'Guardar'
       save_draft: 'Guardar como borrador'
       invalid_help: '¡Te faltan completar algunos campos! Busca los que estén marcados como inválidos'
+      sending_help: Guardando, por favor espera...
     attributes:
       date:
         label: Fecha
@@ -360,8 +364,6 @@ es:
     image:
       multiple: 'Puedes seleccionar varias imágenes usando la tecla <kbd>Ctrl</kbd> o <kbd>Cmd</kbd> en tu teclado.'
     url: 'La dirección debe comenzar con http:// o https://'
-    invalid_help: Parece que el formulario no está completo.  Verifica los campos marcados en rojo para completarlo.
-    sending_help: Guardando, por favor espera...
     blank: En blanco
     destroy: Borrar
     confirm_destroy: ¿Estás segurx?