basic implementation of children overview, closes #80

src/public/javascripts/entities/branch.js

@@ -14,6 +14,10 @@ class Branch {
         return await this.treeCache.getNote(this.noteId);
     }
 
+    isTopLevel() {
+        return this.parentNoteId === 'root';
+    }
+
     get toString() {
         return `Branch(branchId=${this.branchId})`;
     }

src/public/javascripts/services/note_detail.js

@@ -1,4 +1,5 @@
 import treeService from './tree.js';
+import treeUtils from './tree_utils.js';
 import noteTypeService from './note_type.js';
 import protectedSessionService from './protected_session.js';
 import protectedSessionHolder from './protected_session_holder.js';
@@ -24,6 +25,7 @@ const $noteDetailWrapper = $("#note-detail-wrapper");
 const $noteIdDisplay = $("#note-id-display");
 const $labelList = $("#label-list");
 const $labelListInner = $("#label-list-inner");
+const $childrenOverview = $("#children-overview");
 
 let currentNote = null;
 
@@ -73,14 +75,14 @@ function noteChanged() {
 async function reload() {
     // no saving here
 
-    await loadNoteToEditor(getCurrentNoteId());
+    await loadNoteDetail(getCurrentNoteId());
 }
 
 async function switchToNote(noteId) {
     if (getCurrentNoteId() !== noteId) {
         await saveNoteIfChanged();
 
-        await loadNoteToEditor(noteId);
+        await loadNoteDetail(noteId);
     }
 }
 
@@ -137,7 +139,7 @@ async function handleProtectedSession() {
     protectedSessionService.ensureDialogIsClosed();
 }
 
-async function loadNoteToEditor(noteId) {
+async function loadNoteDetail(noteId) {
     currentNote = await loadNote(noteId);
 
     if (isNewNoteCreated) {
@@ -175,6 +177,26 @@ async function loadNoteToEditor(noteId) {
     $noteDetailWrapper.scrollTop(0);
 
     await loadLabelList();
+
+    await showChildrenOverview();
+}
+
+async function showChildrenOverview() {
+    const note = getCurrentNote();
+
+    $childrenOverview.empty();
+
+    const notePath = treeService.getCurrentNotePath();
+
+    for (const childBranch of await note.getChildBranches()) {
+        const link = $('<a>', {
+            href: 'javascript:',
+            text: await treeUtils.getNoteTitle(childBranch.noteId, childBranch.parentNoteId)
+        }).attr('action', 'note').attr('note-path', notePath + '/' + childBranch.noteId);
+
+        const childEl = $('<div class="child-overview">').html(link);
+        $childrenOverview.append(childEl);
+    }
 }
 
 async function loadLabelList() {

src/public/stylesheets/style.css

@@ -5,9 +5,9 @@
     display: grid;
     grid-template-areas: "header header"
                          "tree-actions title"
-                         "search note-content"
-                         "tree note-content"
-                         "parent-list note-content"
+                         "search note-detail"
+                         "tree note-detail"
+                         "parent-list note-detail"
                          "parent-list label-list";
     grid-template-columns: 2fr 5fr;
     grid-template-rows: auto
@@ -289,3 +289,20 @@ div.ui-tooltip {
     padding: 10px;
     font-size: large;
 }
+
+#children-overview {
+    padding-top: 20px;
+}
+
+.child-overview {
+    font-weight: bold;
+    font-size: large;
+    padding: 10px;
+    border: 1px solid black;
+    width: 150px;
+    height: 95px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    border-radius: 15px;
+    overflow: hidden;
+}

src/views/index.ejs

@@ -132,8 +132,9 @@
         </div>
       </div>
 
-      <div style="position: relative; overflow: auto; grid-area: note-content; padding-left: 10px; padding-top: 10px;" id="note-detail-wrapper">
-        <div id="note-detail-text" class="note-detail-component"></div>
+      <div style="position: relative; overflow: hidden; grid-area: note-detail; padding-left: 10px; padding-top: 10px; display: flex; flex-direction: column;" id="note-detail-wrapper">
+        <div style="flex-grow: 1; position: relative; overflow: auto; flex-basis: content;">
+          <div id="note-detail-text" style="height: 100%;" class="note-detail-component"></div>
 
           <div id="note-detail-search" class="note-detail-component">
             <div style="display: flex; align-items: center;">
@@ -204,6 +205,10 @@
           <input type="file" id="file-upload" style="display: none" />
         </div>
 
+        <div id="children-overview" style="flex-grow: 1000; flex-shrink: 1000; flex-basis: 1px; height: 100px; overflow: hidden; display: flex; flex-wrap: wrap">
+        </div>
+      </div>
+
       <div id="label-list">
         <button class="btn btn-sm show-labels-button">Labels:</button>