Refactorings and gui improvements

app/javascript/controllers/unsaved_changes_controller.js

@@ -7,18 +7,21 @@ export default class extends Controller {
   static targets = ["cancel"]
 
   initialState = null
+  isSubmitted = false
 
   connect() {
+    console.log("connect unsaved-changes")
     this.initialState = this.formState()
-    console.log(this.cancelTargets)
+
+    console.log("usaved-changes connect ", this.cancelTargets)
 
     window.addEventListener("beforeunload", (event) => this.leavingPage(event))
     document.addEventListener('turbo:before-visit', (e) => this.leavingPage(e))
-    this.element.addEventListener("submit", (_) => this.initialState = null)
-    this.cancelTargets.forEach(element => {
-      console.log(element)
-      element.addEventListener("onclick", (_) => this.initialState = null)
-    });
+    this.element.addEventListener("submit", (_) => this.isSubmitted = true)
+    // this.cancelTargets.forEach(element => {
+    //   console.log(element)
+    //   element.addEventListener("onclick", (_) => this.reset())
+    // });
   }
 
   formState() {
@@ -27,21 +30,23 @@ export default class extends Controller {
       .sort(x => x[0]))
   }
 
+  reset() {
+    console.log("reset")
+    this.initialState = this.formState()
+  }
+
+  hasChanged() {
+    console.log("hasChanged result", this.initialState != this.formState())
+    return this.formState() != this.initialState
+  }
+
   leavingPage(event) {
     console.log(event.type)
-    if (this.initialState == null || this.initialState == this.formState()) {
+    if (this.isSubmitted || !this.hasChanged()) {
       return
     }
-    if (event.type == "turbo:before-visit") {
-      if (!window.confirm(LEAVE_ALERT)) {
-        event.preventDefault()
-      } else {
-        this.initialState = null
-      }
-    } else {
-      this.initialState = null
-      event.returnValue = LEAVE_ALERT;
-      return event.returnValue;
+    if (!window.confirm(LEAVE_ALERT)) {
+      event.preventDefault()
     }
   }
 }