Merge pull request #6787 from IgniteUI/dkamburov/right-pin-summaries

feat(grid-pinning): Add summaries with right pinning #6676

Author: Lipata

projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-component.scss

@@ -33,6 +33,11 @@
         @extend %igx-grid-summary--pinned-last !optional;
     }
 
+    @include m(pinned-first) {
+        @extend %igx-grid-summary--pinned !optional;
+        @extend %igx-grid-summary--pinned-first !optional;
+    }
+
     @include m(empty) {
         @extend %igx-grid-summary !optional;
         @extend %igx-grid-summary--empty !optional;

projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss

@@ -159,6 +159,13 @@
         }
     }
 
+    %igx-grid-summary--pinned-first {
+        border-#{$left}: map-get($cell-pin, 'style') map-get($cell-pin, 'color');
+        @media print {
+            border-left: map-get($cell-pin, 'style') #999;
+        }
+    }
+
     %igx-grid-summary__item {
         display: flex;
         align-items: center;

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

@@ -15,6 +15,7 @@ import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnPinningPosition } from '../common/enums';
 import { IPinningConfig } from '../common/grid.interface';
 import { wait } from '../../test-utils/ui-interactions.spec';
+import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 
 describe('IgxGrid - Column Pinning #grid', () => {
     const COLUMN_HEADER_CLASS = '.igx-grid__th';
@@ -572,8 +573,33 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(fistPinnedHeaders[0].nativeElement.getAttribute('aria-label')).toBe('General Information');
             expect(fistPinnedHeaders[1].context.column.field).toBe('CompanyName');
         });
-    });
 
+        it('should correctly pin columns with their summaries to end.', async() => {
+            const fix = TestBed.createComponent(GridRightPinningComponent);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.instance;
+            grid.pinning = { columns: ColumnPinningPosition.End };
+            grid.columns.forEach(col => {
+                if (col.field === 'CompanyName' || col.field === 'ContactName') {
+                    col.hasSummary = true;
+                }
+            });
+            fix.detectChanges();
+            await wait();
+            fix.detectChanges();
+            const summaryRow = fix.debugElement.query(By.css('igx-grid-summary-row'));
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 9,
+                ['Count'], ['27']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 10,
+                ['Count'], ['27']);
+            const pinnedSummaryCells = summaryRow.queryAll(By.css('igx-grid-summary-cell.igx-grid-summary--pinned'));
+            expect(pinnedSummaryCells[0].nativeElement.className.indexOf('igx-grid-summary--pinned-first'))
+                .not.toBe(-1);
+            expect(pinnedSummaryCells[1].nativeElement.className.indexOf('igx-grid-summary--pinned-first'))
+                .toBe(-1);
+        });
+    });
 });
 
 /* tslint:disable */

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

@@ -6,16 +6,18 @@
         [style.flex-basis.px]="grid.summariesMargin"
         ></div>
     </ng-container>
-    <ng-container *ngIf="pinnedColumns.length > 0">
-        <igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
-            class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
+    <ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
+        <ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this)"></ng-container>
+    </ng-container>
+    <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
+        <igx-grid-summary-cell
+            class="igx-grid-summary igx-grid-summary--fw"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
             [class.igx-grid-summary--empty]="!col.hasSummary"
-            [class.igx-grid-summary--pinned-last]="col.isLastPinned"
             [column]="col"
-            [firstCellIndentation]="firstCellIndentation"
             [rowIndex]="index"
+            [firstCellIndentation]="firstCellIndentation"
             [summaryResults]="getColumnSummaries(col.field)"
             [hasSummary]="col.hasSummary"
             [density]="grid.displayDensity"
@@ -25,24 +27,31 @@
             [style.max-width]="col.getCellWidth()"
             [style.flex-basis]="col.getCellWidth()">
         </igx-grid-summary-cell>
+    </ng-template>
+    <ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
+        <ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this)"></ng-container>
     </ng-container>
