Add unsaved changed check to check form

app/javascript/controllers/index.js

@@ -27,3 +27,6 @@ application.register("set-theme", SetThemeController)
 
 import ThemeSwitcherController from "./theme_switcher_controller"
 application.register("theme-switcher", ThemeSwitcherController)
+
+import UnsavedChangesController from "./unsaved_changes_controller"
+application.register("unsaved-changes", UnsavedChangesController)

app/javascript/controllers/unsaved_changes_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="unsaved-changes"
+export default class extends Controller {
+  changed = false
+  
+  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
+    })
+  } 
+  
+  leavingPage(event) {
+    if(!this.changed) {
+      return
+    }
+
+    console.log("leavingPage", this.changed)
+    if (event.type == "turbo:before-visit") {
+      if (!window.confirm("Es gibt ungespeicherte Änderungen! Wirklich verlassen?")) { 
+        event.preventDefault()
+      }
+    } else {
+      if (!window.confirm("Es gibt ungespeicherte Änderungen! Wirklich verlassen?")) { 
+        event.preventDefault()
+      }
+      return event.returnValue;
+    }
+  }
+}

app/views/checks/_form.html.slim

@@ -1,4 +1,4 @@
-= bootstrap_form_with(model: check, remote: true) do |form|
+= bootstrap_form_with(model: check, remote: true, data: { controller: "unsaved-changes" }) do |form|
   h2 Details
   = multilang_form_field(form, :name)
   = form.text_field :number, required: false