Merge branch '8.1.x' into astaev/issue5304-8.1.x

DiyanDimitrov · web-flow · commit d213000ac73c · 2019-08-02T10:39:39.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
@@ -68,6 +68,11 @@
             @extend %grid-excel-actions__action !optional;
         }
 
+        @include e(actions-pin, $m: disabled) {
+            @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions__action--disabled !optional;
+        }
+
         @include e(actions-unpin) {
             @extend %grid-excel-actions__action !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts
@@ -1391,9 +1391,7 @@ export class IgxColumnComponent implements AfterContentInit {
             return false;
         }
 
-        const width = parseInt(this.width, 10);
-
-        if (!this.parent && (grid.getUnpinnedWidth(true) - width < grid.unpinnedAreaMinWidth)) {
+        if (!this.parent && !this.pinnable) {
             return false;
         }
 
@@ -1684,6 +1682,15 @@ export class IgxColumnComponent implements AfterContentInit {
         this.calcPixelWidth = parseInt(this._calcWidth, 10);
     }
 
+    /**
+     *@hidden
+    */
+    public get pinnable() {
+        const gridUnpinnedWidth = (this.grid as any).getUnpinnedWidth(true);
+        const columnWidth = parseInt(this.width, 10);
+        return !((gridUnpinnedWidth - columnWidth) < this.grid.unpinnedAreaMinWidth);
+    }
+
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts
@@ -23,6 +23,9 @@ export class IgxExcelStyleColumnMovingComponent {
     @Input()
     public displayDensity: DisplayDensity;
 
+    @Input()
+    public isColumnPinnable: boolean;
+
     constructor() {}
 
     private get visibleColumns() {
@@ -32,6 +35,7 @@ export class IgxExcelStyleColumnMovingComponent {
     get canNotMoveLeft() {
         return this.column.visibleIndex === 0 ||
             (this.grid.unpinnedColumns.indexOf(this.column) === 0 && this.column.disablePinning) ||
+            (this.grid.unpinnedColumns.indexOf(this.column) === 0 && !this.isColumnPinnable) ||
             (this.column.level !== 0 && !this.findColumn(0, this.visibleColumns));
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html
@@ -14,6 +14,7 @@ <h4>{{ column.header || column.field }}</h4>
                 igxButton="icon"
                 [displayDensity]="grid.displayDensity"
                 (click)="onPin()"
+                [disabled]="!isColumnPinnable"
                 tabindex="0">
                 <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
             </button>
@@ -54,6 +55,7 @@ <h4>{{ column.header || column.field }}</h4>
                 class="igx-excel-filter__move"
                 [column]="column"
                 [grid]="grid"
+                [isColumnPinnable]="isColumnPinnable"
                 [displayDensity]="grid.displayDensity">
             </igx-excel-style-column-moving>
         </ng-template>
@@ -63,7 +65,7 @@ <h4>{{ column.header || column.field }}</h4>
         </div>
 
         <ng-template #defaultExcelStylePinningTemplate>
-            <div class="igx-excel-filter__actions-pin"
+            <div [ngClass]="pinClass()"
                 (click)="onPin()"
                 tabindex="0"
                 *ngIf="!column.pinned">
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
@@ -8,7 +8,8 @@ import {
     Directive,
     OnDestroy,
     AfterViewInit,
-    ElementRef
+    ElementRef,
+    OnInit
 } from '@angular/core';
 import {
     HorizontalAlignment,
@@ -87,7 +88,7 @@ export class IgxExcelStylePinningTemplateDirective {
     selector: 'igx-grid-excel-style-filtering',
     templateUrl: './grid.excel-style-filtering.component.html'
 })
-export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterViewInit {
+export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, AfterViewInit {
     private static readonly filterOptimizationThreshold = 2;
 
     private shouldOpenSubMenu = true;
@@ -148,6 +149,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
     @ViewChild('defaultExcelStylePinningTemplate', { read: TemplateRef, static: true })
     protected defaultExcelStylePinningTemplate: TemplateRef<any>;
 
+    public isColumnPinnable: boolean;
+
     get grid(): any {
         return this.filteringService.grid;
     }
@@ -171,6 +174,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
 
     constructor(private cdr: ChangeDetectorRef) {}
 
+    ngOnInit() {
+        this.isColumnPinnable = this.column.pinnable;
+    }
+
     ngOnDestroy(): void {
         this.destroy$.next(true);
         this.destroy$.complete();
@@ -205,6 +212,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
         return 'igx-excel-filter__actions-clear--disabled';
     }
 
+    public pinClass() {
+        return this.isColumnPinnable ? 'igx-excel-filter__actions-pin' : 'igx-excel-filter__actions-pin--disabled';
+    }
+
     public initialize(column: IgxColumnComponent, filteringService: IgxFilteringService, overlayService: IgxOverlayService,
         overlayComponentId: string) {
         this.column = column;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -5428,6 +5428,96 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
 
             expect(grid.filteredData).toBeNull();
         }));
+
+        it('Move-left button is disabled when using it to pin a column and max pin area width is reached.',
+        fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '500px';
+            fix.detectChanges();
+            grid.getColumnByName('ID').filterable = true;
+            grid.getColumnByName('ID').movable = true;
+            grid.cdr.detectChanges();
+            tick(100);
+
+            // Pin columns until maximum pin area width is reached.
+            const columns = ['ProductName', 'Downloads', 'Released'];
+            columns.forEach((columnField) => {
+                GridFunctions.clickExcelFilterIcon(fix, columnField);
+                fix.detectChanges();
+                GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+                tick(200);
+                fix.detectChanges();
+            });
+
+            // Verify pinned columns and 'ID' column position.
+            const column = grid.columns.find((col) => col.field === 'ID');
+            GridFunctions.verifyColumnIsPinned(column, false, 3);
+            expect(GridFunctions.getColumnHeaderByIndex(fix, 3).innerText).toBe('ID');
+
+            // Open ESF for the 'ID' column and verify that 'move left' button is disabled.
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            const moveComponent = GridFunctions.getExcelFilteringMoveComponent(fix);
+            const moveLeftButton = GridFunctions.sortNativeElementsHorizontally(
+                Array.from(moveComponent.querySelectorAll('.igx-button--flat')))[0];
+            expect(moveLeftButton.classList.contains('igx-button--disabled')).toBe(true);
+        }));
+
+        it('Pin button is disabled when using it to pin a column and max pin area width is reached.',
+        fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '500px';
+            fix.detectChanges();
+            grid.getColumnByName('ID').filterable = true;
+            grid.getColumnByName('ID').movable = true;
+            grid.cdr.detectChanges();
+            tick(100);
+
+            // Pin columns until maximum pin area width is reached.
+            const columns = ['ProductName', 'Downloads', 'Released'];
+            columns.forEach((columnField) => {
+                GridFunctions.clickExcelFilterIcon(fix, columnField);
+                fix.detectChanges();
+                GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+                tick(200);
+                fix.detectChanges();
+            });
+
+            // Verify pinned columns and 'ID' column position.
+            const column = grid.columns.find((col) => col.field === 'ID');
+            GridFunctions.verifyColumnIsPinned(column, false, 3);
+            expect(GridFunctions.getColumnHeaderByIndex(fix, 3).innerText).toBe('ID');
+
+            // Open ESF for the 'ID' column and verify that 'pin column' button is disabled.
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            let pinButton = GridFunctions.getExcelFilteringPinContainer(fix);
+            expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
+                'pinButton should be disabled');
+
+            // Close ESF.
+            GridFunctions.clickCancelExcelStyleFiltering(fix);
+            fix.detectChanges();
+
+            grid.displayDensity = DisplayDensity.compact;
+            tick(200);
+            fix.detectChanges();
+
+            // Pin one more column, because there is enough space for one more in 'compact' density.
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            fix.detectChanges();
+            GridFunctions.clickPinIconInExcelStyleFiltering(fix, true);
+            tick(200);
+            fix.detectChanges();
+
+            // Open ESF for the 'ID' column and verify that 'pin column' icon button is disabled.
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            const headerButtons = GridFunctions.getExcelFilteringHeaderIcons(fix);
+            pinButton = GridFunctions.sortNativeElementsHorizontally(Array.from(headerButtons))[0];
+            expect(pinButton.classList.contains('igx-button--disabled')).toBe(true,
+                'pinButton in header area should be disabled');
+        }));
     });
 
     describe(null, () => {
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
@@ -715,7 +715,9 @@ export class GridFunctions {
     public static getExcelFilteringPinContainer(fix: ComponentFixture<any>) {
         const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
         const excelMenu = gridNativeElement.querySelector('.igx-excel-filter__menu');
-        return excelMenu.querySelector('.igx-excel-filter__actions-pin');
+        const pinContainer = excelMenu.querySelector('.igx-excel-filter__actions-pin');
+        const pinContainerDisabled = excelMenu.querySelector('.igx-excel-filter__actions-pin--disabled');
+        return pinContainer ? pinContainer : pinContainerDisabled;
     }
 
     public static getExcelFilteringUnpinContainer(fix: ComponentFixture<any>) {

Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,11 @@`
`68`	`68`	`@extend %grid-excel-actions__action !optional;`
`69`	`69`	`}`
`70`	`70`
	`71`	`+ @include e(actions-pin, $m: disabled) {`
	`72`	`+ @extend %grid-excel-actions__action !optional;`
	`73`	`+ @extend %grid-excel-actions__action--disabled !optional;`
	`74`	`+ }`
	`75`	`+`
`71`	`76`	`@include e(actions-unpin) {`
`72`	`77`	`@extend %grid-excel-actions__action !optional;`
`73`	`78`	`}`