Merge pull request #7255 from IgniteUI/action-strip-jump-to

feat(RowPinning): Initial implementation of jump to disabled row grid action.

Author: ChronosSF

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,4 +1,10 @@
 <ng-container *ngIf="isRowContext">
+    <button *ngIf="inPinnedArea && pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
+        <igx-icon fontSet="filtering-icons" name="jump_down"></igx-icon>
+    </button>
+    <button *ngIf="inPinnedArea && !pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
+        <igx-icon fontSet="filtering-icons" name="jump_up"></igx-icon>
+    </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
         <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
     </button>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts

@@ -7,6 +7,7 @@ import { IgxGridModule, IgxGridComponent } from '../../grids/grid';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { IgxActionStripModule } from '../action-strip.module';
+import { wait } from '../../test-utils/ui-interactions.spec';
 
 
 describe('igxGridPinningActions #grid ', () => {
@@ -57,8 +58,22 @@ describe('igxGridPinningActions #grid ', () => {
         expect(grid.pinnedRows.length).toBe(0);
     });
 
-    it('should allow navigating to disabled row in unpinned area', () => {
-        pending('implementation');
+    it('should allow navigating to disabled row in unpinned area', async() => {
+        grid.pinRow('FAMIA');
+        fixture.detectChanges();
+
+        actionStrip.show(grid.pinnedRows[0]);
+        fixture.detectChanges();
+
+        const jumpIcon = fixture.debugElement.query(By.css(`igx-icon[name=jump_down]`));
+        jumpIcon.parent.triggerEventHandler('click', new Event('click'));
+        await wait();
+        fixture.detectChanges();
+        await wait();
+        fixture.detectChanges();
+
+        const secondToLastVisible = grid.rowList.toArray()[grid.rowList.length - 2];
+        expect(secondToLastVisible.rowID).toEqual('FAMIA');
     });
 });
 

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts

@@ -35,6 +35,31 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         return context && context.pinned;
     }
 
+    /**
+     * Getter to know if the row is in pinned and ghost
+     * @hidden
+     * @internal
+     */
+    get inPinnedArea(): boolean {
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        const context = this.strip.context;
+        return this.pinned && !context.disabled;
+    }
+
+    /**
+     * Getter to know if the row pinning is set to top or bottom
+     * @hidden
+     * @internal
+     */
+    get pinnedTop(): boolean {
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        return this.strip.context.grid.isRowPinningToTop;
+    }
+
     /**
      * Pin the row according to the context.
      * @example
@@ -75,6 +100,16 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         this.strip.hide();
     }
 
+    public scrollToRow(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const context = this.strip.context;
+        const grid = context.grid;
+        grid.scrollTo(context.rowData, 0);
+        this.strip.hide();
+    }
+
     private renderIcons(): void {
         if (!this.isRow(this.strip.context)) {
             return;

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -831,8 +831,9 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                     // need to adjust the offsets so that item is last in view.
                     const updatesToIndex = this._adjustToIndex - this.state.startIndex + 1;
                     const sumDiffs = diffs.slice(0, updatesToIndex).reduce(reducer);
-                    const currOffset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
-                    this.dc.instance._viewContainer.element.nativeElement.style.top = (currOffset - sumDiffs) + 'px';
+                    if (sumDiffs !== 0) {
+                        this.addScrollTop(sumDiffs);
+                    }
                     this._adjustToIndex = null;
                 }
             }

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -229,7 +229,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 
         if (grid.hasPinnedRecords && isPinned) {
             const result = collection.filter(rec => grid.isRecordPinned(rec));
-            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+            result.sort((rec1, rec2) => grid.getInitialPinnedIndex(rec1) - grid.getInitialPinnedIndex(rec2));
             return result;
         }
 

projects/igniteui-angular/src/lib/grids/filtering/svgIcons.ts

@@ -228,5 +228,17 @@ export default [
           <rect x="7.5" y="7.5" width="3.75" height="3.75"/>
           <rect x="12.75" y="7.5" width="3.75" height="3.75"/>
         </svg>`
+    },
+    {
+        name: 'jump_up',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 8l4 4H7c0 3.31 2.69 6 6 6 1.01 0 1.97-.25 2.8-.7l1.46 1.46A7.93 7.93 0 0113 20c-4.42 0-8-3.58-8-8H2l4-4zm15-5v2H5V3h16z"/>
+        </svg>`
+    },
+    {
+        name: 'jump_down',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21 19v2H5v-2h16zM13 4c1.57 0 3.03.46 4.26 1.24L15.8 6.7A5.87 5.87 0 0013 6c-3.31 0-6 2.69-6 6h3l-4 4-4-4h3c0-4.42 3.58-8 8-8z"/>
+        </svg>`
     }
 ];

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

@@ -2449,9 +2449,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected destroy$ = new Subject<any>();
 
-    protected _filteredSortedPinnedData;
-    protected _filteredSortedUnpinnedData;
-    protected _filteredPinnedData;
+    protected _filteredSortedPinnedData: any[];
+    protected _filteredSortedUnpinnedData: any[];
+    protected _filteredPinnedData: any[];
 
     /**
      * @hidden
@@ -2711,15 +2711,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    public isRecordPinned(rec) {
-        const id = this.primaryKey ? rec[this.primaryKey] : rec;
-        return this._pinnedRecordIDs.indexOf(id) !== -1;
-    }
-
     /**
      * Returns whether the record is pinned or not.
      *
@@ -2737,9 +2728,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * Returns whether the record is pinned or not.
      *
      * @param rowIndex Index of the record in the `filteredSortedData` collection.
-     *
-     * @hidden
-     * @internal
      */
     public isRecordPinnedByIndex(rowIndex: number) {
         return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this._filteredSortedPinnedData.length) ||
@@ -2750,8 +2738,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    public pinRecordIndex(rec) {
-        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+    public isRecordPinned(rec) {
+        return this.getInitialPinnedIndex(rec) !== -1;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     * Returns the record index in order of pinning by the user. Does not consider sorting/filtering.
+     */
+    public getInitialPinnedIndex(rec) {
+        const id = this.gridAPI.get_row_id(rec);
         return this._pinnedRecordIDs.indexOf(id);
     }
 
@@ -3015,12 +3012,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public setFilteredSortedData(data, pinned: boolean) {
         data = data || [];
-        if (this._pinnedRecordIDs.length > 0 && pinned) {
+        if (this.pinnedRecordsCount > 0 && pinned) {
             this._filteredSortedPinnedData = data;
             this.pinnedRecords = data;
             this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
             [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
-        } else if (this._pinnedRecordIDs.length > 0 && !pinned) {
+        } else if (this.pinnedRecordsCount > 0 && !pinned) {
             this._filteredSortedUnpinnedData = data;
         } else {
             this.filteredSortedData = data;
@@ -5959,7 +5956,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected scrollTo(row: any | number, column: any | number, inCollection = this.filteredSortedData): void {
+    protected scrollTo(row: any | number, column: any | number, inCollection = this._filteredSortedUnpinnedData): void {
         let delayScrolling = false;
 
         if (this.paging && typeof (row) !== 'number') {

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

@@ -271,20 +271,23 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
     }));
 
     it('should scroll top of child grid into view when pressing Ctrl + Arrow Up when cell is selected in it.', (async () => {
-        hierarchicalGrid.verticalScrollContainer.scrollTo(7);
-        fixture.detectChanges();
         await wait(DEBOUNCE_TIME);
+        fixture.detectChanges();
+
         hierarchicalGrid.verticalScrollContainer.scrollTo(7);
+        await wait(DEBOUNCE_TIME);
         fixture.detectChanges();
+        hierarchicalGrid.verticalScrollContainer.scrollTo(7);
         await wait(DEBOUNCE_TIME);
+        fixture.detectChanges();
 
         const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[3];
-
         const childLastRowCell =  childGrid.dataRowList.toArray()[9].cells.toArray()[0];
         const childGridContent =  fixture.debugElement.queryAll(By.css(GRID_CONTENT_CLASS))[1];
         GridFunctions.focusCell(fixture, childLastRowCell);
         fixture.detectChanges();
         UIInteractions.triggerEventHandlerKeyDown('arrowup', childGridContent, false, false, true);
+        await wait(200);
         fixture.detectChanges();
         await wait(200);
         fixture.detectChanges();

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

@@ -616,22 +616,12 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         };
     }
 
-    /**
-     * @hidden @internal
-     * This is overwritten because tree grid records have special record format - ITreeGridRecord,
-     * which already has the rowID in the record object.
-     */
-    public isRecordPinned(rec) {
-        const id = rec.rowID;
-        return this._pinnedRecordIDs.indexOf(id) !== -1;
-    }
-
     /**
      * @hidden
      * @internal
      */
-    public pinRecordIndex(rec) {
-        return super.pinRecordIndex(rec.data);
+    public getInitialPinnedIndex(rec) {
+        return this._pinnedRecordIDs.indexOf(rec.rowID);
     }
 
     /**