MDL-73007 output: trigger form changechecker when switching tabs.

Co-authored-by: Odei Alba <odeialba@gmail.com>

lang/en/moodle.php

@@ -248,6 +248,7 @@
 $string['idnumbercoursecategory'] = 'Category ID number';
 $string['idnumbercoursecategory_help'] = 'The ID number of a course category  is only used when matching the category against external systems and is not displayed anywhere on the site. If the category has an official code name it may be entered, otherwise the field can be left blank.';
 $string['categoryupdated'] = 'The category \'{$a}\' was updated';
+$string['changesmade'] = 'Changes made';
 $string['changesmadereallygoaway'] = 'You have made changes. Are you sure you want to navigate away and lose your changes?';
 $string['city'] = 'City/town';
 $string['cleaningtempdata'] = 'Cleaning temp data';

lib/amd/src/dynamic_tabs.js

@@ -25,7 +25,9 @@ import $ from 'jquery';
 import Templates from 'core/templates';
 import Notification from 'core/notification';
 import Pending from 'core/pending';
+import {get_strings as getStrings} from 'core/str';
 import {getContent} from 'core/local/repository/dynamic_tabs';
+import {isAnyWatchedFormDirty, resetAllFormDirtyStates} from 'core_form/changechecker';
 
 const SELECTORS = {
     dynamicTabs: '.dynamictabs',
@@ -43,9 +45,33 @@ SELECTORS.forTabId = tabName => `.dynamictabs [data-toggle="tab"][href="#${tabNa
  * Initialises the tabs view on the page (only one tabs view per page is supported)
  */
 export const init = () => {
+    const tabToggle = $(SELECTORS.tabToggle);
+
+    // Listen to click, warn user if they are navigating away with unsaved form changes.
+    tabToggle.on('click', (event) => {
+        if (!isAnyWatchedFormDirty()) {
+            return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        getStrings([
+            {key: 'changesmade', component: 'moodle'},
+            {key: 'changesmadereallygoaway', component: 'moodle'},
+            {key: 'confirm', component: 'moodle'},
+        ]).then(([strChangesMade, strChangesMadeReally, strConfirm]) =>
+            // Reset form dirty state on confirmation, re-trigger the event.
+            Notification.confirm(strChangesMade, strChangesMadeReally, strConfirm, null, () => {
+                resetAllFormDirtyStates();
+                $(event.target).trigger(event.type);
+            })
+        ).catch(Notification.exception);
+    });
+
     // This code listens to Bootstrap event 'shown.bs.tab' which is triggered using JQuery and
     // can not be converted yet to native events.
-    $(SELECTORS.tabToggle).on('shown.bs.tab', function() {
+    tabToggle.on('shown.bs.tab', function() {
         const tab = $($(this).attr('href'));
         if (tab.length !== 1) {
             return;

lib/form/amd/src/changechecker.js

@@ -226,9 +226,8 @@ export const disableAllChecks = () => {
  *
  * @method
  * @returns {Bool}
- * @private
  */
-const isAnyWatchedFormDirty = () => {
+export const isAnyWatchedFormDirty = () => {
     if (formChangeCheckerDisabled) {
         // The form change checker is disabled.
         return false;