From 25085a9badb11c142354c6efa066db4b90d3c6cd Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Tue, 13 Oct 2020 09:58:59 -0500
Subject: [PATCH] Show node icon in sidebar; include node types (#17)

---
 src/app/app.component.html | 11 +++++++++--
 src/app/app.component.scss | 24 ++++++++++++++++++++++++
 src/app/app.component.ts   | 12 +++++++++++-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index ab7c803..83ba2f5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -30,11 +30,18 @@
             </ion-buttons>
           </ion-list-header>
 
-          <tree-root style="font-size: 15px;" #menuTree [nodes]="nodes" [options]="options"></tree-root>
+          <tree-root style="font-size: 15px;" #menuTree [nodes]="nodes" [options]="options">
+            <ng-template #treeNodeTemplate let-node let-index="index">
+              <span class="tree-node-container" style="display: flex; padding: 5px; width: 100%;" [ngClass]="node.data.type">
+                <i class="tree-node-icon" [ngClass]="typeIcons[node.data.type]"></i>
+                <div class="tree-node-name">{{ node.data.name }}</div>
+              </span>
+            </ng-template>
+          </tree-root>
         </ion-list>
       </ion-content>
       <ion-footer>
-        <ion-searchbar placeholder="Filter pages..." (ionChange)="onFilterChange($event)"></ion-searchbar>
+<!--        <ion-searchbar placeholder="Filter pages..." (ionChange)="onFilterChange($event)"></ion-searchbar>-->
         <ion-item button lines="full" (click)="showOptions($event)">
           <ion-icon name="list" slot="start"></ion-icon>
           <ion-label>Menu</ion-label>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 5a0076b..77e97a3 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -6,3 +6,27 @@
 .button-text {
   color: var(--ion-color-medium-shade);
 }
+
+.tree-node-container {
+  .tree-node-icon {
+    margin-right: 10px;
+  }
+
+  &.page {
+    .tree-node-icon {
+      color: var(--noded-background-note);
+    }
+  }
+
+  &.db {
+    .tree-node-icon {
+      color: var(--noded-background-db);
+    }
+  }
+
+  &.code {
+    .tree-node-icon {
+      color: var(--noded-background-code);
+    }
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5a6095d..153e63e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -35,9 +35,10 @@ export class AppComponent implements OnInit {
       mouse: {
         dblClick: (tree, node, $event) => {
           const id = node.data.id;
+          const nodeId = node.data.node_id;
           if ( !node.data.virtual ) {
             this.currentPageId = id;
-            this.router.navigate(['/editor', { id }]);
+            this.router.navigate(['/editor', { id, ...(nodeId ? { node_id: nodeId } : {}) }]);
           }
         },
         click: (tree, node, $event) => {
@@ -62,6 +63,15 @@ export class AppComponent implements OnInit {
       }
     }
   };
+
+  public typeIcons = {
+    branch: 'fa fa-folder',
+    node: 'fa fa-quote-left',
+    page: 'fa fa-sticky-note',
+    db: 'fa fa-database',
+    code: 'fa fa-code',
+  };
+
   public get appName(): string {
     return this.session.appName || 'Noded';
   }