Merge pull request #34789 from dimagi/ad/warn-form-in-progress-web-apps

Warn user before navigating away from a form
dimagi · Aug 5, 2024 · 33e0e39 · 33e0e39
2 parents 93147ad + 29bfbc6
commit 33e0e39
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 3 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js
@@ -82,6 +82,7 @@ hqDefine("cloudcare/js/form_entry/const", [], function () {
         FORMATTED_QUESTIONS: 'formatted_questions',
         CHANGE_LANG: 'change_lang',
         CHANGE_LOCALE: 'change_locale',
+        DIRTY: 'dirty',
 
         // Control values. See commcare/javarosa/src/main/java/org/javarosa/core/model/Constants.java
         CONTROL_UNTYPED: -1,

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -758,13 +758,13 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
 
         self.newRepeat = function () {
             $.publish('formplayer.' + constants.NEW_REPEAT, self);
-            $.publish('formplayer.dirty');
+            $.publish('formplayer.' + constants.DIRTY);
             $('.add').trigger('blur');
         };
 
         self.deleteRepeat = function () {
             $.publish('formplayer.' + constants.DELETE_REPEAT, self);
-            $.publish('formplayer.dirty');
+            $.publish('formplayer.' + constants.DIRTY);
         };
 
         self.hasAnyNestedQuestions = function () {
@@ -938,7 +938,7 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
             publishAnswerEvent();
         };
         var publishAnswerEvent = _.throttle(function () {
-            $.publish('formplayer.dirty');
+            $.publish('formplayer.' + constants.DIRTY);
             $.publish('formplayer.' + constants.ANSWER, self);
         }, self.throttle);
         self.onchange = self.triggerAnswer;

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/web_form_session.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/web_form_session.js
@@ -308,6 +308,13 @@ hqDefine("cloudcare/js/form_entry/web_form_session", [
             $.subscribe('formplayer.' + constants.CHANGE_LANG, function (e, lang) {
                 self.changeLang(lang);
             });
+            $.subscribe('formplayer.' + constants.DIRTY, function (e) {
+                hqRequire([
+                    "cloudcare/js/formplayer/app",
+                ], function (FormplayerFrontend) {
+                    FormplayerFrontend.trigger('setUnsavedFormInProgress');
+                });
+            });
         };
 
         self.loadForm = function ($form, initLang) {

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
@@ -85,6 +85,17 @@ hqDefine("cloudcare/js/formplayer/app", [
         return Backbone.Radio.channel('formplayer');
     };
 
+    FormplayerFrontend.confirmUserWantsToNavigateAwayFromForm = function () {
+        if (FormplayerFrontend.unsavedFormInProgress) {
+            const userConfirmedYes = window.confirm(gettext("You have a form in progress. Are you sure you want to navigate away?"));
+            if (!userConfirmedYes) {
+                return false;
+            }
+        }
+        FormplayerFrontend.trigger('setUnsavedFormNotInProgress');
+        return true;
+    };
+
     /**
      * This function maps a jr:// media path to its HTML path IE
      * jr://images/icon/mother.png -> https://commcarehq.org/hq/multimedia/file/CommCareImage/[app_id]/mother.png
@@ -125,6 +136,7 @@ hqDefine("cloudcare/js/formplayer/app", [
     });
 
     FormplayerFrontend.on('clearForm', function () {
+        FormplayerFrontend.trigger('setUnsavedFormNotInProgress');
         $('#webforms').html("");
         $('.menu-scrollable-container').removeClass("d-none");
         $('#webforms-nav').html("");
@@ -756,5 +768,19 @@ hqDefine("cloudcare/js/formplayer/app", [
         },
     });
 
+    FormplayerFrontend.on("setUnsavedFormInProgress", function () {
+        FormplayerFrontend.unsavedFormInProgress = true;
+        window.onbeforeunload = function () {
+            return true;
+        };
+    });
+
+    FormplayerFrontend.on("setUnsavedFormNotInProgress", function () {
+        if (FormplayerFrontend.unsavedFormInProgress) {
+            FormplayerFrontend.unsavedFormInProgress = false;
+            window.onbeforeunload = null;
+        }
+    });
+
     return FormplayerFrontend;
 });
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1316,6 +1316,9 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
             'keydown .js-home': 'onKeyActionHome',
         },
         onClickHome: function () {
+            if (!FormplayerFrontend.confirmUserWantsToNavigateAwayFromForm()) {
+                return;
+            }
             FormplayerFrontend.trigger('navigateHome');
         },
         onKeyActionHome: function (e) {

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/router.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/router.js
@@ -275,6 +275,9 @@ hqDefine("cloudcare/js/formplayer/router", [
     });
 
     FormplayerFrontend.on("breadcrumbSelect", function (index) {
+        if (!FormplayerFrontend.confirmUserWantsToNavigateAwayFromForm()) {
+            return;
+        }
         FormplayerFrontend.trigger("clearForm");
         var urlObject = utils.currentUrlToObject();
         urlObject.spliceSelections(index);