Skip to content

Commit 8d8e17f

Browse files
CatalinB7CatalinB7
committed
fix(grid): correct empty state on scrollable strategy
1 parent 91058c4 commit 8d8e17f

File tree

7 files changed

+41
-29
lines changed

7 files changed

+41
-29
lines changed

‎projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
169169
}
170170

171171
/**
172-
* If the column should be styled as primary. Has the side-effect of setting column to sticky.
172+
* If the column should be styled as primary.
173173
*
174174
*/
175175
@Input()
@@ -178,7 +178,6 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
178178
}
179179
set primary(primary: boolean) {
180180
if (primary === this._primary) { return; }
181-
if (primary) {this.isSticky = true;}
182181
this._primary = !!primary;
183182

184183
this.change$.next({
@@ -192,7 +191,7 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
192191
*/
193192
@Input()
194193
set disableToggle(value: boolean) {
195-
this._disableToggle = value || this.isSticky;
194+
this._disableToggle = value;
196195
}
197196
get disableToggle() {
198197
return this._disableToggle;

‎projects/angular/components/ui-grid/src/ui-grid.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
(keydown.shift.alt.arrowup)="focusRowHeader()"
105105
class="ui-grid-container">
106106

107-
<div [class.scrollable]="isScrollable"
107+
<div [class.scrollable]="isScrollable && !dataManager.pristine"
108108
class="ui-grid-table-container">
109109
<div *ngIf="useLegacyDesign && header?.mainButtons?.length === 1"
110110
class="ui-grid-action-button">
@@ -117,7 +117,7 @@
117117
</div>
118118

119119
<div [class.ui-grid-table-refreshable]="refreshable"
120-
[style.minWidth.px]="isScrollable ? (minWidth$ | async) : undefined"
120+
[style.minWidth.px]="isScrollable && dataManager.length ? (minWidth$ | async) : undefined"
121121
[style.overflow]="isScrollable ? (tableOverflowStyle$ | async) : 'visible'"
122122
class="ui-grid-table"
123123
role="grid">
@@ -379,7 +379,7 @@
379379
expanded: expandedEntries,
380380
last: last,
381381
columnWidths: columnWidths,
382-
previewSelectedEntityId: (previewSelected$ | async)
382+
highlightedEntityId: (highlightedEntityId$ | async)
383383
}">
384384
</ng-container>
385385
</ng-container>
@@ -403,13 +403,13 @@
403403
let-last="last"
404404
let-index="index"
405405
let-columnWidths="columnWidths"
406-
let-previewSelectedEntityId="previewSelectedEntityId">
406+
let-highlightedEntityId="highlightedEntityId">
407407
<div cdkMonitorSubtreeFocus
408408
class="ui-grid-row"
409409
*ngIf="!isRowExpanded(row?.id) || expandMode === 'preserve'"
410410
[class.ui-grid-row-state-expanded]="isRowExpanded(row?.id)"
411411
[class.ui-grid-border-none]="!footer && last"
412-
[class.selected-preview]="previewSelectedEntityId === row?.id"
412+
[class.highlighted-row]="highlightedEntityId === row?.id"
413413
[ngClass]="rowConfig?.ngClassFn(row) ?? ''"
414414
[tabIndex]="0"
415415
[attr.data-row-index]="index"

‎projects/angular/components/ui-grid/src/ui-grid.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -464,7 +464,7 @@ ui-grid {
464464
}
465465
}
466466

467-
&.selected-preview {
467+
&.highlighted-row {
468468
> div:first-of-type {
469469
box-shadow: inset 4px 0px 0px $preview-selection-color;
470470
}

‎projects/angular/components/ui-grid/src/ui-grid.component.spec.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4540,6 +4540,8 @@ describe('Component: UiGrid', () => {
45404540
});
45414541

45424542
fixture = TestBed.createComponent(TestFixtureHorizontalScrollGridComponent);
4543+
const data = generateListFactory(generateEntity)(6);
4544+
fixture.componentInstance.data = data;
45434545

45444546
tick(100);
45454547
fixture.detectChanges();
@@ -4640,6 +4642,14 @@ describe('Component: UiGrid', () => {
46404642
expect(gridTable.styles.overflow).toEqual('hidden');
46414643
}));
46424644
});
4645+
4646+
it(`should apply highlighted-row class on row click`, fakeAsync(() => {
4647+
const row = fixture.debugElement.query(By.css('.ui-grid-row'));
4648+
row.nativeElement.dispatchEvent(EventGenerator.click);
4649+
fixture.detectChanges();
4650+
tick(100);
4651+
expect(row.classes['highlighted-row']).toBeTruthy();
4652+
}));
46434653
});
46444654
});
46454655
});

‎projects/angular/components/ui-grid/src/ui-grid.component.ts‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,6 @@ export class UiGridComponent<T extends IGridDataEntry>
201201

