Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 #329
- Loading branch information
Showing
19 changed files
with
462 additions
and
529 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <div class="padding-15"> | ||
| <div class="row"> | ||
| <div class="col-sm-12"> | ||
| <div class="form-group"> | ||
| <p>Warning: This example is for development testing purposes. It is not an official pattern and subject to change</p> | ||
| <p>This ensures the filter field can display icons</p> | ||
| <pfng-filter [config]="filterConfig" | ||
| (onChange)="filterChanged($event)"></pfng-filter> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row padding-top-10"> | ||
| <div class="col-sm-12"> | ||
| <h4 class="actions-label">Items</h4> | ||
| <hr/> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-sm-12"> | ||
| <div *ngFor="let item of items" class="col-sm-12"> | ||
| <div class="row"> | ||
| <div class="col-sm-3"> | ||
| <i class="padding-right-10" [ngClass]="item.iconStyleClass"></i> | ||
| <span>{{item.name}}</span> | ||
| </div> | ||
| <div class="col-sm-5"> | ||
| <span>{{item.address}}</span> | ||
| </div> | ||
| <div class="col-sm-2"> | ||
| <span>{{item.birthMonth}}</span> | ||
| </div> | ||
| <div class="col-sm-2"> | ||
| <span>{{item.weekDay}}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row padding-top-10"> | ||
| <div class="col-sm-12"> | ||
| <h4 class="actions-label">Settings</h4> | ||
| <hr/> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <form role="form"> | ||
| <div class="form-group"> | ||
| <label class="checkbox-inline"> | ||
| <input id="disabled" name="disabled" type="checkbox" | ||
| [(ngModel)]="filterConfig.disabled">Disabled | ||
| </label> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <div class="row padding-top-10"> | ||
| <div class="col-sm-12"> | ||
| <h4 class="actions-label">Filters</h4> | ||
| <hr/> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-sm-12"> | ||
| <textarea rows="3" class="col-sm-12">{{filtersText}}</textarea> | ||
| </div> | ||
| </div> | ||
| <div class="row padding-top-10"> | ||
| <div class="col-sm-12"> | ||
| <h4>Code</h4> | ||
| <hr/> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <tabset> | ||
| <tab heading="api"> | ||
| <iframe class="demoframe" src="docs/classes/filtercomponent.html"></iframe> | ||
| </tab> | ||
| <tab heading="html"> | ||
| <include-content src="src/app/filter/example/filter-icon-example.component.html"></include-content> | ||
| </tab> | ||
| <tab heading="typescript"> | ||
| <include-content src="src/app/filter/example/filter-icon-example.component.ts"></include-content> | ||
| </tab> | ||
| </tabset> | ||
| </div> | ||
| </div> |
141 changes: 141 additions & 0 deletions
141
src/app/filter/example/filter-icon-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,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; | ||
| } | ||
| } |
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.