group filtering

This commit is contained in:
Kyle Spearrin 2018-01-26 23:32:03 -05:00
parent f8aba3cc17
commit 375f2a1e02
5 changed files with 127 additions and 22 deletions

View File

@ -21,16 +21,28 @@ export class CiphersComponent implements OnInit {
@Output() onAddCipher = new EventEmitter(); @Output() onAddCipher = new EventEmitter();
ciphers: CipherView[] = []; ciphers: CipherView[] = [];
private filter: (cipher: CipherView) => boolean = null;
constructor(private cipherService: CipherService) { constructor(private cipherService: CipherService) {
} }
async ngOnInit() { async ngOnInit() {
await this.loadCiphers(); await this.load();
}
async load(filter: (cipher: CipherView) => boolean = null) {
this.filter = filter;
let ciphers = await this.cipherService.getAllDecrypted();
if (this.filter == null) {
this.ciphers = ciphers;
} else {
this.ciphers = ciphers.filter(this.filter);
}
} }
async refresh() { async refresh() {
await this.loadCiphers(); await this.load(this.filter);
} }
updateCipher(cipher: CipherView) { updateCipher(cipher: CipherView) {
@ -54,8 +66,4 @@ export class CiphersComponent implements OnInit {
addCipher() { addCipher() {
this.onAddCipher.emit(); this.onAddCipher.emit();
} }
private async loadCiphers() {
this.ciphers = await this.cipherService.getAllDecrypted();
}
} }

View File

@ -1,27 +1,61 @@
<div class="content"> <div class="content">
<div class="inner-content"> <div class="inner-content">
<ul> <ul>
<li><a href="#"><i class="fa fa-fw fa-spinner"></i> {{'allItems' | i18n}}</a></li> <li>
<li><a href="#"><i class="fa fa-fw fa-star"></i> {{'favorites' | i18n}}</a></li> <a href="#" appStopClick (click)="all()">
<i class="fa fa-fw fa-spinner"></i> {{'allItems' | i18n}}
</a>
</li>
<li>
<a href="#" appStopClick (click)="favorites()">
<i class="fa fa-fw fa-star"></i> {{'favorites' | i18n}}
</a>
</li>
</ul> </ul>
<h2><i class="fa fa-tag"></i> {{'types' | i18n}}</h2> <h2><i class="fa fa-tag"></i> {{'types' | i18n}}</h2>
<ul> <ul>
<li><a href="#"><i class="fa fa-fw fa-globe"></i> {{'typeLogin' | i18n}}</a></li> <li>
<li><a href="#"><i class="fa fa-fw fa-credit-card"></i> {{'typeCard' | i18n}}</a></li> <a href="#" appStopClick (click)="type(cipherType.Login)">
<li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> {{'typeIdentity' | i18n}}</a></li> <i class="fa fa-fw fa-globe"></i>
<li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> {{'typeSecureNote' | i18n}}</a></li> {{'typeLogin' | i18n}}
</a>
</li>
<li>
<a href="#" appStopClick (click)="type(cipherType.Card)">
<i class="fa fa-fw fa-credit-card"></i>
{{'typeCard' | i18n}}
</a>
</li>
<li>
<a href="#" appStopClick (click)="type(cipherType.Identity)">
<i class="fa fa-fw fa-id-card-o"></i>
{{'typeIdentity' | i18n}}
</a>
</li>
<li>
<a href="#" appStopClick (click)="type(cipherType.SecureNote)">
<i class="fa fa-fw fa-sticky-note-o"></i>
{{'typeSecureNote' | i18n}}
</a>
</li>
</ul> </ul>
<h2><i class="fa fa-folder"></i> {{'folders' | i18n}}</h2> <h2><i class="fa fa-folder"></i> {{'folders' | i18n}}</h2>
<ul class="fa-ul"> <ul class="fa-ul">
<li *ngFor="let folder of folders"> <li *ngFor="let f of folders">
<a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a> <a href="#" appStopClick (click)="folder(f)">
</li> <i class="fa-li fa fa-caret-right"></i> {{f.name}}
</ul> </a>
<h2><i class="fa fa-cubes"></i> {{'collections' | i18n}}</h2>
<ul class="fa-ul">
<li *ngFor="let collection of collections">
<a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
</li> </li>
</ul> </ul>
<div *ngIf="collections && collections.length">
<h2><i class="fa fa-cubes"></i> {{'collections' | i18n}}</h2>
<ul class="fa-ul">
<li *ngFor="let c of collections">
<a href="#" appStopClick (click)="collection(c)">
<i class="fa-li fa fa-caret-right"></i> {{c.name}}
</a>
</li>
</ul>
</div>
</div> </div>
</div> </div>

View File

@ -2,10 +2,17 @@ import * as template from './groupings.component.html';
import { import {
Component, Component,
EventEmitter,
Input, Input,
OnInit, OnInit,
Output,
} from '@angular/core'; } from '@angular/core';
import { CipherType } from 'jslib/enums/cipherType';
import { FolderView } from 'jslib/models/view/folderView';
import { CollectionView } from 'jslib/models/view/collectionView';
import { CollectionService } from 'jslib/abstractions/collection.service'; import { CollectionService } from 'jslib/abstractions/collection.service';
import { FolderService } from 'jslib/abstractions/folder.service'; import { FolderService } from 'jslib/abstractions/folder.service';
@ -14,15 +21,42 @@ import { FolderService } from 'jslib/abstractions/folder.service';
template: template, template: template,
}) })
export class GroupingsComponent implements OnInit { export class GroupingsComponent implements OnInit {
@Output() onAllClicked = new EventEmitter();
@Output() onFavoritesClicked = new EventEmitter();
@Output() onCipherTypeClicked = new EventEmitter<CipherType>();
@Output() onFolderClicked = new EventEmitter<FolderView>();
@Output() onCollectionClicked = new EventEmitter<CollectionView>();
folders: any[]; folders: any[];
collections: any[]; collections: any[];
cipherType = CipherType;
constructor(private collectionService: CollectionService, private folderService: FolderService) { constructor(private collectionService: CollectionService, private folderService: FolderService) {
// ctor
} }
async ngOnInit() { async ngOnInit() {
this.folders = await this.folderService.getAllDecrypted(); this.folders = await this.folderService.getAllDecrypted();
this.collections = await this.collectionService.getAllDecrypted(); this.collections = await this.collectionService.getAllDecrypted();
} }
all() {
this.onAllClicked.emit();
}
favorites() {
this.onFavoritesClicked.emit();
}
type(type: CipherType) {
this.onCipherTypeClicked.emit(type);
}
folder(folder: FolderView) {
this.onFolderClicked.emit(folder);
}
collection(collection: CollectionView) {
this.onCollectionClicked.emit(collection);
}
} }

