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

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

@@ -5,26 +5,24 @@
</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>
<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">
<div class="card flow-codeviewer">
<h5>File Explorer</h5>
@@ -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>