feat(groupby): adding cell-like formatting for group values #12752 (#12768)

* feat(groupby): adding cell-like formatting for group values #12752

* chore(groupby): adding changelog, fixing lint

* fix(groupby): removing leftovers from the tempalte

* chore(groupby): fixing an issue with non-existing columns

---------

Co-authored-by: Deyan Kamburov <[email protected]>

Author: ChronosSF

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable changes for each version of this project will be documented in this
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.
  - `IgxGrid`
     - **Breaking Change** The `onGroupingDone` output has been renamed to `groupingDone` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
+    - Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
  - `DisplayDensity`
     - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on `ng update`.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -1,4 +1,5 @@
 import { Component, ViewChild, TemplateRef, QueryList } from '@angular/core';
+import { formatNumber } from '@angular/common'
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -788,7 +789,7 @@ describe('IgxGrid - GroupBy #grid', () => {
         fix.detectChanges();
         grid.groupBy({
             fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false
-        }); 
+        });
         fix.detectChanges();
         spyOn(grid.groupingExpressionsChange, 'emit');
         fix.detectChanges();
@@ -1516,7 +1517,7 @@ describe('IgxGrid - GroupBy #grid', () => {
             expect(GridSelectionFunctions.verifyGroupByRowCheckboxState(grRow, true, false));
         }));
 
-    it('the group row selector state should be indeterminated if some of the records in the group but not all are selected',
+    it('the group row selector state should be undetermined if some of the records in the group but not all are selected',
         fakeAsync(() => {
             const fix = TestBed.createComponent(DefaultGridComponent);
             const grid = fix.componentInstance.instance;
@@ -2088,6 +2089,33 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(fix.componentInstance.onGroupByRowClick).toHaveBeenCalledWith(fix.componentInstance.groupByRowClick, contextUnselect);
     }));
 
+    // GroupBy Row Formatting
+    it('should properly apply formatters, both custom and default ones for the default row value template', fakeAsync(() => {
+        const fix = TestBed.createComponent(GroupableGridComponent);
+        const grid = fix.componentInstance.instance;
+        tick();
+        fix.detectChanges();
+        grid.groupBy({
+            fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false
+        });
+        tick();
+        fix.detectChanges();
+        let cellText = grid.groupsRowList.first.nativeElement.querySelector(".igx-group-label__text").innerText;
+        expect(cellText).toEqual(formatNumber(1000, grid.locale));
+        // apply custom formatter
+        grid.getColumnByName('Downloads').formatter = (value, _row) => `\$${value}`;
+        grid.groupingExpressions = [];
+        tick();
+        fix.detectChanges();
+        grid.groupBy({
+            fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false
+        });
+        tick();
+        fix.detectChanges();
+        cellText = grid.groupsRowList.first.nativeElement.querySelector(".igx-group-label__text").innerText;
+        expect(cellText).toEqual('$1000');
+    }));
+
     // GroupBy + Resizing
     it('should retain same size for group row after a column is resized.', fakeAsync(() => {
         const fix = TestBed.createComponent(DefaultGridComponent);
@@ -3819,7 +3847,7 @@ export class CustomTemplateGridComponent extends DataParent {
     public width = '800px';
     public height = null;
 
-    @ViewChild('template', {read: TemplateRef })
+    @ViewChild('template', { read: TemplateRef })
     public customGroupBy: TemplateRef<any>;
 }
 

projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html

@@ -48,18 +48,19 @@
                 (groupRow.expression ? groupRow.expression.fieldName : '') }}:
             </span>
 
-            <ng-container *ngIf="dataType === 'boolean' || dataType === 'string'; else default">
-                <span class="igx-group-label__text">{{ groupRow.value }}</span>
-            </ng-container>
-            <ng-template #default>
-                <ng-container *ngIf="dataType === 'number'">
-                    <span class="igx-group-label__text">{{ groupRow.value | number }}</span>
-                </ng-container>
-                <ng-container *ngIf="dataType === 'date' || dataType === 'dateTime' || dataType === 'time'">
-                    <span class="igx-group-label__text">{{ groupRow.value |
-                        date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale }}</span>
-                </ng-container>
-            </ng-template>
+            <span class="igx-group-label__text">{{
+                formatter
+                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)
+                    : dataType === "number"
+                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)
+                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')
+                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)
+                    : dataType === 'currency'
+                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)
+                    : dataType === 'percent'
+                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)
+                    : groupRow.value
+            }}</span>
 
             <igx-badge [value]="groupRow.records ? groupRow.records.length : 0" class='igx-group-label__count-badge'>
             </igx-badge>

projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts

@@ -21,6 +21,7 @@ import { Subject } from 'rxjs';
 import { IgxGridRowComponent } from './grid-row.component';
 import { GridSelectionMode } from '../common/enums';
 import { ISelectionNode } from '../common/types';
+import { getLocaleCurrencyCode } from '@angular/common';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -119,6 +120,12 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
         return this.isActive();
     }
 
+    /** @hidden @internal */
+    public get currencyCode(): string {
+        return this.groupRow.column.pipeArgs.currencyCode ?
+            this.groupRow.column.pipeArgs.currencyCode : getLocaleCurrencyCode(this.grid.locale);
+    }
+
     constructor(
         @Inject(IGX_GRID_BASE) public grid: GridType,
         public gridSelection: IgxGridSelectionService,
@@ -249,13 +256,21 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
     }
 
     /**
-     * @hidden
-     */
+     * @hidden @internal
+    */
     public get dataType(): any {
         const column = this.groupRow.column;
         return (column && column.dataType) || GridColumnDataType.String;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get formatter(): any {
+        const column = this.groupRow.column;
+        return (column && column.formatter) || null;
+    }
+
     /**
      * @hidden @internal
      */