Transformation edit: Improve dirty handling & Fix settings styling

Only mark the transformation as dirty if there was an actual change,
not only an editor input.

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

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

@@ -59,8 +59,8 @@
             </f7-link>
           </div>
         </f7-toolbar>
+        <transformation-general-settings :createMode="createMode" :transformation="transformation" />
         <f7-block class="block-narrow">
-          <transformation-general-settings :createMode="createMode" :transformation="transformation" />
           <f7-col>
             <f7-list v-if="isEditable">
               <f7-list-button color="red" @click="deleteTransformation">
@@ -86,6 +86,9 @@
 </style>
 
 <script>
+import cloneDeep from 'lodash/cloneDeep'
+import fastDeepEqual from 'fast-deep-equal/es6'
+
 import DirtyMixin from '../dirty-mixin'
 import TransformationGeneralSettings from '@/pages/settings/transformations/transformation-general-settings'
 import { CodeSnippets, EditorModes } from '@/assets/definitions/transformations.js'
@@ -105,6 +108,7 @@ export default {
       ready: false,
       loading: false,
       transformation: {},
+      savedTransformation: {},
       types: [],
       languages: [],
       language: '',
@@ -113,6 +117,16 @@ export default {
       blocklyCodePreview: false
     }
   },
+  watch: {
+    transformation: {
+      handler: function () {
+        if (!this.loading) { // ignore changes during loading
+          this.dirty = !fastDeepEqual(this.transformation, this.savedTransformation)
+        }
+      },
+      deep: true
+    }
+  },
   computed: {
     isEditable () {
       return this.transformation && this.transformation.editable !== false
@@ -201,6 +215,7 @@ export default {
 
       this.$oh.api.get('/rest/transformations/' + this.transformationId).then((data) => {
         this.$set(this, 'transformation', data)
+        this.savedTransformation = cloneDeep(this.transformation)
         this.editorMode = EditorModes[this.transformation.type.toLowerCase()] || this.transformation.type
         this.loading = false
         this.ready = true
@@ -219,6 +234,7 @@ export default {
       }
       return this.$oh.api.put('/rest/transformations/' + this.transformation.uid, this.transformation).then((data) => {
         this.dirty = false
+        this.savedTransformation = cloneDeep(this.transformation)
         if (!noToast) {
           this.$f7.toast.create({
             text: 'Transformation updated',
@@ -261,7 +277,6 @@ export default {
     },
     onEditorInput (value) {
       this.transformation.configuration.function = value
-      this.dirty = true
     },
     keyDown (ev) {
       if ((ev.ctrlKey || ev.metaKey) && !(ev.altKey || ev.shiftKey)) {