removed SearchResult interface, fixed the typeahead behvior

Author: Plamena Radneva

projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html

@@ -11,17 +11,18 @@
       (focus)="turnClickOutsideListenerOn()" placeholder="{{controlPlaceholder}}">
 
     <div class="entered-items" *ngIf="selectedItems.size > 0">
-      <div class="entered-item chosen-item" *ngFor="let selectedItem of selectedItems, index as itemIndex;">
-        <div class="content">{{displayProp ? selectedItem[displayProp] : selectedItem}}</div>
+      <div class="entered-item chosen-item"
+           *ngFor="let selectedItem of selectedItems, index as itemIndex;">
+        <div class="content">{{ selectedItem.label }}</div>
         <div class="remove" (click)="removeSearchResult(itemIndex)" *ngIf="!disabled">
           <i class="fa fa-times" aria-hidden="true"></i>
         </div>
       </div>
     </div>
 
     <div class="options" [ngClass]="{'display-none': hideResults}">
-      <div class="option" *ngFor="let result of searchResults" (click)="selectSearchResult(result)">
-        {{displayProp ? result[displayProp] : result}}
+      <div class="option" *ngFor="let result of options" (click)="selectSearchResult(result)">
+        {{ result.label }}
       </div>
     </div>
   </div>

projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.spec.ts

@@ -10,15 +10,15 @@ describe('TypeaheadComponent', () => {
 
   const testSearchResults = [
     {
-      displayName: 'option1',
+      label: 'option1',
       value: { key: 1 },
     },
     {
-      displayName: 'option2',
+      label: 'option2',
       value: { key: 2 },
     },
     {
-      displayName: 'option3',
+      label: 'option3',
       value: { id: '1234', key: 3 },
     },
   ];
@@ -33,7 +33,7 @@ describe('TypeaheadComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TypeaheadComponent);
     component = fixture.componentInstance;
-    component.displayProp = 'displayName';
+    component.displayProp = '';
     fixture.detectChanges();
   });
 
@@ -60,18 +60,11 @@ describe('TypeaheadComponent', () => {
     component.selectSearchResult(component.searchResults[0]);
     component.selectSearchResult(component.searchResults[1]);
 
-    console.log(
-      !Object.is(
-        component.selectedItems.get(0).value,
-        component.value[0].value,
-      ),
-    );
-
+    console.log(Object.is(component.selectedItems.get(0), component.value[0]));
     // the typeahead should return a new array with the copied search items
     expect(
       component.value.length === 1 &&
-        !Object.is(component.selectedItems.get(0), component.value[0]) &&
-        component.value[0].value.id === component.selectedItems.get(0).value.id,
+        Object.is(component.selectedItems.get(0), component.value[0]),
     ).toBe(true, 'single choice is correctly populated');
   });
 
@@ -103,7 +96,7 @@ describe('TypeaheadComponent', () => {
     );
   });
 
