add tree sidebar to file view

web_src/js/components/ViewFileTree.vue

@@ -3,15 +3,16 @@ import ViewFileTreeItem from './ViewFileTreeItem.vue';
 
 defineProps<{
   files: any,
-  selectedItem: string,
+  selectedItem: any,
   loadChildren: any,
+  loadContent: any;
 }>();
 </script>
 
 <template>
   <div class="view-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
   </div>
 </template>
 

web_src/js/components/ViewFileTreeItem.vue

@@ -12,13 +12,14 @@ type Item = {
 
 const props = defineProps<{
   item: Item,
+  loadContent: any;
   loadChildren: any;
-  selectedItem?: string;
+  selectedItem?: any;
 }>();
 
 const isLoading = ref(false);
-const collapsed = ref(!props.item.children);
 const children = ref(props.item.children);
+const collapsed = ref(!props.item.children);
 
 const doLoadChildren = async () => {
   collapsed.value = !collapsed.value;
@@ -32,11 +33,11 @@ const doLoadChildren = async () => {
 
 const doLoadDirContent = () => {
   doLoadChildren();
-  window.location.href = props.item.htmlUrl;
+  props.loadContent(props.item);
 };
 
 const doLoadFileContent = () => {
-  window.location.href = props.item.htmlUrl;
+  props.loadContent(props.item);
 };
 </script>
 
@@ -44,7 +45,7 @@ const doLoadFileContent = () => {
   <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
   <div
     v-if="item.isFile" class="item-file"
-    :class="{'selected': selectedItem === item.path}"
+    :class="{'selected': selectedItem.value === item.path}"
     :title="item.name"
     @click.stop="doLoadFileContent"
   >
@@ -54,7 +55,7 @@ const doLoadFileContent = () => {
   </div>
   <div
     v-else class="item-directory"
-    :class="{'selected': selectedItem === item.path}"
+    :class="{'selected': selectedItem.value === item.path}"
     :title="item.name"
     @click.stop="doLoadDirContent"
   >
@@ -66,7 +67,7 @@ const doLoadFileContent = () => {
   </div>
 
   <div v-if="children?.length" v-show="!collapsed" class="sub-items">
-    <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
   </div>
 </template>
 <style scoped>