move groupings, ciphers, and search pipe to jslib

src/app/app.module.ts

@@ -35,7 +35,7 @@ import { StopClickDirective } from 'jslib/angular/directives/stop-click.directiv
 import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
 
 import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
-import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
+import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
 
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';

src/app/pipes/search-ciphers.pipe.ts

@@ -1,36 +0,0 @@
-import {
-    Pipe,
-    PipeTransform,
-} from '@angular/core';
-
-import { CipherView } from 'jslib/models/view/cipherView';
-
-@Pipe({
-    name: 'searchCiphers',
-})
-export class SearchCiphersPipe implements PipeTransform {
-    transform(ciphers: CipherView[], searchText: string): CipherView[] {
-        if (ciphers == null || ciphers.length === 0) {
-            return [];
-        }
-
-        if (searchText == null || searchText.length < 2) {
-            return ciphers;
-        }
-
-        searchText = searchText.toLowerCase();
-        return ciphers.filter((c) => {
-            if (c.name != null && c.name.toLowerCase().indexOf(searchText) > -1) {
-                return true;
-            }
-            if (c.subTitle != null && c.subTitle.toLowerCase().indexOf(searchText) > -1) {
-                return true;
-            }
-            if (c.login && c.login.uri != null && c.login.uri.toLowerCase().indexOf(searchText) > -1) {
-                return true;
-            }
-
-            return false;
-        });
-    }
-}

src/app/vault/ciphers.component.html

@@ -8,8 +8,8 @@
 <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)="cipherClicked(c)"
-               (contextmenu)="cipherRightClicked(c)" href="#" title="{{'viewItem' | i18n}}"
+            <a *ngFor="let c of searchedCiphers" appStopClick (click)="selectCipher(c)"
+               (contextmenu)="rightClickCipher(c)" href="#" title="{{'viewItem' | i18n}}"
                [ngClass]="{'active': c.id === activeCipherId}">
                 <app-vault-icon [cipher]="c"></app-vault-icon>
                 <span class="text">

src/app/vault/ciphers.component.ts

@@ -1,67 +1,17 @@
 import * as template from './ciphers.component.html';
 
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from '@angular/core';
+import { Component } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
 
-import { CipherView } from 'jslib/models/view/cipherView';
+import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component';
 
 @Component({
     selector: 'app-vault-ciphers',
     template: template,
 })
-export class CiphersComponent {
-    @Input() activeCipherId: string = null;
-    @Output() onCipherClicked = new EventEmitter<CipherView>();
-    @Output() onCipherRightClicked = new EventEmitter<CipherView>();
-    @Output() onAddCipher = new EventEmitter();
-    @Output() onAddCipherOptions = new EventEmitter();
-
-    loaded: boolean = false;
-    ciphers: CipherView[] = [];
-    searchText: string;
-    searchPlaceholder: string = null;
-    private filter: (cipher: CipherView) => boolean = null;
-
-    constructor(private cipherService: CipherService) { }
-
-    async load(filter: (cipher: CipherView) => boolean = null) {
-        this.filter = filter;
-        const ciphers = await this.cipherService.getAllDecrypted();
-
-        if (this.filter == null) {
-            this.ciphers = ciphers;
-        } else {
-            this.ciphers = ciphers.filter(this.filter);
-        }
-
-        this.loaded = true;
-    }
-
-    async refresh() {
-        this.loaded = false;
-        this.ciphers = [];
-        await this.load(this.filter);
-    }
-
-    cipherClicked(cipher: CipherView) {
-        this.onCipherClicked.emit(cipher);
-    }
-
-    cipherRightClicked(cipher: CipherView) {
-        this.onCipherRightClicked.emit(cipher);
-    }
-
-    addCipher() {
-        this.onAddCipher.emit();
-    }
-
-    addCipherOptions() {
-        this.onAddCipherOptions.emit();
+export class CiphersComponent extends BaseCiphersComponent {
+    constructor(cipherService: CipherService) {
+        super(cipherService);
     }
 }

src/app/vault/groupings.component.ts

@@ -1,105 +1,18 @@
 import * as template from './groupings.component.html';
 
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from '@angular/core';
-
-import { CipherType } from 'jslib/enums/cipherType';
-
-import { CollectionView } from 'jslib/models/view/collectionView';
-import { FolderView } from 'jslib/models/view/folderView';
+import { Component } from '@angular/core';
 
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 
+import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/components/groupings.component';
+
 @Component({
     selector: 'app-vault-groupings',
     template: template,
 })
-export class GroupingsComponent {
-    @Output() onAllClicked = new EventEmitter();
-    @Output() onFavoritesClicked = new EventEmitter();
-    @Output() onCipherTypeClicked = new EventEmitter<CipherType>();
-    @Output() onFolderClicked = new EventEmitter<FolderView>();
-    @Output() onAddFolder = new EventEmitter();
-    @Output() onEditFolder = new EventEmitter<FolderView>();
-    @Output() onCollectionClicked = new EventEmitter<CollectionView>();
-
-    folders: FolderView[];
-    collections: CollectionView[];
-    loaded: boolean = false;
-    cipherType = CipherType;
-    selectedAll: boolean = false;
-    selectedFavorites: boolean = false;
-    selectedType: CipherType = null;
-    selectedFolder: boolean = false;
-    selectedFolderId: string = null;
-    selectedCollectionId: string = null;
-
-    constructor(private collectionService: CollectionService, private folderService: FolderService) { }
-
-    async load() {
-        await this.loadFolders();
-        await this.loadCollections();
-        this.loaded = true;
-    }
-
-    async loadCollections() {
-        this.collections = await this.collectionService.getAllDecrypted();
-    }
-
-    async loadFolders() {
-        this.folders = await this.folderService.getAllDecrypted();
-    }
-
-    selectAll() {
-        this.clearSelections();
-        this.selectedAll = true;
-        this.onAllClicked.emit();
-    }
-
-    selectFavorites() {
-        this.clearSelections();
-        this.selectedFavorites = true;
-        this.onFavoritesClicked.emit();
-    }
-
-    selectType(type: CipherType) {
-        this.clearSelections();
-        this.selectedType = type;
-        this.onCipherTypeClicked.emit(type);
-    }
-
-    selectFolder(folder: FolderView) {
-        this.clearSelections();
-        this.selectedFolder = true;
-        this.selectedFolderId = folder.id;
-        this.onFolderClicked.emit(folder);
-    }
-
-    addFolder() {
-        this.onAddFolder.emit();
-    }
-
-    editFolder(folder: FolderView) {
-        this.onEditFolder.emit(folder);
-    }
-
-    selectCollection(collection: CollectionView) {
-        this.clearSelections();
-        this.selectedCollectionId = collection.id;
-        this.onCollectionClicked.emit(collection);
-    }
-
-    clearSelections() {
-        this.selectedAll = false;
-        this.selectedFavorites = false;
-        this.selectedType = null;
-        this.selectedFolder = false;
-        this.selectedFolderId = null;
-        this.selectedCollectionId = null;
+export class GroupingsComponent extends BaseGroupingsComponent {
+    constructor(collectionService: CollectionService, folderService: FolderService) {
+        super(collectionService, folderService);
     }
 }