Show Warning Message for Unsaved Changes in Compose

client/web/compose/src/components/Common/Grid.vue

@@ -29,6 +29,8 @@
         }"
         style="touch-action: none;"
         v-bind="{ ...item }"
+        @moved="onBlockUpdated(index)"
+        @resized="onBlockUpdated(index)"
       >
         <slot
           :block="blocks[item.i]"
@@ -187,6 +189,11 @@ export default {
       ))
       this.recalculateBoundingRect()
     },
+
+    // emit event when block has been moved or resized
+    onBlockUpdated (index) {
+      this.$emit('item-updated', index)
+    },
   },
 }
 </script>

client/web/compose/src/components/faIcons.js

@@ -60,6 +60,7 @@ import {
   faKey,
   faQuestion,
   faSync,
+  faExclamationTriangle,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -167,5 +168,6 @@ library.add(
   faMapMarkedAlt,
   faKey,
   faQuestion,
+  faExclamationTriangle,
   faSync,
 )

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -50,6 +50,7 @@
       :blocks="page.blocks"
       editable
       @change="updatePageBlockGrid"
+      @item-updated="onBlockUpdated"
     >
       <template
         slot-scope="{ boundingRect, block, index }"
@@ -63,6 +64,17 @@
             class="toolbox border-0 p-2 m-0 text-light text-center"
             data-test-id="block-toolbox"
           >
+            <div
+              v-if="unsavedBlocks.has(index)"
+              :title="$t('tooltip.unsavedChanges')"
+              class="btn border-0"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'exclamation-triangle']"
+                class="text-warning"
+              />
+            </div>
+
             <b-button
               data-test-id="button-edit"
               :title="$t('tooltip.edit.block')"
@@ -96,7 +108,6 @@
                 :icon="['far', 'copy']"
               />
             </b-button>
-
             <c-input-confirm
               class="ml-1"
               size="md"
@@ -272,6 +283,7 @@ export default {
       page: undefined,
       blocks: [],
       board: null,
+      unsavedBlocks: new Set(),
     }
   },
 
@@ -365,6 +377,7 @@ export default {
       immediate: true,
       handler (pageID) {
         this.page = undefined
+        this.unsavedBlocks.clear()
 
         if (pageID) {
           const { namespaceID, name } = this.namespace
@@ -383,6 +396,14 @@ export default {
     window.addEventListener('paste', this.pasteBlock)
   },
 
+  beforeRouteUpdate (to, from, next) {
+    this.checkUnsavedBlocks(next)
+  },
+
+  beforeRouteLeave (to, from, next) {
+    this.checkUnsavedBlocks(next)
+  },
+
   destroyed () {
     window.removeEventListener('paste', this.pasteBlock)
   },
@@ -409,20 +430,30 @@ export default {
     deleteBlock (index) {
       this.blocks.splice(index, 1)
       this.page.blocks = this.blocks
+      this.unsavedBlocks.add(index)
     },
 
     updatePageBlockGrid (blocks) {
       this.blocks = blocks
     },
 
+    onBlockUpdated (index) {
+      this.unsavedBlocks.add(index)
+    },
+
     updateBlocks () {
       const block = compose.PageBlockMaker(this.editor.block)
       this.page.blocks = this.blocks
 
+      /**
+       * Check if an existing block has been updated or a new block has been added
+       */
       if (this.editor.index !== undefined) {
         this.page.blocks.splice(this.editor.index, 1, block)
+        this.unsavedBlocks.add(this.editor.index)
       } else {
         this.page.blocks.push(block)
+        this.unsavedBlocks.add(this.page.blocks.length - 1)
       }
 
       this.editor = undefined
@@ -461,6 +492,7 @@ export default {
           const mergedPage = new compose.Page({ namespaceID, ...page, blocks: this.blocks })
 
           this.updatePage(mergedPage).then((page) => {
+            this.unsavedBlocks.clear()
             this.toastSuccess(this.$t('notification:page.saved'))
             if (closeOnSuccess) {
               this.$router.push({ name: 'admin.pages' })
@@ -558,7 +590,6 @@ export default {
         const maxY = this.blocks.map((block) => block.xywh[1]).reduce((acc, val) => {
           return acc > val ? acc : val
         }, 0)
-
         block.xywh = [0, maxY + 2, 3, 3]
       }
 
@@ -573,6 +604,11 @@ export default {
         this.toastErrorHandler(this.$t('notification:page.duplicateFailed'))
       }
     },
+
+    // Trigger browser dialog on page leave to prevent unsaved changes
+    checkUnsavedBlocks (next) {
+      next(!this.unsavedBlocks.size || window.confirm(this.$t('build.unsavedChanges')))
+    },
   },
 }
 </script>

locale/en/corteza-webapp-compose/page.yaml

@@ -16,6 +16,7 @@ copyOf: "Copy of {{title}}"
 build:
   addBlock: Add block
   selectBlockTitle: Select type of the new block
+  unsavedChanges: Unsaved changes will be lost. Do you wish to leave the page?
 createLabel: Create page
 edit:
   create: Create page
@@ -45,6 +46,7 @@ pageMoveFailed: Could not move this page
 reordered: Page reordered
 title: List of Pages
 tooltip:
+  unsavedChanges: Unsaved Changes
   view: View page
   edit:
     page: Edit page