Add changes detection to record editing

cortezaproject · Aug 2, 2023 · 8fbe512 · 8fbe512
1 parent 7e7d92f
commit 8fbe512
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/client/web/compose/src/mixins/record.js b/client/web/compose/src/mixins/record.js
@@ -13,6 +13,7 @@ export default {
       processingUndelete: false,
       processingSubmit: false,
       record: undefined,
+      initialRecordState: undefined,
       errors: new validator.Validated(),
     }
   },
@@ -144,6 +145,7 @@ export default {
         })
         .then(record => {
           this.record = new compose.Record(this.module, record)
+          this.initialRecordState = this.record.clone()
         })
         .then(() => this.dispatchUiEvent('afterFormSubmit', this.record, { $records: records }))
         .then(() => this.updatePrompts())
@@ -194,6 +196,7 @@ export default {
         })
         .then(record => {
           this.record = new compose.Record(this.module, record)
+          this.initialRecordState = this.record.clone()
         })
         .then(() => this.dispatchUiEvent('beforeFormSubmit', this.record))
         .then(() => this.updatePrompts())
@@ -296,6 +299,7 @@ export default {
           this.onModalHide()
           this.fields = []
           this.record = new compose.Record(this.module, {})
+          this.initialRecordState = this.record.clone()
           this.$emit('save')
         })
         .catch(this.toastErrorHandler(this.$t('notification:record.deleteBulkRecordUpdateFailed')))

diff --git a/client/web/compose/src/views/Admin/Modules/Records/View.vue b/client/web/compose/src/views/Admin/Modules/Records/View.vue
@@ -99,6 +99,7 @@
 </template>
 
 <script>
+import { isEqual } from 'lodash'
 import { mapGetters } from 'vuex'
 import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
 import users from 'corteza-webapp-compose/src/mixins/users'
@@ -220,6 +221,14 @@ export default {
     this.createBlocks()
   },
 
+  beforeRouteLeave (to, from, next) {
+    this.checkUnsavedChanges(next, to)
+  },
+
+  beforeRouteUpdate (to, from, next) {
+    this.checkUnsavedChanges(next, to)
+  },
+
   methods: {
     createBlocks () {
       this.fields.forEach(f => {
@@ -240,6 +249,7 @@ export default {
           .recordRead({ namespaceID, moduleID, recordID })
           .then(record => {
             this.record = new compose.Record(module, record)
+            this.initialRecordState = this.record.clone()
           })
           .catch(this.toastErrorHandler(this.$t('notification:record.loadFailed')))
       }
@@ -268,6 +278,13 @@ export default {
         params: { ...this.$route.params, recordID },
       })
     },
+
+    checkUnsavedChanges (next, to) {
+      const recordValues = JSON.parse(JSON.stringify(this.record.values))
+      const initialRecordState = JSON.parse(JSON.stringify(this.initialRecordState.values))
+
+      next(!isEqual(recordValues, initialRecordState) ? window.confirm(this.$t('general:editor.unsavedChanges')) : true)
+    },
   },
 }
 </script>

diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
@@ -110,6 +110,7 @@
 </template>
 
 <script>
+import { isEqual } from 'lodash'
 import { mapGetters, mapActions } from 'vuex'
 import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
 import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
@@ -255,6 +256,7 @@ export default {
       immediate: true,
       handler () {
         this.record = undefined
+        this.initialRecordState = undefined
         this.loadRecord().then(() => {
           this.determineLayout()
         })
@@ -292,7 +294,11 @@ export default {
   // Destroy event before route leave to ensure it doesn't destroy the newly created one
   beforeRouteLeave (to, from, next) {
     this.$root.$off('refetch-record-blocks')
-    next()
+    this.checkUnsavedChanges(next, to)
+  },
+
+  beforeRouteUpdate (to, from, next) {
+    this.checkUnsavedChanges(next, to)
   },
 
   methods: {
@@ -315,13 +321,15 @@ export default {
           return this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID })
             .then(record => {
               this.record = new compose.Record(module, record)
+              this.initialRecordState = this.record.clone()
             })
             .catch(e => {
               this.toastErrorHandler(this.$t('notification:record.loadFailed'))(e)
               this.handleBack()
             })
         } else {
           this.record = new compose.Record(module, {})
+          this.initialRecordState = this.record.clone()
         }
       }
     },
@@ -352,6 +360,7 @@ export default {
       this.inEditing = true
       this.inCreating = true
       this.record = new compose.Record(this.module, { values: this.values })
+      this.initialRecordState = this.record.clone()
       if (!this.showRecordModal) {
         this.$router.push({ name: 'page.record.create', params: this.newRouteParams })
       }
@@ -361,6 +370,7 @@ export default {
       this.inEditing = true
       this.inCreating = true
       this.record = new compose.Record(this.module, { values: this.record.values })
+      this.initialRecordState = this.record.clone()
       if (!this.showRecordModal) {
         this.$router.push({ name: 'page.record.create', params: { pageID: this.page.pageID, values: this.record.values } })
       }
@@ -474,6 +484,13 @@ export default {
         return block
       })
     },
+
+    checkUnsavedChanges (next, to) {
+      const recordValues = JSON.parse(JSON.stringify(this.record.values))
+      const initialRecordState = JSON.parse(JSON.stringify(this.initialRecordState.values))
+
+      next(!isEqual(recordValues, initialRecordState) ? window.confirm(this.$t('general:editor.unsavedChanges')) : true)
+    },
   },
 }
 </script>
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
@@ -173,4 +173,6 @@ variants:
   info: Info
   success: Success
   danger: Danger
-  warning: Warning
+  warning: Warning
+editor:
+  unsavedChanges:  Unsaved changes will be lost. Do you wish to leave the page?