-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(typeahead): add sort functionality to typeahead (#5646)
Add sort functionality to typeahead Close #4808 Co-authored-by: Dmitriy Danilov <daniloff200@gmail.com>
- Loading branch information
1 parent
2c36e33
commit d80bdfd
Showing
10 changed files
with
486 additions
and
49 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
40 changes: 40 additions & 0 deletions
40
demo/src/app/components/+typeahead/demos/ordering/ordering.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,40 @@ | ||
| <div class="mb-3"> | ||
| <h6>Source - <strong>array of string</strong>. Order direction - <strong>descending</strong></h6> | ||
| <input [(ngModel)]="selected1" | ||
| [typeahead]="states" | ||
| [typeaheadOrderBy]="sortConfig1" | ||
| class="form-control"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <h6>Source - <strong>array of string</strong>. Order direction - <strong>ascending</strong></h6> | ||
| <input [(ngModel)]="selected2" | ||
| [typeahead]="states" | ||
| [typeaheadOrderBy]="sortConfig2" | ||
| class="form-control"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <h6> | ||
| Source - <strong>array of objects</strong>. Order direction - <strong>ascending</strong>, | ||
| sort by <strong>city</strong>, group by <strong>state</strong> | ||
| </h6> | ||
| <input [(ngModel)]="selected3" | ||
| [typeahead]="cities" | ||
| typeaheadOptionField="city" | ||
| typeaheadGroupField="state" | ||
| [typeaheadItemTemplate]="customItemTemplate" | ||
| [typeaheadOrderBy]="sortConfig3" | ||
| class="form-control"> | ||
|
|
||
| <ng-template #customItemTemplate let-model="item"> | ||
| <span><strong>{{model.city}}</strong> - {{model.code}}</span> | ||
| </ng-template> | ||
| </div> | ||
|
|
||
| <div class="mb-3"> | ||
| <h6>Source - <strong>Observable of array of string</strong>. Order direction - <strong>descending</strong></h6> | ||
| <input [(ngModel)]="selected4" | ||
| [typeahead]="states$" | ||
| [typeaheadAsync]="true" | ||
| [typeaheadOrderBy]="sortConfig1" | ||
| class="form-control"> | ||
| </div> |
136 changes: 136 additions & 0 deletions
136
demo/src/app/components/+typeahead/demos/ordering/ordering.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,136 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
|
|
||
| import { TypeaheadOrder } from 'ngx-bootstrap/typeahead'; | ||
| import { Observable, of, Subscriber } from 'rxjs'; | ||
| import { switchMap } from 'rxjs/operators'; | ||
|
|
||
| @Component({ | ||
| selector: 'demo-typeahead-ordering', | ||
| templateUrl: './ordering.html' | ||
| }) | ||
| export class DemoTypeaheadOrderingComponent implements OnInit { | ||
| selected1: string; | ||
| selected2: string; | ||
| selected3: string; | ||
| selected4: string; | ||
| sortConfig1: TypeaheadOrder = { | ||
| direction: 'desc' | ||
| }; | ||
| sortConfig2: TypeaheadOrder = { | ||
| direction: 'asc' | ||
| }; | ||
| sortConfig3: TypeaheadOrder = { | ||
| direction: 'asc', | ||
| field: 'city' | ||
| }; | ||
| states$: Observable<string[]>; | ||
| states: string[] = [ | ||
| 'New Mexico', | ||
| 'New York', | ||
| 'North Dakota', | ||
| 'North Carolina', | ||
| 'Ohio', | ||
| 'Oklahoma', | ||
| 'Oregon', | ||
| 'Pennsylvania', | ||
| 'Rhode Island', | ||
| 'South Carolina', | ||
| 'South Dakota', | ||
| 'Tennessee', | ||
| 'Texas', | ||
| 'Utah', | ||
| 'Alaska', | ||
| 'Alabama', | ||
| 'Iowa', | ||
| 'Kansas', | ||
| 'Kentucky', | ||
| 'Louisiana', | ||
| 'Maine', | ||
| 'Maryland', | ||
| 'Massachusetts', | ||
| 'Michigan', | ||
| 'Minnesota', | ||
| 'Mississippi', | ||
| 'Missouri', | ||
| 'Montana', | ||
| 'Nebraska', | ||
| 'Nevada', | ||
| 'New Hampshire', | ||
| 'New Jersey', | ||
| 'Arizona', | ||
| 'Arkansas', | ||
| 'California', | ||
| 'Colorado', | ||
| 'Connecticut', | ||
| 'Delaware', | ||
| 'Florida', | ||
| 'Georgia', | ||
| 'Hawaii', | ||
| 'Idaho', | ||
| 'Illinois', | ||
| 'Indiana', | ||
| 'Vermont', | ||
| 'Virginia', | ||
| 'Washington', | ||
| 'West Virginia', | ||
| 'Wisconsin', | ||
| 'Wyoming' | ||
| ]; | ||
| cities = [{ | ||
| city: 'Norton', | ||
| state: 'Virginia', | ||
| code: '61523' | ||
| }, { | ||
| city: 'Grundy', | ||
| state: 'Virginia', | ||
| code: '77054' | ||
| }, { | ||
| city: 'Coeburn', | ||
| state: 'Virginia', | ||
| code: '01665' | ||
| }, { | ||
| city: 'Phoenix', | ||
| state: 'Arizona', | ||
| code: '29128' | ||
| }, { | ||
| city: 'Tucson', | ||
| state: 'Arizona', | ||
| code: '32084' | ||
| }, { | ||
| city: 'Mesa', | ||
| state: 'Arizona', | ||
| code: '21465' | ||
| }, { | ||
| city: 'Independence', | ||
| state: 'Missouri', | ||
| code: '26887' | ||
| }, { | ||
| city: 'Kansas City', | ||
| state: 'Missouri', | ||
| code: '79286' | ||
| }, { | ||
| city: 'Springfield', | ||
| state: 'Missouri', | ||
| code: '92325' | ||
| }, { | ||
| city: 'St. Louis', | ||
| state: 'Missouri', | ||
| code: '64891' | ||
| }]; | ||
|
|
||
| ngOnInit(): void { | ||
| this.states$ = new Observable((observer: Subscriber<string>) => { | ||
| // Runs on every search | ||
| observer.next(this.selected4); | ||
| }) | ||
| .pipe( | ||
| switchMap((token: string) => { | ||
| const query = new RegExp(token, 'i'); | ||
|
|
||
| return of( | ||
| this.states.filter((state: string) => query.test(state)) | ||
| ); | ||
| }) | ||
| ); | ||
| } | ||
| } |
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.