202202
if (value != null) {
203203
this._resizeStrategy = value;
204-
this.isScrollable = value === ResizeStrategy.ScrollableGrid && !this.virtualScroll;
205204

206205
if (this.resizeManager != null) {
207206
this.resizeManager.destroy();
@@ -325,7 +324,6 @@ export class UiGridComponent<T extends IGridDataEntry>
325324
@Input()
326325
set virtualScroll(value: boolean) {
327326
this._virtualScroll = value;
328-
this.isScrollable = this.isScrollable && !value;
329327
}
330328
get virtualScroll() {
331329
return this._virtualScroll;
@@ -417,12 +415,12 @@ export class UiGridComponent<T extends IGridDataEntry>
417415
useCardView = false;
418416

419417
/**
420-
* Id of the entity that should be previewed
418+
* Id of the entity that should be highlighted
421419
*
422420
*/
423421
@Input()
424-
set previewSelectionId(value: string) {
425-
this.previewSelected$.next(value);
422+
set highlightedEntityId(value: string) {
423+
this.highlightedEntityId$.next(value);
426424
}
427425

428426
/**
@@ -683,7 +681,9 @@ export class UiGridComponent<T extends IGridDataEntry>
683681
* Whether the grid allows horizontal scroll or not.
684682
*
685683
*/
686-
isScrollable = false;
684+
get isScrollable() {
685+
return this.resizeStrategy === ResizeStrategy.ScrollableGrid && !this.virtualScroll;
686+
}
687687

688688
/**
689689
* The width of selectable column.
@@ -709,10 +709,10 @@ export class UiGridComponent<T extends IGridDataEntry>
709709
);
710710

711711
/**
712-
* Emits the id of the entity that should be previewed.
712+
* Emits the id of the entity that should be highlighted.
713713
*
714714
*/
715-
previewSelected$ = new BehaviorSubject<string | number>('');
715+
highlightedEntityId$ = new BehaviorSubject<string | number>('');
716716

717717
/**
718718
* @internal
@@ -775,13 +775,15 @@ export class UiGridComponent<T extends IGridDataEntry>
775775
),
776776
this.resizeManager.widthChange$.pipe(
777777
map(() => this._computeMinWidth()),
778+
distinctUntilChanged(),
778779
),
779780
).pipe(
780781
tap(() => { this._cd.detectChanges(); }),
781782
));
782783

783784
isOverflown$ = this.minWidth$.pipe(
784785
map(minWidth => this._isOverflown(minWidth)),
786+
distinctUntilChanged(),
785787
);
786788

787789
tableOverflowStyle$ = this.isOverflown$.pipe(
@@ -796,6 +798,7 @@ export class UiGridComponent<T extends IGridDataEntry>
796798
return this.stickyColumnsWidths!;
797799
}),
798800
startWith(this.stickyColumnsWidths!),
801+
distinctUntilChanged(),
799802
tap(() => queueMicrotask(() => this._cd.detectChanges())),
800803
),
801804
((this.footer
@@ -1147,17 +1150,17 @@ export class UiGridComponent<T extends IGridDataEntry>
11471150
onRowClick(event: Event, row: T) {
11481151
if ((event.target instanceof Element) &&
11491152
!EXCLUDED_ROW_SELECTION_ELEMENTS.find(el => (event.target as Element).closest(el))) {
1150-
if (this.resizeStrategy === ResizeStrategy.ScrollableGrid) {
1151-
this.previewSelected$.next(row.id);
1152-
}
1153+
if (this.isScrollable) {
1154+
this.highlightedEntityId$.next(row.id);
1155+
}
11531156

1154-
if (this.shouldSelectOnRowClick) {
1155-
if (this.singleSelectable) {
1156-
this.rowSelected(row);
1157-
} else {
1158-
this.selectionManager.toggle(row);
1159-
}
1157+
if (this.shouldSelectOnRowClick) {
1158+
if (this.singleSelectable) {
1159+
this.rowSelected(row);
1160+
} else {
1161+
this.selectionManager.toggle(row);
11601162
}
1163+
}
11611164
}
11621165
this.rowClick.emit({
11631166
event,

‎projects/playground/src/app/pages/grid/component/grid.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
[expandedEntries]="editedEntity"
1717
[useCardView]="inputs.useCardView"
1818
[expandMode]="'preserve'"
19-
[resizeStrategy]="inputs.isScrollable ? scrollableGridStrategy : immediateNeighbourHalt"
19+
[resizeStrategy]="inputs.isScrollable ? scrollableGridStrategy : immediateNeighbourHaltStrategy"
2020
[customFilterValue]="inputs.customFilter ? [{property: 'parity', method: 'eq', value: 'odd'}] : []">
2121

2222
<ui-grid-header [search]="header.searchable">
@@ -53,7 +53,7 @@
5353

5454
<ui-grid-column [property]="'id'"
5555
[sortable]="true"
56-
[isFrozen]="inputs.isScrollable"
56+
[isSticky]="inputs.isScrollable"
5757
title="Id"
5858
width="33%">
5959
<ui-grid-dropdown-filter [visible]="header.showFilter"

‎projects/playground/src/app/pages/grid/component/grid.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
7373
editedIndex?: number;
7474

7575
scrollableGridStrategy = ResizeStrategy.ScrollableGrid;
76-
immediateNeighbourHalt = ResizeStrategy.ImmediateNeighbourHalt;
76+
immediateNeighbourHaltStrategy = ResizeStrategy.ImmediateNeighbourHalt;
7777

7878
@ViewChild(UiGridComponent)
7979
private _grid!: UiGridComponent<MockData>;

0 commit comments

Comments
 (0)