From 236e9b033e0e83a8224fe8c6439da72400653400 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Sat, 24 Aug 2019 12:10:05 -0400
Subject: [PATCH] Hide tools with hidden property

---
 src/app/components/toolbar/toolbar.component.html | 10 +++++-----
 src/app/components/toolbar/toolbar.component.ts   | 11 ++++++++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html
index 6a1ec63..b0b8c1e 100644
--- a/src/app/components/toolbar/toolbar.component.html
+++ b/src/app/components/toolbar/toolbar.component.html
@@ -4,18 +4,18 @@
     </button>
     <small class="ml-1 text-muted">{{version}}</small>
     <div class="ml-auto">
-        <ng-container *ngFor="let item of menuItems; let i = index">
+        <ng-container *ngFor="let item of displayMenuItems; let i = index">
             <ng-container *ngIf="i < maxMenuItems">
-                <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: menuItems, mode: 'icon'}"></ng-container>
+                <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: displayMenuItems, mode: 'icon'}"></ng-container>
             </ng-container>
         </ng-container>
-        <button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
+        <button *ngIf="displayMenuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
             <mat-icon>menu</mat-icon>
         </button>
         <mat-menu #overflowMenu="matMenu">
-            <ng-container *ngFor="let item of menuItems; let i = index">
+            <ng-container *ngFor="let item of displayMenuItems; let i = index">
                 <ng-container *ngIf="i >= maxMenuItems">
-                    <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: menuItems, mode: 'menu'}"></ng-container>
+                    <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: displayMenuItems, mode: 'menu'}"></ng-container>
                 </ng-container>
             </ng-container>
         </mat-menu>
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
index 9616c5f..4c72db8 100644
--- a/src/app/components/toolbar/toolbar.component.ts
+++ b/src/app/components/toolbar/toolbar.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core";
+import {AfterViewInit, Component, EventEmitter, HostListener, Input, OnInit, Output,} from "@angular/core";
 import {ToolbarItem} from "../../models/toolbarItem";
 import {version} from '../../../../package.json';
 
@@ -7,17 +7,22 @@ import {version} from '../../../../package.json';
     templateUrl: 'toolbar.component.html',
     styleUrls: ['toolbar.component.scss']
 })
-export class ToolbarComponent implements AfterViewInit {
+export class ToolbarComponent implements OnInit, AfterViewInit {
     @Input() menuItems: ToolbarItem[];
 
     @Output() menuItemsChange = new EventEmitter<ToolbarItem[]>();
 
     readonly version = version;
 
+    displayMenuItems: ToolbarItem[];
     maxMenuItems = 0;
 
     constructor() { }
 
+    ngOnInit() {
+        this.displayMenuItems = this.menuItems.filter(item => !item.hidden);
+    }
+
     @HostListener('window:resize', ['$event'])
     ngAfterViewInit() {
         setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 100) / 75), 1);
@@ -33,7 +38,7 @@ export class ToolbarComponent implements AfterViewInit {
             }
 
             item.enabled = !item.enabled;
-            this.menuItemsChange.emit(this.menuItems);
+            this.menuItemsChange.emit(this.displayMenuItems);
 
             if(item.enabled) {
                 if(item.onEnabled) item.onEnabled();