2018-04-05 17:12:00 +02:00
|
|
|
import {
|
2020-08-17 18:14:40 +02:00
|
|
|
Directive,
|
2018-04-05 17:12:00 +02:00
|
|
|
EventEmitter,
|
|
|
|
Input,
|
|
|
|
Output,
|
|
|
|
} from '@angular/core';
|
|
|
|
|
2018-08-13 15:42:52 +02:00
|
|
|
import { SearchService } from '../../abstractions/search.service';
|
2018-04-05 17:12:00 +02:00
|
|
|
|
|
|
|
import { CipherView } from '../../models/view/cipherView';
|
|
|
|
|
2020-08-17 18:14:40 +02:00
|
|
|
@Directive()
|
2018-04-05 17:12:00 +02:00
|
|
|
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[] = [];
|
2019-03-19 16:31:53 +01:00
|
|
|
pagedCiphers: CipherView[] = [];
|
2018-04-05 17:12:00 +02:00
|
|
|
searchText: string;
|
|
|
|
searchPlaceholder: string = null;
|
2018-08-23 04:35:18 +02:00
|
|
|
filter: (cipher: CipherView) => boolean = null;
|
2020-04-03 22:32:15 +02:00
|
|
|
deleted: boolean = false;
|
2018-07-04 05:33:15 +02:00
|
|
|
|
2018-08-13 17:52:55 +02:00
|
|
|
protected searchPending = false;
|
2019-03-19 16:31:53 +01:00
|
|
|
protected didScroll = false;
|
|
|
|
protected pageSize = 100;
|
2018-04-05 17:12:00 +02:00
|
|
|
|
2018-08-13 15:42:52 +02:00
|
|
|
private searchTimeout: any = null;
|
2019-03-19 16:31:53 +01:00
|
|
|
private pagedCiphersCount = 0;
|
|
|
|
private refreshing = false;
|
2018-08-13 15:42:52 +02:00
|
|
|
|
|
|
|
constructor(protected searchService: SearchService) { }
|
2018-04-05 17:12:00 +02:00
|
|
|
|
2020-04-03 22:32:15 +02:00
|
|
|
async load(filter: (cipher: CipherView) => boolean = null, deleted: boolean = false) {
|
|
|
|
this.deleted = deleted || false;
|
2018-08-13 15:42:52 +02:00
|
|
|
await this.applyFilter(filter);
|
2018-04-05 17:12:00 +02:00
|
|
|
this.loaded = true;
|
|
|
|
}
|
|
|
|
|
2019-03-19 16:31:53 +01:00
|
|
|
loadMore() {
|
|
|
|
if (this.ciphers.length <= this.pageSize) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const pagedLength = this.pagedCiphers.length;
|
|
|
|
let pagedSize = this.pageSize;
|
|
|
|
if (this.refreshing && pagedLength === 0 && this.pagedCiphersCount > this.pageSize) {
|
|
|
|
pagedSize = this.pagedCiphersCount;
|
|
|
|
}
|
|
|
|
if (this.ciphers.length > pagedLength) {
|
|
|
|
this.pagedCiphers = this.pagedCiphers.concat(this.ciphers.slice(pagedLength, pagedLength + pagedSize));
|
|
|
|
}
|
|
|
|
this.pagedCiphersCount = this.pagedCiphers.length;
|
|
|
|
this.didScroll = this.pagedCiphers.length > this.pageSize;
|
|
|
|
}
|
|
|
|
|
2020-04-07 00:20:39 +02:00
|
|
|
async reload(filter: (cipher: CipherView) => boolean = null, deleted: boolean = false) {
|
2018-04-05 17:12:00 +02:00
|
|
|
this.loaded = false;
|
|
|
|
this.ciphers = [];
|
2020-04-07 00:20:39 +02:00
|
|
|
await this.load(filter, deleted);
|
2019-03-19 16:31:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async refresh() {
|
|
|
|
try {
|
|
|
|
this.refreshing = true;
|
2020-04-08 22:44:13 +02:00
|
|
|
await this.reload(this.filter, this.deleted);
|
2019-03-19 16:31:53 +01:00
|
|
|
} finally {
|
|
|
|
this.refreshing = false;
|
|
|
|
}
|
2018-04-05 17:12:00 +02:00
|
|
|
}
|
|
|
|
|
2018-08-13 15:42:52 +02:00
|
|
|
async applyFilter(filter: (cipher: CipherView) => boolean = null) {
|
2018-07-04 05:33:15 +02:00
|
|
|
this.filter = filter;
|
2018-08-13 17:52:55 +02:00
|
|
|
await this.search(null);
|
2018-08-13 15:42:52 +02:00
|
|
|
}
|
|
|
|
|
2018-08-13 17:52:55 +02:00
|
|
|
async search(timeout: number = null) {
|
|
|
|
this.searchPending = false;
|
2018-08-13 15:42:52 +02:00
|
|
|
if (this.searchTimeout != null) {
|
|
|
|
clearTimeout(this.searchTimeout);
|
2018-07-04 05:33:15 +02:00
|
|
|
}
|
2020-04-08 22:44:13 +02:00
|
|
|
const deletedFilter: (cipher: CipherView) => boolean = (c) => c.isDeleted === this.deleted;
|
2018-08-13 17:52:55 +02:00
|
|
|
if (timeout == null) {
|
2020-04-08 22:44:13 +02:00
|
|
|
this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], null);
|
2019-03-19 16:31:53 +01:00
|
|
|
await this.resetPaging();
|
2018-08-13 17:52:55 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.searchPending = true;
|
2018-08-13 15:42:52 +02:00
|
|
|
this.searchTimeout = setTimeout(async () => {
|
2020-04-08 22:44:13 +02:00
|
|
|
this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], null);
|
2019-03-19 16:31:53 +01:00
|
|
|
await this.resetPaging();
|
2018-08-13 17:52:55 +02:00
|
|
|
this.searchPending = false;
|
2018-08-13 15:42:52 +02:00
|
|
|
}, timeout);
|
2018-07-04 05:33:15 +02:00
|
|
|
}
|
|
|
|
|
2018-04-05 17:12:00 +02:00
|
|
|
selectCipher(cipher: CipherView) {
|
|
|
|
this.onCipherClicked.emit(cipher);
|
|
|
|
}
|
|
|
|
|
|
|
|
rightClickCipher(cipher: CipherView) {
|
|
|
|
this.onCipherRightClicked.emit(cipher);
|
|
|
|
}
|
|
|
|
|
|
|
|
addCipher() {
|
|
|
|
this.onAddCipher.emit();
|
|
|
|
}
|
|
|
|
|
|
|
|
addCipherOptions() {
|
|
|
|
this.onAddCipherOptions.emit();
|
|
|
|
}
|
2019-03-19 16:31:53 +01:00
|
|
|
|
|
|
|
isSearching() {
|
|
|
|
return !this.searchPending && this.searchService.isSearchable(this.searchText);
|
|
|
|
}
|
|
|
|
|
|
|
|
isPaging() {
|
|
|
|
const searching = this.isSearching();
|
|
|
|
if (searching && this.didScroll) {
|
|
|
|
this.resetPaging();
|
|
|
|
}
|
|
|
|
return !searching && this.ciphers.length > this.pageSize;
|
|
|
|
}
|
|
|
|
|
|
|
|
async resetPaging() {
|
|
|
|
this.pagedCiphers = [];
|
|
|
|
this.loadMore();
|
|
|
|
}
|
2018-04-05 17:12:00 +02:00
|
|
|
}
|