@sourceloop/search-client 1.1.2

package/projects/search-lib/src/lib/search/search.component.ts

@@ -0,0 +1,313 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  PLATFORM_ID,
+  ViewChild,
+} from '@angular/core';
+import {Configuration} from '../lib-configuration';
+import {Subject} from 'rxjs';
+import {debounceTime, tap} from 'rxjs/operators';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {
+  ISearchService,
+  IModel,
+  ISearchQuery,
+  SEARCH_SERVICE_TOKEN,
+  DEBOUNCE_TIME,
+  DEFAULT_LIMIT,
+  DEFAULT_LIMIT_TYPE,
+  DEFAULT_OFFSET,
+  DEFAULT_SAVE_IN_RECENTS,
+  DEFAULT_ORDER,
+  IReturnType,
+  RecentSearchEvent,
+  TypeEvent,
+  ItemClickedEvent,
+} from '../types';
+import {isPlatformBrowser} from '@angular/common';
+
+@Component({
+  selector: 'sourceloop-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SearchComponent,
+      multi: true,
+    },
+  ],
+})
+export class SearchComponent<T extends IReturnType>
+  implements OnInit, OnDestroy, ControlValueAccessor
+{
+  searchBoxInput = '';
+  suggestionsDisplay = false;
+  categoryDisplay = false;
+  suggestions: T[] = [];
+  relevantSuggestions: T[] = [];
+  recentSearches: ISearchQuery[] = [];
+  category: IModel | 'All' = 'All';
+  observableForSearchRequest = new Subject<{input: string; event: Event}>();
+  @Input() config!: Configuration<T>;
+  // emitted when user clicks one of the suggested results (including recent search sugestions)
+  @Output() clicked = new EventEmitter<ItemClickedEvent<T>>();
+  @Output() searched = new EventEmitter<RecentSearchEvent>();
+  /* emitted when user makes search request (including recent search requests & requests made on change in category from dropdown)
+  In case of recent search Array of recent Search request result is emitted */
+
+  onChange!: (value: string | undefined) => void;
+  onTouched!: () => void;
+  disabled = false;
+
+  @ViewChild('searchInput') public searchInputElement!: ElementRef;
+
+  constructor(
+    @Inject(SEARCH_SERVICE_TOKEN)
+    private readonly searchService: ISearchService<T>,
+    // tslint:disable-next-line:ban-types
+    @Inject(PLATFORM_ID) private readonly platformId: Object,
+  ) {}
+
+  ngOnInit(): void {
+    this.observableForSearchRequest
+      .pipe(
+        tap(v => (this.suggestions = [])),
+        debounceTime(DEBOUNCE_TIME),
+      )
+      .subscribe((value: TypeEvent) => {
+        this.searched.emit({
+          event: value.event,
+          keyword: value.input,
+          category: this.category,
+        });
+        this.getSuggestions(value);
+      });
+  }
+
+  // ControlValueAccessor Implementation
+  writeValue(value: string): void {
+    this.searchBoxInput = value;
+  }
+  // When the value in the UI is changed, this method will invoke a callback function
+  registerOnChange(fn: (value: string | undefined) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  getSuggestions(eventValue: TypeEvent) {
+    const order = this.config.order ?? DEFAULT_ORDER;
+    let orderString = '';
+    order.forEach(preference => (orderString = `${orderString}${preference} `));
+
+    let saveInRecents = this.config.saveInRecents ?? DEFAULT_SAVE_IN_RECENTS;
+    if (this.config.saveInRecents && this.config.saveInRecentsOnlyOnEnter) {
+      if (
+        (eventValue.event instanceof KeyboardEvent &&
+          eventValue.event.key === 'Enter') ||
+        (eventValue.event instanceof Event &&
+          eventValue.event.type === 'change')
+      ) {
+        saveInRecents = true; // save in recents only on enter or change in category
+      } else {
+        // do not save in recent search on typing
+        saveInRecents = false;
+      }
+    }
+    /* need to put default value here and not in contructor
+    because sonar was giving code smell with definite assertion as all these parameters are optional */
+    const requestParameters: ISearchQuery = {
+      match: eventValue.input,
+      sources: this._categoryToSourceName(this.category),
+      limit: this.config.limit ?? DEFAULT_LIMIT,
+      limitByType: this.config.limitByType ?? DEFAULT_LIMIT_TYPE,
+      order: orderString,
+      offset: this.config.offset ?? DEFAULT_OFFSET,
+    };
+
+    this.searchService
+      .searchApiRequest(requestParameters, saveInRecents)
+      .subscribe(
+        (value: T[]) => {
+          this.suggestions = value;
+        },
+        (_error: Error) => {
+          this.suggestions = [];
+        },
+      );
+  }
+  getRecentSearches() {
+    if (
+      !this.config.hideRecentSearch &&
+      this.searchService.recentSearchApiRequest
+    ) {
+      this.searchService.recentSearchApiRequest().subscribe(
+        (value: ISearchQuery[]) => {
+          this.recentSearches = value;
+        },
+        (_error: Error) => {
+          this.recentSearches = [];
+        },
+      );
+    }
+  }
+
+  // event can be KeyBoardEvent or Event of type 'change' fired on change in value of drop down for category
+  hitSearchApi(event: Event) {
+    // this will happen only in case user searches something and then erases it, we need to update recent search
+    if (!this.searchBoxInput) {
+      this.suggestions = [];
+      this.getRecentSearches();
+      return;
+    }
+
+    // no debounce time needed in case of searchOnlyOnEnter
+    if (this.config.searchOnlyOnEnter) {
+      if (
+        (event instanceof KeyboardEvent && event.key === 'Enter') ||
+        (event instanceof Event && event.type === 'change')
+      ) {
+        this.getSuggestions({input: this.searchBoxInput, event});
+      }
+      return;
+    }
+
+    // no debounce time needed in case of change in category
+    if (event instanceof KeyboardEvent === false && event.type === 'change') {
+      this.getSuggestions({input: this.searchBoxInput, event});
+      return;
+    }
+
+    this.observableForSearchRequest.next({
+      input: this.searchBoxInput,
+      event,
+    });
+  }
+
+  populateValue(suggestion: T, event: MouseEvent) {
+    const value = suggestion[
+      this.config.displayPropertyName
+    ] as unknown as string; // converted to string to assign value to searchBoxInput
+    this.searchBoxInput = value;
+    this.suggestionsDisplay = false;
+    // ngModelChange doesn't detect change in value when populated from outside, hence calling manually
+    this.onChange(this.searchBoxInput);
+    // need to do this to show more search options for selected suggestion - just in case user reopens search input
+    this.getSuggestions({input: this.searchBoxInput, event});
+    this.clicked.emit({item: suggestion, event});
+  }
+  populateValueRecentSearch(recentSearch: ISearchQuery, event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    const value = recentSearch['match'];
+    this.searchBoxInput = value;
+    this.suggestionsDisplay = false;
+    this.onChange(this.searchBoxInput);
+    // need to do this to show more search options for selected suggestion - just in case user reopens search input
+    this.getSuggestions({input: this.searchBoxInput, event});
+    this.focusInput();
+    this.showSuggestions();
+  }
+
+  fetchModelImageUrlFromSuggestion(suggestion: T) {
+    const modelName = suggestion[
+      'source' as unknown as keyof T
+    ] as unknown as string;
+    let url: string | undefined;
+    this.config.models.forEach((model, i) => {
+      if (model.name === modelName && model.imageUrl) {
+        url = model.imageUrl;
+      }
+    });
+    return url;
+  }
+
+  // also returns true if there are any suggestions related to the model
+  getSuggestionsFromModelName(modelName: string) {
+    this.relevantSuggestions = [];
+    this.suggestions.forEach(suggestion => {
+      const sourceModelName = suggestion[
+        'source' as keyof T
+      ] as unknown as string;
+      if (sourceModelName === modelName) {
+        this.relevantSuggestions.push(suggestion);
+      }
+    });
+    if (this.relevantSuggestions.length) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  boldString(str: T[keyof T] | string, substr: string) {
+    const strRegExp = new RegExp(`(${substr})`, 'gi');
+    const stringToMakeBold: string = str as unknown as string;
+    return stringToMakeBold.replace(strRegExp, `<b>$1</b>`);
+  }
+
+  hideSuggestions() {
+    this.suggestionsDisplay = false;
+    this.onTouched();
+  }
+
+  showSuggestions() {
+    this.suggestionsDisplay = true;
+    this.getRecentSearches();
+  }
+
+  focusInput() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.searchInputElement.nativeElement.focus();
+    }
+  }
+
+  setCategory(category: 'All' | IModel, event: MouseEvent) {
+    this.category = category;
+    this.categoryDisplay = false;
+    if (this.searchBoxInput) {
+      this.hitSearchApi(event);
+      this.focusInput();
+      this.showSuggestions();
+    }
+  }
+
+  showCategory() {
+    this.categoryDisplay = !this.categoryDisplay;
+  }
+
+  hideCategory() {
+    this.categoryDisplay = false;
+  }
+
+  resetInput() {
+    this.searchBoxInput = '';
+    this.suggestionsDisplay = true;
+    this.focusInput();
+    // ngModelChange doesn't detect change in value when populated from outside, hence calling manually
+    this.onChange(this.searchBoxInput);
+    this.getRecentSearches();
+  }
+  ngOnDestroy() {
+    this.observableForSearchRequest.unsubscribe();
+  }
+
+  _categoryToSourceName(category: 'All' | IModel) {
+    if (category === 'All') {
+      return [];
+    } else {
+      return [category.name];
+    }
+  }
+}

