@sourceloop/search-client 1.1.2

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.prettierignore

@@ -0,0 +1,4 @@
+dist
+*.json
+coverage
+src/assets

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## <small>1.1.2 (2021-10-25)</small>
+
+* docs(search-client): docs updated for versioning ([5192106](https://github.com/sourcefuse/loopback4-microservice-catalog/commit/5192106)), closes [#0](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/0)
+
+
+
+
+
+## <small>1.1.1 (2021-10-25)</small>
+
+* chore(core): fix package json ([094b79b](https://github.com/sourcefuse/loopback4-microservice-catalog/commit/094b79b)), closes [#0](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/0)
+* Search client fix (#386) ([01a9c99](https://github.com/sourcefuse/loopback4-microservice-catalog/commit/01a9c99)), closes [#386](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/386)
+
+
+
+
+
+## 1.1.0 (2021-10-24)
+
+* fix(core): fix all version problems ([7847008](https://github.com/sourcefuse/loopback4-microservice-catalog/commit/7847008)), closes [#0](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/0)
+* feat(search): Initial code for search-lib (#381) ([bf99a13](https://github.com/sourcefuse/loopback4-microservice-catalog/commit/bf99a13)), closes [#381](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/381) [#346](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/346) [#346](https://github.com/sourcefuse/loopback4-microservice-catalog/issues/346)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2020] [SourceFuse]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# Search Library
+
+An Angular module that exports a component that can enable users to search over configured models using the search microservice provided in the sourceloop microservice catalog.
+
+## Installation
+
+First step is to clone the search folder inside the packages folder. Then navigate inside the search folder and run
+
+```sh
+ng build
+```
+
+This will create a dist folder then navigate inside the dist folder and then to search-lib and run
+
+```sh
+npm pack
+```
+
+This will create a Tar Package which can be installed by running the npm install command as follows
+
+```sh
+npm install path-of-tar/name-of-tar.tgz
+```
+
+## Usage
+
+Create a new Application using Angular CLI and import the SearchLibModule and add it to the imports array of the module. Also create a new service that implements the ISearchService interface exported by the search library. This service will be used by the exported component to make API calls whenever needed. You will have to update the providers section of your module with { provide: SEARCH_SERVICE_TOKEN, useExisting: Your_Service_Name }
+Your module will then look something like this
+
+```ts
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AppComponent} from './app.component';
+
+import {HttpClientModule} from '@angular/common/http';
+import {XComponent} from './x/x.component';
+import {ReactiveFormsModule} from '@angular/forms';
+
+import {SearchLibModule, SEARCH_SERVICE_TOKEN} from 'search-lib';
+import {SearchService} from './search.service';
+@NgModule({
+  declarations: [AppComponent, XComponent],
+  imports: [
+    BrowserModule,
+    SearchLibModule, //import SearchLibModule
+    HttpClientModule,
+    ReactiveFormsModule,
+  ],
+  providers: [{provide: SEARCH_SERVICE_TOKEN, useClass: SearchService}], //Add your service here
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+### Search Service
+
+Create a new service using the Angular CLI. This service should implement ISearchService. You will have to implement searchApiRequest method which should return Observable<T[]>. Here T refers to the type of data returned from the search microservice. If you are using the default settings for the search microservice you can use IDefaultReturnType interface, else you need to pass your own return type interface.
+searchApiRequest receives two parameters - requestParameters: ISearchQuery, saveInRecents: boolean,
+
+```ts
+export interface ISearchQuery {
+  match: string;
+  limit: number | null;
+  order: string | null;
+  limitByType: boolean | null;
+  offset: number | null;
+  sources: string[] | null;
+}
+```
+
+Implementing the recentSearchApiRequest method is optional and its implementation depends on if you want recent search functionality as a part of the search suggestions dropdown
+
+### Configuration
+
+You need to provide some configuration for using the search component using its selector - '<sourceloop-search></sourceloop-search>'
+This can be provided as an Object of Configuration type as input to the component. To do so, create a property/field in your component of type Configuration<IDefaultReturnType> (IDefaultReturnType can be replaced by your own return type interface). In the constructor initialize the Configuration object with the following properties:
+
+- **displayPropertyName (keyof IDefaultReturnType/Your_Return_Type) :** This is one of the properties returned by the search microservice. It is the property whose value will be displayed in the search dropdown.
+- **models ( Array<IModel>) :** You need to provide the list of models you used in your search microservice. You also need to provide the displayName for each Model, this will be used in the search dropdown and categorize button dropdown.
+
+Apart from these there are some optional properties that you can give:
+
+- **limit (number) :** The number of results you want to display. Default value is 20.
+- **limitByType (boolean) :** Option to put limit on basis of model. Default value is false.
+- **order (Array<string>) :** Array of strings that specify the order format for the request sent to search API. Example, you want your results to be sorted on basis of name property first and then description. In this case you can give order = ["name ASC", "description DESC"]. By default order = []
+- **offset (number) :** Number of matched results to skip. Default is 0.
+- **saveInRecents (boolean) :** Option for saving the search results of the user. Default value is true.
+- **categorizeResults (boolean) :** Option for displaying results in search dropdown according to the Model they come from. Default value is true.
+- **hideRecentSearch (boolean) :** Option to provide recent search functionality. Default value is false.
+- **hideCategorizeButton (boolean) :** Option to hide the categorize button on the right of search dropdown. Default is false.
+- **saveInRecentsOnlyOnEnter (boolean) :** Option to save search query in recent searches only when user presses enter key or changes the category he/she is searching on. Default value is false.
+- **searchOnlyOnEnter (boolean) :** Option to call API to display search results only when user presses enter key. Default value is false.
+
+Your component might look something like
+
+```ts
+export class XComponent implements OnInit {
+  config: Configuration<IDefaultReturnType>;
+
+  constructor(private fb: FormBuilder) {
+    this.config = new Configuration<IDefaultReturnType>({
+      displayPropertyName: 'name',
+      models: [
+        {
+          name: 'ToDo',
+          displayName: 'List',
+        },
+        {
+          name: 'User',
+          displayName: 'Users',
+          imageUrl: 'https://picsum.photos/id/1/50',
+        },
+      ],
+      order: [`name ASC`, `description DESC`],
+    });
+  }
+
+  ngOnInit(): void {}
+}
+```
+
+Now in your template you can add the search library component selector like
+
+```ts
+<sourceloop-search [config]="config" [(ngModel)]="value"></sourceloop-search>
+```
+
+You can access the value in the search input using [(ngModel)]. You can also listen to clicked and searched events.
+Clicked event is of type ItemClickedEvent. It is emitted when user clicks one of the suggested results (including recent search sugestions). Searched event is emitted when request is made to the api when user types and relevant suggestinons are displayed. It is of type RecentSearchEvent.
+
+```ts
+type ItemClickedEvent<T> = {
+  event: MouseEvent;
+  item: T;
+};
+
+type RecentSearchEvent = {
+  event: KeyboardEvent | Event;
+  keyword: string;
+  category: 'All' | IModel;
+};
+```
+
+```html
+<sourceloop-search
+  [config]="config"
+  [(ngModel)]="value"
+  (clicked)="logItemClickedEvent($event)"
+  (searched)="logRecentSearchEvent($event)"
+  disabled="false"
+></sourceloop-search>
+```

package/angular.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "search-lib": {
+      "projectType": "library",
+      "root": "projects/search-lib",
+      "sourceRoot": "projects/search-lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/search-lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/search-lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/search-lib/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/search-lib/src/test.ts",
+            "tsConfig": "projects/search-lib/tsconfig.spec.json",
+            "karmaConfig": "projects/search-lib/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "search-lib"
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@sourceloop/search-client",
+  "version": "1.1.2",
+  "description": "A global search component for search microservice",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "echo \"No tests available !\"",
+    "lint": "ng lint && npm run prettier:check",
+    "prettier:cli": "prettier \"**/*.ts\" \"**/*.js\" \"**/*.html\"",
+    "prettier:check": "npm run prettier:cli -- -l",
+    "prettier:fix": "npm run prettier:cli -- --write",
+    "prepublishOnly": "ng-packagr -p projects/search-lib/package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sourcefuse/loopback4-microservice-catalog.git",
+    "directory": "packages/search"
+  },
+  "author": "Sourcefuse",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "~12.1.5",
+    "@angular/common": "~12.1.5",
+    "@angular/compiler": "~12.1.5",
+    "@angular/core": "~12.1.5",
+    "@angular/forms": "~12.1.5",
+    "@angular/platform-browser": "~12.1.5",
+    "@angular/platform-browser-dynamic": "~12.1.5",
+    "@angular/router": "~12.1.5",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.2.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~12.1.4",
+    "@angular/cli": "~12.1.3",
+    "@angular/compiler-cli": "~12.1.5",
+    "@types/jasmine": "~3.8.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "~3.8.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "ng-packagr": "^12.1.0",
+    "prettier": "^2.4.1",
+    "tslint": "^6.1.3",
+    "typescript": "~4.3.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "gitHead": "07e7c9f9ff2729c03457773f79c786a298f5157b"
+}

package/projects/search-lib/.prettierignore

@@ -0,0 +1,2 @@
+dist
+*.json

package/projects/search-lib/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

package/projects/search-lib/karma.conf.js

@@ -0,0 +1,41 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/my-lib'),
+      subdir: '.',
+      reporters: [{type: 'html'}, {type: 'text-summary'}],
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

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

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/search-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/search-lib/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@sourceloop/search-client",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/animations": "~12.1.5",
+    "@angular/common": "^12.1.5",
+    "@angular/compiler": "~12.1.5",
+    "@angular/core": "^12.1.5",
+    "@angular/forms": "~12.1.5",
+    "@angular/platform-browser": "~12.1.5",
+    "@angular/platform-browser-dynamic": "~12.1.5",
+    "@angular/router": "~12.1.5",
+    "rxjs": "~6.6.0",
+    "zone.js": "~0.11.4"
+  },
+  "dependencies": {
+    "tslib": "^2.2.0"
+  },
+  "ngPackage": {
+    "lib": {
+      "entryFile": "src/public-api.ts"
+    },
+    "dest": "../../dist/search-lib"
+  }
+}

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

@@ -0,0 +1,62 @@
+import {IDefaultReturnType, IModel} from './types';
+export class Configuration<T = IDefaultReturnType> {
+  /** property to be displayed in the results */
+  displayPropertyName: keyof T;
+  /** list of model configuration to be render and categorize search results */
+  models: IModel[];
+  /** max number of results (based on limitByType option) */
+  limit?: number;
+  /** apply limit on individual models, or on overall results */
+  limitByType?: boolean;
+  /** apply a particular ordering on results */
+  order?: string[];
+  /** offset for results in case limit is used */
+  offset?: number;
+  /** save the search query in recent history */
+  saveInRecents?: boolean;
+  /** a placeholder to display in the search box */
+  placeholder?: string;
+  /** categorize results on the basis of models provided */
+  categorizeResults?: boolean;
+  /** hides the recent search list */
+  hideRecentSearch?: boolean;
+  /** hide the category selection button */
+  hideCategorizeButton?: boolean;
+  /** save value in recent search only on enter or change in category, if false, also saved on typing */
+  saveInRecentsOnlyOnEnter?: boolean;
+  /** search only on enter key or when category is changed */
+  searchOnlyOnEnter?: boolean;
+
+  constructor(d: Configuration<T>) {
+    if (
+      d.categorizeResults === false &&
+      (d.hideCategorizeButton === false || d.hideCategorizeButton === undefined)
+    ) {
+      throw new Error(
+        'You must provide hideCategorizeButton:true as categorizeResults is false',
+      );
+    }
+    if (d.saveInRecents === false && d.saveInRecentsOnlyOnEnter === true) {
+      throw new Error(
+        'You must provide saveInRecents:true for saveInRecentsOnlyOnEnter:true',
+      );
+    }
+    this.displayPropertyName = d.displayPropertyName;
+    this.models = d.models;
+
+    this.placeholder = d.placeholder ?? 'Search';
+    /* IRequestParameters - will be given default values before call is made in case undefined/null,
+    otherwise there ! is used on which sonar gives code smell */
+    this.limit = d.limit;
+    this.limitByType = d.limitByType;
+    this.order = d.order;
+    this.offset = d.offset;
+    this.saveInRecents = d.saveInRecents;
+
+    this.categorizeResults = d.categorizeResults ?? true;
+    this.hideRecentSearch = d.hideRecentSearch ?? false;
+    this.hideCategorizeButton = d.hideCategorizeButton ?? false;
+    this.saveInRecentsOnlyOnEnter = d.saveInRecentsOnlyOnEnter ?? false;
+    this.searchOnlyOnEnter = d.searchOnlyOnEnter ?? false;
+  }
+}