feat(typeahead): add sort functionality to typeahead

Add sort functionality to typeahead Close #4808
valor-software · Feb 6, 2020 · b7595a5 · b7595a5
1 parent 0b4721d
commit b7595a5
Show file tree

Hide file tree

Showing 10 changed files with 464 additions and 49 deletions.
diff --git a/demo/src/app/components/+typeahead/demos/index.ts b/demo/src/app/components/+typeahead/demos/index.ts
@@ -22,6 +22,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,
@@ -47,5 +48,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,123 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TypeaheadOrder } from 'ngx-bootstrap/typeahead';
+import { Observable, of } from 'rxjs';
+
+@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$ = of(this.states);
+  }
+}
diff --git a/demo/src/app/components/+typeahead/typeahead-section.list.ts b/demo/src/app/components/+typeahead/typeahead-section.list.ts
@@ -28,6 +28,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[] = [
   {
@@ -266,6 +267,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: 'Sort results',
+        anchor: 'typeahead-ordering',
+        description: `
+          <p>Use <code>typeaheadOrderBy</code> property to sort 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
@@ -2351,6 +2351,11 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Closes the modal when escape key is pressed.</p>\n"
       },
+      {
+        "name": "providers",
+        "type": "StaticProvider[]",
+        "description": "<p>Modal providers</p>\n"
+      },
       {
         "name": "show",
         "type": "boolean",
@@ -3898,6 +3903,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 {