implement search service

src/app/services.module.ts

@@ -37,6 +37,7 @@ import { FolderService } from 'jslib/services/folder.service';
 import { LockService } from 'jslib/services/lock.service';
 import { LowdbStorageService } from 'jslib/services/lowdbStorage.service';
 import { PasswordGenerationService } from 'jslib/services/passwordGeneration.service';
+import { SearchService } from 'jslib/services/search.service';
 import { SettingsService } from 'jslib/services/settings.service';
 import { StateService } from 'jslib/services/state.service';
 import { SyncService } from 'jslib/services/sync.service';
@@ -64,6 +65,7 @@ import {
     PasswordGenerationService as PasswordGenerationServiceAbstraction,
 } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from 'jslib/abstractions/platformUtils.service';
+import { SearchService as SearchServiceAbstraction } from 'jslib/abstractions/search.service';
 import { SettingsService as SettingsServiceAbstraction } from 'jslib/abstractions/settings.service';
 import { StateService as StateServiceAbstraction } from 'jslib/abstractions/state.service';
 import { StorageService as StorageServiceAbstraction } from 'jslib/abstractions/storage.service';
@@ -90,13 +92,15 @@ const apiService = new ApiService(tokenService, platformUtilsService,
 const environmentService = new EnvironmentService(apiService, storageService);
 const userService = new UserService(tokenService, storageService);
 const settingsService = new SettingsService(userService, storageService);
+export let searchService: SearchService = null;
 const cipherService = new CipherService(cryptoService, userService, settingsService,
-    apiService, storageService, i18nService, platformUtilsService);
+    apiService, storageService, i18nService, platformUtilsService, () => searchService);
 const folderService = new FolderService(cryptoService, userService, apiService, storageService,
     i18nService, cipherService);
 const collectionService = new CollectionService(cryptoService, userService, storageService, i18nService);
 const lockService = new LockService(cipherService, folderService, collectionService,
     cryptoService, platformUtilsService, storageService, messagingService, null);
+searchService = new SearchService(cipherService, platformUtilsService);
 const syncService = new SyncService(userService, apiService, settingsService,
     folderService, cipherService, cryptoService, collectionService, storageService, messagingService,
     async (expired: boolean) => messagingService.send('logout', { expired: expired }));
@@ -181,6 +185,7 @@ export function initFactory(): Function {
         { provide: StateServiceAbstraction, useValue: stateService },
         { provide: LogServiceAbstraction, useValue: logService },
         { provide: ExportServiceAbstraction, useValue: exportService },
+        { provide: SearchServiceAbstraction, useValue: searchService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/app/vault/ciphers.component.html

@@ -1,14 +1,14 @@
 <div class="header header-search">
     <div class="search">
         <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
-               [(ngModel)]="searchText" appAutofocus>
+               [(ngModel)]="searchText" (ngModelChange)="search(200)" appAutofocus>
         <i class="fa fa-search"></i>
     </div>
 </div>
 <div class="content">
-    <ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
-        <div class="list" *ngIf="searchedCiphers.length > 0">
-            <a *ngFor="let c of searchedCiphers" appStopClick (click)="selectCipher(c)"
+    <ng-container *ngIf="ciphers">
+        <div class="list" *ngIf="ciphers.length > 0">
+            <a *ngFor="let c of ciphers" appStopClick (click)="selectCipher(c)"
                (contextmenu)="rightClickCipher(c)" href="#" title="{{'viewItem' | i18n}}"
                [ngClass]="{'active': c.id === activeCipherId}">
                 <app-vault-icon [cipher]="c"></app-vault-icon>
@@ -22,7 +22,7 @@
                 <span class="detail">{{c.subTitle}}</span>
             </a>
         </div>
-        <div class="no-items" *ngIf="searchedCiphers.length === 0">
+        <div class="no-items" *ngIf="ciphers.length === 0">
             <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
             <ng-container *ngIf="loaded">
                 <i class="fa fa-frown-o fa-4x"></i>

src/app/vault/ciphers.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { CipherService } from 'jslib/abstractions/cipher.service';
+import { SearchService } from 'jslib/abstractions/search.service';
 
 import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component';
 
@@ -9,7 +9,7 @@ import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/componen
     templateUrl: 'ciphers.component.html',
 })
 export class CiphersComponent extends BaseCiphersComponent {
-    constructor(cipherService: CipherService) {
-        super(cipherService);
+    constructor(searchService: SearchService) {
+        super(searchService);
     }
 }