Implement mlrv#25 - Expand/hide all button

This commit adds functionality to expand and hide
all entries in the table.
This is achieved by adding a button in the header
of the table, which triggers the toggleAll() function.
A helper function is added to check if all elements
are visible, so the icon of the button can be changed
accordingly.

src/app/treetable/component/treetable.component.html

@@ -3,13 +3,17 @@
   <div *ngFor="let column of displayedColumns; first as isFirst;">
     <ng-container matColumnDef="{{column}}">
       <th mat-header-cell *matHeaderCellDef [ngClass]="{'vertical-separator': options.verticalSeparator}">
+                <span class="expand-all" *ngIf="isFirst" (click)="toggleAll()">
+                    {{ allElementsVisible() ? '-' : '+'}}
+                </span>
         {{options.capitalisedHeader ? (column | titlecase) : column}}
       </th>
       <td mat-cell *matCellDef="let element" [ngClass]="{'vertical-separator': options.verticalSeparator}">
         <div *ngIf="isFirst">
           <div class="value-cell">
             <div [innerHTML]="formatIndentation(element)"></div>
-            <mat-icon [ngStyle]="{'visibility': element.children.length ? 'visible' : 'hidden'}" (click)="onNodeClick(element)">
+                        <mat-icon [ngStyle]="{'visibility': element.children.length ? 'visible' : 'hidden'}"
+                            (click)="onNodeClick(element, $event)">
               {{element.isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}
             </mat-icon>
             <div>{{element.value[column]}}</div>

src/app/treetable/component/treetable.component.scss

@@ -15,6 +15,13 @@ mat-icon {
   background-color: #f0f0f5;
 }
 
+.expand-all {
+  position: relative;
+  left: -15px;
+  cursor: pointer;
+  padding: 10px;
+}
+
 td[class*=' mat-column']{
   width: 10vw;
   min-width: 10vw;;

src/app/treetable/component/treetable.component.spec.ts

@@ -36,7 +36,7 @@ describe('TreetableComponent', () => {
   it('should emit an event when a node is clicked', () => {
     const clickedNode = (component as any).treeTable[0];
     component.nodeClicked.subscribe(n => expect(n).toBe(clickedNode));
-    component.onNodeClick(clickedNode);
+    component.onNodeClick(clickedNode, new Event('click'));
   });
 
 });

src/app/treetable/component/treetable.component.ts

@@ -88,7 +88,8 @@ export class TreetableComponent<T> implements OnInit, OnChanges {
 		return `mat-elevation-z${this.options.elevation}`;
 	}
 
-  onNodeClick(clickedNode: TreeTableNode<T>): void {
+  onNodeClick(clickedNode: TreeTableNode<T>, $event: Event): void {
+    $event.stopPropagation();
     clickedNode.isExpanded = !clickedNode.isExpanded;
     this.treeTable.forEach(el => {
       el.isVisible = this.searchableTree.every(st => {
@@ -101,6 +102,27 @@ export class TreetableComponent<T> implements OnInit, OnChanges {
     this.nodeClicked.next(clickedNode);
   }
 
+  toggleAll() {
+    if (!this.allElementsVisible()) {
+      this.treeTable.forEach(item => {
+        item.isExpanded = true;
+        item.isVisible = true;
+      });
+    } else {
+      this.treeTable.forEach((item, index) => {
+        item.isExpanded = false;
+        if (index > 0) {
+          item.isVisible = false;
+        }
+      });
+    }
+    this.dataSource = this.generateDataSource();
+  }
+
+  allElementsVisible(): boolean {
+    return this.treeTable.slice(1).every(item => item.isVisible);
+  }
+
   // Overrides default options with those specified by the user
   parseOptions(defaultOpts: Options<T>): Options<T> {
     return defaults(this.options, defaultOpts);