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

Author: georgianastasov

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

@@ -1,7 +1,25 @@
 <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-hierarchical-grid
         [igxPreventDocumentScroll]="true"
-        #hierarchicalGrid
+        #hierarchicalGrid1
         [data]="data"
         [autoGenerate]="false"
         [height]="'600px'"
@@ -92,12 +110,4 @@
             <igx-column field="Headliner" [hasSummary]="true"></igx-column>
         </igx-row-island>
     </igx-hierarchical-grid>
-    <div class="action__buttons">
-        <button igxButton="contained" (click)="disableDefaultSummaries()">
-            Disable Min and Max summaries for the Grammy Nominations column
-        </button>
-        <button igxButton="contained" (click)="disableCustomSummaries()">
-            Disable Nominated Singers and Total Nominations summaries
-        </button>
-    </div>
 </div>

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

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

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

@@ -1,12 +1,17 @@
-import { Component, ViewChild, OnInit } from "@angular/core";
 import {
-    IgxButtonDirective,
+    Component,
+    ViewChild,
+    OnInit,
+    AfterViewInit
+} from "@angular/core";
+import {
     IgxCellTemplateDirective,
     IgxColumnComponent,
     IgxHierarchicalGridComponent,
     IgxNumberSummaryOperand,
     IgxRowIslandComponent,
-    IgxSummaryResult
+    IgxSummaryResult,
+    IgxButtonGroupComponent
 } from "igniteui-angular";
 import { SINGERS } from "../../data/singersData";
 import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
@@ -18,38 +23,43 @@ class GrammySummary {
         fieldName = ""
     ): IgxSummaryResult[] {
         const result = [];
+
         result.push({
             key: "nominatedSingers",
             label: "Nominated Singers",
             summaryResult: allData.filter((rec) => rec["GrammyNominations"] > 0)
                 .length
         });
+
         result.push({
             key: "singersWithAwards",
             label: "Singers with Awards",
             summaryResult: allData.filter((rec) => rec["GrammyAwards"] > 0)
                 .length
         });
+
         result.push({
             key: "nominations",
             label: "Total Nominations",
             summaryResult: IgxNumberSummaryOperand.sum(
                 allData.map((r) => r["GrammyNominations"])
             )
         });
+
         result.push({
             key: "awards",
             label: "Total Awards",
             summaryResult: IgxNumberSummaryOperand.sum(
                 allData.map((r) => r["GrammyAwards"])
             )
         });
+
         return result;
     }
 }
 
 @Component({
-    selector: "app-hierarchical-grid-summary",
+    selector: "app-hierarchical-grid-summary-sample",
     styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"],
     templateUrl: "hierarchical-grid-disable-summaries.component.html",
     imports: [
@@ -58,14 +68,16 @@ class GrammySummary {
         IgxColumnComponent,
         IgxCellTemplateDirective,
         IgxRowIslandComponent,
-        IgxButtonDirective
+        IgxButtonGroupComponent
     ]
 })
-export class HierarchicalGridDisableSummariesComponent implements OnInit {
-    @ViewChild("hierarchicalGrid", { static: true })
-    private hierarchicalGrid: IgxHierarchicalGridComponent;
+export class HierarchicalGridDisableSummariesComponent implements OnInit, AfterViewInit {
+    @ViewChild("hierarchicalGrid1", { static: true })
+    private hierarchicalGrid1: IgxHierarchicalGridComponent;
 
-    public data;
+    public data: any[];
+    public defaultSummaries: any[];
+    public customSummaries: any[];
 
     public grammySummary = GrammySummary;
 
@@ -75,12 +87,102 @@ export class HierarchicalGridDisableSummariesComponent implements OnInit {
         this.data = SINGERS;
     }
 
-    public disableDefaultSummaries() {
-        this.hierarchicalGrid.getColumnByName("GrammyNominations").disabledSummaries = ["min", "max"];
+    public ngAfterViewInit(): void {
+        this.defaultSummaries = [
+            {
+                label: 'Count',
+                selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('count'),
+                togglable: true,
+                value: 'count'
+            },
+            {
+                label: 'Min',
+                selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('min'),
+                togglable: true,
+                value: 'min'
+            },
+            {
+                label: 'Max',
+                selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('max'),
+                togglable: true,
+                value: 'max'
+            },
+            {
+                label: 'Sum',
+                selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('sum'),
+                togglable: true,
+                value: 'sum'
+            },
+            {
+                label: 'Average',
+                selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('average'),
+                togglable: true,
+                value: 'average'
+            }
+        ];
+
+        this.customSummaries = [
+            {
+                label: 'Nominated Singers',
+                selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('nominatedSingers'),
+                togglable: true,
+                value: 'nominatedSingers'
+            },
+            {
+                label: 'Singers with Awards',
+                selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('singersWithAwards'),
+                togglable: true,
+                value: 'singersWithAwards'
+            },
+            {
+                label: 'Total Nominations',
+                selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('nominations'),
+                togglable: true,
+                value: 'nominations'
+            },
+            {
+                label: 'Total Awards',
+                selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('awards'),
+                togglable: true,
+                value: 'awards'
+            }
+        ];
     }
 
-    public disableCustomSummaries() {
-        this.hierarchicalGrid.getColumnByName("Photo").disabledSummaries = ["nominatedSingers", "nominations"];
+    public disableDefaultSummary(event) {
+        const selectedValue = this.defaultSummaries[event.index].value;
+        const column = this.hierarchicalGrid1.getColumnByName('GrammyNominations');
+
+        if (!column.disabledSummaries.includes(selectedValue)) {
+            column.disabledSummaries = [...column.disabledSummaries, selectedValue];
+        }
+    }
+
+    public enableDefaultSummary(event) {
+        const selectedValue = this.defaultSummaries[event.index].value;
+        const column = this.hierarchicalGrid1.getColumnByName('GrammyNominations');
+
+        column.disabledSummaries = column.disabledSummaries.filter(
+            (summary) => summary !== selectedValue
+        );
+    }
+
+    public disableCustomSummary(event) {
+        const selectedValue = this.customSummaries[event.index].value;
+        const column = this.hierarchicalGrid1.getColumnByName('Photo');
+
+        if (!column.disabledSummaries.includes(selectedValue)) {
+            column.disabledSummaries = [...column.disabledSummaries, selectedValue];
+        }
+    }
+
+    public enableCustomSummary(event) {
+        const selectedValue = this.customSummaries[event.index].value;
+        const column = this.hierarchicalGrid1.getColumnByName('Photo');
+
+        column.disabledSummaries = column.disabledSummaries.filter(
+            (summary) => summary !== selectedValue
+        );
     }
 
     public formatter = (a) => a;