feat(ui): restore unsaved change notification

ui/src/components/flows/FlowEdit.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <flow-editor @save="save" v-model="content" lang="yaml" />
+        <flow-editor @save="save" v-model="content" lang="yaml" @update:model-value="onChange($event)" />
         <bottom-line v-if="canSave || canDelete || canExecute">
             <ul>
                 <li>
@@ -39,7 +39,6 @@
 
 <script>
     import flowTemplateEdit from "../../mixins/flowTemplateEdit";
-    import unsavedChange from "../../mixins/unsavedChange";
     import {mapGetters} from "vuex";
     import TriggerFlow from "./TriggerFlow"
 
@@ -57,11 +56,9 @@
             ...mapGetters("flow", ["flow"]),
         },
         created() {
-            unsavedChange.methods.created.call(this);
             this.loadFile();
         },
         beforeUnmount() {
-            unsavedChange.methods.beforeUnmount.call(this);
         },
     };
 </script>

ui/src/components/flows/FlowRoot.vue

@@ -25,12 +25,11 @@
     import permission from "../../models/permission";
     import action from "../../models/action";
     import Tabs from "../Tabs";
-    import UnsavedChange from "../../mixins/unsavedChange";
     import BottomLine from "../../components/layout/BottomLine";
     import TriggerFlow from "../../components/flows/TriggerFlow";
 
     export default {
-        mixins: [RouteContext, UnsavedChange],
+        mixins: [RouteContext],
         components: {
             BottomLine,
             TriggerFlow,
@@ -39,7 +38,6 @@
         data() {
             return {
                 tabIndex: undefined,
-                checkUnsaved: true,
                 mounted: false,
                 previousFlow: undefined
             };
@@ -52,12 +50,8 @@
             }
         },
         created() {
-            UnsavedChange.methods.created.call(this);
             this.load();
         },
-        beforeUnmount() {
-            UnsavedChange.methods.beforeUnmount.call(this);
-        },
         methods: {
             load() {
                 if ((this.flow === undefined || this.previousFlow !== this.flowKey(this.flow))) {
@@ -132,14 +126,6 @@
 
                 return tabs;
             },
-            hasUnsavedChanged() {
-                return this.$refs.currentTab &&
-                    this.$refs.currentTab.$refs.tabContent &&
-                    this.$refs.currentTab.$refs.tabContent.$children[0] &&
-                    this.$refs.currentTab.$refs.tabContent.$children[0].hasUnsavedChanged &&
-                    this.$refs.currentTab.$refs.tabContent.$children[0].hasUnsavedChanged();
-            },
-
             activeTabName() {
                 if (this.$refs.currentTab) {
                     return this.$refs.currentTab.activeTab.name || "home";

ui/src/components/templates/TemplateEdit.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <template-editor @on-save="save" v-model="content" lang="yaml" />
+        <template-editor @on-save="save" v-model="content" lang="yaml" @update:model-value="onChange($event)" />
         <bottom-line v-if="canSave || canDelete">
             <ul>
                 <li>
@@ -27,7 +27,6 @@
 <script>
     import flowTemplateEdit from "../../mixins/flowTemplateEdit";
     import {mapState} from "vuex";
-    import unsavedChange from "../../mixins/unsavedChange";
 
     export default {
         mixins: [flowTemplateEdit],
@@ -45,12 +44,8 @@
             },
         },
         created() {
-            unsavedChange.methods.created.call(this);
             this.reload()
         },
-        beforeUnmount() {
-            unsavedChange.methods.beforeUnmount.call(this);
-        },
         unmounted() {
             this.$store.commit("template/setTemplate", undefined);
         },
@@ -63,6 +58,5 @@
                 }
             }
         }
-
     };
 </script>

ui/src/main.js

@@ -1,5 +1,4 @@
-import "moment/locale/fr"
-import App from "./App.vue"
+
 import {createApp} from "vue"
 import {createI18n} from "vue-i18n"
 import {createRouter, createWebHistory} from "vue-router"
