From c03e6422dd42c22955c28f3ad777c6cdc95f7032 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Sat, 30 Jun 2018 16:06:35 -0400 Subject: [PATCH] fix(filter): ensure examples follow PatternFly guidelines (#413) This also simplifies filters in table and toolbar by removing type ahead features where it is not necessary. Fixes https://github.com/patternfly/patternfly-ng/issues/329 --- .../example/filter-basic-example.component.ts | 41 +++-- .../example/filter-example.component.html | 3 + .../filter/example/filter-example.module.ts | 2 + .../filter-icon-example.component.html | 87 +++++++++ .../example/filter-icon-example.component.ts | 141 +++++++++++++++ .../filter-lazy-example.component.html | 1 + .../example/filter-lazy-example.component.ts | 105 +++++------ .../example/filter-save-example.component.ts | 168 +++--------------- .../filter-type-ahead-example.component.ts | 3 +- src/app/filter/filter.component.ts | 2 +- .../table-embedded-example.component.html | 2 - .../table-embedded-example.component.ts | 86 +++------ .../table-empty-example.component.html | 2 - .../example/table-empty-example.component.ts | 86 +++------ .../example/table-full-example.component.html | 2 - .../example/table-full-example.component.ts | 86 +++------ .../example/table-view-example.component.html | 2 - .../example/table-view-example.component.ts | 86 +++------ .../example/toolbar-example.component.ts | 86 +++------ 19 files changed, 462 insertions(+), 529 deletions(-) create mode 100644 src/app/filter/example/filter-icon-example.component.html create mode 100644 src/app/filter/example/filter-icon-example.component.ts diff --git a/src/app/filter/example/filter-basic-example.component.ts b/src/app/filter/example/filter-basic-example.component.ts index e9f013b50..285b04390 100644 --- a/src/app/filter/example/filter-basic-example.component.ts +++ b/src/app/filter/example/filter-basic-example.component.ts @@ -32,7 +32,8 @@ export class FilterBasicExampleComponent implements OnInit { weekDay: 'Sunday', weekdayId: 'day1' }, { - name: 'John Smith', address: '415 East Main Street, Norfolk, Virginia', + name: 'John Smith', + address: '415 East Main Street, Norfolk, Virginia', birthMonth: 'October', birthMonthId: '10', weekDay: 'Monday', @@ -115,22 +116,31 @@ export class FilterBasicExampleComponent implements OnInit { value: 'December' }] }, { - id: 'byIcon', - title: 'By Icon', - placeholder: 'Filter by Icon...', + id: 'weekDay', + title: 'Week Day', + placeholder: 'Filter by Week Day...', type: FilterType.SELECT, queries: [{ - id: 'bookmark', - value: 'Bookmark', - iconStyleClass: 'fa fa-bookmark' + id: 'day1', + value: 'Sunday' }, { - id: 'map', - value: 'Map', - iconStyleClass: 'fa fa-map-marker' + id: 'day2', + value: 'Monday' }, { - id: 'gift', - value: 'Gift', - iconStyleClass: 'fa fa-gift' + id: 'day3', + value: 'Tuesday' + }, { + id: 'day4', + value: 'Wednesday' + }, { + id: 'day5', + value: 'Thursday' + }, { + id: 'day6', + value: 'Friday' + }, { + id: 'day7', + value: 'Saturday' }] }] as FilterField[], resultsCount: this.items.length, @@ -164,10 +174,11 @@ export class FilterBasicExampleComponent implements OnInit { matchesFilter(item: any, filter: Filter): boolean { let match = true; + let re = new RegExp(filter.value, 'i'); if (filter.field.id === 'name') { - match = item.name.match(filter.value) !== null; + match = item.name.match(re) !== null; } else if (filter.field.id === 'address') { - match = item.address.match(filter.value) !== null; + match = item.address.match(re) !== null; } else if (filter.field.id === 'birthMonth') { match = item.birthMonth === filter.value; } else if (filter.field.id === 'weekDay') { diff --git a/src/app/filter/example/filter-example.component.html b/src/app/filter/example/filter-example.component.html index dd725d95a..b67d8093f 100644 --- a/src/app/filter/example/filter-example.component.html +++ b/src/app/filter/example/filter-example.component.html @@ -18,5 +18,8 @@

Filter Component Example

+ + + diff --git a/src/app/filter/example/filter-example.module.ts b/src/app/filter/example/filter-example.module.ts index 44e24e07a..d7466b7c8 100644 --- a/src/app/filter/example/filter-example.module.ts +++ b/src/app/filter/example/filter-example.module.ts @@ -7,6 +7,7 @@ import { TabsetConfig, TabsModule } from 'ngx-bootstrap/tabs'; import { DemoComponentsModule } from '../../../demo/components/demo-components.module'; import { FilterBasicExampleComponent } from './filter-basic-example.component'; import { FilterExampleComponent } from './filter-example.component'; +import { FilterIconExampleComponent } from './filter-icon-example.component'; import { FilterLazyExampleComponent } from './filter-lazy-example.component'; import { FilterModule } from '../filter.module'; import { FilterSaveExampleComponent } from './filter-save-example.component'; @@ -23,6 +24,7 @@ import { FilterTypeAheadExampleComponent } from './filter-type-ahead-example.com declarations: [ FilterBasicExampleComponent, FilterExampleComponent, + FilterIconExampleComponent, FilterLazyExampleComponent, FilterSaveExampleComponent, FilterTypeAheadExampleComponent diff --git a/src/app/filter/example/filter-icon-example.component.html b/src/app/filter/example/filter-icon-example.component.html new file mode 100644 index 000000000..c40bf57ec --- /dev/null +++ b/src/app/filter/example/filter-icon-example.component.html @@ -0,0 +1,87 @@ +
+
+
+
+

Warning: This example is for development testing purposes. It is not an official pattern and subject to change

+

This ensures the filter field can display icons

+ +
+
+
+
+
+

Items

+
+
+
+
+
+
+
+
+ + {{item.name}} +
+
+ {{item.address}} +
+
+ {{item.birthMonth}} +
+
+ {{item.weekDay}} +
+
+
+
+
+
+
+

Settings

+
+
+
+
+
+
+
+ +
+
+
+
+
+
+

Filters

+
+
+
+
+
+ +
+
+
+
+

Code

+
+
+
+
+ + + + + + + + + + + +
+
diff --git a/src/app/filter/example/filter-icon-example.component.ts b/src/app/filter/example/filter-icon-example.component.ts new file mode 100644 index 000000000..c2fff99af --- /dev/null +++ b/src/app/filter/example/filter-icon-example.component.ts @@ -0,0 +1,141 @@ +import { + Component, + OnInit, +} from '@angular/core'; + +import { Filter } from '../filter'; +import { FilterConfig } from '../filter-config'; +import { FilterField } from '../filter-field'; +import { FilterEvent } from '../filter-event'; +import { FilterType } from '../filter-type'; + +@Component({ + selector: 'filter-icon-example', + templateUrl: './filter-icon-example.component.html' +}) +export class FilterIconExampleComponent implements OnInit { + allItems: any[]; + items: any[]; + filterConfig: FilterConfig; + filtersText: string = ''; + separator: Object; + + constructor() { + } + + ngOnInit(): void { + this.allItems = [{ + name: 'Fred Flintstone', + address: '20 Dinosaur Way, Bedrock, Washingstone', + birthMonth: 'February', + birthMonthId: 'month2', + icon: 'bookmark', + iconStyleClass: 'fa fa-bookmark', + weekDay: 'Sunday', + weekdayId: 'day1' + }, { + name: 'John Smith', address: '415 East Main Street, Norfolk, Virginia', + birthMonth: 'October', + birthMonthId: '10', + icon: 'map', + iconStyleClass: 'fa fa-map-marker', + weekDay: 'Monday', + weekdayId: 'day2' + }, { + name: 'Frank Livingston', + address: '234 Elm Street, Pittsburgh, Pennsylvania', + birthMonth: 'March', + birthMonthId: 'month3', + icon: 'gift', + iconStyleClass: 'fa fa-gift', + weekDay: 'Tuesday', + weekdayId: 'day3' + }, { + name: 'Judy Green', + address: '2 Apple Boulevard, Cincinatti, Ohio', + birthMonth: 'December', + birthMonthId: 'month12', + icon: 'map', + iconStyleClass: 'fa fa-map-marker', + weekDay: 'Wednesday', + weekdayId: 'day4' + }, { + name: 'Pat Thomas', + address: '50 Second Street, New York, New York', + birthMonth: 'February', + birthMonthId: 'month2', + icon: 'bookmark', + iconStyleClass: 'fa fa-bookmark', + weekDay: 'Thursday', + weekdayId: 'day5' + }]; + this.items = this.allItems; + + this.filterConfig = { + fields: [{ + id: 'icon', + title: 'By Icon', + placeholder: 'Filter by Icon...', + type: FilterType.SELECT, + queries: [{ + id: 'bookmark', + value: 'bookmark', + iconStyleClass: 'fa fa-bookmark' + }, { + id: 'map', + value: 'map', + iconStyleClass: 'fa fa-map-marker' + }, { + id: 'gift', + value: 'gift', + iconStyleClass: 'fa fa-gift' + }] + }] as FilterField[], + resultsCount: this.items.length, + appliedFilters: [] + } as FilterConfig; + } + + // Filter functions + + applyFilters(filters: Filter[]): void { + this.items = []; + if (filters && filters.length > 0) { + this.allItems.forEach((item) => { + if (this.matchesFilters(item, filters)) { + this.items.push(item); + } + }); + } else { + this.items = this.allItems; + } + this.filterConfig.resultsCount = this.items.length; + } + + filterChanged($event: FilterEvent): void { + this.filtersText = ''; + $event.appliedFilters.forEach((filter) => { + this.filtersText += filter.field.title + ' : ' + filter.value + '\n'; + }); + this.applyFilters($event.appliedFilters); + } + + matchesFilter(item: any, filter: Filter): boolean { + let match = true; + if (filter.field.id === 'icon') { + match = item.icon === filter.value; + } + return match; + } + + matchesFilters(item: any, filters: Filter[]): boolean { + let matches = true; + filters.forEach((filter) => { + if (!this.matchesFilter(item, filter)) { + matches = false; + return matches; + } + }); + return matches; + } +} diff --git a/src/app/filter/example/filter-lazy-example.component.html b/src/app/filter/example/filter-lazy-example.component.html index 8b63f2082..24accb852 100644 --- a/src/app/filter/example/filter-lazy-example.component.html +++ b/src/app/filter/example/filter-lazy-example.component.html @@ -4,6 +4,7 @@

Warning: This example is for development testing purposes. It is not an official pattern and subject to change

This ensures filters can be added lazily. Click the "Load Filters" button to add more filter options

+

The 'Week Day' filter field is shown as a type ahead for testing

{ - if (field.id === 'birthMonth') { - field.queries = [ - ...this.monthQueriesFixed, - this.separator, - ...this.monthQueries - ]; - } else if (field.id === 'weekDay') { - field.queries = [ - ...this.weekDayQueries - ]; - } else if (field.id === 'saved') { + if (field.id === 'saved') { field.queries = []; for (const key of Object.keys(this.savedFilters)) { field.queries.push({ @@ -266,10 +170,11 @@ export class FilterSaveExampleComponent implements OnInit { matchesFilter(item: any, filter: Filter): boolean { let match = true; - if (filter.field.id === 'birthMonth') { - match = item.birthMonth === filter.value; - } else if (filter.field.id === 'weekDay') { - match = item.weekDay === filter.value; + let re = new RegExp(filter.value, 'i'); + if (filter.field.id === 'name') { + match = item.name.match(re) !== null; + } else if (filter.field.id === 'address') { + match = item.address.match(re) !== null; } return match; } @@ -290,29 +195,7 @@ export class FilterSaveExampleComponent implements OnInit { const index = (this.filterConfig.fields as any).findIndex((i: any) => i.id === $event.field.id); let val = $event.value.trim(); - if (this.filterConfig.fields[index].id === 'birthMonth') { - this.filterConfig.fields[index].queries = [ - ...this.monthQueriesFixed, - this.separator, - ...this.monthQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } else if (this.filterConfig.fields[index].id === 'weekDay') { - this.filterConfig.fields[index].queries = [ - ...this.weekDayQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } else if (this.filterConfig.fields[index].id === 'saved') { + if (this.filterConfig.fields[index].id === 'saved') { let queries: FilterQuery[] = []; for (const key of Object.keys(this.savedFilters)) { queries.push({ @@ -355,19 +238,20 @@ export class FilterSaveExampleComponent implements OnInit { // Load saved filters loadSavedFilters() { let filter1 = { - field: this.filterConfig.fields[0], // Birth Month - query: this.monthQueriesFixed[1], // February - value: this.monthQueriesFixed[1].value + field: this.filterConfig.fields[0], // Name + query: this.allItems[0], + value: 'Fred' } as Filter; let filter2 = { - field: this.filterConfig.fields[1], // Week Day - query: this.weekDayQueries[0], // Sunday - value: this.weekDayQueries[0].value + field: this.filterConfig.fields[1], // Address + query: this.allItems[1], + value: '2' } as Filter; // Load filters - this.savedFilters['Test1'] = [filter1]; // Filter values matching February - this.savedFilters['Test2'] = [filter1, filter2]; // Filter values matching February and Sunday + this.savedFilters['MySave1'] = [filter1]; // Filter values matching 'Fred' + this.savedFilters['MySave2'] = [filter2]; // Filter values matching address '2' + this.savedFilters['MySave3'] = [filter1, filter2]; // Filter values matching 'Fred' and address '2' this.filterFieldSelected(null); // Refresh queries } diff --git a/src/app/filter/example/filter-type-ahead-example.component.ts b/src/app/filter/example/filter-type-ahead-example.component.ts index c00944209..cf799a039 100644 --- a/src/app/filter/example/filter-type-ahead-example.component.ts +++ b/src/app/filter/example/filter-type-ahead-example.component.ts @@ -35,7 +35,8 @@ export class FilterTypeAheadExampleComponent implements OnInit { weekDay: 'Sunday', weekdayId: 'day1' }, { - name: 'John Smith', address: '415 East Main Street, Norfolk, Virginia', + name: 'John Smith', + address: '415 East Main Street, Norfolk, Virginia', birthMonth: 'October', birthMonthId: '10', weekDay: 'Monday', diff --git a/src/app/filter/filter.component.ts b/src/app/filter/filter.component.ts index 5c60a8a12..6903baf6f 100644 --- a/src/app/filter/filter.component.ts +++ b/src/app/filter/filter.component.ts @@ -146,7 +146,7 @@ export class FilterComponent implements DoCheck, OnInit { } as Filter; if (!this.filterExists(newFilter)) { - if (newFilter.field.type === FilterType.SELECT) { + if (newFilter.field.type === FilterType.SELECT || newFilter.field.type === FilterType.TYPEAHEAD) { this.enforceSingleSelect(newFilter); } this.config.appliedFilters.push(newFilter); diff --git a/src/app/table/basic-table/example/table-embedded-example.component.html b/src/app/table/basic-table/example/table-embedded-example.component.html index 559480eca..58e6e23a0 100644 --- a/src/app/table/basic-table/example/table-embedded-example.component.html +++ b/src/app/table/basic-table/example/table-embedded-example.component.html @@ -11,8 +11,6 @@ (onActivate)="handleOnActivate($event)" (onActionSelect)="handleAction($event)" (onFilterChange)="filterChanged($event)" - (onFilterFieldSelect)="filterFieldSelected($event)" - (onFilterTypeAhead)="filterQueries($event)" (onPageNumberChange)="handlePageNumber($event)" (onPageSizeChange)="handlePageSize($event)" (onReorder)="handleOnReorder($event)" diff --git a/src/app/table/basic-table/example/table-embedded-example.component.ts b/src/app/table/basic-table/example/table-embedded-example.component.ts index 7f603665a..6e92a5637 100644 --- a/src/app/table/basic-table/example/table-embedded-example.component.ts +++ b/src/app/table/basic-table/example/table-embedded-example.component.ts @@ -54,7 +54,6 @@ export class TableEmbeddedExampleComponent implements AfterViewInit, OnInit { separator: Object; sortConfig: SortConfig; toolbarConfig: ToolbarConfig; - weekDayQueries: any[]; monthVals: any = { 'January': 1, @@ -168,29 +167,6 @@ export class TableEmbeddedExampleComponent implements AfterViewInit, OnInit { // Need to initialize for results/total counts this.updateRows(false); - this.weekDayQueries = [{ - id: 'day1', - value: 'Sunday' - }, { - id: 'day2', - value: 'Monday' - }, { - id: 'day3', - value: 'Tuesday' - }, { - id: 'day4', - value: 'Wednesday' - }, { - id: 'day5', - value: 'Thursday' - }, { - id: 'day6', - value: 'Friday' - }, { - id: 'day7', - value: 'Saturday' - }]; - this.filterConfig = { fields: [{ id: 'name', @@ -248,10 +224,29 @@ export class TableEmbeddedExampleComponent implements AfterViewInit, OnInit { id: 'weekDay', title: 'Week Day', placeholder: 'Filter by Week Day...', - type: FilterType.TYPEAHEAD, - queries: [ - ...this.weekDayQueries - ] + type: FilterType.SELECT, + queries: [{ + id: 'day1', + value: 'Sunday' + }, { + id: 'day2', + value: 'Monday' + }, { + id: 'day3', + value: 'Tuesday' + }, { + id: 'day4', + value: 'Wednesday' + }, { + id: 'day5', + value: 'Thursday' + }, { + id: 'day6', + value: 'Friday' + }, { + id: 'day7', + value: 'Saturday' + }] }] as FilterField[], appliedFilters: [], resultsCount: this.rows.length, @@ -406,26 +401,15 @@ export class TableEmbeddedExampleComponent implements AfterViewInit, OnInit { this.filtersText += filter.field.title + ' : ' + filter.value + '\n'; }); this.applyFilters($event.appliedFilters); - this.filterFieldSelected($event); - } - - // Reset filtered queries - filterFieldSelected($event: FilterEvent): void { - this.filterConfig.fields.forEach((field) => { - if (field.id === 'weekDay') { - field.queries = [ - ...this.weekDayQueries - ]; - } - }); } matchesFilter(item: any, filter: Filter): boolean { let match = true; + let re = new RegExp(filter.value, 'i'); if (filter.field.id === 'name') { - match = item.name.match(filter.value) !== null; + match = item.name.match(re) !== null; } else if (filter.field.id === 'address') { - match = item.address.match(filter.value) !== null; + match = item.address.match(re) !== null; } else if (filter.field.id === 'birthMonth') { match = item.birthMonth === filter.value; } else if (filter.field.id === 'weekDay') { @@ -445,24 +429,6 @@ export class TableEmbeddedExampleComponent implements AfterViewInit, OnInit { return matches; } - // Filter queries for type ahead - filterQueries($event: FilterEvent) { - const index = (this.filterConfig.fields as any).findIndex((i: any) => i.id === $event.field.id); - let val = $event.value.trim(); - - if (this.filterConfig.fields[index].id === 'weekDay') { - this.filterConfig.fields[index].queries = [ - ...this.weekDayQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } - } - // Drag and drop handleDrop($event: any[]): void { diff --git a/src/app/table/basic-table/example/table-empty-example.component.html b/src/app/table/basic-table/example/table-empty-example.component.html index 1aba6360b..5399538a9 100644 --- a/src/app/table/basic-table/example/table-empty-example.component.html +++ b/src/app/table/basic-table/example/table-empty-example.component.html @@ -12,8 +12,6 @@ (onActivate)="handleOnActivate($event)" (onActionSelect)="handleAction($event)" (onFilterChange)="filterChanged($event)" - (onFilterFieldSelect)="filterFieldSelected($event)" - (onFilterTypeAhead)="filterQueries($event)" (onPageNumberChange)="handlePageNumber($event)" (onPageSizeChange)="handlePageSize($event)" (onReorder)="handleOnReorder($event)" diff --git a/src/app/table/basic-table/example/table-empty-example.component.ts b/src/app/table/basic-table/example/table-empty-example.component.ts index d6c25df24..e3b26fd58 100644 --- a/src/app/table/basic-table/example/table-empty-example.component.ts +++ b/src/app/table/basic-table/example/table-empty-example.component.ts @@ -54,7 +54,6 @@ export class TableEmptyExampleComponent implements AfterViewInit, OnInit { separator: Object; sortConfig: SortConfig; toolbarConfig: ToolbarConfig; - weekDayQueries: any[]; monthVals: any = { 'January': 1, @@ -168,29 +167,6 @@ export class TableEmptyExampleComponent implements AfterViewInit, OnInit { // Need to initialize for results/total counts // this.updateRows(false); - this.weekDayQueries = [{ - id: 'day1', - value: 'Sunday' - }, { - id: 'day2', - value: 'Monday' - }, { - id: 'day3', - value: 'Tuesday' - }, { - id: 'day4', - value: 'Wednesday' - }, { - id: 'day5', - value: 'Thursday' - }, { - id: 'day6', - value: 'Friday' - }, { - id: 'day7', - value: 'Saturday' - }]; - this.filterConfig = { fields: [{ id: 'name', @@ -248,10 +224,29 @@ export class TableEmptyExampleComponent implements AfterViewInit, OnInit { id: 'weekDay', title: 'Week Day', placeholder: 'Filter by Week Day...', - type: FilterType.TYPEAHEAD, - queries: [ - ...this.weekDayQueries - ] + type: FilterType.SELECT, + queries: [{ + id: 'day1', + value: 'Sunday' + }, { + id: 'day2', + value: 'Monday' + }, { + id: 'day3', + value: 'Tuesday' + }, { + id: 'day4', + value: 'Wednesday' + }, { + id: 'day5', + value: 'Thursday' + }, { + id: 'day6', + value: 'Friday' + }, { + id: 'day7', + value: 'Saturday' + }] }] as FilterField[], appliedFilters: [], resultsCount: 0, // this.rows.length, @@ -407,26 +402,15 @@ export class TableEmptyExampleComponent implements AfterViewInit, OnInit { this.filtersText += filter.field.title + ' : ' + filter.value + '\n'; }); this.applyFilters($event.appliedFilters); - this.filterFieldSelected($event); - } - - // Reset filtered queries - filterFieldSelected($event: FilterEvent): void { - this.filterConfig.fields.forEach((field) => { - if (field.id === 'weekDay') { - field.queries = [ - ...this.weekDayQueries - ]; - } - }); } matchesFilter(item: any, filter: Filter): boolean { let match = true; + let re = new RegExp(filter.value, 'i'); if (filter.field.id === 'name') { - match = item.name.match(filter.value) !== null; + match = item.name.match(re) !== null; } else if (filter.field.id === 'address') { - match = item.address.match(filter.value) !== null; + match = item.address.match(re) !== null; } else if (filter.field.id === 'birthMonth') { match = item.birthMonth === filter.value; } else if (filter.field.id === 'weekDay') { @@ -446,24 +430,6 @@ export class TableEmptyExampleComponent implements AfterViewInit, OnInit { return matches; } - // Filter queries for type ahead - filterQueries($event: FilterEvent) { - const index = (this.filterConfig.fields as any).findIndex((i: any) => i.id === $event.field.id); - let val = $event.value.trim(); - - if (this.filterConfig.fields[index].id === 'weekDay') { - this.filterConfig.fields[index].queries = [ - ...this.weekDayQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } - } - // Drag and drop handleDrop($event: any[]): void { diff --git a/src/app/table/basic-table/example/table-full-example.component.html b/src/app/table/basic-table/example/table-full-example.component.html index e118563d1..eb3ba3b52 100644 --- a/src/app/table/basic-table/example/table-full-example.component.html +++ b/src/app/table/basic-table/example/table-full-example.component.html @@ -15,8 +15,6 @@ (onActionSelect)="handleAction($event)" (onDrop)="handleDrop($event)" (onFilterChange)="filterChanged($event)" - (onFilterFieldSelect)="filterFieldSelected($event)" - (onFilterTypeAhead)="filterQueries($event)" (onPageNumberChange)="handlePageNumber($event)" (onPageSizeChange)="handlePageSize($event)" (onReorder)="handleOnReorder($event)" diff --git a/src/app/table/basic-table/example/table-full-example.component.ts b/src/app/table/basic-table/example/table-full-example.component.ts index bdf08253f..a1e528c10 100644 --- a/src/app/table/basic-table/example/table-full-example.component.ts +++ b/src/app/table/basic-table/example/table-full-example.component.ts @@ -57,7 +57,6 @@ export class TableFullExampleComponent implements AfterViewInit, OnInit { sortConfig: SortConfig; tableConfig: TableConfig; toolbarConfig: ToolbarConfig; - weekDayQueries: any[]; monthVals: any = { 'January': 1, @@ -167,29 +166,6 @@ export class TableFullExampleComponent implements AfterViewInit, OnInit { // Need to initialize for results/total counts this.updateRows(false); - this.weekDayQueries = [{ - id: 'day1', - value: 'Sunday' - }, { - id: 'day2', - value: 'Monday' - }, { - id: 'day3', - value: 'Tuesday' - }, { - id: 'day4', - value: 'Wednesday' - }, { - id: 'day5', - value: 'Thursday' - }, { - id: 'day6', - value: 'Friday' - }, { - id: 'day7', - value: 'Saturday' - }]; - this.filterConfig = { fields: [{ id: 'name', @@ -247,10 +223,29 @@ export class TableFullExampleComponent implements AfterViewInit, OnInit { id: 'weekDay', title: 'Week Day', placeholder: 'Filter by Week Day...', - type: FilterType.TYPEAHEAD, - queries: [ - ...this.weekDayQueries - ] + type: FilterType.SELECT, + queries: [{ + id: 'day1', + value: 'Sunday' + }, { + id: 'day2', + value: 'Monday' + }, { + id: 'day3', + value: 'Tuesday' + }, { + id: 'day4', + value: 'Wednesday' + }, { + id: 'day5', + value: 'Thursday' + }, { + id: 'day6', + value: 'Friday' + }, { + id: 'day7', + value: 'Saturday' + }] }] as FilterField[], appliedFilters: [], resultsCount: this.rows.length, @@ -411,26 +406,15 @@ export class TableFullExampleComponent implements AfterViewInit, OnInit { this.filtersText += filter.field.title + ' : ' + filter.value + '\n'; }); this.applyFilters($event.appliedFilters); - this.filterFieldSelected($event); - } - - // Reset filtered queries - filterFieldSelected($event: FilterEvent): void { - this.filterConfig.fields.forEach((field) => { - if (field.id === 'weekDay') { - field.queries = [ - ...this.weekDayQueries - ]; - } - }); } matchesFilter(item: any, filter: Filter): boolean { let match = true; + let re = new RegExp(filter.value, 'i'); if (filter.field.id === 'name') { - match = item.name.match(filter.value) !== null; + match = item.name.match(re) !== null; } else if (filter.field.id === 'address') { - match = item.address.match(filter.value) !== null; + match = item.address.match(re) !== null; } else if (filter.field.id === 'birthMonth') { match = item.birthMonth === filter.value; } else if (filter.field.id === 'weekDay') { @@ -450,24 +434,6 @@ export class TableFullExampleComponent implements AfterViewInit, OnInit { return matches; } - // Filter queries for type ahead - filterQueries($event: FilterEvent) { - const index = (this.filterConfig.fields as any).findIndex((i: any) => i.id === $event.field.id); - let val = $event.value.trim(); - - if (this.filterConfig.fields[index].id === 'weekDay') { - this.filterConfig.fields[index].queries = [ - ...this.weekDayQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } - } - // Drag and drop handleDrop($event: any[]): void { diff --git a/src/app/table/basic-table/example/table-view-example.component.html b/src/app/table/basic-table/example/table-view-example.component.html index 373adb481..ca6f57bab 100644 --- a/src/app/table/basic-table/example/table-view-example.component.html +++ b/src/app/table/basic-table/example/table-view-example.component.html @@ -6,8 +6,6 @@ [actionTemplate]="actionTemplate" (onActionSelect)="handleAction($event)" (onFilterChange)="filterChanged($event)" - (onFilterFieldSelect)="filterFieldSelected($event)" - (onFilterTypeAhead)="filterQueries($event)" (onSelectionChange)="handleSelectionChange($event)" (onSortChange)="handleSortChanged($event)" (onViewSelect)="viewSelected($event)"> diff --git a/src/app/table/basic-table/example/table-view-example.component.ts b/src/app/table/basic-table/example/table-view-example.component.ts index 9cf272f4e..60b8abf40 100644 --- a/src/app/table/basic-table/example/table-view-example.component.ts +++ b/src/app/table/basic-table/example/table-view-example.component.ts @@ -55,7 +55,6 @@ export class TableViewExampleComponent implements OnInit { sortConfig: SortConfig; tableConfig: TableConfig; toolbarConfig: ToolbarConfig; - weekDayQueries: any[]; monthVals: any = { 'January': 1, @@ -165,29 +164,6 @@ export class TableViewExampleComponent implements OnInit { // Need to initialize for results/total counts this.updateRows(); - this.weekDayQueries = [{ - id: 'day1', - value: 'Sunday' - }, { - id: 'day2', - value: 'Monday' - }, { - id: 'day3', - value: 'Tuesday' - }, { - id: 'day4', - value: 'Wednesday' - }, { - id: 'day5', - value: 'Thursday' - }, { - id: 'day6', - value: 'Friday' - }, { - id: 'day7', - value: 'Saturday' - }]; - this.filterConfig = { fields: [{ id: 'name', @@ -245,10 +221,29 @@ export class TableViewExampleComponent implements OnInit { id: 'weekDay', title: 'Week Day', placeholder: 'Filter by Week Day...', - type: FilterType.TYPEAHEAD, - queries: [ - ...this.weekDayQueries - ] + type: FilterType.SELECT, + queries: [{ + id: 'day1', + value: 'Sunday' + }, { + id: 'day2', + value: 'Monday' + }, { + id: 'day3', + value: 'Tuesday' + }, { + id: 'day4', + value: 'Wednesday' + }, { + id: 'day5', + value: 'Thursday' + }, { + id: 'day6', + value: 'Friday' + }, { + id: 'day7', + value: 'Saturday' + }] }] as FilterField[], appliedFilters: [], resultsCount: this.rows.length, @@ -412,26 +407,15 @@ export class TableViewExampleComponent implements OnInit { this.filtersText += filter.field.title + ' : ' + filter.value + '\n'; }); this.applyFilters($event.appliedFilters); - this.filterFieldSelected($event); - } - - // Reset filtered queries - filterFieldSelected($event: FilterEvent): void { - this.filterConfig.fields.forEach((field) => { - if (field.id === 'weekDay') { - field.queries = [ - ...this.weekDayQueries - ]; - } - }); } matchesFilter(item: any, filter: Filter): boolean { let match = true; + let re = new RegExp(filter.value, 'i'); if (filter.field.id === 'name') { - match = item.name.match(filter.value) !== null; + match = item.name.match(re) !== null; } else if (filter.field.id === 'address') { - match = item.address.match(filter.value) !== null; + match = item.address.match(re) !== null; } else if (filter.field.id === 'birthMonth') { match = item.birthMonth === filter.value; } else if (filter.field.id === 'weekDay') { @@ -451,24 +435,6 @@ export class TableViewExampleComponent implements OnInit { return matches; } - // Filter queries for type ahead - filterQueries($event: FilterEvent) { - const index = (this.filterConfig.fields as any).findIndex((i: any) => i.id === $event.field.id); - let val = $event.value.trim(); - - if (this.filterConfig.fields[index].id === 'weekDay') { - this.filterConfig.fields[index].queries = [ - ...this.weekDayQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } - } - // Pagination handlePageSize($event: PaginationEvent): void { diff --git a/src/app/toolbar/example/toolbar-example.component.ts b/src/app/toolbar/example/toolbar-example.component.ts index 4e40d72d5..400a4ea60 100644 --- a/src/app/toolbar/example/toolbar-example.component.ts +++ b/src/app/toolbar/example/toolbar-example.component.ts @@ -34,7 +34,6 @@ export class ToolbarExampleComponent implements OnInit { sortConfig: SortConfig; currentSortField: SortField; toolbarConfig: ToolbarConfig; - weekDayQueries: any[]; monthVals: any = { 'January': 1, @@ -102,29 +101,6 @@ export class ToolbarExampleComponent implements OnInit { }]; this.items = this.allItems; - this.weekDayQueries = [{ - id: 'day1', - value: 'Sunday' - }, { - id: 'day2', - value: 'Monday' - }, { - id: 'day3', - value: 'Tuesday' - }, { - id: 'day4', - value: 'Wednesday' - }, { - id: 'day5', - value: 'Thursday' - }, { - id: 'day6', - value: 'Friday' - }, { - id: 'day7', - value: 'Saturday' - }]; - this.filterConfig = { fields: [{ id: 'name', @@ -182,10 +158,29 @@ export class ToolbarExampleComponent implements OnInit { id: 'weekDay', title: 'Week Day', placeholder: 'Filter by Week Day...', - type: FilterType.TYPEAHEAD, - queries: [ - ...this.weekDayQueries - ] + type: FilterType.SELECT, + queries: [{ + id: 'day1', + value: 'Sunday' + }, { + id: 'day2', + value: 'Monday' + }, { + id: 'day3', + value: 'Tuesday' + }, { + id: 'day4', + value: 'Wednesday' + }, { + id: 'day5', + value: 'Thursday' + }, { + id: 'day6', + value: 'Friday' + }, { + id: 'day7', + value: 'Saturday' + }] }] as FilterField[], resultsCount: this.items.length, appliedFilters: [] @@ -307,26 +302,15 @@ export class ToolbarExampleComponent implements OnInit { this.filtersText += filter.field.title + ' : ' + filter.value + '\n'; }); this.applyFilters($event.appliedFilters); - this.filterFieldSelected($event); - } - - // Reset filtered queries - filterFieldSelected($event: FilterEvent): void { - this.filterConfig.fields.forEach((field) => { - if (field.id === 'weekDay') { - field.queries = [ - ...this.weekDayQueries - ]; - } - }); } matchesFilter(item: any, filter: Filter): boolean { let match = true; + let re = new RegExp(filter.value, 'i'); if (filter.field.id === 'name') { - match = item.name.match(filter.value) !== null; + match = item.name.match(re) !== null; } else if (filter.field.id === 'address') { - match = item.address.match(filter.value) !== null; + match = item.address.match(re) !== null; } else if (filter.field.id === 'birthMonth') { match = item.birthMonth === filter.value; } else if (filter.field.id === 'weekDay') { @@ -346,24 +330,6 @@ export class ToolbarExampleComponent implements OnInit { return matches; } - // Filter queries for type ahead - filterQueries($event: FilterEvent) { - const index = (this.filterConfig.fields as any).findIndex((i: any) => i.id === $event.field.id); - let val = $event.value.trim(); - - if (this.filterConfig.fields[index].id === 'weekDay') { - this.filterConfig.fields[index].queries = [ - ...this.weekDayQueries.filter((item: any) => { - if (item.value) { - return (item.value.toLowerCase().indexOf(val.toLowerCase()) > -1); - } else { - return true; - } - }) - ]; - } - } - // Sort compare(item1: any, item2: any): number {