Note hierarchy appreance

src/application/i18n/messages/en.json

@@ -49,6 +49,9 @@
     "availabilityTitle": "Availability",
     "availabilityCaption": "Should the Note be available by its URL for people who knows it?",
     "availabilityRowTitle": "Note is published",
+    "noteHierarchyTitle": "Note hierarchy",
+    "noteHierarchyCaption": "Show the note hierarchy on the left menu?",
+    "noteHierarchyRowTitle": "Show note hierarchy",
     "inviteCollaboratorTitle": "Invite a collaborator",
     "inviteCollaboratorCaption": "Send this link to someone you want to add as an editor or reader.",
     "revokeHashButton": "Revoke",

src/application/services/useNote.ts

@@ -96,6 +96,18 @@ interface UseNoteComposableState {
    * Note hierarchy
    */
   noteHierarchy: Ref<NoteHierarchy | null>;
+
+  /**
+   * Load note by id
+   * @param id - Note identifier
+   */
+  load: (id: NoteId) => Promise<void>;
+
+  /**
+   * Load note hierarchy separately when needed
+   * @param id - Note identifier
+   */
+  loadHierarchy: (id: NoteId) => Promise<void>;
 }
 
 interface UseNoteComposableOptions {
@@ -206,7 +218,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
       noteParents.value = response.parents;
-      void getNoteHierarchy(id);
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
       if (error instanceof DomainError) {
@@ -217,6 +228,14 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     }
   }
 
+  /**
+   * Load note hierarchy separately when needed
+   * @param id - Note identifier
+   */
+  async function loadHierarchy(id: NoteId): Promise<void> {
+    await getNoteHierarchy(id);
+  }
+
   /**
    * Returns list of tools used in the note
    * @param content - content of the note
@@ -279,11 +298,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
           title: noteTitle.value,
           url: route.path,
         });
-
-      /**
-       * Get note Hierarchy when new Note is created
-       */
-      void getNoteHierarchy(noteCreated.id);
     } else {
       await noteService.updateNoteContentAndTools(currentId.value, content, specifiedNoteTools);
     }
@@ -313,13 +327,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     parentNote.value = undefined;
   }
 
-  /**
-   * Get note by custom hostname
-   */
-  const resolveHostname = async (): Promise<void> => {
-    note.value = (await noteService.getNoteByHostname(location.hostname)).note;
-  };
-
   onMounted(() => {
     /**
      * If we have id, load note and note hierarchy
@@ -329,6 +336,13 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     }
   });
 
+  /**
+   * Get note by custom hostname
+   */
+  const resolveHostname = async (): Promise<void> => {
+    note.value = (await noteService.getNoteByHostname(location.hostname)).note;
+  };
+
   /**
    * Reset note to the initial state
    */
@@ -414,5 +428,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     noteParents,
     parentNote,
     noteHierarchy,
+    load,
+    loadHierarchy,
   };
 }

src/application/services/useNoteSettings.ts

@@ -33,6 +33,13 @@ interface UseNoteSettingsComposableState {
    */
   updateIsPublic: (id: NoteId, newIsPublicValue: boolean) => Promise<void>;
 
+  /**
+   * Update field showNoteHierarchy in note settings
+   * @param id - Note id
+   * @param newShowNoteHierarchyValue - new showNoteHierarchy
+   */
+  updateShowNoteHierarchy: (id: NoteId, newShowNoteHierarchyValue: boolean) => Promise<void>;
+
   /**
    * Revoke invitation hash
    * @param id - note id
@@ -116,6 +123,22 @@ export default function (): UseNoteSettingsComposableState {
     }
   }
 
+  /**
+   * Update field showNoteHierarchy in note settings
+   * @param id - Note id
+   * @param newShowNoteHierarchyValue - new showNoteHierarchy
+   */
+  async function updateShowNoteHierarchy(id: NoteId, newShowNoteHierarchyValue: boolean): Promise<void> {
+    const { showNoteHierarchy } = await noteSettingsService.patchNoteSettingsByNoteId(id, { showNoteHierarchy: newShowNoteHierarchyValue });
+
+    /**
+     * If note settings were not loaded till this moment for some reason, do nothing
+     */
+    if (noteSettings.value) {
+      noteSettings.value.showNoteHierarchy = showNoteHierarchy;
+    }
+  }
+
   /**
    * Revoke invitation hash
    * @param id - Note id
@@ -198,5 +221,6 @@ export default function (): UseNoteSettingsComposableState {
     revokeHash,
     changeRole,
     deleteNoteById,
+    updateShowNoteHierarchy,
   };
 }

src/domain/entities/NoteSettings.ts

@@ -38,4 +38,9 @@ export default interface NoteSettings {
    * Note cover image id
    */
   cover: string;
+
+  /**
+   * Show note heirarchy
+   */
+  showNoteHierarchy: boolean;
 }