@@ -8,8 +7,13 @@ import {createStore} from "vuex"
 import VueGtag from "vue-gtag";
 import {extendMoment} from "moment-range";
 import ElementPlus from "element-plus"
-import moment from "moment"
 import VueAxios from "vue-axios";
+import moment from "moment"
+import "moment/locale/fr"
+
+import App from "./App.vue"
+import createUnsavedChanged from "./utils/unsavedChange"
+
 // import VueHotkey from "v-hotkey"
 
 import "./utils/global"
@@ -83,6 +87,7 @@ let i18n = createI18n({
 
 app.use(i18n);
 
+
 // moment
 moment.locale(locale);
 app.config.globalProperties.$moment = extendMoment(moment);
@@ -97,6 +102,9 @@ app.config.globalProperties.$filters = filters;
 // element-plus
 app.use(ElementPlus)
 
+// navigation guard
+createUnsavedChanged(app, store, router);
+
 // axios
 configureAxios((instance) => {
     app.use(VueAxios, instance);

ui/src/mixins/flowTemplateEdit.js

@@ -7,13 +7,12 @@ import Delete from "vue-material-design-icons/Delete";
 import FlowEditor from "override/components/inputs/FlowEditor";
 import TemplateEditor from "override/components/inputs/TemplateEditor";
 import RouteContext from "./routeContext";
-import UnsavedChange from "./unsavedChange";
 import YamlUtils from "../utils/yamlUtils";
 import action from "../models/action";
 import permission from "../models/permission";
 
 export default {
-    mixins: [RouteContext, UnsavedChange],
+    mixins: [RouteContext],
     components: {
         FlowEditor,
         TemplateEditor,
@@ -33,6 +32,7 @@ export default {
     computed: {
         ...mapState("auth", ["user"]),
         ...mapGetters("flow", ["flow"]),
+        ...mapGetters("core", ["isUnsaved"]),
         isEdit() {
             return (
                 this.$route.name === `${this.dataType}s/update` &&
@@ -133,8 +133,8 @@ export default {
                     });
             }
         },
-        hasUnsavedChanged() {
-            return this.previousContent !== this.content;
+        onChange() {
+            this.$store.dispatch("core/isUnsaved", this.previousContent !== this.content);
         },
         save() {
             if (this.item) {

ui/src/stores/core.js

@@ -2,14 +2,18 @@ export default {
     namespaced: true,
     state: {
         message: undefined,
-        error: undefined
+        error: undefined,
+        unsavedChange: false,
     },
     actions: {
         showMessage({commit}, message) {
             commit("setMessage", message)
         },
         showError({commit}, error) {
             commit("setError", error)
+        },
+        isUnsaved({commit}, unsavedChange) {
+            commit("setUnsavedChange", unsavedChange)
         }
     },
     mutations: {
@@ -18,7 +22,14 @@ export default {
         },
         setError(state, error) {
             state.error = error
+        },
+        setUnsavedChange(state, unsavedChange) {
+            state.unsavedChange = unsavedChange
         }
     },
-    getters: {}
+    getters: {
+        unsavedChange(state) {
+            return state.unsavedChange;
+        }
+    }
 }

ui/src/utils/unsavedChange.js

@@ -0,0 +1,23 @@
+export default (app, store, router) => {
+    const confirmationMessage = app.config.globalProperties.$t("unsaved changed ?");
+
+    window.addEventListener("beforeunload", (e) => {
+        if (store.getters['core/unsavedChange']) {
+            (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+        }
+    });
+
+    router.beforeEach(async (to, from, next) => {
+        if (store.getters['core/unsavedChange']) {
+            if (confirm(confirmationMessage)) {
+                store.commit("core/setUnsavedChange", false);
+                next();
+            } else {
+                return false;
+            }
+        }
+
+        next();
+    });
+}