Merge pull request #10508 from IgniteUI/bpachilova/feat-7981-master

feat(grid): add new directive for retemplating summaries

Author: teodosiah

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.0.1
+
+### New Features
+- Add `igxSummary` directive in order to re-template the default summary cell layout.
+    - Expose `summaryTemplate` input in order to bind the column summary template through API.
+    - Expose `summaryRowHeight` property which overrides the default hight of the summary row.
+    - Code example below:
+
+    ```html
+    <igx-column ... [hasSummary]="true">
+        <ng-template igxSummary let-summaryResult>
+            <span> My custom summary template</span>
+            <span>{{ summaryResult[0].label }} - {{ summaryResult[0].summaryResult }}</span>
+        </ng-template>
+    </igx-column>
+    ```
+    - Please, refer to the [Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries#summary-template) topic for more information.
+
 ## 13.0.0
 
 ### New Features

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -43,7 +43,8 @@ import {
     IgxCellHeaderTemplateDirective,
     IgxCellEditorTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
-    IgxFilterCellTemplateDirective
+    IgxFilterCellTemplateDirective,
+    IgxSummaryTemplateDirective
 } from './templates.directive';
 import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
 import { DropPosition } from '../moving/moving.service';
@@ -833,6 +834,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     @ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective })
     public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
+    /**
+     * @hidden
+     */
+    @ContentChild(IgxSummaryTemplateDirective, { read: IgxSummaryTemplateDirective })
+    protected summaryTemplateDirective: IgxSummaryTemplateDirective;
     /**
      * @hidden
      */
@@ -853,7 +859,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     @ContentChild(IgxCollapsibleIndicatorTemplateDirective, { read: IgxCollapsibleIndicatorTemplateDirective, static: false })
     protected collapseIndicatorTemplate: IgxCollapsibleIndicatorTemplateDirective;
-
     /**
      * @hidden
      */
@@ -1109,6 +1114,39 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 return '80';
         }
     }
+    /**
+     * Returns a reference to the `summaryTemplate`.
+     * ```typescript
+     * let summaryTemplate = this.column.summaryTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public get summaryTemplate(): TemplateRef<any> {
+        return this._summaryTemplate;
+    }
+    /**
+     * Sets the summary template.
+     * ```html
+     * <ng-template #summaryTemplate igxSummary let-summaryResults>
+     *    <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
+     *    <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'summaryTemplate'", {read: TemplateRef })
+     * public summaryTemplate: TemplateRef<any>;
+     * this.column.summaryTemplate = this.summaryTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    public set summaryTemplate(template: TemplateRef<any>) {
+        this._summaryTemplate = template;
+    }
     /**
      * Returns a reference to the `bodyTemplate`.
      * ```typescript
@@ -1565,6 +1603,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     protected _headerTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    protected _summaryTemplate: TemplateRef<any>;
     /**
      * @hidden
      */
@@ -1672,6 +1714,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     public ngAfterContentInit(): void {
+        if (this.summaryTemplateDirective) {
+            this._summaryTemplate = this.summaryTemplateDirective.template;
+        }
         if (this.cellTemplate) {
             this._bodyTemplate = this.cellTemplate.template;
         }

projects/igniteui-angular/src/lib/grids/columns/column.module.ts

@@ -8,13 +8,14 @@ import {
     IgxCellHeaderTemplateDirective,
     IgxCellTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
-    IgxFilterCellTemplateDirective
+    IgxFilterCellTemplateDirective,
+    IgxSummaryTemplateDirective
 } from './templates.directive';
 
-
 @NgModule({
     declarations: [
         IgxFilterCellTemplateDirective,
+        IgxSummaryTemplateDirective,
         IgxCellTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellFooterTemplateDirective,
@@ -31,6 +32,7 @@ import {
     ],
     exports: [
         IgxFilterCellTemplateDirective,
+        IgxSummaryTemplateDirective,
         IgxCellTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellFooterTemplateDirective,

projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts

@@ -50,3 +50,11 @@ export class IgxCollapsibleIndicatorTemplateDirective {
 
     constructor(public template: TemplateRef<any>) { }
 }
+
+@Directive({
+    selector: '[igxSummary]'
+})
+export class IgxSummaryTemplateDirective {
+
+    constructor(public template: TemplateRef<any>) { }
+}

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -157,6 +157,7 @@ export interface ColumnType {
     filteringExpressionsTree: FilteringExpressionsTree;
     hasSummary: boolean;
     summaries: any;
+    summaryTemplate: TemplateRef<any>;
     pinned: boolean;
     expanded: boolean;
     selected: boolean;
@@ -372,6 +373,7 @@ export interface GridType extends IGridDataBindable {
     dataWithAddedInTransactionRows: any[];
     transactions: TransactionService<Transaction, State>;
     defaultSummaryHeight: number;
+    summaryRowHeight: number;
     rowEditingOverlay: IgxToggleDirective;
     totalRowsCountAfterFilter: number;
     _totalRecords: number;

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -221,6 +221,25 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Input()
     public loadingGridTemplate: TemplateRef<any>;
 
+    /**
+     * Get/Set IgxSummaryRow height
+     */
+    @Input()
+    public set summaryRowHeight(value: number) {
+        this._summaryRowHeight = value | 0;
+        this.summaryService.summaryHeight = value;
+        if (!this._init) {
+            this.reflow();
+        }
+    }
+
+    public get summaryRowHeight(): number {
+        if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
+            return this._summaryRowHeight || this.summaryService.calcMaxSummaryHeight();
+        }
+        return 0;
+    }
+
     /**
      * Controls the copy behavior of the grid.
      */
@@ -2510,10 +2529,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public tfootHeight: number;
-    /**
-     * @hidden @internal
-     */
-    public summariesHeight: number;
 
     /**
      * @hidden @internal
@@ -2752,6 +2767,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _summaryPosition: GridSummaryPosition = GridSummaryPosition.bottom;
     private _summaryCalculationMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
     private _showSummaryOnCollapse = false;
+    private _summaryRowHeight = 0;
     private _cellSelectionMode: GridSelectionMode = GridSelectionMode.multiple;
     private _rowSelectionMode: GridSelectionMode = GridSelectionMode.none;
     private _selectRowOnClick = true;
@@ -3220,7 +3236,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this.onDensityChanged.pipe(destructor).subscribe(() => {
             this.crudService.endEdit(false);
+            if (this._summaryRowHeight === 0) {
             this.summaryService.summaryHeight = 0;
+            }
             this.notifyChanges(true);
         });
     }
@@ -6321,10 +6339,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected calculateGridHeight() {
         this.calcGridHeadRow();
-        this.summariesHeight = 0;
-        if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
-            this.summariesHeight = this.summaryService.calcMaxSummaryHeight();
-        }
 
         this.calcHeight = this._calculateGridBodyHeight();
         if (this.pinnedRowHeight && this.calcHeight) {
@@ -6349,7 +6363,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected getFooterHeight(): number {
-        return this.summariesHeight || this.getComputedHeight(this.tfoot.nativeElement);
+        return this.summaryRowHeight || this.getComputedHeight(this.tfoot.nativeElement);
     }
     /**
      * @hidden