-    <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
-        <igx-grid-summary-cell
-            class="igx-grid-summary igx-grid-summary--fw"
+</ng-container>
+
+<ng-template #summaryCellTemplate let-col>
+    <igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
+            class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
             [class.igx-grid-summary--empty]="!col.hasSummary"
+            [class.igx-grid-summary--pinned-first]="col.isFirstPinned"
+            [class.igx-grid-summary--pinned-last]="col.isLastPinned"
             [column]="col"
-            [rowIndex]="index"
             [firstCellIndentation]="firstCellIndentation"
+            [rowIndex]="index"
             [summaryResults]="getColumnSummaries(col.field)"
             [hasSummary]="col.hasSummary"
             [density]="grid.displayDensity"
             [style.max-height.px]="minHeight"
             [style.min-height.px]="minHeight"
             [style.min-width]="col.getCellWidth()"
             [style.max-width]="col.getCellWidth()"
-            [style.flex-basis]="col.getCellWidth()">
+            [style.flex-basis]="col.getCellWidth()"
+            [style.left]="col.rightPinnedOffset">
         </igx-grid-summary-cell>
-    </ng-template>
-</ng-container>
+</ng-template>

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts

@@ -96,4 +96,10 @@ export class IgxSummaryRowComponent implements DoCheck  {
     public get unpinnedColumns(): IgxColumnComponent[] {
         return this.grid.unpinnedColumns;
     }
+
+    getContext(row) {
+        return {
+            $implicit: row
+        };
+    }
 }

src/app/grid-summaries/grid-summaries.sample.html

@@ -1,4 +1,4 @@
-<igx-grid #grid1 [data]="data" [autoGenerate]="false" [displayDensity]="'compact'" [width]="w" [height]="h"
+<igx-grid #grid1 [pinning]="pinningConfig" [data]="data" [autoGenerate]="false" [displayDensity]="'compact'" [width]="w" [height]="h"
     [paging]="false" [allowFiltering]='true' [filterMode]="'excelStyleFilter'" [summaryCalculationMode]="'rootAndChildLevels'">
     <igx-column field="Index" header="Index" [width]="cw">
     </igx-column>
@@ -48,6 +48,7 @@
 <igx-switch [(ngModel)]="grid1.allowFiltering">allowFiltering</igx-switch>
 <igx-switch [(ngModel)]="grid1.columnHiding">columnHiding</igx-switch>
 <igx-switch [(ngModel)]="grid1.columnPinning">columnPinning</igx-switch>
+<igx-switch (change)='onChange()'>Left Pinning toggle</igx-switch>
 <igx-switch [(ngModel)]="grid1.showToolbar">showToolbar</igx-switch>
 <igx-switch [(ngModel)]="groupable">ReorderLevel groupable</igx-switch>
 <igx-switch [(ngModel)]="filterable">ReorderLevel filterable</igx-switch>

src/app/grid-summaries/grid-summaries.sample.ts

@@ -3,8 +3,10 @@ import {
     IgxColumnComponent,
     IgxGridComponent,
     IgxNumberSummaryOperand,
-    IgxSummaryResult
+    IgxSummaryResult,
+    ColumnPinningPosition
 } from 'igniteui-angular';
+import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
 
 
 class MySummary extends IgxNumberSummaryOperand {
@@ -46,6 +48,8 @@ export class GridSummaryComponent implements OnInit {
     public hasSummaryUnit = true;
     public hasHidden = false;
 
+    public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
+
 
     data = [{
         __metadata: {
@@ -803,4 +807,12 @@ export class GridSummaryComponent implements OnInit {
     public scrScrollTo(index) {
         this.grid1.verticalScrollContainer.scrollTo(parseInt(index, 10));
     }
+
+    onChange() {
+        if (this.pinningConfig.columns === ColumnPinningPosition.End) {
+            this.pinningConfig = { columns: ColumnPinningPosition.Start };
+        } else {
+            this.pinningConfig = { columns: ColumnPinningPosition.End };
+        }
+    }
 }