From 4f8b18ca259e8d70e2646dec4e9496616e78dda3 Mon Sep 17 00:00:00 2001
From: david <david@joules.ch>
Date: Mon, 28 Oct 2024 22:39:32 +0100
Subject: [PATCH] Add unsaved changed check to check form

---
 app/javascript/controllers/index.js           |  3 ++
 .../controllers/unsaved_changes_controller.js | 39 +++++++++++++++++++
 app/views/checks/_form.html.slim              |  2 +-
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/unsaved_changes_controller.js

diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 9d6b531..6414a8f 100644
--- a/app/javascript/controllers/index.js
+++ b/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)
diff --git a/app/javascript/controllers/unsaved_changes_controller.js b/app/javascript/controllers/unsaved_changes_controller.js
new file mode 100644
index 0000000..d5d7dab
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/checks/_form.html.slim b/app/views/checks/_form.html.slim
index f16d826..77f69d6 100644
--- a/app/views/checks/_form.html.slim
+++ b/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