Script & Item edit: Add/Fix dirty handling (#2374)

- Add dirty handling for script-edit.
- Fix dirty handling of item-edit always saying dirty due to wrong
initialization order.
- Code improvements to other dirty handlings.
- Styling improvement to script-general-settings.

---------

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue

@@ -60,15 +60,16 @@
 </style>
 
 <script>
+import cloneDeep from 'lodash/cloneDeep'
+import fastDeepEqual from 'fast-deep-equal/es6'
+
 import * as Types from '@/assets/item-types.js'
 import YAML from 'yaml'
 
 import ItemForm from '@/components/item/item-form.vue'
 
 import DirtyMixin from '../dirty-mixin'
 import ItemMixin from '@/components/item/item-mixin'
-import cloneDeep from 'lodash/cloneDeep'
-import fastDeepEqual from 'fast-deep-equal/es6'
 
 export default {
   mixins: [DirtyMixin, ItemMixin],
@@ -101,11 +102,8 @@ export default {
   watch: {
     item: {
       handler: function () {
-        if (this.ready) {
-          // create rule object clone in order to be able to delete status part
-          // which can change from eventsource but doesn't mean a rule modification
-          let itemClone = cloneDeep(this.item)
-          this.dirty = !fastDeepEqual(itemClone, this.savedItem)
+        if (this.ready) { // ignore changes during loading
+          this.dirty = !fastDeepEqual(this.item, this.savedItem)
         }
       },
       deep: true
@@ -124,16 +122,16 @@ export default {
           created: false
         }
         this.$set(this, 'item', newItem)
-        this.$set(this, 'savedItem', cloneDeep(this.item))
+        this.savedItem = cloneDeep(this.item)
         this.$oh.api.get('/rest/items?staticDataOnly=true').then((items) => {
           this.items = items
           this.ready = true
         })
       } else {
-        this.$set(this, 'savedItem', cloneDeep(this.item))
         const loadItem = this.$oh.api.get('/rest/items/' + this.itemName + '?metadata=.*')
         loadItem.then((data) => {
           this.item = data
+          this.savedItem = cloneDeep(this.item)
           this.$nextTick(() => {
             this.ready = true
           })

bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue

@@ -277,7 +277,7 @@ export default {
   watch: {
     persistence: {
       handler: function () {
-        if (!this.loading) { // ignore initial rule assignment
+        if (!this.loading) { // ignore changes during loading
           this.dirty = !fastDeepEqual(this.persistence, this.savedPersistence)
         }
       },

bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue

@@ -100,7 +100,7 @@
             </div>
             <div v-for="section in ['triggers', 'actions', 'conditions']" :key="section">
               <f7-block-title medium style="margin-bottom: var(--f7-list-margin-vertical)" v-if="isEditable || rule[section].length > 0">
-                {{ sectionLabels[section][0] }}
+                {{ SECTION_LABELS[section][0] }}
               </f7-block-title>
               <f7-list sortable swipeout media-list @sortable:sort="(ev) => reorderModule(ev, section)">
                 <f7-list-item media
@@ -118,7 +118,7 @@
                 </f7-list-item>
               </f7-list>
               <f7-list v-if="isEditable">
-                <f7-list-item link no-chevron media-item :color="($theme.dark) ? 'black' : 'white'" :subtitle="sectionLabels[section][1]" @click="addModule(section)">
+                <f7-list-item link no-chevron media-item :color="($theme.dark) ? 'black' : 'white'" :subtitle="SECTION_LABELS[section][1]" @click="addModule(section)">
                   <f7-icon slot="media" color="green" aurora="f7:plus_circle_fill" ios="f7:plus_circle_fill" md="material:control_point" />
                 </f7-list-item>
                 <!-- <f7-list-button :color="(showModuleControls) ? 'gray' : 'blue'" :title="sectionLabels[section][1]"></f7-list-button> -->
@@ -201,8 +201,15 @@ export default {
   props: ['ruleId', 'createMode', 'copyMode', 'ruleCopy', 'schedule'],
   data () {
     return {
+      SECTION_LABELS: {
+        triggers: ['When', 'Add Trigger'],
+        actions: ['Then', 'Add Action'],
+        conditions: ['But only if', 'Add Condition']
+      },
+
       ready: false,
       loading: false,
+
       rule: {},
       savedRule: {},
       ruleYaml: '',
@@ -212,16 +219,11 @@ export default {
         triggers: []
       },
       currentSection: 'actions',
-      currentTab: 'design',
       currentModuleType: null,
       currentModule: null,
       currentModuleConfig: {},
-      sectionLabels: {
-        triggers: ['When', 'Add Trigger'],
-        actions: ['Then', 'Add Action'],
-        conditions: ['But only if', 'Add Condition']
-      },
 
+      currentTab: 'design',
       codeEditorOpened: false,
       cronPopupOpened: false,
       scriptCode: '',
@@ -232,8 +234,8 @@ export default {
   },
   watch: {
     rule: {
-      handler: function (newRule, oldRule) {
-        if (!this.loading) { // ignore initial rule assignment
+      handler: function () {
+        if (!this.loading) { // ignore changes during loading
           // create rule object clone in order to be able to delete status part
           // which can change from eventsource but doesn't mean a rule modification
           let ruleClone = cloneDeep(this.rule)
@@ -439,6 +441,8 @@ export default {
 
       this.currentSection = section
       this.currentModule = Object.assign({}, mod)
+      if (!this.currentModule.label) this.currentModule.label = ''
+      if (!this.currentModule.description) this.currentModule.description = ''
       this.currentModuleType = this.moduleTypes[section].find((m) => m.uid === mod.type)
 
       const popup = {
@@ -487,6 +491,8 @@ export default {
       const newModule = {
         id: moduleId.toString(),
         configuration: {},
+        description: '',
+        label: '',
         type: '',
         new: true
       }