-
Notifications
You must be signed in to change notification settings - Fork 133
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(platform): vhd custom filter controls and column renderer
- Loading branch information
Showing
19 changed files
with
436 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
...platform/vhd/examples/column-template/platform-vhd-column-template-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <button | ||
| fd-button | ||
| aria-label="Open value help dialog" | ||
| title="Open value help dialog" | ||
| glyph="value-help" | ||
| (click)="vhd.open()" | ||
| label="Open value help dialog" | ||
| ></button> | ||
| <br /> | ||
| <div *ngIf="actualItems.length"> | ||
| <fd-tokenizer fdCompact> | ||
| <fd-token *ngFor="let token of actualItems" [readOnly]="true">{{ token }}</fd-token> | ||
| </fd-tokenizer> | ||
| </div> | ||
| <fdp-value-help-dialog | ||
| #vhd | ||
| fdCompact | ||
| dialogTitle="Simple value help dialog" | ||
| uniqueKey="id" | ||
| tokenViewField="name" | ||
| [formatToken]="formatTokenFn" | ||
| [dataSource]="dataSource" | ||
| (valueChange)="valueChange($event)" | ||
| headerId="fdp-vhd-header-1" | ||
| > | ||
| <ng-container *fdpValueHelpColumnDef="let row; column: 'verified'; let colName = key; let value = value"> | ||
| {{ value ? 'Yes' : 'No' }} | ||
| </ng-container> | ||
| <ng-container *ngFor="let filter of filters; let i = index"> | ||
| <fdp-value-help-dialog-filter | ||
| *ngIf="filter.key === 'verified'" | ||
| [main]="true" | ||
| [key]="filter.key" | ||
| [label]="filter.label" | ||
| [advanced]="true" | ||
| > | ||
| <fd-select | ||
| *fdpValueHelpFilterDef="let filterModel" | ||
| [(ngModel)]="filterModel.value" | ||
| fd-form-control | ||
| class="vhd-custom-select" | ||
| > | ||
| <li *ngFor="let option of booleanDropdownValues" fd-option [value]="option.value"> | ||
| <span fd-list-title>{{ option.displayValue }}</span> | ||
| </li> | ||
| </fd-select> | ||
| </fdp-value-help-dialog-filter> | ||
| <fdp-value-help-dialog-filter | ||
| *ngIf="filter.key !== 'verified'" | ||
| [main]="i < 2" | ||
| [key]="filter.key" | ||
| [label]="filter.label" | ||
| [advanced]="i !== 0" | ||
| ></fdp-value-help-dialog-filter> | ||
| </ng-container> | ||
| </fdp-value-help-dialog> |
160 changes: 160 additions & 0 deletions
160
...s/platform/vhd/examples/column-template/platform-vhd-column-template-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| import { Component, ViewEncapsulation } from '@angular/core'; | ||
| import { | ||
| ValueHelpDialogDataSource, | ||
| VhdDataProvider, | ||
| VhdDefineExcludeStrategy, | ||
| VhdDefineIncludeStrategy, | ||
| VhdExcludedEntity, | ||
| VhdIncludedEntity, | ||
| VhdValue, | ||
| VhdValueChangeEvent | ||
| } from '@fundamental-ngx/platform/value-help-dialog'; | ||
| import { Observable, of } from 'rxjs'; | ||
| import { delay } from 'rxjs/operators'; | ||
|
|
||
| interface ExampleTestModel { | ||
| id: number; | ||
| name: string; | ||
| code: string; | ||
| city: string; | ||
| zipcode: string; | ||
| address: string; | ||
| nickname: string; | ||
| verified: boolean; | ||
| } | ||
|
|
||
| interface FilterData { | ||
| key: string; | ||
| name: string; | ||
| label: string; | ||
| advanced: boolean; | ||
| } | ||
|
|
||
| const exampleDataSource = (): { dataSource: ExampleTestModel[]; filters: FilterData[] } => { | ||
| const dataSource = Array(137) | ||
| .fill(null) | ||
| .map((_value, index) => ({ | ||
| id: index + 1, | ||
| name: `Name ${index + 1}`, | ||
| code: `${Math.floor(Math.random() * 99999)}`, | ||
| city: `City ${Math.floor(Math.random() * index)}`, | ||
| zipcode: `zipcode ${Math.floor(Math.random() * index)}`, | ||
| address: `Address ${Math.floor(Math.random() * index)}`, | ||
| nickname: `Nickname ${Math.floor(Math.random() * index)}`, | ||
| verified: Math.random() < 0.5 | ||
| })); | ||
| return { | ||
| dataSource, | ||
| filters: Object.keys(dataSource[0]).map((value, index) => ({ | ||
| key: value, | ||
| name: `${value}`, | ||
| label: `Product ${value}`, | ||
| advanced: index > 0 | ||
| })) | ||
| }; | ||
| }; | ||
|
|
||
| const data = exampleDataSource(); | ||
|
|
||
| @Component({ | ||
| selector: 'fdp-vhd-column-template-example', | ||
| styles: [ | ||
| ` | ||
| .vhd-custom-select { | ||
| display: block !important; | ||
| } | ||
| ` | ||
| ], | ||
| templateUrl: './platform-vhd-column-template-example.component.html', | ||
| encapsulation: ViewEncapsulation.None | ||
| }) | ||
| export class PlatformVhdColumnTemplateExampleComponent { | ||
| filters = data.filters; | ||
| dataSource = new ValueHelpDialogDataSource(new DelayedVhdDataProvider(data.dataSource)); | ||
|
|
||
| actualValue: Partial<VhdValue<ExampleTestModel>> = {}; | ||
|
|
||
| booleanDropdownValues = [ | ||
| { value: true, displayValue: 'Yes' }, | ||
| { value: false, displayValue: 'No' } | ||
| ]; | ||
|
|
||
| actualItems: string[] = []; | ||
| formatTokenFn = (value: VhdValueChangeEvent<ExampleTestModel>): void => { | ||
| this.actualItems = [ | ||
| ...(value.selected || []).map((item) => item.name), | ||
| ...(value.conditions || []).map((item) => this.conditionDisplayFn(item)) | ||
| ].filter((v): v is string => !!v); | ||
| }; | ||
| conditionDisplayFn = (item: VhdIncludedEntity | VhdExcludedEntity): string | null => { | ||
| let value = (() => { | ||
| switch (item.strategy) { | ||
| case VhdDefineIncludeStrategy.empty: | ||
| case VhdDefineExcludeStrategy.not_empty: | ||
| return null; | ||
| case VhdDefineIncludeStrategy.between: | ||
| return `${item.value}...${item.valueTo}`; | ||
| case VhdDefineIncludeStrategy.contains: | ||
| return `*${item.value}*`; | ||
| case VhdDefineIncludeStrategy.equalTo: | ||
| return `=${item.value}`; | ||
| case VhdDefineIncludeStrategy.startsWith: | ||
| return `${item.value}*`; | ||
| case VhdDefineIncludeStrategy.endsWith: | ||
| return `*${item.value}`; | ||
| case VhdDefineIncludeStrategy.greaterThan: | ||
| return `>${item.value}`; | ||
| case VhdDefineIncludeStrategy.greaterThanEqual: | ||
| return `>=${item.value}`; | ||
| case VhdDefineIncludeStrategy.lessThan: | ||
| return `<${item.value}`; | ||
| case VhdDefineIncludeStrategy.lessThanEqual: | ||
| return `<=${item.value}`; | ||
| case VhdDefineExcludeStrategy.not_equalTo: | ||
| return `!(=${item.value})`; | ||
| } | ||
| })(); | ||
| if (value && item.type === 'exclude') { | ||
| value = `!(${value})`; | ||
| } | ||
|
|
||
| return value; | ||
| }; | ||
|
|
||
| valueChange($event: VhdValueChangeEvent<ExampleTestModel>): void { | ||
| this.actualValue = { ...$event }; | ||
| } | ||
| } | ||
|
|
||
| // Simulating real http request by adding 300ms delay to the DataProvider's "fetch" method | ||
| class DelayedVhdDataProvider<R extends object> extends VhdDataProvider<R> { | ||
| // Override default fetch method to be able to deal with booleans. | ||
| // Developers should implement own logic of filtering the data. E.g. sending http request to the backend. | ||
| fetch(params: Map<string, string>): Observable<R[]> { | ||
| let data = this.values; | ||
| const arrayParams = Array.from(params); | ||
| const filterFn = (row: R): boolean => { | ||
| const rowEntries = Object.entries(row) as string[][]; | ||
| return arrayParams.every(([key, value]) => { | ||
| if (key === '*') { | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| return rowEntries.some(([_rowEntryKey, rowEntryValue]) => this._search(rowEntryValue, value)); | ||
| } else { | ||
| return this._search(row[key], value); | ||
| } | ||
| }); | ||
| }; | ||
| if (params.size) { | ||
| data = this.values.filter(filterFn); | ||
| } | ||
| return of(data).pipe(delay(300)); | ||
| } | ||
|
|
||
| private _search(rowEntryValue: any, value: any): boolean { | ||
| if (typeof value === 'boolean') { | ||
| return rowEntryValue === value; | ||
| } else { | ||
| return String(rowEntryValue).toLowerCase().includes(value.toLowerCase()); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.