From e2962ab942ddfd0e246b2bb13134070b594840eb Mon Sep 17 00:00:00 2001
From: Diyan Dimitrov <ddimitrov@infragistics.com>
Date: Tue, 23 Jul 2019 15:17:54 +0300
Subject: [PATCH] samples(treeGrid): clean up TreeGrid child summaries sample
 #1328

---
 .../tree-grid-summary2-sample.component.html  | 61 ++++----------
 .../tree-grid-summary2-sample.component.scss  | 83 -------------------
 .../tree-grid-summary2-sample.component.ts    | 44 +---------
 3 files changed, 20 insertions(+), 168 deletions(-)

diff --git a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html
index b524ff4dce..861d652e8e 100644
--- a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html
+++ b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html
@@ -6,46 +6,21 @@
     <igx-buttongroup [values]="summaryPositions" (onSelect)="selectSummaryPosition($event)"></igx-buttongroup>
 </div>
 
-<div class="grid__wrapper">
-    <igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="600px" width="100%"
-        primaryKey="ID" foreignKey="ParentID">
-        <igx-column #col field="ID" header="Product ID" [sortable]="true">
-        </igx-column>
-        <igx-column #col field="Name" header="Product Name" [hasSummary]="true">
-            <ng-template igxCell let-cell="cell" let-val>
-                {{ val }}
-            </ng-template>
-            <ng-template igxHeader let-col>
-                <div class="text">{{col.field}}</div>
-                <igx-icon class="header-icon" color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
-            </ng-template>
-        </igx-column>
-        <igx-column #col field="UnitPrice" header="Price" [filterable]="false" editable="true" dataType="number"
-            [hasSummary]="true" [summaries]="priceSummary">
-            <ng-template igxCell let-cell="cell" let-val let-row>
-                ${{ val }}
-            </ng-template>
-            <ng-template igxHeader let-col>
-                <div class="text">Price</div>
-                <igx-icon class="header-icon" color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
-            </ng-template>
-        </igx-column>
-        <igx-column #col field="Discontinued" header="Discontinued" [dataType]="'boolean'">
-            <ng-template igxCell let-cell="cell" let-val>
-                <img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
-                <img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
-            </ng-template>
-            <ng-template igxHeader let-col>
-                <div class="text">{{ col.field }}</div>
-            </ng-template>
-        </igx-column>
-        <igx-column #col field="AddedDate" header="Added Date" [dataType]="'date'">
-            <ng-template igxCell let-cell="cell" let-val let-row>
-                {{ val | date: 'MMM d, yyyy' }}
-            </ng-template>
-            <ng-template igxHeader let-col>
-                <div class="text">Added Date</div>
-            </ng-template>
-        </igx-column>
-    </igx-tree-grid>
-</div>
\ No newline at end of file
+<igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="600px" width="100%"
+    primaryKey="ID" foreignKey="ParentID">
+    <igx-column #col field="ID" header="Product ID" [sortable]="true">
+    </igx-column>
+    <igx-column #col field="Name" header="Product Name" [hasSummary]="true">
+    </igx-column>
+    <igx-column #col field="UnitPrice" header="Price" [formatter]="formatCurrency" [filterable]="false" editable="true" dataType="number"
+                [hasSummary]="true" [summaries]="avgSummary">
+    </igx-column>
+    <igx-column #col field="Discontinued" header="Discontinued" [dataType]="'boolean'">
+        <ng-template igxCell let-cell="cell" let-val>
+            <img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
+            <img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
+        </ng-template>
+    </igx-column>
+    <igx-column #col field="AddedDate" header="Added Date" [dataType]="'date'">
+    </igx-column>
+</igx-tree-grid>
\ No newline at end of file
diff --git a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.scss b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.scss
index 399cca4d27..d3628f91ea 100644
--- a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.scss
@@ -1,86 +1,3 @@
-.grid-controls {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-between;
-    margin: 0 16px 24px;
-
-    igx-switch {
-        margin-top: 24px;
-    }
-
-}
-
-.grid__wrapper {
-    margin: 0 16px;
-}
-
-.header {
-    height: 100%;
-}
-
-.igx-grid__th .title{
-    width: 100%;
-    cursor: auto;
-}
-  
-@media screen and (max-width: 677px){
-
-    [class*=header-icon]{
-        padding-bottom: 17px;
-        padding-top: 17px;
-        font-size: 1.4em;
-        width: 1.1em;
-        height: 1.1em;
-        float: right;
-    }
-    [class*=text]{
-        float:left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 50%;
-    }  
-}
-
-@media screen and (min-width: 677px){
-
-    [class*=header-icon]{
-        padding-top: 17px;
-        font-size: 1.4em;
-        width: 1.1em;
-        height: 1.1em;
-        float: right;
-    }
-
-    [class*=text] {
-        float:left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 50%;
-    }    
-}
-
-@media screen and (min-width: 992px){
-
-    [class*=header-icon] {
-        padding-top: 17px;
-        font-size: 1.4em;
-        width: 1.1em;
-        height: 1.1em;
-        float: right;
-        margin-right: 10px;
-        cursor: pointer;
-    }
-
-    [class*=text] {
-        float:left;
-        white-space: nowrap;
-        width: 50%;
-        cursor: auto;
-    }
-}
-
 :host {
     display: block;
     padding: 8px;
diff --git a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts
index 4f712a3d04..506a13db2e 100644
--- a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts
+++ b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts
@@ -31,25 +31,7 @@ class AvgSummary extends IgxSummaryOperand {
     }
 }
 
-class SumSummary extends IgxSummaryOperand {
-
-    constructor() {
-        super();
-    }
-
-    public operate(data?: any[]): IgxSummaryResult[] {
-        const result = [];
-        result.push({
-            key: "sum",
-            label: "Sum",
-            summaryResult: IgxNumberSummaryOperand.sum(data)
-        });
-        return result;
-    }
-}
-
 @Component({
-    encapsulation: ViewEncapsulation.None,
     selector: "app-tree-grid-summary2-sample",
     styleUrls: ["./tree-grid-summary2-sample.component.scss"],
     templateUrl: "./tree-grid-summary2-sample.component.html"
@@ -62,14 +44,11 @@ export class TreeGridSummary2SampleComponent implements OnInit {
 
     public expr: ISortingExpression[];
     public avgSummary = AvgSummary;
-    public sumSummary = SumSummary;
     public summaryPositions;
     public summaryPosition = GridSummaryPosition.bottom;
     public summaryCalcModes;
     public summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
 
-    public priceSummary = CustomPriceSummary;
-
     constructor() {
         this.data = FOODS_DATA();
         this.expr = [
@@ -133,26 +112,7 @@ export class TreeGridSummary2SampleComponent implements OnInit {
         this.grid1.summaryCalculationMode = this.summaryCalculationMode;
     }
 
-    public toggleSummary(column: IgxColumnComponent) {
-        column.hasSummary = !column.hasSummary;
-    }
-}
-
-export class CustomPriceSummary extends IgxNumberSummaryOperand {
-
-    constructor() {
-        super();
-    }
-
-    public operate(data?: any[]): IgxSummaryResult[] {
-        const result = [];
-        result.push(
-            {
-                key: "average",
-                label: "average",
-                summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null
-            }
-        );
-        return result;
+    public formatCurrency(value: number) {
+        return "$" + value.toFixed(2);
     }
 }