autosave on expense description changes

rubyforgood · Oct 11, 2024 · 735f22a · 735f22a
1 parent d4d6b3e
commit 735f22a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git a/app/javascript/controllers/autosave_controller.js b/app/javascript/controllers/autosave_controller.js
@@ -13,6 +13,8 @@ export default class extends Controller {
   static classes = ['goodAlert', 'badAlert']
 
   connect () {
+    this.visibleClass = 'visible'
+    this.hiddenClass = 'invisible'
     this.save = debounce(this.save, this.delayValue).bind(this)
   }
 
@@ -58,22 +60,50 @@ export default class extends Controller {
 
   autosaveAlert () {
     this.removeBadAlert()
-    this.alertTarget.innerHTML = 'Autosaving...'
+    this.alertTargets.forEach(alertTarget => {
+      alertTarget.innerHTML = 'Autosaving...'
+    })
+    this.revealAlert()
   }
 
   goodAlert () {
     this.removeBadAlert()
-    this.alertTarget.innerHTML = 'Saved!'
+    this.alertTargets.forEach(alertTarget => {
+      alertTarget.innerHTML = 'Saved!'
+    })
   }
 
   removeBadAlert () {
-    this.alertTarget.classList.add(this.goodAlertClass)
-    this.alertTarget.classList.remove(this.badAlertClass)
+    this.alertTargets.forEach(alertTarget => {
+      alertTarget.classList.add(this.goodAlertClass)
+      alertTarget.classList.remove(this.badAlertClass)
+    })
   }
 
   badAlert (message) {
-    this.alertTarget.classList.remove(this.goodAlertClass)
-    this.alertTarget.classList.add(this.badAlertClass)
-    this.alertTarget.innerHTML = message
+    this.alertTargets.forEach(alertTarget => {
+      alertTarget.classList.remove(this.goodAlertClass)
+      alertTarget.classList.add(this.badAlertClass)
+      alertTarget.innerHTML = message
+    })
+  }
+
+  hideAlert () {
+    this.alertTargets.forEach(alertTarget => {
+      alertTarget.classList.add(this.hiddenClass)
+      alertTarget.classList.remove(this.visibleClass)
+    })
+  }
+
+  revealAlert (hide = true) {
+    this.alertTargets.forEach(alertTarget => {
+      alertTarget.classList.remove(this.hiddenClass)
+      alertTarget.classList.add(this.visibleClass)
+    })
+    if (hide) {
+      setTimeout(() => {
+        this.hideAlert()
+      }, this.delayValue)
+    }
   }
 }
diff --git a/app/views/case_contacts/form/details.html.erb b/app/views/case_contacts/form/details.html.erb
@@ -117,8 +117,6 @@
       data-casa-nested-form-model-name-value="contact_topic_answer">
       <h2 class="mb-4">Notes</h2>
 
-      <small data-autosave-target="alert alert-light" role="alert"></small>
-
       <% if @contact_topics.empty? %>
         <p class="mb-5"><small>
         <% if current_user.casa_admin? %>
@@ -158,6 +156,12 @@
       <button type="button" class="btn btn-sm btn-link" data-action="casa-nested-form#addAndCreate">
         + Add Note
       </button>
+
+      <small role="alert"
+        class="d-block invisible"
+        data-autosave-target="alert alert-light">
+        No changes have been saved.
+      </small>
     </section>
 
     <% org_driving_reimbursement = current_organization.show_driving_reimbursement %>
@@ -252,6 +256,12 @@
             </div>
           <% end %>
         </div>
+
+        <small role="alert"
+          class="d-block invisible"
+          data-autosave-target="alert alert-light">
+          No changes have been saved.
+        </small>
       </section>
     <% end %>
 

diff --git a/app/views/shared/_additional_expense_form.html.erb b/app/views/shared/_additional_expense_form.html.erb
@@ -23,6 +23,7 @@
       <%= form.text_area(:other_expenses_describe,
           placeholder: "Enter additional details",
           class: ["form-control", "expense-describe-input"],
+          data: { action: "input->autosave#save" },
       ) %>
     </div>
     <div class="flex-shrink-1">