code browser

src/views/pages/ApplicationBrowser.vue

@@ -0,0 +1,95 @@
+<template> 
+    <div class="flex items-center justify-between p-2">
+            <h1>
+                Source Code Explorer  : ATF-Processor
+            </h1>
+    </div>
+
+    <div class="grid grid-cols-12 gap-2">
+        <div class="col-span-4">
+            <div class="card folder-tree ">
+                <h5>File Browser</h5>
+
+                <Tree :value="nodes" @nodeSelect="onNodeSelect"  selectionMode="single" :expandedKeys="expandedKeys" :filter="true" filterMode="lenient" class="w-full"></Tree>
+
+            </div>
+        </div>
+        <div class="col-span-8">
+            <div class="card flow-codeviewer">  
+                <h5>File Explorer</h5>
+                <FileFlowViewer :file="selectedFile" :application="application"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>  
+
+import FileFlowViewer from '@/components/FileFlowViewer.vue';
+import { ApplicationCodeService } from '@/service/ApplicationCodeService';
+import Tree from 'primevue/tree';
+import { onMounted, ref } from 'vue';
+const nodes = ref(null)
+const expandedKeys = ref({});
+const selectedFile = ref({})
+const application=ref("ATF-Notifier")
+onMounted(() => {
+    console.log("Mounted")
+    ApplicationCodeService.getApplication('ATF-Notifier').then(response => {
+        var tmp = []
+        tmp.push(response.data)
+        nodes.value = tmp
+        expandAll()   
+    })
+})
+
+function onNodeSelect(e){
+    if(e.icon == "pi pi-fw pi-file"){
+        selectedFile.value = e.key
+    }
+    console.log(e)
+}
+
+
+
+
+
+const expandAll = () => {
+    for (let node of nodes.value) {
+        expandNode(node);
+    }
+
+    expandedKeys.value = { ...expandedKeys.value };
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node) => {
+    expandedKeys.value[node.key] = true;
+
+    if (node.children && node.children.length) {
+        for (let child of node.children) {
+            expandNode(child);
+        }
+    }
+};
+
+</script>
+
+
+<style>
+.folder-tree {
+    min-height: 75vh;
+    overflow: auto;
+}
+
+.p-inputtext {
+    width: 100%;
+}
+
+.flow-codeviewer{
+    height:75vh
+}
+</style>