Merge pull request #425 from UiPath/feat/emit_column_widths

Feat: emit column width percentage changes
UiPath · Nov 13, 2023 · b126475 · b126475
2 parents 6f7b9f0 + 28355a6
commit b126475
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v15.0.6 (2023-11-09)
+* **grid** adjust min-width for sticky container
+* **grid** condition last resize handle
+* **grid** emit column percentage changes
+* **grid** set refresh btn as sticky
+
 # v15.0.5 (2023-11-08)
 * **grid** move progress bar to parent container
 * **grid** rethink scrollable strategy

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.5",
+  "version": "15.0.6",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

diff --git a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts b/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts
@@ -31,6 +31,7 @@ import {
     IResizeState,
     ResizableGrid,
     ResizeDirection,
+    ResizeEmission,
 } from './types';
 
 /**
@@ -44,6 +45,7 @@ export abstract class ResizeManager<T extends IGridDataEntry> {
     resizeStart$ = new Subject<{ columnIndex: number; mouseEvent?: MouseEvent; direction?: 'left' | 'right' }>();
     resize$ = new Subject<Map<string, number>>();
     previousClientX = 0;
+    resizeEmissions$ = new Subject<ResizeEmission>();
 
     protected set _resizeEvent(ev: MouseEvent) {
         if (!this.current) { return; }
@@ -279,7 +281,10 @@ export abstract class ResizeManager<T extends IGridDataEntry> {
     }
 
     endResize() {
-        this._endResizeCommon(this.current!, this._previous!.neighbour, this._previous!.oppositeNeighbour);
+        const entries = [this.current!, this._previous!.neighbour, this._previous!.oppositeNeighbour];
+        this._emitNewColumnPercentages(entries.filter(e => e != null) as IResizeInfo<T>[]);
+        this._endResizeCommon(...entries);
+
         this.current = undefined;
         this._direction = NaN;
     }
@@ -345,6 +350,17 @@ export abstract class ResizeManager<T extends IGridDataEntry> {
         this._previous = {} as IResizeState<T>;
     }
 
+    protected _emitNewColumnPercentages(entries: IResizeInfo<T>[]) {
+        const resizeEmissions = entries.reduce((acc, curr) => {
+            acc[curr.column.property!.toString()] = {
+                initialPercentage: +curr.column.width / 10,
+                finalPercentage: +this._widthMap.get(curr.column.identifier)! / 10,
+            };
+            return acc;
+        }, {} as ResizeEmission);
+        this.resizeEmissions$.next(resizeEmissions);
+    }
+
     private _getCellsFor = (property: string) => toArray<HTMLDivElement>(
         this._gridElement
             .querySelectorAll(cellSelector(property)),

diff --git a/...ects/angular/components/ui-grid/src/managers/resize/strategies/scrollable-grid-resizer.ts b/...ects/angular/components/ui-grid/src/managers/resize/strategies/scrollable-grid-resizer.ts
@@ -1,5 +1,8 @@
 import { IGridDataEntry } from '../../../models';
-import { IResizeInfo } from '../../resize/types';
+import {
+    IResizeInfo,
+    ResizeEmission,
+} from '../../resize/types';
 import { ResizeDirection } from '../../resize/types/resizeDirection';
 import { IResizeEvent } from '../../resize/types/resizeEvent';
 import {
@@ -67,6 +70,26 @@ export class ScrollableGridResizer<T extends IGridDataEntry> extends ImmediateNe
         entry.column.widthPx$.next(widthPx);
     }
 
+    protected _emitNewColumnPercentages(entries: (IResizeInfo<T>)[]) {
+        const resizeEmissions: ResizeEmission = {};
+        entries.forEach(entry => {
+            const columnWidth = (entry.column.widthPx$.value / this._grid.columnWidthPercentToPxRatio);
+            const initialPercentage = +entry!.column.width / 10;
+            const finalPercentage = columnWidth / 10;
+
+            if (initialPercentage !== finalPercentage) {
+                resizeEmissions[entry.column.property!.toString()] = {
+                    initialPercentage,
+                    finalPercentage,
+                };
+            }
+
+            entry!.column.width = columnWidth / 10;
+        });
+
+        this.resizeEmissions$.next(resizeEmissions);
+    }
+
     private _isLastStickyColumn(state: IResizeEvent<T>) {
         return state.current.resized.element.classList.contains('ui-grid-sticky-element') &&
             !state.current.neighbour?.element.classList.contains('ui-grid-sticky-element');

diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizableGrid.ts b/projects/angular/components/ui-grid/src/managers/resize/types/resizableGrid.ts
@@ -27,4 +27,7 @@ export abstract class ResizableGrid<T> {
 
     protected abstract _destroyed$: Subject<void>;
     protected abstract _columnChanges$: Observable<SimpleChanges>;
+    abstract columnWidthPercentToPxRatio: number;
 }
+
+export type ResizeEmission = Record<string, { initialPercentage: number; finalPercentage: number }>;
diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html
@@ -155,8 +155,8 @@
                                          (focusout)="hideColumnHeaderTooltip(columnTooltip)"
                                          (keyup.enter)="sortManager.changeSort(column)"
                                          (keyup.space)="sortManager.changeSort(column)"
-                                         (keydown.ArrowLeft)="columns.freeColumns.length && resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
-                                         (keydown.ArrowRight)="columns.freeColumns.length && resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
+                                         (keydown.ArrowLeft)="(!last || isScrollable) && columns.freeColumns.length && resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
+                                         (keydown.ArrowRight)="(!last || isScrollable) && columns.freeColumns.length && resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
                                          cdkMonitorElementFocus
                                          class="ui-grid-header-cell ui-grid-sticky-element"
                                          role="columnheader"
@@ -222,8 +222,8 @@
                                      (focusout)="hideColumnHeaderTooltip(columnTooltip)"
                                      (keyup.enter)="sortManager.changeSort(column)"
                                      (keyup.space)="sortManager.changeSort(column)"
-                                     (keydown.ArrowLeft)="resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
-                                     (keydown.ArrowRight)="resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
+                                     (keydown.ArrowLeft)="(!last || isScrollable) && resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
+                                     (keydown.ArrowRight)="(!last || isScrollable) && resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
                                      cdkMonitorElementFocus
                                      class="ui-grid-header-cell"
                                      role="columnheader"
@@ -262,7 +262,7 @@
                                         </div>
                                     </div>
 
-                                    <div *ngIf="!isProjected && column.resizeable && !useCardView"
+                                    <div *ngIf="!isProjected && column.resizeable && !useCardView && (!last || isScrollable)"
                                          (mousedown)="resizeManager.startResize($event, column, columnIndex)"
                                          class="ui-grid-resize-handle-container">
                                         <div [class.ui-grid-state-resizing]="column === resizeManager.current?.column"
@@ -402,7 +402,7 @@
          *ngIf="!isRowExpanded(row?.id) || expandMode === 'preserve'"
          [class.ui-grid-row-state-expanded]="isRowExpanded(row?.id)"
          [class.ui-grid-border-none]="!footer && last"
-         [class.highlighted-row]="highlightedEntityId != null && row.id != null && highlightedEntityId.toString() === row.id.toString()"
+         [class.highlighted-row]="allowHighlight && (row.id + '')  === (highlightedEntityId + '')"
          [ngClass]="rowConfig?.ngClassFn(row) ?? ''"
          [tabIndex]="0"
          [attr.data-row-index]="index"

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.scss b/projects/angular/components/ui-grid/src/ui-grid.component.scss
@@ -232,9 +232,7 @@ ui-grid {
                 }
             }
 
-
             .ui-grid-header {
-
                 &-row,
                 &-cell {
                     height: $ui-grid-header-alternate-row-height;
@@ -407,7 +405,7 @@ ui-grid {
 
                 @extend %ellipse;
 
-                >* {
+                > * {
                     @extend %ellipse;
                 }
             }
@@ -455,7 +453,9 @@ ui-grid {
                 .ui-grid-header-cell {
                     background-color: $header-background-color;
 
-                    &.ui-grid-state-resizing, &:focus, &.cdk-focused {
+                    &.ui-grid-state-resizing,
+                    &:focus,
+                    &.cdk-focused {
                         background-color: $ui-grid-row-hover-color;
                     }
                 }
@@ -499,7 +499,8 @@ ui-grid {
                         background-color: $ui-grid-row-hover-color;
                     }
 
-                    .ui-grid-cell, .ui-grid-cell-resizing-border-container {
+                    .ui-grid-cell,
+                    .ui-grid-cell-resizing-border-container {
                         background-color: $ui-grid-row-hover-color;
                     }
 
@@ -643,6 +644,11 @@ ui-grid {
                     box-sizing: border-box;
                 }
 
+                &.ui-grid-refresh-cell {
+                    position: sticky;
+                    right: 0;
+                }
+
                 &.ui-grid-action-cell {
                     position: relative;
                     width: 0;
@@ -688,15 +694,13 @@ ui-grid {
 
                     //sorted asc
                     &-asc {
-
                         // desc path
                         .path-desc {
                             opacity: 0;
                         }
                     }
 
                     &-desc {
-
                         //sorted desc
                         .path-asc {
                             // asc path
@@ -706,6 +710,13 @@ ui-grid {
                 }
             }
 
+            .ui-grid-header-cell,
+            .ui-grid-cell,
+            .sticky-columns-header-container,
+            .sticky-columns-cell-container {
+                box-sizing: border-box;
+            }
+
             .ui-grid-header-cell {
                 height: $ui-grid-header-row-height - $ui-row-border-width;
             }

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts
@@ -47,6 +47,7 @@ import {
     Key,
 } from '@uipath/angular/testing';
 
+import { ResizeEmission } from '../src/managers/resize/types/resizableGrid';
 import { UiMatPaginatorIntl } from './components/ui-grid-custom-paginator/ui-grid-custom-paginator.component';
 import { UiGridCustomPaginatorModule } from './components/ui-grid-custom-paginator/ui-grid-custom-paginator.module';
 import { IDropdownOption } from './filters/ui-grid-dropdown-filter.directive';
@@ -4454,7 +4455,9 @@ describe('Component: UiGrid', () => {
                          [refreshable]="true"
                          [selectable]="false"
                          [virtualScroll]="virtualScroll"
-                         [minWidth]="minWidth">
+                         [allowHighlight]="true"
+                         [minWidth]="minWidth"
+                         (resizeEmissions)="resizeEmissions = $event">
                     <ui-grid-column [property]="'myNumber'"
                                     [isSticky]="true"
                                     width="5%"
@@ -4500,6 +4503,7 @@ describe('Component: UiGrid', () => {
             scrollableStrategy = ResizeStrategy.ScrollableGrid;
             displayLargeColumn = false;
             minWidth = 0;
+            resizeEmissions?: ResizeEmission;
         }
         describe('Behavior: horizontal scrollable grid', () => {
             let fixture: ComponentFixture<TestFixtureHorizontalScrollGridComponent>;
@@ -4589,6 +4593,25 @@ describe('Component: UiGrid', () => {
                 discardPeriodicTasks();
             }));
 
+            it(`should emit resize emissions when finishing the resize of a column`, fakeAsync(() => {
+                beforeConfig();
+                tick(100);
+
+                const col = document.querySelectorAll('div[role="columnheader"]')[1]!;
+
+                col.dispatchEvent(EventGenerator.keyDown(Key.ArrowRight));
+                fixture.detectChanges();
+                tick(5000);
+
+                fixture.componentInstance.grid.resizeManager.stop();
+                fixture.detectChanges();
+
+                expect((fixture.componentInstance.resizeEmissions as any).myNumber.initialPercentage).toEqual(5);
+                expect((fixture.componentInstance.resizeEmissions as any).myNumber.finalPercentage).toBeGreaterThan(50);
+                flush();
+                discardPeriodicTasks();
+            }));
+
             [100, 500].forEach(reducedGridWidth => {
                 const msgNegation = 100 === reducedGridWidth ? '' : 'NOT';
                 xit(`should ${msgNegation} limit sticky columns on grid resize if it is ${msgNegation} exceeding 0.7 of grid container`, fakeAsync(() => {