fix: volver a mostrar los mensajes al guardar y validar

app/javascript/controllers/form_validation_controller.js

@@ -1,6 +1,8 @@
 import { Controller } from "stimulus";
 
 export default class extends Controller {
+  static targets = ["invalid", "submitting"];
+
   connect() {
     this.element.setAttribute("novalidate", true);
 
@@ -22,8 +24,29 @@ export default class extends Controller {
     if (this.element.reportValidity()) {
       this.element.classList.remove("was-validated");
       this.element.submit();
+
+      this.show(this.submittingTargets);
+      this.hide(this.invalidTargets);
     } else {
       this.element.classList.add("was-validated");
+      this.hide(this.submittingTargets);
+      this.show(this.invalidTargets);
+    }
+  }
+
+  show(elements) {
+    for (const element of elements) {
+      element.classList.remove("d-none");
+
+      setTimeout(() => element.classList.add("show"), 1);
+    }
+  }
+
+  hide(elements) {
+    for (const element of elements) {
+      element.classList.remove("show");
+
+      setTimeout(() => element.classList.add("d-none"), 2000);
     }
   }
 }

app/views/bootstrap/_alert.haml

@@ -1,2 +1,2 @@
-.alert.alert-primary.mx-auto.content.max-w-md-70ch{ role: 'alert', class: local_assigns[:class] }
+.alert.alert-primary.mx-auto.content.max-w-md-70ch{ role: 'alert', **local_assigns }
   = yield

app/views/posts/_submit.haml

@@ -1,8 +1,11 @@
 - invalid_help = site.config.fetch('invalid_help', t('.invalid_help'))
-- sending_help = site.config.fetch('sending_help', t('.sending_help'))
+- submitting_help = site.config.fetch('submitting_help', t('.submitting_help'))
-.form-group
+
-  = submit_tag t('.save'), class: 'btn btn-secondary submit-post'
+.d-flex.flex-column.flex-md-row.align-items-start.mb-3
-  = render 'bootstrap/alert', class: 'invalid-help d-none' do
+  %div
-    = invalid_help
+    = submit_tag t('.save'), class: 'btn btn-secondary submit-post'
-  = render 'bootstrap/alert', class: 'sending-help d-none' do
+  .d-flex.flex-column.position-relative
-    = sending_help
+    = render 'bootstrap/alert', class: 'm-0 d-none fade', data: { target: 'form-validation.invalid' } do
+      = invalid_help
+    = render 'bootstrap/alert', class: 'm-0 d-none fade position-absolute top-0 left-0', data: { target: 'form-validation.submitting' } do
+      = submitting_help

config/locales/en.yml

@@ -719,8 +719,8 @@ en:
     submit:
       save: 'Save'
       save_draft: 'Save as draft'
-      invalid_help: 'Some fields need attention! Please search for the fields marked as invalid.'
+      invalid_help: "Some fields need attention! Please search for the fields marked as not valid."
-      sending_help: Saving, please wait...
+      submitting_help: "Saving changes, please wait..."
     new_array:
       remove: "Remove"
     attributes:

config/locales/es.yml

@@ -727,8 +727,8 @@ es:
     submit:
       save: 'Guardar'
       save_draft: 'Guardar como borrador'
-      invalid_help: '¡Te faltan completar algunos campos! Busca los que estén marcados como inválidos'
+      invalid_help: "¡Te falta completar algunos campos! Busca los que estén marcados como no válidos."
-      sending_help: Guardando, por favor espera...
+      submitting_help: "Guardando, por favor espera..."
     new_array:
       remove: "Eliminar"
     attributes: