feat: warn unsaved form (#655)

README.md

@@ -336,6 +336,9 @@ class CustomAdminClass(ModelAdmin):
     # Display fields in changeform in compressed mode
     compressed_fields = True  # Default: False
 
+    # Warn before leaving unsaved changes in changeform
+    warn_unsaved_form = True  # Default: False
+
     # Preprocess content of readonly fields before render
     readonly_preprocess_fields = {
         "model_field_name": "html.unescape",

src/unfold/admin.py

@@ -236,6 +236,7 @@ class ModelAdmin(ModelAdminMixin, BaseModelAdmin):
     list_disable_select_all = False
     compressed_fields = False
     readonly_preprocess_fields = {}
+    warn_unsaved_form = False
     checks_class = UnfoldModelAdminChecks
 
     @property

src/unfold/static/unfold/js/app.js

@@ -8,8 +8,31 @@ window.addEventListener("load", (e) => {
   renderCharts();
 
   filterForm();
+
+  warnWithoutSaving();
 });
 
+/*************************************************************
+ * Warn without saving
+ *************************************************************/
+const warnWithoutSaving = () => {
+  let formChanged = false;
+
+  Array.from(
+    document.querySelectorAll(
+      "form.warn-unsaved-form input, form.warn-unsaved-form select"
+    )
+  ).forEach((field) => {
+    field.addEventListener("change", (e) => (formChanged = true));
+  });
+
+  window.addEventListener("beforeunload", (e) => {
+    if (formChanged) {
+      e.preventDefault();
+    }
+  });
+};
+
 /*************************************************************
  * Filter form
  *************************************************************/

src/unfold/templates/admin/change_form.html

@@ -59,7 +59,7 @@
 
 {% block content %}
     <div id="content-main">
-        <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" novalidate>
+        <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
             {% csrf_token %}
 
             {% block form_top %}{% endblock %}