From bd36984edfe2fafcbc7c4334c41e6d69cc76d4ff Mon Sep 17 00:00:00 2001
From: david <david@joules.ch>
Date: Mon, 28 Oct 2024 23:06:04 +0100
Subject: [PATCH] Improve unsaved-changes controller

---
 .../controllers/unsaved_changes_controller.js | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/javascript/controllers/unsaved_changes_controller.js b/app/javascript/controllers/unsaved_changes_controller.js
index d5d7dab..781fb08 100644
--- a/app/javascript/controllers/unsaved_changes_controller.js
+++ b/app/javascript/controllers/unsaved_changes_controller.js
@@ -2,29 +2,25 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="unsaved-changes"
 export default class extends Controller {
-  changed = false
-  
+  originalFormData = null
+
   connect() {
-    window.addEventListener("beforeunload", (event) => {
-      this.leavingPage(event);
-    });  
-    document.addEventListener('turbo:before-visit', (event) => {
-      this.leavingPage(event);
-    });
-    this.element.addEventListener("submit", (_) => {
-      this.changed = false
-    })
-    this.element.addEventListener("change", (_) => {
-      this.changed = true
-    })
+    this.originalFormData = this.formState()
+
+    window.addEventListener("beforeunload", (event) => this.leavingPage(event))
+    document.addEventListener('turbo:before-visit', (e) => this.leavingPage(e));
+    this.element.addEventListener("submit", _ => this.originalFormData = this.formState())
   } 
+
+  formState() {
+    return JSON.stringify(new FormData(this.element).values().toArray().filter(x => x != ""))
+  }
   
   leavingPage(event) {
-    if(!this.changed) {
+    if(this.originalFormData == this.formState()) {
       return
     }
 
-    console.log("leavingPage", this.changed)
     if (event.type == "turbo:before-visit") {
       if (!window.confirm("Es gibt ungespeicherte Änderungen! Wirklich verlassen?")) { 
         event.preventDefault()