Generic treeview, clickable name, parent dialog

emit signal from treeview when clicked
make name click/selectable even if folder type
initial select parent dialog

src/assets/main.css

@@ -2,4 +2,4 @@
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
-}
+}

src/components/TheModeler.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import type { UABaseNode } from '@/ua/UABaseNode';
 import TreeItem from './TreeItem.vue'
 import {useStore} from '@/util/store'
 const store = useStore()
+
+function selectNode(node: UABaseNode) {
+  store.selectedNode=node;
+}
 </script>
 
 <template>
@@ -10,7 +15,7 @@ const store = useStore()
     <h5 class="card-title">Addressspace</h5>
     <p class="card-text">
       <ul>
-        <TreeItem class="item" :model="store.rootNode" v-if="store.rootNode!=null"></TreeItem>
+        <TreeItem class="item" :model="store.rootNode" v-if="store.rootNode!=null" @select-node="(node) => selectNode(node)"></TreeItem>
       </ul>
     </p>
   </div>

src/components/TheModels.vue

@@ -10,7 +10,7 @@ import YAML from 'yaml'
 
 const store = useStore()
 const newDialogOpen = ref(false);
-const newDialogDisabled = ref(false);
+const newDialogDisabled = ref(false); //Disables buttons while loading project
 const projectType = ref("ua");
 
 async function exportProject() {

src/components/TheParent.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
 import { useStore } from '@/util/store'
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import TheTreeDialog from './TheTreeDialog.vue';
+import type { UABaseNode } from '@/ua/UABaseNode';
 const store = useStore()
 
-
+const parentDialogOpen = ref(false);
 const node = computed(() => {
-    return store.selectedNode;
+  return store.selectedNode;
 
 });
 
+function clickNode(clickedNode: UABaseNode) {
+  //TODO: replace parent references
+  parentDialogOpen.value=false;
+}
+
 </script>
 
 <template>
@@ -20,21 +27,24 @@ const node = computed(() => {
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">Name</span>
           </div>
-          <input readonly type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"
-            :value="node?.getParent()?.displayName">
+          <input readonly type="text" class="form-control" aria-label="Default"
+            aria-describedby="inputGroup-sizing-default" :value="node?.getParent()?.displayName">
+            <button class="btn btn-light" @click="parentDialogOpen = true">...</button>
+
         </div>
         <div class="input-group mb-3">
           <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 selected v-text="node?.getParentRef()?.referenceType" ></option>
+            <option selected v-text="node?.getParentRef()?.referenceType"></option>
             <option value="1">...</option>
           </select>
         </div>
       </div>
     </div>
   </div>
+  <TheTreeDialog :open="parentDialogOpen" @cancel="parentDialogOpen = false" @select-node="(node) => clickNode(node)"></TheTreeDialog>
 </template>
 
 

src/components/TheTreeDialog.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useStore } from '@/util/store'
+import { ref } from 'vue';
+import VDialog from './VDialog.vue'
+import TreeItem from './TreeItem.vue'
+
+const store = useStore()
+const newDialogOpen = ref(false);
+</script>
+
+<template>
+  <v-dialog :open="newDialogOpen" 
+    @cancel="newDialogOpen = false" 
+    @select-node="(node) => $emit('selectNode', node)">
+    <div class="card treedialog">
+      <div class="card-body" v-if="store.addressSpace">
+        <h5 class="card-title">Browse Parent</h5>
+        <p class="card-text">
+        <ul>
+          <TreeItem class="item" 
+            @select-node="(node) => $emit('selectNode', node)"
+            :model="store.rootNode" v-if="store.rootNode != null">
+          </TreeItem>
+        </ul>
+        </p>
+        <button class="btn btn-light" @click="$emit('cancel')">close</button>
+      </div>
+    </div>
+  </v-dialog>
+</template>
+
+
+<style scoped>
+.treedialog {
+  width: 30em;
+  height: 40em;
+}
+</style>

src/components/TreeItem.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts" >
 import { UABaseNode } from '@/ua/UABaseNode';
-import { useStore } from '@/util/store';
 import { ref, computed } from 'vue'
-const store = useStore()
 
 const props = defineProps({
   model: UABaseNode
@@ -17,24 +15,20 @@ const isFolder = computed(() => {
 function toggle() {
   isOpen.value = !isOpen.value
 }
-
-function selectNode(node: UABaseNode) {
-  store.selectedNode=node;
-}
 </script>
 
 <template>
   <li>
-    <div v-if="model"
-      :class="{ bold: isFolder }"
-      @click="toggle">
-      {{ model.displayName }}
-      <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
+    <div v-if="model" :class="{ bold: isFolder }">
+      <span @click.stop="$emit('selectNode', model)">
+        {{ model.displayName }}
+      </span>
+      <span v-if="isFolder" @click="toggle">[{{ isOpen ? '-' : '+' }}]</span>
     </div>
     <ul v-show="isOpen" v-if="isFolder && model">
       <TreeItem
         class="item"
-        @click.stop="selectNode(child)"
+        @select-node="(node: UABaseNode) => $emit('selectNode', node)"
         v-for="child in model.getChildren()"
         v-bind:key="child.nodeId.toString()"
         :model="child">