-  it('#should be able to populate correctly with a pre-defined SearchResult[] when [multiple] = true', () => {
+  it('#should be able to populate correctly with a pre-defined LabelValuePair[] when [multiple] = true', () => {
     component.multiple = true;
     component.value = testSearchResults;
     expect(component.selectedItems.toArray()).toEqual(
@@ -112,7 +105,7 @@ describe('TypeaheadComponent', () => {
     );
   });
 
-  it('#should be able to populate correctly with a pre-defined SearchResult[] when [multiple] = false', () => {
+  it('#should be able to populate correctly with a pre-defined LabelValuePair[] when [multiple] = false', () => {
     component.multiple = false;
     component.value = testSearchResults;
     const itemsToArray = component.selectedItems.toArray();

projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.ts

@@ -1,17 +1,10 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  OnDestroy,
-  forwardRef,
-  ViewEncapsulation,
-  OnChanges,
-  Output,
-  EventEmitter,
+import { Component, OnInit, Input, OnDestroy,
+  forwardRef, ViewEncapsulation, OnChanges, Output,
+  EventEmitter
 } from '@angular/core';
 
 import { NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
-import { SearchResult } from '../../shared/interfaces/search-result';
+import { LabelValuePair } from '../../shared/shared.module';
 import { InputCoreComponent } from '../../shared/entities/input-core-component';
 
 import { Subject, Subscription } from 'rxjs';
@@ -34,23 +27,18 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
 })
 export class TypeaheadComponent extends InputCoreComponent
   implements OnInit, OnDestroy, OnChanges {
-  @Input()
-  searchResults: SearchResult[] = [];
-  @Input()
-  multiple = false;
-  @Input()
-  delay = 500;
-  @Input()
-  displayProp = '';
-  @Output()
-  onUserInputEnd = new EventEmitter<string>();
+  @Input() searchResults: any[] = [];
+  @Input() multiple = false;
+  @Input() delay = 500;
+  @Input() displayProp = '';
+  @Output() onUserInputEnd = new EventEmitter<string>();
 
   private onInputValueChangeSubscription: Subscription;
   private onQueryInputControlSubscription: Subscription;
   private valueChangedSubscription: Subscription;
-  private innerSelectedItemsListCopy: List<SearchResult>;
 
-  selectedItems: List<SearchResult> = List<SearchResult>();
+  selectedItems: List<LabelValuePair> = List<LabelValuePair>();
+  options: List<LabelValuePair> = List<LabelValuePair>();
 
   constructor() {
     super();
@@ -104,6 +92,9 @@ export class TypeaheadComponent extends InputCoreComponent
 
   ngOnChanges(changesObj) {
     if (changesObj.searchResults && changesObj.searchResults.currentValue) {
+      const parsedResults= this.transformToLabelValuePairList(this.searchResults);
+      this.options = List(parsedResults);
+
       this.isLoading = false;
       this.hideResults = false;
     }
@@ -123,7 +114,7 @@ export class TypeaheadComponent extends InputCoreComponent
     }
   }
 
-  selectSearchResult(result: SearchResult) {
+  selectSearchResult(result: LabelValuePair) {
     this.selectItem(result);
   }
 
@@ -152,7 +143,7 @@ export class TypeaheadComponent extends InputCoreComponent
     this.value = [];
   }
 
-  private selectItem(result: SearchResult, copyResults: boolean = true) {
+  private selectItem(result: LabelValuePair, copyResults: boolean = true) {
     this.queryInputControl.setValue(null);
 
     if (!this.multiple && this.selectedItems.size === 1) {
@@ -173,23 +164,35 @@ export class TypeaheadComponent extends InputCoreComponent
   }
 
   private copyResults() {
-    this.innerSelectedItemsListCopy = this.selectedItems;
-    this.value = this.copyObjectsToNewIterable(this.innerSelectedItemsListCopy);
+      this.value = this.selectedItems.toArray();
   }
 
-  private copyObjectsToNewIterable(objList: List<SearchResult>) {
-    const newList = objList.map((obj) => {
-      let copiedSearchResult = {};
-
-      if (typeof obj === 'object') {
-        copiedSearchResult = Object.assign({}, obj);
+  private transformToLabelValuePairList(resultsList: any): Array<LabelValuePair> {
+    const newList = resultsList.map(item => {
+      let searchResult: LabelValuePair | any;
+
+      if (typeof item === 'object') {
+        // if displayProp is an empty string,
+        // it assumes that the author passes LabelValuePair items
+        if (this.displayProp === '') {
+          searchResult = Object.assign({}, item);
+        } else {
+          // in case the author wants a specific display property
+          searchResult = {
+            label: item[this.displayProp],
+            value: Object.assign({}, item),
+          };
+        }
       } else {
-        copiedSearchResult[this.displayProp] = obj;
+        searchResult = {
+          label: item,
+          value: item,
+        };
       }
 
-      return copiedSearchResult;
+      return searchResult;
     });
 
-    return newList.toArray();
+    return newList;
   }
 }

projects/ng-sq-ui/src/lib/shared/interfaces/search-result.ts

@@ -4,9 +4,8 @@ import { OutsideClickListenerDirective } from './directives/outside-click-listen
 import { CustomEventBroadcasterService } from './services/custom-event-broadcaster.service';
 import { OSDetectorService } from './services/os-detector.service';
 import { LabelValuePair } from './interfaces/label-value-pair';
-import { SearchResult } from './interfaces/search-result';
 
-export { LabelValuePair, SearchResult };
+export { LabelValuePair };
 export { OutsideClickListenerDirective };
 export { OSDetectorService };
 

projects/ng-sq-ui/src/lib/shared/shared.module.ts

@@ -3,4 +3,4 @@
  */
 
 export * from './lib/ng-sq-ui.module';
-export { LabelValuePair, SearchResult, OSDetectorService } from './lib/shared/shared.module';
+export { LabelValuePair, OSDetectorService } from './lib/shared/shared.module';

projects/ng-sq-ui/src/public_api.ts

@@ -24,6 +24,10 @@ <h2>Introduction</h2>
       The font used in this preview is "Quicksand" and is applied using the Google Fonts API. The SQ-UI theme does not come with
       it and does not have a default font set.
     </p>
+
+    <p>
+      <b>Note:</b> Clicking the Submit button will produce a console.log() with all the form data.
+    </p>
   </section>
 
   <section id="formElementsModule" class="module">
@@ -66,7 +70,7 @@ <h3>sq-tags-input</h3>
 
       <section id="sqTypeahead1">
         <header>
-          <h3>sq-typeahead with array of object</h3>
+          <h3>sq-typeahead with array of objects - multiple choice</h3>
         </header>
 
         <sq-typeahead name="typeahead1" displayProp="label" multiple="true" formControlName="typeahead1" [searchResults]="searchResults"
@@ -76,10 +80,10 @@ <h3>sq-typeahead with array of object</h3>
 
       <section id="sqTypeahead2">
         <header>
-          <h3>sq-typeahead with array of strings</h3>
+          <h3>sq-typeahead with array of strings - single choice</h3>
         </header>
 
-        <sq-typeahead name="typeahead2" multiple="true" formControlName="typeahead2" [searchResults]="searchResultsStrings" (onUserInputEnd)="searchMethodString($event)"
+        <sq-typeahead name="typeahead2" formControlName="typeahead2" [searchResults]="searchResultsStrings" (onUserInputEnd)="searchMethodString($event)"
           controlLabel="Typeahead*" controlPlaceholder="Type something in">
         </sq-typeahead>
       </section>

src/app/app.component.html

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { LabelValuePair, SearchResult } from 'ng-sq-ui';
+import { LabelValuePair } from 'ng-sq-ui';
 
 @Component({
   selector: 'app-root',