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();
ciphers: CipherView[] = [];
private filter: (cipher: CipherView) => boolean = null;
constructor(private cipherService: CipherService) {
}
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() {
await this.loadCiphers();
await this.load(this.filter);
}
updateCipher(cipher: CipherView) {
@ -54,8 +66,4 @@ export class CiphersComponent implements OnInit {
addCipher() {
this.onAddCipher.emit();
}
private async loadCiphers() {
this.ciphers = await this.cipherService.getAllDecrypted();
}
}

View File

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

View File

@ -2,10 +2,17 @@ import * as template from './groupings.component.html';
import {
Component,
EventEmitter,
Input,
OnInit,
Output,
} 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 { FolderService } from 'jslib/abstractions/folder.service';
@ -14,15 +21,42 @@ import { FolderService } from 'jslib/abstractions/folder.service';
template: template,
})
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[];
collections: any[];
cipherType = CipherType;
constructor(private collectionService: CollectionService, private folderService: FolderService) {
// ctor
}
async ngOnInit() {
this.folders = await this.folderService.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">
<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-ciphers id="items"
(onCipherClicked)="viewCipher($event)"

View File

@ -15,7 +15,11 @@ import { Location } from '@angular/common';
import { CiphersComponent } from './ciphers.component';
import { CipherType } from 'jslib/enums/cipherType';
import { CipherView } from 'jslib/models/view/cipherView';
import { CollectionView } from 'jslib/models/view/collectionView';
import { FolderView } from 'jslib/models/view/folderView';
@Component({
selector: 'app-vault',
@ -100,6 +104,26 @@ export class VaultComponent implements OnInit {
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) {
const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
this.location.go(url);