Note hierarchy appreance

Author: devnull-1337

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

@@ -9,6 +9,8 @@ import DomainError from '@/domain/entities/errors/Base';
 import useNavbar from './useNavbar';
 import { getTitle } from '@/infrastructure/utils/note';
 import type { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
+import useNoteSettings from '@/application/services/useNoteSettings';
+import type NoteSettings from '@/domain/entities/NoteSettings';
 
 /**
  * Creates base structure for the empty note:
@@ -96,6 +98,18 @@ interface UseNoteComposableState {
    * Note hierarchy
    */
   noteHierarchy: Ref<NoteHierarchy | null>;
+
+  /**
+   * Note settings composable
+   */
+  noteSettings: Ref<NoteSettings | null>;
+  /**
+   * Updates the cover image of the note.
+   * @param id - The identifier of the note whose cover should be updated.
+   * @param data - The new cover image as binary data (Blob).
+   * @returns A Promise that resolves when the cover has been updated.
+   */
+  updateCover: (id: string, data: Blob) => Promise<void>;
 }
 
 interface UseNoteComposableOptions {
@@ -116,6 +130,11 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const currentId = computed(() => toValue(options.id));
 
+  /**
+   * Note settings composable
+   */
+  const { noteSettings, load: loadNoteSettings, updateCover } = useNoteSettings();
+
   /**
    * Currently opened note
    *
@@ -320,12 +339,35 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     note.value = (await noteService.getNoteByHostname(location.hostname)).note;
   };
 
-  onMounted(() => {
+  onMounted(async () => {
     /**
-     * If we have id, load note and note hierarchy
+     * If we have id, load note settings first, then note and note hierarchy if needed
      */
     if (currentId.value !== null) {
-      void load(currentId.value);
+      await loadNoteSettings(currentId.value);
+      // Only load note and hierarchy if showNoteHierarchy is true
+      if (noteSettings.value?.showNoteHierarchy === true) {
+        void load(currentId.value);
+      } else {
+        // Load note without hierarchy
+        try {
+          const response = await noteService.getNoteById(currentId.value);
+
+          note.value = response.note;
+          canEdit.value = response.accessRights.canEdit;
+          noteTools.value = response.tools;
+          parentNote.value = response.parentNote;
+          noteParents.value = response.parents;
+          // Do not call getNoteHierarchy
+        } catch (error) {
+          deleteOpenedPageByUrl(route.path);
+          if (error instanceof DomainError) {
+            void router.push(`/error/${error.statusCode}`);
+          } else {
+            void router.push('/error/500');
+          }
+        }
+      }
     }
   });
 
@@ -414,5 +456,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     noteParents,
     parentNote,
     noteHierarchy,
+    noteSettings,
+    updateCover,
   };
 }

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,6 +46,7 @@
       <PageBlock>
         <template #left>
           <VerticalMenu
+            v-if="noteSettings && noteSettings.showNoteHierarchy"
             class="menu"
             :items="[verticalMenuItems]"
           />
@@ -72,7 +73,6 @@ import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 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';
@@ -99,7 +99,7 @@ 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, noteSettings, updateCover } = useNote({
   id: noteId,
 });
 
@@ -123,8 +123,6 @@ function redirectToNoteSettings(): void {
   router.push(`/note/${props.id}/settings`);
 }
 
-const { updateCover } = useNoteSettings();
-
 const { isEditorReady, editorConfig } = useNoteEditor({
   noteTools,
   isDraftResolver: () => noteId.value === null,

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
  *