add tree sidebar to file view

Author: kerwin612

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,19 +33,19 @@ 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>
 
 <template>
   <!--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>

web_src/js/features/repo-view-file-tree-sidebar.ts

@@ -1,4 +1,4 @@
-import {createApp} from 'vue';
+import {createApp, ref} from 'vue';
 import {toggleElem} from '../utils/dom.ts';
 import {GET, PUT} from '../modules/fetch.ts';
 import ViewFileTree from '../components/ViewFileTree.vue';
@@ -78,10 +78,14 @@ export async function initViewFileTreeSidebar() {
 
   const fileTree = document.querySelector('#view-file-tree');
   const treePath = fileTree.getAttribute('data-tree-path');
+  const selectedItem = ref(treePath);
 
   const files = await loadRecursive(treePath);
 
   fileTree.classList.remove('center');
-  const fileTreeView = createApp(ViewFileTree, {files, selectedItem: treePath, loadChildren});
+  const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {
+    window.history.pushState(null, null, item.htmlUrl);
+    selectedItem.value = item.path;
+  }});
   fileTreeView.mount(fileTree);
 }