Merge branch 'master' into SKrastev/drag-drop-refactor

Author: skrustev

CHANGELOG.md

@@ -14,6 +14,17 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`
     - `IgxColumnGroup`
         - Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
+    - `igx-grid-footer` 
+        - You can use this to insert a custom footer in the grids.
+         ```html
+        <igx-grid>
+            <igx-grid-footer>
+                Custom content
+            </igx-grid-footer>
+        </igx-grid>
+        ```
+- `igx-paginator`
+    - Replaces the current paginator in all grids. Can be used as a standalone component.
 - `IgxCombo`
     - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays.
 

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

@@ -73,7 +73,8 @@
         z-index: 1;
         padding: map-get($paginator-padding, 'comfortable');
         height: map-get($paginator-height, 'comfortable');
-
+        width: 100%;
+        
         &:empty {
             padding: 0;
         }

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

@@ -96,6 +96,10 @@
         @extend %grid-tfoot-thumb !optional;
     }
 
+    @include e(footer) {
+        @extend %grid-footer !optional;
+    }
+
     @include e(tr) {
         @extend %grid-row !optional;
 

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

@@ -732,6 +732,10 @@
         z-index: 10001;
     }
 
+    %grid-footer {
+        grid-row: 7;
+    }
+
     %grid-display-container-thead {
         width: 100%;
         overflow: visible;

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts

@@ -1010,7 +1010,7 @@ describe('igxExpansionPanel', () => {
             expect(grid.attributes.getNamedItem('ng-reflect-auto-generate').nodeValue).toEqual('true');
             expect(grid.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(fixture.componentInstance.width);
             expect(grid.attributes.getNamedItem('ng-reflect-height').nodeValue).toEqual(fixture.componentInstance.height);
-            expect(grid.childElementCount).toEqual(5);
+            expect(grid.childElementCount).toEqual(6);
         }));
         it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {
             const fixture: ComponentFixture<IgxExpansionPanelImageComponent> = TestBed.createComponent(IgxExpansionPanelImageComponent);

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

@@ -1737,8 +1737,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    @ViewChild('paginator', { read: ElementRef, static: false })
-    public paginator: ElementRef;
+    @ViewChild('footer', { read: ElementRef, static: false })
+    public footer: ElementRef;
 
     /**
      * @hidden
@@ -3230,28 +3230,54 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     }
 
     /**
-     * Returns the total number of records.
-     * Only functions when paging is enabled.
+     * Returns if the current page is the first page.
      * ```typescript
-     * const totalRecords = this.grid.totalRecords;
+     * const firstPage = this.grid.isFirstPage;
      * ```
 	 * @memberof IgxGridBaseComponent
      */
-    get totalRecords(): number {
-        if (this.pagingState) {
-            return this.pagingState.metadata.countRecords;
+    get isFirstPage(): boolean {
+        return this.page === 0;
+    }
+
+    /**
+     * Goes to the next page of the `IgxGridComponent`, if the grid is not already at the last page.
+     * ```typescript
+     * this.grid1.nextPage();
+     * ```
+	 * @memberof IgxGridBaseComponent
+     */
+    public nextPage(): void {
+        if (!this.isLastPage) {
+            this.page += 1;
         }
     }
 
     /**
-     * Returns if the current page is the first page.
+     * Goes to the previous page of the `IgxGridComponent`, if the grid is not already at the first page.
      * ```typescript
