Merge pull request #435 from UiPath/feat/selectable-page-index

feat(grid): add selectable page index
UiPath · Dec 4, 2023 · 9b68149 · 9b68149
2 parents 2158bee + 515f42d
commit 9b68149
Show file tree

Hide file tree

Showing 14 changed files with 148 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# v15.0.10 (2023-12-04)
+* **grid** add selectable page index
+* **fix** increase loading buffer size
+
 # v15.0.9 (2023-11-24)
 * **grid** column width reacts on resize strategy changes
 * **grid** handle single sticky column case

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "15.0.9",
+  "version": "15.0.10",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

diff --git a/...s/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html b/...s/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html
@@ -43,7 +43,27 @@
             </button>
             <div class="mat-mdc-paginator-page-label">
                 <ng-container *ngIf="!hideTotalCount">
-                    {{_intl.getPageLabel(pageIndex+1, pageCount)}}
+                    <ng-container *ngIf="selectablePageIndex && pageCount > 1; else defaultPageLabel">
+                        {{ _intl.getPageOnlyLabel() }}
+                        <mat-form-field [appearance]="_formFieldAppearance!"
+                                        [color]="color ?? 'primary'"
+                                        class="mat-mdc-paginator-page-index-select">
+                            <mat-select (selectionChange)="changePage($event.value)"
+                                        [value]="pageIndex"
+                                        [aria-label]="_intl.pageSelectLabel"
+                                        data-cy="page-index-select">
+                                <mat-option *ngFor="let possiblePage of possiblePages"
+                                            [value]="possiblePage.value">
+                                    {{ possiblePage.label }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                        {{ _intl.getTotalPages(pageCount) }}
+                    </ng-container>
+
+                    <ng-template #defaultPageLabel>
+                        {{_intl.getPageLabel(pageIndex+1, pageCount)}}
+                    </ng-template>
                 </ng-container>
                 <ng-container *ngIf="hideTotalCount">
                     {{ pageIndex + 1 }}

diff --git a/...s/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss b/...s/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss
@@ -8,6 +8,8 @@ $mat-paginator-selector-trigger-width: 56px;
 $mat-paginator-selector-trigger-outline-width: 64px;
 $mat-paginator-selector-trigger-fill-width: 64px;
 
+$mat-paginator-index-selector-width: 48px;
+
 $mat-paginator-page-label-margin: 0 32px 0 24px;
 $mat-paginator-button-icon-size: 14px;
 $mat-paginator-button-size: 32px;
@@ -54,6 +56,11 @@ ui-grid-custom-paginator {
     .mat-mdc-paginator-page-size-label {
         margin: $mat-paginator-items-per-page-label-margin;
     }
+    .mat-mdc-paginator-page-index-select {
+        margin: $mat-paginator-selector-margin;
+        width: $mat-paginator-index-selector-width;
+    }
+
     .mat-mdc-paginator-page-size-select {
         margin: $mat-paginator-selector-margin;
         width: $mat-paginator-selector-trigger-width;

diff --git a/...i-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts b/...i-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts
@@ -7,6 +7,7 @@ import {
     TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { EventGenerator } from '@uipath/angular/testing';
 
 import {
@@ -20,7 +21,8 @@ import { UiGridCustomPaginatorModule } from './ui-grid-custom-paginator.module';
     <ui-grid-custom-paginator [pageIndex]="pageIndex"
                               [pageSize]="pageSize"
                               [length]="length"
-                              [showFirstLastButtons]="true">
+                              [showFirstLastButtons]="true"
+                              [selectablePageIndex]="selectablePageIndex">
     </ui-grid-custom-paginator>
     `,
 })
@@ -32,6 +34,7 @@ class TestFixtureComponent {
     pageIndex = 0;
     pageSize = 10;
     length = 120;
+    selectablePageIndex = false;
 }
 
 describe('Component: UiGrid', () => {
@@ -40,10 +43,11 @@ describe('Component: UiGrid', () => {
         let component: TestFixtureComponent;
         let intl: UiMatPaginatorIntl;
 
-        beforeEach(() => {
+        const setup = (selectablePageIndex = false, length = 120) => {
             TestBed.configureTestingModule({
                 imports: [
                     UiGridCustomPaginatorModule,
+                    NoopAnimationsModule,
                 ],
                 providers: [
                     UiMatPaginatorIntl,
@@ -55,22 +59,26 @@ describe('Component: UiGrid', () => {
 
             intl = TestBed.inject(UiMatPaginatorIntl);
             fixture = TestBed.createComponent(TestFixtureComponent);
+            component = fixture.componentInstance;
 
-            fixture.detectChanges();
+            component.selectablePageIndex = selectablePageIndex;
+            component.length = length;
 
-            component = fixture.componentInstance;
-        });
+            fixture.detectChanges();
+        };
 
         afterEach(() => {
             fixture.destroy();
         });
 
         it('should display correct page label', () => {
+            setup();
             const label = fixture.debugElement.query(By.css('.mat-mdc-paginator-page-label'));
             expect(label.nativeElement.innerText).toEqual(intl.getPageLabel(1, 12));
         });
 
         it('should update page label on page change', () => {
+            setup();
             const nextButton = fixture.debugElement.query(By.css('.mat-mdc-paginator-navigation-next'));
             const label = fixture.debugElement.query(By.css('.mat-mdc-paginator-page-label'));
 
@@ -81,6 +89,47 @@ describe('Component: UiGrid', () => {
 
             expect(label.nativeElement.innerText).toEqual(intl.getPageLabel(2, 12));
         });
+
+        it('should be able to change page index if selectablePageIndex is true and length is greater than pageSize', async () => {
+            setup(true);
+            const SELECTED_PAGE = 2;
+
+            const pageIndexInputDebugEl = fixture.debugElement.query(By.css('[data-cy="page-index-select"]'));
+            const pageIndexInput: HTMLInputElement = pageIndexInputDebugEl.nativeElement;
+
+            pageIndexInput.click();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const secondOption: HTMLElement = fixture.debugElement.queryAll(By.css('.mat-mdc-option'))[SELECTED_PAGE].nativeElement;
+            secondOption.click();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const pageRangeLabel = fixture.debugElement.query(By.css('.mat-mdc-paginator-range-label'));
+
+            expect(pageRangeLabel.nativeElement.innerText).toEqual(
+                component.paginator._intl.getRangeLabel(SELECTED_PAGE, component.pageSize, component.length),
+            );
+         });
+
+        it('should not display page index select if selectablePageIndex is true and length is less than pageSize', () => {
+            setup(true, 9);
+            const pageIndexInput = fixture.debugElement.query(By.css('[data-cy="page-index-select"]'));
+
+            expect(pageIndexInput).toBeNull();
+        });
+
+        it('should not display page index select if selectablePageIndex is false', () => {
+            setup();
+            const pageIndexInput = fixture.debugElement.query(By.css('[data-cy="page-index-select"]'));
+
+            expect(pageIndexInput).toBeNull();
+        });
     });
 
     describe('Service: UiMatPaginatorIntl', () => {

diff --git a/...nts/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts b/...nts/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts
@@ -19,12 +19,22 @@ import {
 
 @Injectable()
 export class UiMatPaginatorIntl extends MatPaginatorIntl {
+    pageSelectLabel = 'Select page';
+
     getPageLabel(currentPage: number, pageCount?: number): string {
         if (!pageCount) {
             return `Page ${currentPage}`;
         }
         return `Page ${currentPage} / ${pageCount}`;
     }
+
+    getPageOnlyLabel(): string {
+        return 'Page';
+    }
+
+    getTotalPages(pageCount: number): string {
+        return `/ ${pageCount}`;
+    }
 }
 
 @Component({
@@ -46,8 +56,12 @@ export class UiGridCustomPaginatorComponent extends _MatPaginatorBase<MatPaginat
      * Whether to show total count in custom paginator
      *
      */
-    @Input()
-        hideTotalCount = false;
+    @Input() hideTotalCount = false;
+
+    /**
+     * Whether to be able to select the page index
+     */
+    @Input() selectablePageIndex = false;
 
     @HostBinding('class')
     hostClass = 'mat-mdc-paginator';
@@ -60,6 +74,20 @@ export class UiGridCustomPaginatorComponent extends _MatPaginatorBase<MatPaginat
         return Math.min(this.length, (this.pageIndex + 1) * this.pageSize);
     }
 
+    set length(value: number) {
+        super.length = value;
+
+        this.possiblePages = Array.from({ length: this.pageCount }, (_, i) => ({
+            label: i + 1,
+            value: i,
+        }));
+    }
+    get length() {
+        return super.length;
+    }
+
+    possiblePages: { label: number; value: number }[] = [];
+
     constructor(
         changeDetectorRef: ChangeDetectorRef,
         @Optional()
@@ -74,4 +102,17 @@ export class UiGridCustomPaginatorComponent extends _MatPaginatorBase<MatPaginat
             this._formFieldAppearance = defaults.formFieldAppearance;
         }
     }
+
+    changePage(pageIndex: number) {
+        const prevIndex = this.pageIndex;
+
+        this.pageIndex = pageIndex;
+
+        this.page.emit({
+            pageIndex,
+            previousPageIndex: prevIndex,
+            pageSize: this.pageSize,
+            length: this.length,
+        });
+    }
 }
diff --git a/projects/angular/components/ui-grid/src/models/dataModel.ts b/projects/angular/components/ui-grid/src/models/dataModel.ts
@@ -29,4 +29,5 @@ export interface GridOptions<T> {
     idProperty?: keyof T;
     rowSize?: number;
     resizeStrategy?: ResizeStrategy;
+    selectablePageIndex?: boolean;
 }
diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html
@@ -383,6 +383,7 @@
                                       [showFirstLastButtons]="footer.showFirstLastButtons"
                                       [hidePageSize]="footer.hidePageSize"
                                       [hideTotalCount]="footer.hideTotalCount"
+                                      [selectablePageIndex]="selectablePageIndex"
                                       (page)="footer.pageChange.next($event)">
             </ui-grid-custom-paginator>
         </div>

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.ts b/projects/angular/components/ui-grid/src/ui-grid.component.ts
@@ -438,6 +438,13 @@ export class UiGridComponent<T extends IGridDataEntry>
         }
     }
 
+    /**
+     * Configure if the pagination should be selectable
+     *
+     */
+    @Input()
+    selectablePageIndex: boolean;
+
     /**
      * Emits an event with the sort model when a column sort changes.
      *
@@ -867,6 +874,7 @@ export class UiGridComponent<T extends IGridDataEntry>
         this._collapseFiltersCount$ = new BehaviorSubject(
             _gridOptions?.collapseFiltersCount ?? (_gridOptions?.collapsibleFilters === true ? 0 : Number.POSITIVE_INFINITY),
         );
+        this.selectablePageIndex = _gridOptions?.selectablePageIndex ?? false;
 
         this.isProjected = this._ref.nativeElement.classList.contains('ui-grid-state-responsive');
 

diff --git a/projects/angular/package.json b/projects/angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "15.0.9",
+    "version": "15.0.10",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",

diff --git a/projects/playground/src/app/pages/grid/component/grid.component.html b/projects/playground/src/app/pages/grid/component/grid.component.html
@@ -17,7 +17,8 @@
          [expandMode]="'preserve'"
          [resizeStrategy]="inputs.isScrollable ? scrollableGridStrategy : immediateNeighbourHaltStrategy"
          [customFilterValue]="inputs.customFilter ? [{property: 'parity', method: 'eq', value: 'odd'}] : []"
-         [allowHighlight]="inputs.allowHighlight">
+         [allowHighlight]="inputs.allowHighlight"
+         [selectablePageIndex]="inputs.selectablePageIndex">
 
     <ui-grid-header [search]="header.searchable">
         <ui-header-button *ngFor="let button of generateButtons(header.main)"

diff --git a/projects/playground/src/app/pages/grid/grid.models.ts b/projects/playground/src/app/pages/grid/grid.models.ts
@@ -34,6 +34,7 @@ export interface IInputs {
     hideTotalCount: boolean;
     isScrollable: boolean;
     allowHighlight: boolean;
+    selectablePageIndex: boolean;
 }
 
 export interface IGridSettings {

diff --git a/projects/playground/src/app/pages/grid/grid.page.ts b/projects/playground/src/app/pages/grid/grid.page.ts
@@ -66,6 +66,7 @@ export class GridPageComponent implements AfterViewInit, OnDestroy {
         'useCardView',
         'isScrollable',
         'allowHighlight',
+        'selectablePageIndex',
     ];
 
     buttonKeys = [
@@ -131,6 +132,7 @@ export class GridPageComponent implements AfterViewInit, OnDestroy {
                 useCardView: [false],
                 isScrollable: [false],
                 allowHighlight: [false],
+                selectablePageIndex: [true],
             }),
             header: this._fb.group({
                 searchable: [true],