Show node icon in sidebar; include node types (#17)

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>

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);
+    }
+  }
+}

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';
   }