-     * const firstPage = this.grid.isFirstPage;
+     * this.grid1.previousPage();
      * ```
 	 * @memberof IgxGridBaseComponent
      */
-    get isFirstPage(): boolean {
-        return this.page === 0;
+    public previousPage(): void {
+        if (!this.isFirstPage) {
+            this.page -= 1;
+        }
+    }
+
+    /**
+     * Returns the total number of records.
+     * Only functions when paging is enabled.
+     * ```typescript
+     * const totalRecords = this.grid.totalRecords;
+     * ```
+	 * @memberof IgxGridBaseComponent
+     */
+    get totalRecords(): number {
+        if (this.pagingState) {
+            return this.pagingState.metadata.countRecords;
+        }
     }
 
     /**
@@ -3444,32 +3470,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.onColumnMovingEnd.emit(args);
     }
 
-    /**
-     * Goes to the next page of the `IgxGridComponent`, if the grid is not already at the last page.
-     * ```typescript
-     * this.grid1.nextPage();
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    public nextPage(): void {
-        if (!this.isLastPage) {
-            this.page += 1;
-        }
-    }
-
-    /**
-     * Goes to the previous page of the `IgxGridComponent`, if the grid is not already at the first page.
-     * ```typescript
-     * this.grid1.previousPage();
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    public previousPage(): void {
-        if (!this.isFirstPage) {
-            this.page -= 1;
-        }
-    }
-
     /**
      * Goes to the desired page index.
      * ```typescript
@@ -4095,9 +4095,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     protected getPagingHeight(): number {
         let pagingHeight = 0;
-        if (this.paging && this.paginator) {
-            pagingHeight = this.paginator.nativeElement.firstElementChild ?
-                this.paginator.nativeElement.offsetHeight : 0;
+        if (this.footer) {
+            pagingHeight = this.footer.nativeElement.firstElementChild ?
+                this.footer.nativeElement.offsetHeight : 0;
         }
         return pagingHeight;
     }

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

@@ -23,6 +23,7 @@ import { IgxGridHeaderComponent } from './grid-header.component';
 import { IgxGridToolbarComponent } from './grid-toolbar.component';
 import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component';
 import { IgxGridFilteringRowComponent } from './filtering/grid-filtering-row.component';
+import { IgxGridFooterComponent } from './grid-footer/grid-footer.component';
 import {
     IgxCellEditorTemplateDirective,
     IgxCellFooterTemplateDirective,
@@ -59,6 +60,7 @@ import { IgxSummaryDataPipe } from './summaries/grid-root-summary.pipe';
 import { IgxGridSelectionService } from '../core/grid-selection';
 import { IgxGridSummaryService } from './summaries/grid-summary.service';
 import { IgxProgressBarModule } from '../progressbar/progressbar.component';
+import { IgxPaginatorModule } from '../paginator/paginator.component';
 import { IgxFilterModule } from '../directives/filter/filter.directive';
 import { IgxGridPipesModule } from './grid-pipes.module';
 import { IgxGridExcelStyleFilteringModule } from './filtering/excel-style/grid.excel-style-filtering.module';
@@ -99,7 +101,8 @@ import { IgxRowDragModule } from './row-drag.directive';
         IgxSummaryCellComponent,
         IgxGridDragSelectDirective,
         IgxGridColumnResizerComponent,
-        IgxFilterCellTemplateDirective
+        IgxFilterCellTemplateDirective,
+        IgxGridFooterComponent
     ],
     entryComponents: [
         IgxColumnComponent,
@@ -159,7 +162,9 @@ import { IgxRowDragModule } from './row-drag.directive';
         IgxGridPipesModule,
         IgxGridExcelStyleFilteringModule,
         IgxFilterCellTemplateDirective,
-        IgxRowDragModule
+        IgxRowDragModule,
+        IgxPaginatorModule,
+        IgxGridFooterComponent
     ],
     imports: [
         CommonModule,
@@ -187,7 +192,8 @@ import { IgxRowDragModule } from './row-drag.directive';
         IgxFilterModule,
         IgxGridPipesModule,
         IgxGridExcelStyleFilteringModule,
-        IgxRowDragModule
+        IgxRowDragModule,
+        IgxPaginatorModule
     ],
     providers: [
         IgxGridSelectionService,

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'igx-grid-footer',
+    template: '<ng-content></ng-content>'
+})
+export class IgxGridFooterComponent {
+}

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

@@ -2,39 +2,6 @@
     [displayDensity]="displayDensity" #toolbar>
 </igx-grid-toolbar>
 
-<ng-template #defaultPager let-api>
-    <div class="igx-grid-paginator__select">
-        <label class="igx-grid-paginator__label">{{ resourceStrings.igx_grid_paginator_label }}</label>
-        <div class="igx-grid-paginator__select-input">
-            <igx-select [(ngModel)]="api.perPage" [displayDensity]="paginatorSelectDisplayDensity()" type="border">
-                <igx-select-item [value]="val"
-                                 *ngFor="let val of [api.perPage, 5, 10, 15, 25, 50, 100, 500] | paginatorOptions">
-                    {{val}}
-                </igx-select-item>
-            </igx-select>
-        </div>
-    </div>
-    <div class="igx-grid-paginator__pager">
-        <button [disabled]="api.isFirstPage" (click)="api.paginate(0)" igxButton="icon" igxRipple
-            igxRippleCentered="true">
-            <igx-icon fontSet="material">first_page</igx-icon>
-        </button>
-        <button [disabled]="api.isFirstPage" (click)="api.previousPage()" igxButton="icon" igxRipple
-            igxRippleCentered="true">
-            <igx-icon fontSet="material">chevron_left</igx-icon>
-        </button>
-        <span>{{ api.page + 1 }} of {{ api.totalPages }}</span>
-        <button [disabled]="api.isLastPage" (click)="api.nextPage()" igxRipple igxRippleCentered="true"
-            igxButton="icon">
-            <igx-icon fontSet="material">chevron_right</igx-icon>
-        </button>
-        <button [disabled]="api.isLastPage" (click)="api.paginate(api.totalPages - 1)" igxButton="icon" igxRipple
-            igxRippleCentered="true">
-            <igx-icon fontSet="material">last_page</igx-icon>
-        </button>
-    </div>
-</ng-template>
-
 <div [style.width.px]='outerWidth' class="igx-grid__grouparea"
     *ngIf="groupingExpressions.length > 0 || hasGroupableColumns" #groupArea>
     <igx-chips-area (onReorder)="chipsOrderChanged($event)" (onMoveEnd)="chipsMovingEnded()">
@@ -198,12 +165,21 @@
     </div>
 </div>
 
-<div [ngClass]="paginatorClassName()" *ngIf="paging && totalRecords" #paginator>
-    <ng-container
-        *ngTemplateOutlet="paginationTemplate ? paginationTemplate : defaultPager; context: { $implicit: this }">
+<div class="igx-grid__footer" #footer>
+    <ng-content select="igx-grid-footer"></ng-content>
+    <ng-container *ngIf="paging && totalRecords">
+        <ng-container
+            *ngTemplateOutlet="paginationTemplate ? paginationTemplate : defaultPaginator; context: {$implicit: this}">
+        </ng-container>
     </ng-container>
 </div>
 
+<ng-template #defaultPaginator>
+    <igx-paginator [displayDensity]="displayDensity" [(page)]="page"
+        [totalRecords]="filteredData ? filteredData.length : totalRecords" [(perPage)]="perPage">
+    </igx-paginator>
+</ng-template>
+
 <ng-template #emptyFilteredGrid>
     <span class="igx-grid__tbody-message">{{emptyFilteredGridMessage}}</span>
 </ng-template>

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

@@ -4305,6 +4305,53 @@ describe('IgxGrid Component Tests', () => {
             expect(parseInt(window.getComputedStyle(grid.nativeElement).height, 10)).toBe(300);
         });
     });
+
+    describe('IgxGrid - footer section', () => {
+        configureTestSuite();
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxGridWithCustomFooterComponent
+                ],
+                imports: [
+                    NoopAnimationsModule, IgxGridModule]
+            }).compileComponents();
+        }));
+
+        it('should be able to display custom content', () => {
+            const fix = TestBed.createComponent(IgxGridWithCustomFooterComponent);
+            fix.detectChanges();
+
+            const footer = fix.debugElement.query(By.css('igx-grid-footer')).nativeElement;
+            const footerContent = footer.textContent.trim();
+
+            expect(footerContent).toEqual('Custom content');
+        });
+    });
+
+    describe('IgxGrid - with custom pagination template', () => {
+        configureTestSuite();
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxGridWithCustomPaginationTemplateComponent
+                ],
+                imports: [
+                    NoopAnimationsModule, IgxGridModule]
+            }).compileComponents();
+        }));
+
+        it('should have access to grid context', () => {
+            const fix = TestBed.createComponent(IgxGridWithCustomPaginationTemplateComponent);
+            fix.detectChanges();
+
+            const totalRecords = fix.componentInstance.grid.totalRecords.toString();
+            const paginationContent = fix.debugElement.query(By.css('.igx-grid__footer > h2')).nativeElement;
+            const paginationText = paginationContent.textContent.trim();
+
+            expect(paginationText).toEqual(totalRecords);
+        });
+    });
 });
 
 @Component({
@@ -4453,6 +4500,19 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
     }
 }
 
+@Component({
+    template:
+        `<div>
+        <igx-grid #grid [data]="data" [displayDensity]="'compact'" [autoGenerate]="true"
+            [paging]="true" [perPage]="5">
+            <igx-grid-footer>
+            Custom content
+            </igx-grid-footer>
+        </igx-grid>
+        </div>`
+})
+export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent {
+}
 @Component({
     template:
         `<div [style.width.px]="outerWidth" [style.height.px]="outerHeight">
@@ -5011,3 +5071,19 @@ export class IgxGridInsideIgxTabsComponent {
         this.data = data;
     }
 }
+
+@Component({
+    template: `
+        <igx-grid #grid [data]="data"
+        [paging]="true" [paginationTemplate]="pager">
+        </igx-grid>
+        <ng-template #pager let-grid>
+            <h2>{{grid.totalRecords}}</h2>
+        </ng-template>
+    `
+})
+export class IgxGridWithCustomPaginationTemplateComponent {
+    public data = SampleTestData.foodProductData();
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+}