Merge pull request #275 from codex-team/feat/note-parents

feat: display the note parents structure

Author: TheGeniusOfEternity

src/application/services/useNote.ts

@@ -72,6 +72,11 @@ interface UseNoteComposableState {
    */
   unlinkParent: () => Promise<void>;
 
+  /**
+   * Returns an array of note parents for the current note.
+   */
+  noteParents: Ref<Note[]>;
+
   /**
    * Defines if user can edit note
    */
@@ -165,6 +170,12 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const parentNote = ref<Note | undefined>(undefined);
 
+  /**
+   * Note parents of the actual note
+   *
+   * Actual note by default
+   */
+  const noteParents = ref<Note[]>([]);
   /**
    * Note hierarchy
    *
@@ -194,6 +205,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       canEdit.value = response.accessRights.canEdit;
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
+      noteParents.value = response.parents;
       void getNoteHierarchy(id);
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
@@ -399,6 +411,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     resolveToolsByContent,
     save,
     unlinkParent,
+    noteParents,
     parentNote,
     noteHierarchy,
   };

src/domain/entities/NoteDTO.ts

@@ -25,4 +25,9 @@ export interface NoteDTO {
    * Editor tools
    */
   tools: EditorTool[];
+
+  /**
+   * Note parents
+   */
+  parents: Note[];
 }

src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts

@@ -10,4 +10,5 @@ export type GetNoteResponsePayload = {
   accessRights: NoteAccessRights;
   parentNote: Note | undefined;
   tools: EditorTool[];
+  parents: Note[];
 };

src/presentation/components/breadcrumbs/BreadCrumbs.vue

@@ -0,0 +1,50 @@
+<template>
+  <RouterLink
+    v-for="(parent, index) in displayedParents"
+    :key="index"
+    :to="{ path: parent.id ? `/note/${parent.id}` : '' }"
+    class="breadcrumb"
+  >
+    {{ parent.content ? getTitle(parent.content) : '...' }}
+    <Icon
+      v-if="index < displayedParents.length - 1"
+      name="ChevronRight"
+    />
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+
+import { getTitle } from '@/infrastructure/utils/note.ts';
+import { RouterLink } from 'vue-router';
+import { computed } from 'vue';
+import { Note } from '@/domain/entities/Note.ts';
+import { Icon } from '@codexteam/ui/vue';
+
+const props = defineProps<{
+  noteParents: Note[];
+}>();
+/**
+ * Note parents hierarchy
+ * If there are more than 3, only the closest & the furthest ones are shown
+ */
+const displayedParents = computed(() => {
+  if (props.noteParents.length > 3) {
+    return [
+      props.noteParents[0],
+      { id: '',
+        content: null },
+      props.noteParents[props.noteParents.length - 1],
+    ];
+  }
+
+  return props.noteParents;
+});
+</script>
+
+<style scoped>
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

src/presentation/pages/Note.vue

@@ -4,13 +4,18 @@
       :style="{ '--opacity': id && note ? 1 : 0 }"
     >
       <template #left>
-        {{
-          note && 'updatedAt' in note && note.updatedAt
-            ? t('note.lastEdit') + ' ' + getTimeFromNow(note.updatedAt)
-            : t('note.lastEdit') + ' ' + 'a few seconds ago'
-        }}
+        <BreadCrumbs
+          :note-parents="noteParents"
+        />
       </template>
       <template #right>
+        <div class="last_edit">
+          {{
+            note && 'updatedAt' in note && note.updatedAt
+              ? t('note.lastEdit') + ' ' + getTimeFromNow(note.updatedAt)
+              : t('note.lastEdit') + ' ' + 'a few seconds ago'
+          }}
+        </div>
         <Button
           v-if="canEdit"
           secondary
@@ -59,19 +64,20 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
-import { Button, Editor, type VerticalMenuItem, VerticalMenu, PageBlock } from '@codexteam/ui/vue';
+import { Button, Editor, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRoute, useRouter } from 'vue-router';
 import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
-import { getTimeFromNow } from '@/infrastructure/utils/date';
 import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
 import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
+import BreadCrumbs from '@/presentation/components/breadcrumbs/BreadCrumbs.vue';
 import { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
 import { getTitle } from '@/infrastructure/utils/note';
+import { getTimeFromNow } from '@/infrastructure/utils/date.ts';
 
 const { t } = useI18n();
 
@@ -93,7 +99,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteHierarchy } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
   id: noteId,
 });
 
@@ -164,7 +170,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
       });
     }
     if (updatedNoteCover !== null && props.id !== null) {
-      updateCover(props.id, updatedNoteCover);
+      await updateCover(props.id, updatedNoteCover);
     }
   }
 }
@@ -173,6 +179,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
  * Recursively transform the note hierarchy into a VerticalMenuItem
  *
  * @param noteHierarchyObj - note hierarchy data
+ * @param currentNoteTitle - actual title of note
  * @returns menuItem  - VerticalMenuItem
  */
 
@@ -186,17 +193,16 @@ function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy | null, currentN
   }
 
   const title = noteHierarchyObj.content ? getTitle(noteHierarchyObj.content) : 'Untitled';
+
   // Transform the current note into a VerticalMenuItem
-  const menuItem: VerticalMenuItem = {
+  return {
     title: title,
     isActive: route.path === `/note/${noteHierarchyObj.id}`,
     items: noteHierarchyObj.childNotes ? noteHierarchyObj.childNotes.map(child => transformNoteHierarchy(child, currentNoteTitle)) : undefined,
     onActivate: () => {
       void router.push(`/note/${noteHierarchyObj.id}`);
     },
   };
-
-  return menuItem;
 }
 
 const verticalMenuItems = computed<VerticalMenuItem>(() => {
@@ -232,4 +238,9 @@ watch(noteTitle, () => {
   height: fit-content;
   width: auto;
 }
+
+.last_edit {
+  color: var(--base--text-secondary);
+  padding-right: var(--h-padding);
+}
 </style>