shared OK button for detail views; parent dialog update

src/App.vue

@@ -11,6 +11,11 @@ import TheModels from './components/TheModels.vue'
 import { useStore } from './util/store';
 import { AddressSpace } from './ua/AddressSpace';
 import { assert } from './util/assert';
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+const store = useStore();
+const { selectedNode } = storeToRefs(store);
+
 
 async function load(): Promise<AddressSpace> {
     const files=['nodesets/Opc.Ua.NodeSet2.xml',
@@ -23,6 +28,7 @@ async function load(): Promise<AddressSpace> {
     return as;
   }
 
+
   const loadData = async () => {
     const store = useStore();
     store.sConfig = new ServerConfig();
@@ -33,28 +39,36 @@ async function load(): Promise<AddressSpace> {
     store.rootNode=rootNode;
   }
   loadData();
+
+  const childParentRef = ref();
+  const childDetailRef = ref();
+  const childEditorRef = ref();
+  const childDynamicsRef = ref();
+
+  function okPressed(){
+    childParentRef.value.okPressed();
+    childDetailRef.value.okPressed();
+    childEditorRef.value.okPressed();
+    childDynamicsRef.value.okPressed();
+  }
 </script>
 
 <template>
   <div class="container text-left">
     <div class="row align-items-start">
       <div class="col col-6">
-        
         <TheModels />
-        <TheModeler />
-        
+        <TheModeler />    
       </div>
       <div class="col col-6">
-        <TheParent />
-        <TheDetail />
-        <TheEditor />
-        <TheDynamics />
-
+        <TheParent ref="childParentRef"/>
+        <TheDetail ref="childDetailRef"/>
+        <TheEditor ref="childEditorRef"/>
+        <TheDynamics ref="childDynamicsRef"/>
+        <button class="btn btn-light"  v-if="selectedNode!=null" @click.prevent="okPressed()">OK</button>
       </div>
     </div>
   </div>
 </template>
-
 <style>
-
 </style>

src/components/TheDetail.vue

@@ -12,6 +12,11 @@ const nameSpaceName = computed(() => {
   let nsIdx=selectedNode.value.nodeId.namespace;
   return store.addressSpace?.nst.getUri(nsIdx);
 })
+
+function okPressed() {
+  console.log('TODO: Handle OK Button');
+}
+defineExpose({ okPressed })
 </script>
 
 <template>

src/components/TheDynamics.vue

@@ -145,23 +145,13 @@ async function createDynamic() {
 
 
 }
-
-
-
-
-
-
-
 const checked = ref("")
 const typedef = ref("")
 
-
-
-
-
-
-
-
+function okPressed() {
+  console.log('TODO: Handle OK Button');
+}
+defineExpose({ okPressed })
 </script>
 
 <template>

src/components/TheEditor.vue

@@ -65,6 +65,11 @@ const onChange = (value: string | undefined, event: monaco.editor.IModelContentC
     return;
   store.addressSpace?.mapping.set(store.selectedNode.nodeId.value.toString(), {path: store.selectedNode.nodeId.toString(), read: value, write: ""} as IMappingValue)
 }
+
+function okPressed() {
+  console.log('TODO: Handle OK Button');
+}
+defineExpose({ okPressed })
 </script>
 
 <template>

src/components/TheParent.vue

@@ -1,24 +1,34 @@
 <script setup lang="ts">
 import { useStore } from '@/util/store'
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import TheTreeDialog from './TheTreeDialog.vue';
-import type { UABaseNode } from '@/ua/UABaseNode';
+import { UABaseNode } from '@/ua/UABaseNode';
 import { ReferenceTypeIds } from '@/ua/opcua_node_ids';
 import type { UAReferenceType } from '@/ua/UAReferenceType';
+import { NodeId } from '@/ua/NodeId';
 const store = useStore()
 
 const parentDialogOpen = ref(false);
 const node = computed(() => {
   return store.selectedNode;
-
 });
+const selectedRefType = ref('')
+const selectedParent = ref(new UABaseNode({browseName: "", nodeId:NodeId.nullNodeId}));
 
-function clickNode(node: UABaseNode) {
-  //TODO: replace parent references
-  // node.value?.setParent(clickedNode, store.addressSpace?.findNode("ns=0;i="+ ReferenceTypeIds.HierarchicalReferences));
+function clickNode(clickedNode: UABaseNode) {
+  selectedParent.value=clickedNode;
   parentDialogOpen.value=false;
 }
 
+watch(node, async (newNode, _oldNode) => {
+  selectedRefType.value=newNode?.getParentRef()?.referenceType||"";
+})
+
+function okPressed() {
+  console.log('TODO: Handle OK Button');
+}
+defineExpose({ okPressed })
+
 function filter(fnode: UABaseNode) {
   if(node.value?.nodeClass==="Variable") {
     if(fnode.nodeClass!="Object")
@@ -54,8 +64,8 @@ function getRefTypes():UABaseNode[] {
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">Reference</span>
           </div>
-          <select class="form-select" aria-label="Default select example">
-            <option v-for="option in getRefTypes()" :value="option.nodeId.toString()" v-bind:key="option.nodeId.toString()">
+          <select class="form-select" aria-label="Selected ref. type" v-model="selectedRefType" >
+            <option v-for="option in getRefTypes()" :value="option.browseName" v-bind:key="option.browseName">
               {{ option.displayName }}
             </option>
           </select>