package/projects/search-lib/src/lib/search-lib.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {SearchComponent} from './search/search.component';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+
+@NgModule({
+  declarations: [SearchComponent],
+  imports: [CommonModule, FormsModule, HttpClientModule],
+  exports: [SearchComponent],
+})
+export class SearchLibModule {}

package/projects/search-lib/src/lib/types.ts

@@ -0,0 +1,59 @@
+import {InjectionToken} from '@angular/core';
+import {Observable} from 'rxjs';
+
+export interface ISearchQuery {
+  match: string;
+  limit: number | null;
+  order: string | null;
+  limitByType: boolean | null;
+  offset: number | null;
+  sources: string[] | null;
+}
+export interface IModel {
+  name: string;
+  displayName: string;
+  imageUrl?: string;
+}
+export interface IReturnType {
+  rank: number;
+  source: string;
+}
+export interface IDefaultReturnType extends IReturnType {
+  name: string;
+  description: string;
+}
+
+export interface ISearchService<T extends IReturnType> {
+  searchApiRequest(
+    requestParameters: ISearchQuery,
+    saveInRecents: boolean,
+  ): Observable<T[]>;
+  recentSearchApiRequest?(): Observable<ISearchQuery[]>;
+}
+
+// cant use T extends IReturnType here
+export const SEARCH_SERVICE_TOKEN: InjectionToken<ISearchService<IReturnType>> =
+  new InjectionToken<ISearchService<IReturnType>>('Search_Service_Token');
+
+export type RecentSearchEvent = {
+  event: KeyboardEvent | Event;
+  keyword: string;
+  category: 'All' | IModel;
+};
+
+export type ItemClickedEvent<T> = {
+  event: MouseEvent;
+  item: T;
+};
+
+export type TypeEvent = {
+  event: Event;
+  input: string;
+};
+// IRequestParameters default values
+export const DEFAULT_LIMIT = 20;
+export const DEFAULT_LIMIT_TYPE = false;
+export const DEFAULT_ORDER = [];
+export const DEBOUNCE_TIME = 1000;
+export const DEFAULT_OFFSET = 0;
+export const DEFAULT_SAVE_IN_RECENTS = true;

