Skip to content

Commit c913789

Browse files
anbalaseanbalase
authored
Merge pull request #458 from UiPath/fix/grid_filter_translations
Fix: grid filter translations
2 parents 24c55d8 + bd52fd6 commit c913789

File tree

13 files changed

+156
-46
lines changed

13 files changed

+156
-46
lines changed

‎CHANGELOG.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
1+
# v15.2.2 (2024-02-16)
2+
* **grid** display margin shadow if scrollable
3+
* **suggest** change default forceDisplayDropdownOverInput
4+
* **grid** update filter options on lang change
5+
16
# v15.2.1 (2024-02-16)
27
* **tree-select** add accessible props
38

9+
# v15.2.0 (2024-07-02)
10+
* **grid** add tests for high density mode
11+
* **grid** add support for high density mode
12+
* **grid** add tests for high density mode
13+
* **grid** add support for high density mode
14+
15+
# v15.1.7 (2024-07-02)
16+
* **grid** add nullish for set items
17+
418
# v15.1.6 (2024-07-02)
519
* **grid** react on max filters count changes
620

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-components",
3-
"version": "15.2.1",
3+
"version": "15.2.2",
44
"author": {
55
"name": "UiPath Inc",
66
"url": "https://uipath.com"

‎projects/angular/components/ui-grid/src/_ui-grid-variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ $ui-grid-header-pressed-color: var(--color-data-grid-pressed, #EAECED);
66
$header-background-color: var(--color-background-secondary, #f4f5f7);
77
$grid-actions-box-shadow: var(--color-background, #ffffff);
88
$highlighted-entity-color: var(--color-primary, #0067df);
9+
$scroll-margin-shadow-color: var(--color-background-inverse, #182027);

‎projects/angular/components/ui-grid/src/_ui-grid.theme.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,18 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
215215
background-color: $ui-grid-row-hover-color;
216216
}
217217
}
218+
219+
.grid-margin-shadow {
220+
position: sticky;
221+
right: 0;
222+
height: 100%;
223+
224+
@if $is-dark {
225+
box-shadow: -7px 20px 20px 4px #000000;
226+
} @else {
227+
box-shadow: -3px 5px 20px 1.6px $scroll-margin-shadow-color;
228+
}
229+
}
218230
}
219231

220232
.ui-grid-sort-icon {

‎projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import {
2-
isArray, isEqual,
2+
isArray,
3+
isEqual,
34
} from 'lodash-es';
4-
import { BehaviorSubject } from 'rxjs';
5+
import {
6+
BehaviorSubject,
7+
Subject,
8+
takeUntil,
9+
} from 'rxjs';
510

611
import {
712
Directive,
13+
inject,
814
Input,
915
OnDestroy,
16+
OnInit,
1017
} from '@angular/core';
1118
import { ISuggestValueData } from '@uipath/angular/components/ui-suggest';
1219

20+
import { UiGridIntl } from '../ui-grid.intl';
1321
import { UiGridFilterDirective } from './ui-grid-filter';
1422

1523
/**
@@ -46,7 +54,7 @@ export type ISuggestDropdownValueData = ISuggestValueData<IDropdownOption['value
4654
@Directive({
4755
selector: '[uiGridDropdownFilter], ui-grid-dropdown-filter',
4856
})
49-
export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> implements OnDestroy {
57+
export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> implements OnDestroy, OnInit {
5058
/**
5159
* The dropdown items.
5260
*
@@ -56,9 +64,10 @@ export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> i
5664
this._items = value ?? [];
5765
this.suggestItems = this._items.map((item, idx) => ({
5866
id: idx + 1,
59-
text: item.label,
67+
text: this.intl.translateDropdownOption(item),
6068
data: item.value,
6169
}));
70+
this._addNoFilterOption();
6271
}
6372
get items() { return this._items!; }
6473

@@ -112,6 +121,7 @@ export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> i
112121
* @ignore
113122
*/
114123
visible$ = new BehaviorSubject(true);
124+
intl = inject(UiGridIntl, { optional: true }) ?? new UiGridIntl();
115125
suggestValue: ISuggestDropdownValueData[] = [];
116126

117127
/**
@@ -122,6 +132,21 @@ export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> i
122132
private _items: IDropdownOption[] = [];
123133
private _value: FilterDropdownPossibleOption;
124134
private _multi = false;
135+
private _destroy$ = new Subject<void>();
136+
137+
ngOnInit() {
138+
this._addNoFilterOption();
139+
140+
this.intl.changes.pipe(
141+
takeUntil(this._destroy$),
142+
).subscribe(() => {
143+
this.items = this._items;
144+
this.suggestValue = this.suggestValue.map(suggestValue => ({
145+
...suggestValue,
146+
text: this.intl.translateDropdownOption(this.findDropDownOptionBySuggestValue(suggestValue)!),
147+
}));
148+
});
149+
}
125150

126151
/**
127152
* Updates the dropdown value.
@@ -152,6 +177,8 @@ export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> i
152177
ngOnDestroy() {
153178
super.ngOnDestroy();
154179
this.filterChange.complete();
180+
this._destroy$.complete();
181+
this._destroy$.next();
155182
}
156183

157184
findDropDownOptionBySuggestValue(suggestValue: ISuggestDropdownValueData) {
@@ -162,4 +189,18 @@ export class UiGridDropdownFilterDirective<T> extends UiGridFilterDirective<T> i
162189
return this.value != null && ((!isArray(this.value) && this.value?.value !== undefined) ||
163190
(isArray(this.value) && this.value.length));
164191
}
192+
193+
private _addNoFilterOption() {
194+
const allOption = {
195+
id: -1,
196+
text: this.intl.noFilterPlaceholder,
197+
};
198+
if (!this.multi && this.showAllOption) {
199+
if (this.suggestItems[0]?.id !== allOption.id) {
200+
this.suggestItems = [allOption, ...this.suggestItems];
201+
}
202+
} else {
203+
this.suggestItems = this.suggestItems.filter(item => item.id !== allOption.id);
204+
}
205+
}
165206
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { TestBed } from '@angular/core/testing';
12
import * as faker from 'faker';
23
import { of } from 'rxjs';
34

@@ -20,7 +21,10 @@ export const generateColumn = () => {
2021
};
2122

2223
export const generateDropdownFilter = () => {
23-
const dropdown = new UiGridDropdownFilterDirective<ITestEntity>();
24+
let dropdown!: UiGridDropdownFilterDirective<ITestEntity>;
25+
TestBed.runInInjectionContext(() => {
26+
dropdown = new UiGridDropdownFilterDirective<ITestEntity>();
27+
});
2428

2529
const items = faker.random.words(15)
2630
.split(' ')

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@
283283
class="ui-grid-header-cell ui-grid-scroll-size-compensation-cell ui-grid-feature-cell">
284284
</div>
285285
<div *ngIf="refreshable"
286+
[class.refresh-shadow]="shouldDisplayContainerShadow$ | async"
286287
class="ui-grid-header-cell ui-grid-refresh-cell ui-grid-feature-cell"
287288
role="columnheader">
288289
<button [matTooltip]="intl.refreshTooltip"
@@ -565,9 +566,13 @@
565566
class="ui-grid-cell ui-grid-refresh-cell ui-grid-feature-cell">
566567
</div>
567568

569+
<div *ngIf="!actions && (shouldDisplayContainerShadow$ | async)"
570+
class="grid-margin-shadow ui-grid-feature-cell"></div>
571+
568572
<div *ngIf="!isProjected &&
569573
!!actions"
570574
[class.ui-grid-sticky-element]="isScrollable"
575+
[class.grid-margin-shadow]="shouldDisplayContainerShadow$ | async"
571576
role="gridcell"
572577
class="ui-grid-cell ui-grid-action-cell ui-grid-feature-cell">
573578
<div [class.sticky-grid-action-cell-container]="isScrollable"
@@ -749,7 +754,7 @@
749754
[searchable]="false"
750755
[value]="suggestValue"
751756
[placeholder]="column.title ?? ''"
752-
[items]="mapFilterOptions(column.dropdown!.suggestItems, column)"
757+
[items]="column.dropdown!.suggestItems"
753758
[compactSummaryTemplate]="displayedFilterName"
754759
[maxSelectionConfig]="{
755760
count: (disableFilterSelection$ | async) && (column.dropdown!.multi || selectedFilters === undefined) ? suggestValue.length : Infinity,
@@ -768,10 +773,9 @@
768773
<div class="flex">
769774
<span class="text-ellipsis">
770775
{{ (column.dropdown!.multi && selectedFilters?.length > 1)
771-
? intl.translateMultiDropdownOptions(value?.[0]?.text, selectedFilters.length)
772-
: value?.[0]
773-
? intl.translateDropdownOption(column.dropdown!.findDropDownOptionBySuggestValue(value[0])!)
774-
: intl.noFilterPlaceholder }}</span>
776+
? intl.translateMultiDropdownOptions(value[0].text!, selectedFilters.length)
777+
: value?.[0]?.text ?? intl.noFilterPlaceholder
778+
}}</span>
775779
</div>
776780
</ng-template>
777781
</ng-container>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -693,6 +693,10 @@ ui-grid {
693693
&.ui-grid-refresh-cell {
694694
position: sticky;
695695
right: 0;
696+
697+
&.refresh-shadow {
698+
box-shadow: -16px 0px 16px -4px $ui-grid-row-hover-color;
699+
}
696700
}
697701

698702
&.ui-grid-action-cell {

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

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1488,14 +1488,21 @@ describe('Component: UiGrid', () => {
14881488
let fixture: ComponentFixture<TestFixtureGridHeaderWithFilterComponent>;
14891489
let component: TestFixtureGridHeaderWithFilterComponent;
14901490
let grid: UiGridComponent<ITestEntity>;
1491-
1491+
let intl: UiGridIntl;
14921492
beforeEach(() => {
1493+
intl = new UiGridIntl();
14931494
TestBed.configureTestingModule({
14941495
imports: [
14951496
UiGridModule,
14961497
NoopAnimationsModule,
14971498
],
14981499
declarations: [TestFixtureGridHeaderWithFilterComponent],
1500+
providers: [
1501+
{
1502+
provide: UiGridIntl,
1503+
useValue: intl,
1504+
},
1505+
],
14991506
});
15001507

15011508
fixture = TestBed.createComponent(TestFixtureGridHeaderWithFilterComponent);
@@ -1521,6 +1528,28 @@ describe('Component: UiGrid', () => {
15211528
fixture.detectChanges();
15221529
});
15231530

1531+
it('should update translation for filter options when language changes', fakeAsync(() => {
1532+
intl.translateDropdownOption = () => 'voila la traduction';
1533+
intl.changes.next();
1534+
fixture.detectChanges();
1535+
1536+
const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container'));
1537+
const filterButton = filterContainer.query(By.css(selectors.filterDropdown));
1538+
filterButton.nativeElement.dispatchEvent(EventGenerator.click);
1539+
fixture.detectChanges();
1540+
tick(1000);
1541+
fixture.detectChanges();
1542+
1543+
const filterCheckboxes = fixture.debugElement.queryAll(By.css('mat-list-item mat-checkbox'));
1544+
filterCheckboxes[0].nativeElement.dispatchEvent(EventGenerator.click);
1545+
filterCheckboxes[1].nativeElement.dispatchEvent(EventGenerator.click);
1546+
fixture.detectChanges();
1547+
1548+
const filterSpan = fixture.debugElement.query(By.css('.ui-grid-filter-suggest span.text-ellipsis'));
1549+
expect(filterSpan.nativeElement.innerText).toEqual('voila la traduction (+1 other)');
1550+
flush();
1551+
}));
1552+
15241553
it('should emit all selected filter options', fakeAsync(() => {
15251554
const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container'));
15261555
const filterButton = filterContainer.query(By.css(selectors.filterDropdown));
@@ -4827,6 +4856,13 @@ describe('Component: UiGrid', () => {
48274856
expect(gridTable.nativeElement.style.minWidth).toBe(columnWidthSum + 'px');
48284857
}));
48294858

4859+
it('should display margin shadow when the grid has horizontal scroll', fakeAsync(() => {
4860+
const widths = [250, 1000, 330, 400, 100, 100]; // large enough too cause overflow
4861+
beforeConfig({ widths });
4862+
const tableMarginShadowDivs = fixture.debugElement.queryAll(By.css('.grid-margin-shadow'));
4863+
expect(tableMarginShadowDivs.length).toBe(widths.length);
4864+
}));
4865+
48304866
it('should increase the width of last column if default column width sum does not fill the table', fakeAsync(() => {
48314867
const widths = [50, 50, 0, 50, 50, 50];
48324868
const lastColumnIdx = 4; // refresh btn & 1 missing column
@@ -4999,13 +5035,13 @@ describe('Component: UiGrid', () => {
49995035
expect(+newMinWidth.replace('px', '')).toBeLessThan(+startingMinWidth.replace('px', ''));
50005036
}));
50015037

5002-
it(`should set overflow to visible if total width of columns does not exceed container width`, fakeAsync(() => {
5038+
it(`should set overflow to visible and hide margin shadow if total width of columns does not exceed container width`, fakeAsync(() => {
50035039
const gridTable = fixture.debugElement.query(By.css('.ui-grid-table'));
50045040
const options = fixture.debugElement
50055041
.queryAll(By.css('.ui-grid-toggle-panel .mat-mdc-option:not(.mdc-list-item--disabled)'));
50065042

50075043
expect(gridTable.styles.overflow).toEqual('visible');
5008-
5044+
expect(fixture.debugElement.queryAll(By.css('.grid-margin-shadow')).length).toBe(6);
50095045
options.forEach(o => {
50105046
const checkbox = o.query(By.css('.mat-pseudo-checkbox'));
50115047
checkbox.nativeElement.dispatchEvent(EventGenerator.click);
@@ -5015,6 +5051,7 @@ describe('Component: UiGrid', () => {
50155051
fixture.detectChanges();
50165052

50175053
expect(gridTable.styles.overflow).toEqual('hidden');
5054+
expect(fixture.debugElement.queryAll(By.css('.grid-margin-shadow')).length).toBe(0);
50185055
}));
50195056
});
50205057

0 commit comments

Comments
 (0)