implement ok button for mapping editor

src/components/TheMappingEditor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useStore } from '@/store'
 const store = useStore()
-import { computed, shallowRef } from 'vue'
+import { ref, shallowRef, watch } from 'vue'
 import VCollaps from './VCollaps.vue';
 
 //see https://github.com/imguolao/monaco-vue#vite
@@ -37,25 +37,23 @@ const MONACO_EDITOR_OPTIONS = {
   formatOnType: true,
   formatOnPaste: true,
 }
-
 const { selectedNode } = storeToRefs(store)
+const code=ref("");
+let dirty=false;
 
-
-const code = computed(():string => {
-    if(!selectedNode.value)
-      return "";
-    if(!selectedNode.value.nodeId.value)
-      return "";
-    const m=store.addressSpace?.mapping.get(selectedNode.value.nodeId.toString());
-    if(m)
-      return m.read;
-    return "";
+watch(selectedNode, () => {
+  if (!selectedNode.value)
+    return;
+  if (!selectedNode.value.nodeId.value)
+    return;
+  const m = store.addressSpace?.mapping.get(selectedNode.value.nodeId.toString());
+  code.value = m?.read || "";
+  dirty=false;
 });
 
 const editorRef = shallowRef()
 const handleMount = (editor: any) => {
-  editorRef.value = editor
-
+  editorRef.value = editor;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -64,17 +62,26 @@ const onChange = (value: string | undefined, event: monaco.editor.IModelContentC
     return;
   if(!value)
     return;
-  store.addressSpace?.mapping.set(store.selectedNode.nodeId.value.toString(), {path: store.selectedNode.nodeId.toString(), read: value, write: ""} as IMappingValue)
+  code.value=value;
+}
+
+function formChanged(){
+  dirty=true;
 }
 
 function okPressed() {
-  console.log('TODO: Handle OK Button');
+  if(!dirty)
+    return;
+  if(!selectedNode.value)
+    return;
+  store.addressSpace?.mapping.set(selectedNode.value.nodeId.toString(), {path: selectedNode.value.nodeId.toString(), read: code.value, write: ""} as IMappingValue)
+  dirty=false;
 }
 defineExpose({ okPressed })
 </script>
 
 <template>
-  <VCollaps :selected=false name="Mapping">
+  <VCollaps :selected=false name="Mapping"  @change="formChanged()">
       <div class="card-text" v-if="selectedNode">
         <vue-monaco-editor
           v-model:value="code"

src/components/TheParent.vue

@@ -8,11 +8,11 @@ import { ReferenceTypeIds } from '@/ua/opcua_node_ids';
 import type { UAReferenceType } from '@/ua/UAReferenceType';
 import { storeToRefs } from 'pinia';
 const store = useStore()
-
 const parentDialogOpen = ref(false);
 const { selectedNode } = storeToRefs(store)
 const selectedRefType = ref('')
 const selectedParent = ref(UABaseNode.nullBaseNode);
+let dirty = false;
 
 function clickNode(clickedNode: UABaseNode) {
   selectedParent.value=clickedNode;
@@ -22,9 +22,16 @@ function clickNode(clickedNode: UABaseNode) {
 watch(selectedNode, async (newNode, _oldNode) => {
   selectedRefType.value=newNode?.getParentRef()?.referenceType||"";
   selectedParent.value=newNode?.getParent()||UABaseNode.nullBaseNode;
+  dirty=false;
 })
 
+function formChanged(){
+  dirty=true;
+}
+
 function okPressed() {
+  if(!dirty)
+    return;
   //TODO: check if valid
   selectedNode.value?.setParent(selectedParent.value, selectedRefType.value);
 }
@@ -44,7 +51,7 @@ const refTypes = computed(():UABaseNode[]  => {
 </script>
 
 <template>
-  <VCollaps :selected=false name="Parent">
+  <VCollaps :selected=false name="Parent" @change="formChanged()">
     <div class="card-text"  v-if="selectedNode">
       <div class="input-group mb-3">
         <div class="input-group-prepend">