View File

@ -1,5 +1,10 @@
<div id="vault"> <div id="vault">
<app-vault-groupings id="groupings"> <app-vault-groupings id="groupings"
(onAllClicked)="clearGroupingFilters()"
(onFavoritesClicked)="filterFavorites()"
(onCipherTypeClicked)="filterCipherType($event)"
(onFolderClicked)="filterFolder($event)"
(onCollectionClicked)="filterCollection($event)">
</app-vault-groupings> </app-vault-groupings>
<app-vault-ciphers id="items" <app-vault-ciphers id="items"
(onCipherClicked)="viewCipher($event)" (onCipherClicked)="viewCipher($event)"

View File

@ -15,7 +15,11 @@ import { Location } from '@angular/common';
import { CiphersComponent } from './ciphers.component'; import { CiphersComponent } from './ciphers.component';
import { CipherType } from 'jslib/enums/cipherType';
import { CipherView } from 'jslib/models/view/cipherView'; import { CipherView } from 'jslib/models/view/cipherView';
import { CollectionView } from 'jslib/models/view/collectionView';
import { FolderView } from 'jslib/models/view/folderView';
@Component({ @Component({
selector: 'app-vault', selector: 'app-vault',
@ -100,6 +104,26 @@ export class VaultComponent implements OnInit {
this.go({ action: this.action, cipherId: this.cipherId }); this.go({ action: this.action, cipherId: this.cipherId });
} }
async clearGroupingFilters() {
await this.ciphersComponent.load();
}
async filterFavorites() {
await this.ciphersComponent.load((c) => c.favorite);
}
async filterCipherType(type: CipherType) {
await this.ciphersComponent.load((c) => c.type === type);
}
async filterFolder(folder: FolderView) {
await this.ciphersComponent.load((c) => c.folderId === folder.id);
}
async filterCollection(collection: CollectionView) {
await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collection.id) > -1);
}
private go(queryParams: any) { private go(queryParams: any) {
const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString(); const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
this.location.go(url); this.location.go(url);