prevent leaving the page without saving modification

src/components/Feature/Detail/FeatureHeader.vue

@@ -78,7 +78,7 @@
             :class="['ui button button-hover-orange tiny-margin', { disabled: false }]"
             data-tooltip="Enregistrer les modifications"
             data-position="bottom center"
-            @click="saveFastEdition"
+            @click="$store.dispatch('feature/SEND_FEATURE', $route.name)"
           >
             <i
               class="save fitted icon"  
@@ -252,11 +252,6 @@ export default {
       });
     },
 
-    saveFastEdition() {
-      this.$store.dispatch('feature/SEND_FEATURE', this.$route.name)
-        .then(() => console.log('sent'));
-    },
-
     updateTitle(e) {
       this.$store.commit('feature/UPDATE_FORM_FIELD', { name: 'title', value: e.target.value });
     },

src/views/Feature/FeatureDetail.vue

@@ -135,16 +135,20 @@ export default {
     next(); // continue page loading
   },
 
+  beforeRouteUpdate (to, from, next) {
+    let leaving = true; // by default navigate to next route
+    if (this.hasUnsavedChange) {
+      leaving = this.confirmLeave(); // prompt user that there is unsaved changes or that features order might change
+    }
+    next(leaving);
+  },
+
   beforeRouteLeave (to, from, next) {
-    if (// In case of filtered listed featuers, if the user wants to edit a feature,
-      from.query.offset >= 0 &&
-        to.name === 'editer-signalement' &&
-        !this.confirmLeave() // warn the user that features order might change
-    ){
-      next(false);
-    } else {// Navigate to next view
-      next();
+    let leaving = true; // by default navigate to next route
+    if (this.hasUnsavedChange || (from.query.offset >= 0 && to.name === 'editer-signalement')) {
+      leaving = this.confirmLeave(); // prompt user that there is unsaved changes or that features order might change
     }
+    next(leaving);
   },
 
   data() {
@@ -182,7 +186,19 @@ export default {
     ]),
     ...mapState('feature', [
       'currentFeature',
+      'form',
     ]),
+
+    hasUnsavedChange() {
+      if (this.form.title !== this.currentFeature.title) return true;
+      if (this.form.description.value !== this.currentFeature.description) return true;
+      if (this.form.status.value !== this.currentFeature.status) return true;
+      for (const xForm of this.$store.state.feature.extra_forms) {
+        const originalField = this.currentFeature.feature_data.find(el => el.label === xForm.label);
+        if (originalField && xForm.value !== originalField.value) return true;
+      }
+      return false;
+    }
   },
 
   watch: {
@@ -266,16 +282,25 @@ export default {
     },
 
     confirmLeave() {
-      return window.confirm('Vous allez quittez la vue signalement filtré, l\'ordre des signalements pourrait changer après édition d\'un signalement.');
+      return window.confirm(this.project.fast_edition_mode && this.hasUnsavedChange ?
+        'Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?':
+        'Vous allez quittez la vue signalement filtré, l\'ordre des signalements pourrait changer après édition d\'un signalement.');
     },
 
-    async pushNgo(newEntry) {
-      this.$router.push(newEntry); //* update the params or queries in the route/url
+    async reloadPage() {
       await this.getPageInfo();
       mapService.removeFeatures();
       this.addFeatureToMap();
     },
 
+    pushNgo(newEntry) {
+      this.$router.push(newEntry) //* update the params or queries in the route/url
+        .then(() => {
+          this.reloadPage();
+        })
+        .catch(() => true); //* catch error if navigation get aborted (in beforeRouteUpdate)
+    },
+
     goBackToProject(message) {
       this.$router.push({
         name: 'project_detail',