added functionality to have filepath in url

frontend/src/components/NavigationSidebar.vue

@@ -34,7 +34,7 @@ function cancelDirectoryCreation() {
 }
 
 async function submitDirectoryCreation() {
-  const directoryPath = `${props.currentDirectory}${newDirectoryName.value}`
+  const directoryPath = `${props.currentDirectory}/${newDirectoryName.value}`
   console.log("new dir", directoryPath)
   await directoryRepository.createNew(directoryPath)
   newDirectoryName.value = ""
@@ -43,7 +43,7 @@ async function submitDirectoryCreation() {
 }
 
 async function submitFileCreation() {
-  const notePath = `${props.currentDirectory}${newNoteName.value}`
+  const notePath = `${props.currentDirectory}/${newNoteName.value}`
   console.log("new note", notePath)
   await noteRepository.saveNote({
     path: notePath,
@@ -62,11 +62,11 @@ function cancelFileCreation() {
 
 <template>
   <main v-if="props.directoryContent">
-    <section v-if="props.directoryContent.directories.length > 0">
+    <section>
       <h2>Directories</h2>
       <ul>
         <li v-for="directory in props.directoryContent.directories" :key="directory">
-          <RouterLink class="btn-secondary" style="border: none;" :to="`${props.currentDirectory}${directory}`">
+          <RouterLink class="btn-secondary" style="border: none;" :to="`${props.currentDirectory}/${directory}`">
             <p class="bullet">⧐</p> {{ directory }}
           </RouterLink>
         </li>
@@ -88,15 +88,18 @@ function cancelFileCreation() {
       </ul>
     </section>
 
-    <section v-if="props.directoryContent.files.length > 0">
+    <section>
       <div style="display: flex; justify-content: space-between; align-items: center;">
         <h2>Files</h2>
       </div>
       <ul>
         <li v-for="filename in props.directoryContent.files" :key="filename">
-          <button class="btn-secondary" @click="$emit('file-select', `${props.currentDirectory}/${filename}`)">
+          <!-- <button class="btn-secondary" @click="$emit('file-select', `${props.currentDirectory}/${filename}`)">
             <p class="bullet">⧐</p> {{ filename }}
-          </button>
+          </button> -->
+          <RouterLink class="btn-secondary" style="border: none;" :to="`${props.currentDirectory}/${filename}`">
+            <p class="bullet">⧐</p> {{ filename }}
+          </RouterLink>
         </li>
         <li>
           <template v-if="isNoteCreation">

frontend/src/components/NoteViewer.vue

@@ -8,15 +8,15 @@ import FloppyFillIcon from './icons/FloppyFillIcon.vue';
 import SquareXIcon from './icons/SquareXIcon.vue';
 import { useRoute } from 'vue-router';
 
-// const props = defineProps<{ path?: string }>()
+const props = defineProps<{ note: Note | null }>()
 
 const converter = new showdown.Converter({
   tasklists: true,
 })
 
 const noteRepository = new NoteRepository()
 
-const note: Ref<Note | null> = ref(null)
+const noteCopy: Ref<Note | null> = ref(null)
 
 const noteTextMd: Ref<string> = ref('')
 
@@ -26,9 +26,7 @@ const route = useRoute()
 
 const fileName: Ref<string> = ref("")
 
-// watch(() => props.path, async (oldPath, newPath) => {
-//   console.log("from", oldPath, "to", newPath)
-// })
+
 
 watch(
   () => route.query.file,
@@ -42,19 +40,24 @@ watch(
     if (newFilename) {
       await fetchData(`${route.path}/${newFilename}`)
     } else {
-      note.value = null
+      noteCopy.value = null
     }
 
   },
 )
 
 onMounted(async () => {
-  if (!route.query.file) {
+  if (!props.note) {
     return
   }
-  const url = `${route.path}/${route.query.file}`;
-  console.log("fetching from", url)
-  await fetchData(url)
+
+  noteCopy.value = JSON.parse(JSON.stringify(props.note))
+
+  console.log(noteCopy.value)
+  updateMarkdown()
+
+  const parts = props.note.path.split("/")
+  fileName.value = parts[parts.length-1]
 })
 
 async function fetchData(filepath?: string) {
@@ -66,7 +69,7 @@ async function fetchData(filepath?: string) {
   fileName.value = parts[parts.length - 1]
 
   isEditMode.value = false
-  note.value = await noteRepository.getByPath(filepath)
+  noteCopy.value = await noteRepository.getByPath(filepath)
   updateMarkdown()
 }
 
@@ -75,18 +78,18 @@ function toggleEditMode() {
 }
 
 function updateMarkdown() {
-  if (!note.value) {
+  if (!noteCopy.value) {
     return
   }
-  noteTextMd.value = converter.makeHtml(note.value?.text)
+  noteTextMd.value = converter.makeHtml(noteCopy.value?.text)
 }
 
 async function saveNote() {
-  if (!note.value) {
+  if (!noteCopy.value) {
     return
   }
-  await noteRepository.saveNote(note.value)
-  noteTextMd.value = converter.makeHtml(note.value?.text)
+  await noteRepository.saveNote(noteCopy.value)
+  noteTextMd.value = converter.makeHtml(noteCopy.value?.text)
   toggleEditMode()
 }
 
@@ -115,13 +118,13 @@ async function cancelEdit() {
       </button>
     </template>
   </header>
-  <main v-if="note">
+  <main v-if="noteCopy">
     <div>
       <h2 class="title" style="margin-left: 0; margin-right: auto;">{{ fileName }}</h2>
     </div>
     <div class="markdown">
       <template v-if="isEditMode">
-        <textarea v-model="note.text"></textarea>
+        <textarea v-model="noteCopy.text"></textarea>
       </template>
       <template v-else>
         <div v-html="noteTextMd"></div>
@@ -131,11 +134,6 @@ async function cancelEdit() {
 </template>
 
 <style scoped>
-/* header {
-  justify-content: space-between;
-  margin-bottom: 1rem;
-} */
-
 button {
   display: flex;
   align-items: center;

frontend/src/views/HomeView.vue

@@ -2,16 +2,19 @@
 import NavigationSidebar from '@/components/NavigationSidebar.vue'
 import NoteViewer from '@/components/NoteViewer.vue'
 import { DirectoryContentRepository } from '@/repository/directory'
-import type { DirectoryContent } from '@/types'
+import { NoteRepository } from '@/repository/note'
+import type { DirectoryContent, Note } from '@/types'
 import { computed, onMounted, ref, watch, type ComputedRef, type Ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const router = useRouter()
 
 const currentDirectory: Ref<string> = ref('/')
 
 const directoryContentRepository = new DirectoryContentRepository()
+const noteRepository = new NoteRepository()
+
+const selectedNote: Ref<Note | null> = ref(null)
 
 const directoryContent: Ref<DirectoryContent | null> = ref(null)
 
@@ -38,59 +41,41 @@ const parentDirectories: ComputedRef<Array<Array<string>>> = computed(() => {
 watch(
   () => route.params.path,
   async (newPath, oldPath) => {
-    if (oldPath && newPath && newPath.toString() === oldPath.toString()) {
-      return
-    }
-
     console.log("oldPath", oldPath, '->', "newPath", newPath)
-    selectedFilePath.value = ''
-    updateFromRoutePath(newPath)
+    updateFromRoutePath()
   },
 )
 
+async function updateFromRoutePath() {
+  const path = route.params.path
+  if (path && typeof path != 'string') {
+    const parts = [...path];
+    if (parts[parts.length - 1].endsWith(".md")) {
+      currentDirectory.value = "/" + parts.slice(0, parts.length - 1).join("/")
+      selectedFilePath.value = parts[parts.length - 1]
 
-// watch(
-//   () => route.query.file,
-//   async (newFilename, oldFilename) => {
-//     if (newFilename === oldFilename) {
-//       return
-//     }
-
-//     console.log('note', oldFilename, '->', newFilename)
-
-//     if (newFilename) {
-//       selectedFilePath.value = `${route.path}/${newFilename}`
-//     } else {
-//       selectedFilePath.value = null
-//     }
-
-//   },
-// )
+      selectedNote.value = await noteRepository.getByPath(path.join("/"))
+      console.log("updating note with note", selectedNote.value)
 
+      if (parts.length == 1) {
+        currentDirectory.value = ""
+      }
 
-async function updateFromRoutePath(path: Array<string> | string) {
-  console.log(path)
-  if (path && typeof path != 'string') {
-    currentDirectory.value = '/' + path.join('/') + '/'
+    } else {
+      currentDirectory.value = "/" + path.join('/')
+    }
   } else {
-    currentDirectory.value = '/'
+    currentDirectory.value = ''
   }
 
   console.log('currentDirectory', currentDirectory.value)
 
   directoryContent.value = await directoryContentRepository.getByPath(currentDirectory.value)
 }
 
-function changeFile(filePath: string) {
-  const parts = filePath.split("/")
-  router.replace({ query: { file: parts[parts.length-1] }})
-  selectedFilePath.value = filePath
-
-}
 
 onMounted(async () => {
-  updateFromRoutePath(route.params.path)
-  return
+  updateFromRoutePath()
 })
 
 function hideSidebar() {
@@ -120,21 +105,21 @@ function showSidebar() {
     <div class="content" :style="{ 'grid-template-columns': selectedGridLayout }">
       <div id="sidebar">
         <div id="nav-area">
-          <NavigationSidebar @refresh="updateFromRoutePath(route.params.path)"  class="sidebar-content" :directory-content="directoryContent"
-            :current-directory="currentDirectory" @file-select="(path) => changeFile(path)" />
+          <NavigationSidebar class="sidebar-content" :directory-content="directoryContent"
+            :current-directory="currentDirectory" />
 
-            <template v-if="isSidebarVisible">
-              <button class="shrinker" @click="hideSidebar()">◀</button>
-            </template>
-            <template v-else>
-              <button class="shrinker" @click="showSidebar()">▶</button>
-            </template>
+          <template v-if="isSidebarVisible">
+            <button class="shrinker" @click="hideSidebar()">◀</button>
+          </template>
+          <template v-else>
+            <button class="shrinker" @click="showSidebar()">▶</button>
+          </template>
 
         </div>
       </div>
 
       <div id="note-viewer" v-if="selectedFilePath">
-        <NoteViewer/>
+        <NoteViewer :note="selectedNote" :key="selectedNote?.path" />
       </div>
       <div v-else style="display: flex; justify-content: center;; padding: 1rem">
         <strong style="font-size: 1.5rem; color: rgb(255 255 255 / 0.5)">Please select a file on the left </strong>
@@ -144,7 +129,6 @@ function showSidebar() {
 </template>
 
 <style scoped>
-
 .shrinker {
   background-color: var(--color-highlight);
   font-weight: bold;

onyx.env

@@ -1 +1 @@
-ONYX_VERSION=0.2.4
+ONYX_VERSION=0.3.0

testdata/Sublevel/Something.md

@@ -0,0 +1,5 @@
+# Something in the way
+
+This is the way
+
+jajaja