feat(typeahead): add sort functionality to typeahead (#5646)

Add sort functionality to typeahead Close #4808 Co-authored-by: Dmitriy Danilov <daniloff200@gmail.com>
valor-software · Feb 12, 2020 · d80bdfd · d80bdfd
1 parent 2c36e33
commit d80bdfd
Show file tree

Hide file tree

Showing 10 changed files with 486 additions and 49 deletions.
diff --git a/demo/src/app/components/+typeahead/demos/index.ts b/demo/src/app/components/+typeahead/demos/index.ts
@@ -23,6 +23,7 @@ import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
 import { DemotypeaheadSelectFirstItemComponent } from './selected-first-item/selected-first-item';
 import { DemoTypeaheadShowOnBlurComponent } from './show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
+import { DemoTypeaheadOrderingComponent } from './ordering/ordering';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadAdaptivePositionComponent,
@@ -51,5 +52,6 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadScrollableComponent,
   DemotypeaheadSelectFirstItemComponent,
   DemoTypeaheadShowOnBlurComponent,
-  DemoTypeaheadSingleWorldComponent
+  DemoTypeaheadSingleWorldComponent,
+  DemoTypeaheadOrderingComponent
 ];
diff --git a/demo/src/app/components/+typeahead/demos/ordering/ordering.html b/demo/src/app/components/+typeahead/demos/ordering/ordering.html
@@ -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>
diff --git a/demo/src/app/components/+typeahead/demos/ordering/ordering.ts b/demo/src/app/components/+typeahead/demos/ordering/ordering.ts
@@ -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))
+          );
+        })
+      );
+  }
+}
diff --git a/demo/src/app/components/+typeahead/typeahead-section.list.ts b/demo/src/app/components/+typeahead/typeahead-section.list.ts
@@ -29,6 +29,7 @@ import { ExamplesComponent } from '../../docs/demo-section-components/demo-examp
 
 import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
 import { DemoTypeaheadFirstItemActiveComponent } from './demos/first-item-active/first-item-active';
+import { DemoTypeaheadOrderingComponent } from './demos/ordering/ordering';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -275,6 +276,16 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader!./demos/selected-first-item/selected-first-item.ts'),
         html: require('!!raw-loader!./demos/selected-first-item/selected-first-item.html'),
         outlet: DemotypeaheadSelectFirstItemComponent
+      },
+      {
+        title: 'Order results',
+        anchor: 'typeahead-ordering',
+        description: `
+          <p>Use <code>typeaheadOrderBy</code> property to order your result by a certain field and in certain direction</p>
+        `,
+        component: require('!!raw-loader!./demos/ordering/ordering.ts'),
+        html: require('!!raw-loader!./demos/ordering/ordering.html'),
+        outlet: DemoTypeaheadOrderingComponent
       }
     ]
   },

diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -2332,6 +2332,16 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Toggle animation</p>\n"
       },
+      {
+        "name": "ariaDescribedby",
+        "type": "string",
+        "description": "<p>aria-describedby attribute value to set on the modal window</p>\n"
+      },
+      {
+        "name": "ariaLabelledBy",
+        "type": "string",
+        "description": "<p>aria-labelledby attribute value to set on the modal window</p>\n"
+      },
       {
         "name": "backdrop",
         "type": "boolean | \"static\"",
@@ -3915,6 +3925,11 @@ export const ngdoc: any = {
         "type": "number",
         "description": "<p>maximum length of options items list. The default value is 20</p>\n"
       },
+      {
+        "name": "typeaheadOrderBy",
+        "type": "TypeaheadOrder",
+        "description": "<p>Used to specify a custom order of matches. When options source is an array of objects\na field for sorting has to be set up. In case of options source is an array of string,\na field for sorting is absent. The ordering direction could be changed to ascending or descending.</p>\n"
+      },
       {
         "name": "typeaheadPhraseDelimiters",
         "defaultValue": "'\"",

diff --git a/src/index.ts b/src/index.ts
@@ -141,7 +141,8 @@ export {
   TypeaheadContainerComponent,
   TypeaheadDirective,
   TypeaheadMatch,
-  TypeaheadModule
+  TypeaheadModule,
+  TypeaheadOrder
 } from './typeahead/index';
 
 export {