src/presentation/pages/Note.vue

@@ -46,8 +46,9 @@
       <PageBlock>
         <template #left>
           <VerticalMenu
+            v-if="noteSettings && noteSettings.showNoteHierarchy && verticalMenuItems.length > 0"
             class="menu"
-            :items="[verticalMenuItems]"
+            :items="verticalMenuItems"
           />
         </template>
         <template #default>
@@ -99,10 +100,13 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy, loadHierarchy } = useNote({
   id: noteId,
 });
 
+// Note settings composable - used directly in the page
+const { noteSettings, load: loadNoteSettings, updateCover } = useNoteSettings();
+
 /**
  * Create new child note
  */
@@ -123,8 +127,6 @@ function redirectToNoteSettings(): void {
   router.push(`/note/${props.id}/settings`);
 }
 
-const { updateCover } = useNoteSettings();
-
 const { isEditorReady, editorConfig } = useNoteEditor({
   noteTools,
   isDraftResolver: () => noteId.value === null,
@@ -183,18 +185,10 @@ async function noteChanged(data: NoteContent): Promise<void> {
  * @returns menuItem  - VerticalMenuItem
  */
 
-function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy | null, currentNoteTitle: string): VerticalMenuItem {
-  if (!noteHierarchyObj) {
-    return {
-      title: 'Untitled',
-      isActive: true,
-      items: undefined,
-    };
-  }
-
+function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy, currentNoteTitle: string): VerticalMenuItem {
   // Transform the current note into a VerticalMenuItem
   return {
-    title: noteHierarchyObj?.noteTitle || 'Untitled',
+    title: noteHierarchyObj.noteTitle || 'Untitled',
     isActive: route.path === `/note/${noteHierarchyObj.noteId}`,
     items: noteHierarchyObj.childNotes ? noteHierarchyObj.childNotes.map(child => transformNoteHierarchy(child, currentNoteTitle)) : undefined,
     onActivate: () => {
@@ -203,18 +197,30 @@ function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy | null, currentN
   };
 }
 
-const verticalMenuItems = computed<VerticalMenuItem>(() => {
-  return transformNoteHierarchy(noteHierarchy.value, noteTitle.value);
+const verticalMenuItems = computed<VerticalMenuItem[]>(() => {
+  if (!noteHierarchy.value) {
+    return [];
+  }
+
+  return [transformNoteHierarchy(noteHierarchy.value, noteTitle.value)];
 });
 
 watch(
   () => props.id,
-  () => {
+  async () => {
     /** If new child note is created, refresh editor with empty data */
     if (props.id === null) {
       useHead({
         title: t('note.new'),
       });
+    } else {
+      // Load note settings first
+      await loadNoteSettings(props.id);
+
+      // Load hierarchy only if settings allow it
+      if (noteSettings.value?.showNoteHierarchy === true) {
+        await loadHierarchy(props.id);
+      }
     }
   },
   { immediate: true }

src/presentation/pages/NoteSettings.vue

@@ -63,6 +63,20 @@
           </Row>
         </Section>
 
+        <Section
+          :title="t('noteSettings.noteHierarchyTitle')"
+          :caption="t('noteSettings.noteHierarchyCaption')"
+        >
+          <Row :title="t('noteSettings.noteHierarchyRowTitle')">
+            <template #right>
+              <Switch
+                v-model="showNoteHierarchy"
+                @click="changeShowNoteHierarchy"
+              />
+            </template>
+          </Row>
+        </Section>
+
         <Fieldset
           :title="t('noteSettings.teamFormFieldSetTitle')"
         >
@@ -123,7 +137,7 @@ const props = defineProps<{
 
 const { patchOpenedPageByUrl } = useNavbar();
 const route = useRoute();
-const { noteSettings, load: loadSettings, updateIsPublic, deleteNoteById, parentNote, setParent } = useNoteSettings();
+const { noteSettings, load: loadSettings, updateIsPublic, deleteNoteById, parentNote, setParent, updateShowNoteHierarchy } = useNoteSettings();
 const { noteTitle, unlinkParent } = useNote({
   id: props.id,
 });
@@ -177,13 +191,24 @@ const isPublic = computed(() => {
   return noteSettings.value?.isPublic;
 });
 
+/**
+ * Current value of showNoteHierarchy field
+ */
+const showNoteHierarchy = computed(() => {
+  return noteSettings.value?.showNoteHierarchy;
+});
+
 /**
  * Change isPublic property
  */
 async function changeAccess() {
   updateIsPublic(props.id, !noteSettings.value!.isPublic);
 }
 
+async function changeShowNoteHierarchy() {
+  updateShowNoteHierarchy(props.id, !noteSettings.value!.showNoteHierarchy);
+}
+
 /**
  * Construct the parent note URL. If the parent note is not set, return an empty string
  *