feat(summaries): add new disable summaries sample for the tree grid

Author: georgianastasov

src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html

@@ -1,4 +1,22 @@
 <div class="grid__wrapper">
+    <div class="summary-chooser">
+        <igx-buttongroup
+            [selectionMode]="'multi'"
+            [values]="defaultSummaries"
+            (selected)="disableDefaultSummary($event)"
+            (deselected)="enableDefaultSummary($event)"
+        ></igx-buttongroup>
+    </div>
+
+    <div class="summary-chooser">
+        <igx-buttongroup
+            [selectionMode]="'multi'"
+            [values]="customSummaries"
+            (selected)="disableCustomSummary($event)"
+            (deselected)="enableCustomSummary($event)"
+        ></igx-buttongroup>
+    </div>
+    
     <igx-tree-grid
         [igxPreventDocumentScroll]="true"
         #treegrid1
@@ -52,12 +70,4 @@
         >
         </igx-column>
     </igx-tree-grid>
-    <div class="action__buttons">
-        <button igxButton="contained" (click)="disableDefaultSummaries()">
-            Disable Min and Max summaries for the Unit Price column
-        </button>
-        <button igxButton="contained" (click)="disableCustomSummaries()">
-            Disable Average Units per Order and Highest Units summaries
-        </button>
-    </div>
 </div>

src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss

@@ -3,10 +3,10 @@
     padding: 16px;
 }
 
-.action__buttons {
-    padding-top: 16px;
+.summary-chooser {
+    margin-bottom: 16px;
 }
 
-.action__buttons > button {
-    margin-right: 16px;
+igx-buttongroup{
+    display: block;
 }

src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts

@@ -1,9 +1,14 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import {
+    Component,
+    ViewChild,
+    OnInit,
+    AfterViewInit
+} from "@angular/core";
 import {
     IgxTreeGridComponent,
     IgxColumnComponent,
-    IgxButtonDirective,
-    IgxSummaryResult
+    IgxSummaryResult,
+    IgxButtonGroupComponent
 } from "igniteui-angular";
 import { ORDERS_DATA } from "../data/orders";
 import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
@@ -15,6 +20,7 @@ class UnitsSummary {
         fieldName = ""
     ): IgxSummaryResult[] {
         const result = [];
+
         result.push({
             key: "totalDelivered",
             label: "Total Units Delivered",
@@ -61,14 +67,16 @@ class UnitsSummary {
         IgxTreeGridComponent,
         IgxPreventDocumentScrollDirective,
         IgxColumnComponent,
-        IgxButtonDirective
+        IgxButtonGroupComponent
     ]
 })
-export class TreeGridDisableSummariesComponent implements OnInit {
+export class TreeGridDisableSummariesComponent implements OnInit, AfterViewInit {
     @ViewChild("treegrid1", { read: IgxTreeGridComponent, static: true })
     public treeGrid1: IgxTreeGridComponent;
 
-    public data;
+    public data: any[];
+    public defaultSummaries: any[];
+    public customSummaries: any[];
 
     public unitsSummary = UnitsSummary;
 
@@ -78,11 +86,101 @@ export class TreeGridDisableSummariesComponent implements OnInit {
         this.data = ORDERS_DATA;
     }
 
-    public disableDefaultSummaries() {
-        this.treeGrid1.getColumnByName("UnitPrice").disabledSummaries = ["min", "max"];
+    public ngAfterViewInit(): void {
+        this.defaultSummaries = [
+            {
+                label: 'Count',
+                selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('count'),
+                togglable: true,
+                value: 'count'
+            },
+            {
+                label: 'Min',
+                selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('min'),
+                togglable: true,
+                value: 'min'
+            },
+            {
+                label: 'Max',
+                selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('max'),
+                togglable: true,
+                value: 'max'
+            },
+            {
+                label: 'Sum',
+                selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('sum'),
+                togglable: true,
+                value: 'sum'
+            },
+            {
+                label: 'Average',
+                selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('average'),
+                togglable: true,
+                value: 'average'
+            }
+        ];
+
+        this.customSummaries = [
+            {
+                label: 'Total Units Delivered',
+                selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('totalDelivered'),
+                togglable: true,
+                value: 'totalDelivered'
+            },
+            {
+                label: 'Total Units Not Delivered',
+                selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('totalNotDelivered'),
+                togglable: true,
+                value: 'totalNotDelivered'
+            },
+            {
+                label: 'Average Units per Order',
+                selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('averageUnits'),
+                togglable: true,
+                value: 'averageUnits'
+            },
+            {
+                label: 'Highest Units',
+                selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('maxUnits'),
+                togglable: true,
+                value: 'maxUnits'
+            }
+        ];
     }
 
-    public disableCustomSummaries() {
-        this.treeGrid1.getColumnByName("Units").disabledSummaries = ["averageUnits", "maxUnits"];
+    public disableDefaultSummary(event) {
+        const selectedValue = this.defaultSummaries[event.index].value;
+        const column = this.treeGrid1.getColumnByName('UnitPrice');
+
+        if (!column.disabledSummaries.includes(selectedValue)) {
+            column.disabledSummaries = [...column.disabledSummaries, selectedValue];
+        }
+    }
+
+    public enableDefaultSummary(event) {
+        const selectedValue = this.defaultSummaries[event.index].value;
+        const column = this.treeGrid1.getColumnByName('UnitPrice');
+
+        column.disabledSummaries = column.disabledSummaries.filter(
+            (summary) => summary !== selectedValue
+        );
+    }
+
+    public disableCustomSummary(event) {
+        const selectedValue = this.customSummaries[event.index].value;
+        const column = this.treeGrid1.getColumnByName('Units');
+
+        if (!column.disabledSummaries.includes(selectedValue)) {
+            column.disabledSummaries = [...column.disabledSummaries, selectedValue];
+        }
+    }
+
+    public enableCustomSummary(event) {
+        const selectedValue = this.customSummaries[event.index].value;
+        const column = this.treeGrid1.getColumnByName('Units');
+
+        column.disabledSummaries = column.disabledSummaries.filter(
+            (summary) => summary !== selectedValue
+        );
     }
 }