show confirmation dialog on changes

Signed-off-by: hubsif <[email protected]>
openhab · Feb 9, 2021 · 48d244e · 48d244e
1 parent a55b0b7
commit 48d244e
Show file tree

Hide file tree

Showing 20 changed files with 331 additions and 231 deletions.
diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
@@ -59,18 +59,21 @@
     "Samsung >= 5"
   ],
   "dependencies": {
+    "blockly": "^4.20201217.0",
     "cronstrue": "^1.100.0",
     "dayjs": "^1.9.6",
     "dom7": "^2.1.5",
     "echarts": "^5.0.1",
     "event-source-polyfill": "^1.0.22",
     "expression-eval": "^2.1.0",
+    "fast-deep-equal": "^3.1.3",
     "framework7": "^5.7.12",
     "framework7-icons": "^3.0.1",
     "framework7-vue": "^5.7.12",
     "later-again": "^0.1.1",
     "leaflet": "^1.7.1",
     "leaflet-providers": "^1.11.0",
+    "lodash": "^4.17.20",
     "moo": "^0.5.1",
     "nearley": "^2.19.6",
     "pkce-challenge": "^2.1.0",
@@ -112,7 +115,6 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
-    "blockly": "^3.20200924.4",
     "chalk": "^2.4.2",
     "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.2.1",

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -40,6 +40,15 @@ import DeveloperToolsPage from '../pages/developer/developer-tools.vue'
 import WidgetsListPage from '../pages/developer/widgets/widget-list.vue'
 import ApiExplorerPage from '../pages/developer/api-explorer.vue'
 
+const checkDirtyBeforeLeave = function(routeTo, routeFrom, resolve, reject) {
+  if (this.currentPageEl && this.currentPageEl.__vue__ && this.currentPageEl.__vue__.$parent && this.currentPageEl.__vue__.$parent.beforeLeave &&
+      !routeTo.path.startsWith(routeFrom.path)) {
+    this.currentPageEl.__vue__.$parent.beforeLeave(resolve, reject)
+  } else {
+    resolve()
+  }
+};
+
 export default [
   {
     path: '/',
@@ -119,10 +128,12 @@ export default [
             routes: [
               {
                 path: 'edit',
-                component: ItemEditPage
+                component: ItemEditPage,
+                beforeLeave: checkDirtyBeforeLeave
               },
               {
                 path: 'metadata/:namespace',
+                beforeLeave: checkDirtyBeforeLeave,
                 async (routeTo, routeFrom, resolve, reject) {
                   // dynamic import component; returns promise
                   const editorComponent = () => import(/* webpackChunkName: "metadata-edit" */ `../pages/settings/items/metadata/item-metadata-edit.vue`)
@@ -145,6 +156,7 @@ export default [
         routes: [
           {
             path: ':type/:uid',
+            beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
               // dynamic import component; returns promise
               const editorComponent = () => import(/* webpackChunkName: "[request]" */ `../pages/settings/pages/${routeTo.params.type}/${routeTo.params.type}-edit.vue`)
@@ -199,7 +211,8 @@ export default [
           },
           {
             path: ':thingId',
-            component: ThingDetailsPage
+            component: ThingDetailsPage,
+            beforeLeave: checkDirtyBeforeLeave
           }
         ]
       },
@@ -226,6 +239,7 @@ export default [
         routes: [
           {
             path: ':ruleId',
+            beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
               // dynamic import component; returns promise
               const ruleEditComponent = () => import(/* webpackChunkName: "rule-edit" */ '../pages/settings/rules/rule-edit.vue')
@@ -245,6 +259,7 @@ export default [
             routes: [
               {
                 path: 'script/:moduleId',
+                beforeLeave: checkDirtyBeforeLeave,
                 async (routeTo, routeFrom, resolve, reject) {
                   // dynamic import component; returns promise
                   const ruleEditComponent = () => import(/* webpackChunkName: "rule-script-edit" */ '../pages/settings/rules/script/script-edit.vue')
@@ -277,6 +292,7 @@ export default [
         routes: [
           {
             path: ':ruleId',
+            beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
               // dynamic import component; returns promise
               const ruleEditComponent = () => import(/* webpackChunkName: "script-edit" */ '../pages/settings/rules/script/script-edit.vue')
@@ -312,6 +328,7 @@ export default [
         routes: [
           {
             path: 'add',
+            beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
               // dynamic import component; returns promise
               const ruleEditComponent = () => import(/* webpackChunkName: "rule-edit" */ '../pages/settings/rules/rule-edit.vue')
@@ -351,7 +368,8 @@ export default [
       },
       {
         path: 'services/:serviceId',
-        component: ServiceSettingsPage
+        component: ServiceSettingsPage,
+        beforeLeave: checkDirtyBeforeLeave
       }
     ]
   },
@@ -368,6 +386,7 @@ export default [
         routes: [
           {
             path: ':uid',
+            beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
               // dynamic import component; returns promise
               const widgetEditComponent = () => import(/* webpackChunkName: "widget-edit" */ '../pages/developer/widgets/widget-edit.vue')

diff --git a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
@@ -26,7 +26,7 @@
     <f7-block v-else :key="blockKey + 'b'" class="widget-editor vertical">
       <f7-row resizable>
         <f7-col resizable style="min-width: 20px" class="widget-code">
-          <editor class="widget-component-editor" mode="application/vnd.openhab.uicomponent+yaml?type=widget" :value="widgetDefinition" @input="(value) => widgetDefinition = value" />
+          <editor class="widget-component-editor" mode="application/vnd.openhab.uicomponent+yaml?type=widget" :value="widgetDefinition" @input="onEditorInput" />
         </f7-col>
         <f7-col v-if="ready" resizable style="min-width: 20px" class="widget-preview padding-right margin-bottom">
           <generic-widget-component :key="widgetKey" :context="context" @command="onCommand" />
@@ -96,10 +96,12 @@ import YAML from 'yaml'
 import { strOptions } from 'yaml/types'
 
 import ConfigSheet from '@/components/config/config-sheet.vue'
+import DirtyMixin from '@/pages/settings/dirty-mixin'
 
 strOptions.fold.lineWidth = 0
 
 export default {
+  mixins: [DirtyMixin],
   components: {
     'editor': () => import('@/components/config/controls/script-editor.vue'),
     ConfigSheet
@@ -155,6 +157,12 @@ export default {
       }
       this.$store.dispatch('stopTrackingStates')
     },
+    onEditorInput (value) {
+      this.widgetDefinition = value
+      if (!this.loading) {
+        this.dirty = true
+      }
+    },
     keyDown (ev) {
       if (ev.ctrlKey || ev.metakKey) {
         switch (ev.keyCode) {
@@ -181,8 +189,6 @@ export default {
       this.loading = true
 
       if (this.createMode) {
-        this.loading = false
-        this.ready = true
         this.widgetDefinition = YAML.stringify({
           uid: 'widget_' + this.$f7.utils.id(),
           props: {
@@ -211,11 +217,17 @@ export default {
             content: '=items[props.item].displayState || items[props.item].state'
           }
         })
+        this.$nextTick(() => {
+          this.loading = false
+          this.ready = true
+        })
       } else {
         this.$oh.api.get('/rest/ui/components/ui:widget/' + this.uid).then((data) => {
           this.$set(this, 'widgetDefinition', YAML.stringify(data))
-          this.ready = true
-          this.loading = false
+          this.$nextTick(() => {
+            this.loading = false
+            this.ready = true
+          })
         })
       }
     },
@@ -252,6 +264,7 @@ export default {
             closeTimeout: 2000
           }).open()
         }
+        this.dirty = false
         this.$f7.emit('sidebarRefresh', null)
         // if (!stay) this.$f7router.back()
       }).catch((err) => {

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/dirty-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/dirty-mixin.js
@@ -0,0 +1,21 @@
+export default {
+  data () {
+    return {
+      dirty: false
+    }
+  },
+  methods: {
+    beforeLeave (resolve, reject) {
+      if (this.dirty) {
+        this.$f7.dialog.confirm(
+          'Do you want to leave this page without saving?',
+          'Changes have not been saved',
+          function () { resolve() },
+          function () { reject() }
+        )
+      } else {
+        resolve()
+      }
+    }
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
@@ -53,8 +53,10 @@ import ItemForm from '@/components/item/item-form.vue'
 import GroupForm from '@/components/item/group-form.vue'
 import TagInput from '@/components/tags/tag-input.vue'
 import ItemPicker from '@/components/config/controls/item-picker.vue'
+import DirtyMixin from '../dirty-mixin'
 
 export default {
+  mixins: [DirtyMixin],
   props: ['itemName', 'createMode'],
   components: {
     ItemPicker,
@@ -75,6 +77,16 @@ export default {
   },
   created () {
   },
+  watch: {
+    item: {
+      handler: function () {
+        if (this.ready) {
+          this.dirty = true
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     onPageAfterIn () {
       if (this.createMode) {
@@ -94,7 +106,9 @@ export default {
         loadItem.then((data) => {
           if (!data.groupType) data.groupType = 'None'
           this.item = data
-          this.ready = true
+          this.$nextTick(() => {
+            this.ready = true
+          })
         })
       }
       if (window) {
@@ -134,6 +148,7 @@ export default {
             closeTimeout: 2000
           }).open()
         }
+        this.dirty = false
         this.$f7router.back()
       }).catch((err) => {
         this.$f7.toast.create({

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue
@@ -27,7 +27,7 @@
       </f7-tab>
 
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
-        <editor v-if="currentTab === 'code'" class="metadata-code-editor" mode="text/x-yaml" :value="yaml" @input="(value) => yaml = value" />
+        <editor v-if="currentTab === 'code'" class="metadata-code-editor" mode="text/x-yaml" :value="yaml" @input="onEditorInput" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
       </f7-tab>
     </f7-tabs>
@@ -62,8 +62,10 @@ import ItemMetadataExpire from '@/components/item/metadata/item-metadata-expire.
 import ItemMetadataAlexa from '@/components/item/metadata/item-metadata-alexa.vue'
 import ItemMetadataHomeKit from '@/components/item/metadata/item-metadata-homekit.vue'
 import ItemMetadataGa from '@/components/item/metadata/item-metadata-ga.vue'
+import DirtyMixin from '../../dirty-mixin'
 
 export default {
+  mixins: [DirtyMixin],
   props: ['itemName', 'namespace'],
   components: {
     'editor': () => import('@/components/config/controls/script-editor.vue')
@@ -79,6 +81,16 @@ export default {
       yaml: null
     }
   },
+  watch: {
+    metadata: {
+      handler: function () {
+        if (this.ready) {
+          this.dirty = true
+        }
+      },
+      deep: true
+    }
+  },
   computed: {
     editorControl () {
       switch (this.namespace) {
@@ -129,13 +141,19 @@ export default {
           if (!this.metadata.config) this.$set(this.metadata, 'config', {})
           this.creationMode = false
         }
-        this.ready = true
         if (this.generic) {
           this.currentTab = 'code'
           this.toYaml()
         }
+        this.$nextTick(() => {
+          this.ready = true
+        })
       })
     },
+    onEditorInput (value) {
+      this.yaml = value
+      this.dirty = true
+    },
     save () {
       if (this.currentTab === 'code' && !this.fromYaml()) return
       if (!this.metadata.value) this.metadata.value = ' '
@@ -153,6 +171,7 @@ export default {
             closeTimeout: 2000
           }).open()
         }
+        this.dirty = false
         this.$f7router.back()
       }).catch((err) => {
         this.$f7.toast.create({

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue
@@ -28,7 +28,6 @@
             :parameterGroups="pageWidgetDefinition.props.parameterGroups || []"
             :parameters="pageWidgetDefinition.props.parameters || []"
             :configuration="page.config"
-            @updated="dirty = true"
           />
         </f7-block>
 
@@ -39,7 +38,7 @@
       </f7-tab>
 
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
-        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=chart" :value="pageYaml" @input="(value) => pageYaml = value" />
+        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=chart" :value="pageYaml" @input="onEditorInput" />
         <!-- <pre v-show="!previewMode" class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
 
         <oh-chart-page class="chart-page" v-if="ready && previewMode" :context="context" :key="pageKey" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
@@ -81,7 +81,7 @@
       </f7-tab>
 
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
-        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=home" :value="pageYaml" @input="(value) => pageYaml = value" />
+        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=home" :value="pageYaml" @input="onEditorInput" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
         <div v-if="ready && previewMode" :context="context" :key="pageKey">
           <model-tab style="margin-bottom: 4rem" :context="context" :type="currentModelTab" :model="model" :page="page" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -31,7 +31,7 @@
         />
       </f7-tab>
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
-        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml?type=layout" :value="pageYaml" @input="(value) => pageYaml = value" />
+        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml?type=layout" :value="pageYaml" @input="onEditorInput" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
 
         <oh-layout-page class="layout-page" v-if="ready && previewMode" :context="context" :key="pageKey" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue
@@ -78,7 +78,7 @@
       </f7-tab>
 
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
-        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=map" :value="pageYaml" @input="(value) => pageYaml = value" />
+        <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=map" :value="pageYaml" @input="onEditorInput" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
 
         <oh-map-page class="map-page" v-if="ready && previewMode" :context="context" :key="pageKey + '2'" />