package/projects/search-lib/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of my-lib
+ */
+
+export * from './lib/search-lib.module';
+export * from './lib/search/search.component';
+export * from './lib/lib-configuration';
+export * from './lib/types';

package/projects/search-lib/src/test.ts

@@ -0,0 +1,34 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import 'zone.js/dist/zone';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import {getTestBed} from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing'; // NOSONAR
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp,
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/projects/search-lib/tsconfig.lib.json

@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/projects/search-lib/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "enableIvy": false
+  }
+}

package/projects/search-lib/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,36 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "paths": {
+      "search-lib": [
+        "dist/search-lib/search-lib",
+        "dist/search-lib"
+      ]
+    },
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tslint.json

@@ -0,0 +1,163 @@
+{
+    "extends": "tslint:recommended",
+    "rules": {
+      "align": {
+        "options": [
+          "parameters",
+          "statements"
+        ]
+      },
+      "array-type": false,
+      "arrow-parens": false,
+      "arrow-return-shorthand": true,
+      "deprecation": {
+        "severity": "warning"
+      },
+      "component-class-suffix": true,
+      "contextual-lifecycle": true,
+      "curly": true,
+      "directive-class-suffix": true,
+      "directive-selector": [
+        true,
+        "attribute",
+        "camelCase"
+      ],
+      "no-string-literal": false,
+      "component-selector": [
+        true,
+        "element",
+        "kebab-case"
+      ],
+      "eofline": true,
+      "import-blacklist": [
+        true,
+        "rxjs/Rx"
+      ],
+      "import-spacing": true,
+      "indent": {
+        "options": [
+          "spaces"
+        ]
+      },
+      "interface-name": false,
+      "max-classes-per-file": false,
+      "max-line-length": [
+        true,
+        140
+      ],
+      "member-access": false,
+      "member-ordering": [
+        true,
+        {
+          "order": [
+            "static-field",
+            "instance-field",
+            "static-method",
+            "instance-method"
+          ]
+        }
+      ],
+      "no-consecutive-blank-lines": false,
+      "no-any": false,
+      "no-console": [
+        true,
+        "debug",
+        "info",
+        "time",
+        "timeEnd",
+        "trace"
+      ],
+      "no-empty": false,
+      "no-inferrable-types": [
+        true,
+        "ignore-params"
+      ],
+      "no-non-null-assertion": true,
+      "no-redundant-jsdoc": true,
+      "no-switch-case-fall-through": true,
+      "no-var-requires": false,
+      "object-literal-key-quotes": [
+        true,
+        "as-needed"
+      ],
+      "object-literal-sort-keys": false,
+      "ordered-imports": false,
+      "quotemark": [
+        true,
+        "single",
+        "avoid-escape"
+      ],
+      "trailing-comma": false,
+      "no-conflicting-lifecycle": true,
+      "no-host-metadata-property": true,
+      "no-input-rename": true,
+      "no-inputs-metadata-property": true,
+      "no-output-native": true,
+      "no-output-on-prefix": false,
+      "no-output-rename": true,
+      "semicolon": {
+        "options": [
+          "always"
+        ]
+      },
+      "space-before-function-paren": {
+        "options": {
+          "anonymous": "never",
+          "asyncArrow": "always",
+          "constructor": "never",
+          "method": "never",
+          "named": "never"
+        }
+      },
+      "no-outputs-metadata-property": true,
+      "template-banana-in-box": true,
+      "template-no-negated-async": true,
+      "typedef-whitespace": {
+        "options": [
+          {
+            "call-signature": "nospace",
+            "index-signature": "nospace",
+            "parameter": "nospace",
+            "property-declaration": "nospace",
+            "variable-declaration": "nospace"
+          },
+          {
+            "call-signature": "onespace",
+            "index-signature": "onespace",
+            "parameter": "onespace",
+            "property-declaration": "onespace",
+            "variable-declaration": "onespace"
+          }
+        ]
+      },
+      "use-lifecycle-interface": false,
+      "use-pipe-transform-interface": true,
+      "one-variable-per-declaration": false,
+      "variable-name": {
+        "options": [
+          "ban-keywords",
+          "check-format",
+          "allow-pascal-case",
+          "allow-leading-underscore"
+        ]
+      },
+      "whitespace": {
+        "options": [
+          "check-branch",
+          "check-decl",
+          "check-operator",
+          "check-separator",
+          "check-type",
+          "check-typecast"
+        ]
+      }
+    },
+    "rulesDirectory": [
+      "codelyzer"
+    ],
+    "linterOptions":{
+      "exclude":[
+        "**/theme/tools/**"
+      ]
+    }
+  }