From 654fff0ab9c641a507e28269a15c51e46c61c7b5 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Wed, 19 Jun 2024 14:28:53 -0300
Subject: [PATCH] fix: volver a mostrar los mensajes al guardar y validar

---
 .../controllers/form_validation_controller.js | 23 +++++++++++++++++++
 app/views/bootstrap/_alert.haml               |  2 +-
 app/views/posts/_submit.haml                  | 17 ++++++++------
 config/locales/en.yml                         |  4 ++--
 config/locales/es.yml                         |  4 ++--
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/app/javascript/controllers/form_validation_controller.js b/app/javascript/controllers/form_validation_controller.js
index fe65934e..c9817e27 100644
--- a/app/javascript/controllers/form_validation_controller.js
+++ b/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);
     }
   }
 }
diff --git a/app/views/bootstrap/_alert.haml b/app/views/bootstrap/_alert.haml
index 85bcbe84..a14064ce 100644
--- a/app/views/bootstrap/_alert.haml
+++ b/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
diff --git a/app/views/posts/_submit.haml b/app/views/posts/_submit.haml
index c6c0a68a..c3064c53 100644
--- a/app/views/posts/_submit.haml
+++ b/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'))
-.form-group
-  = submit_tag t('.save'), class: 'btn btn-secondary submit-post'
-  = render 'bootstrap/alert', class: 'invalid-help d-none' do
-    = invalid_help
-  = render 'bootstrap/alert', class: 'sending-help d-none' do
-    = sending_help
+- submitting_help = site.config.fetch('submitting_help', t('.submitting_help'))
+
+.d-flex.flex-column.flex-md-row.align-items-start.mb-3
+  %div
+    = submit_tag t('.save'), class: 'btn btn-secondary submit-post'
+  .d-flex.flex-column.position-relative
+    = 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
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 6b8562d1..3815f5de 100644
--- a/config/locales/en.yml
+++ b/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.'
-      sending_help: Saving, please wait...
+      invalid_help: "Some fields need attention! Please search for the fields marked as not valid."
+      submitting_help: "Saving changes, please wait..."
     new_array:
       remove: "Remove"
     attributes:
diff --git a/config/locales/es.yml b/config/locales/es.yml
index d1c61fd2..7b981b1d 100644
--- a/config/locales/es.yml
+++ b/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'
-      sending_help: Guardando, por favor espera...
+      invalid_help: "¡Te falta completar algunos campos! Busca los que estén marcados como no válidos."
+      submitting_help: "Guardando, por favor espera..."
     new_array:
       remove: "Eliminar"
     attributes: