admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated CIA and File Tree visualization

Browse Source
This commit is contained in:
Emanuele Ferrelli
2024-11-19 14:53:05 +01:00
parent 207e41c36d
commit c2b7c42caa
3 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/CiaFlowCodeViewer.vue
View File

@@ -7,9 +7,9 @@ import Dialog from 'primevue/dialog'
import { nextTick, onMounted, ref, toRefs } from 'vue'
import ClassNode from './ClassNode.vue'
import { useLayout } from './useLayout'
import { defineProps } from 'vue'
import 'vue3-markdown/dist/style.css'
import { UserPrefStore } from '@/stores/UserPrefStore.js';
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
@@ -22,6 +22,7 @@ const { graph, layout, previousDirection } = useLayout()
const dialogCodeVisible = ref(false)
const userPrefStore = UserPrefStore();
//66f55e4b2894530b1c154f69
const props = defineProps({
@@ -59,11 +60,9 @@ function layoutGraph(direction) {
}
function defineNodes() {
var tmpNode=[]
var tmpEdges=[]
var app = {'name':'Apollo'}
var tmpEdges = []
var app = { name: userPrefStore.getSelApp.fe_name }
tmpNode.push({
id: app.name,
data: { label: app.name },

6
src/stores/UserPrefStore.js
View File

@@ -61,11 +61,15 @@ export const UserPrefStore = defineStore('userpref_store', () => {
}
});
const getSelProj = computed(() => {
return selectedProject.value
})
const getSelApp = computed(() => {
return selectedApp.value
})
return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject }
return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject,getSelProj }
})

48
src/views/pages/ApplicationBrowser.vue
View File

@@ -5,24 +5,22 @@
</h1>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-6">
<div class="card folder-tree ">
<h5>File Browser</h5>
<div v-if="nodes && nodes.length">
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
</div>
<Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
</div>
<div v-else class="self-center" style="flex: 1">
<Skeleton v-for="(config, index) in skeletonConfigs"
:key="index"
:width="config.width"
:height="config.height"
class="mb-2" />
<div class="flex gap-2">
<div class="card folder-tree">
<h5>File Browser</h5>
<div v-if="nodes && nodes.length" class="flex-1">
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
</div>
<Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
</div>
<div v-else class="flex-skeleton">
<Skeleton v-for="(config, index) in skeletonConfigs"
:key="index"
:width="config.width"
:height="config.height"
class="mb-2 w-full" />
</div>
</div>
<div id ="card-flow-codeviewer" class="flex-1">
@@ -44,15 +42,13 @@ import { LoadingStore } from '@/stores/LoadingStore.js';
import Tree from 'primevue/tree';
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
import { UserPrefStore } from '@/stores/UserPrefStore.js';
const nodes = ref(null)
const expandedKeys = ref({});
const selectedFile = ref({})
const router = useRouter();
const userPrefStore = UserPrefStore();
//const selectedApp = userPrefStore.getSelApp;
//const application=ref(selectedApp.fe_name)
const loadingStore = LoadingStore()
onMounted(() => {
@@ -92,7 +88,7 @@ function onNodeSelect(e){
selectedFile.value = e.key
}
console.log(e)
}
};
const expandAll = () => {
@@ -169,7 +165,13 @@ watch(selectedFile, () => {
width: 100%;
}
.flow-codeviewer{
height:75vh
.flow-codeviewer {
height: 75vh;
}
.flex-skeleton {
flex: 1;
min-width: 350px;
text-align: center;
}
</style>