some filtering logic for sends (#689)
This commit is contained in:
parent
07a3d38bef
commit
0f4f541b11
2
jslib
2
jslib
|
@ -1 +1 @@
|
||||||
Subproject commit 0e9e73ce95a321ee05edbb62c50f9e1828f69c5a
|
Subproject commit 9aa3cbf73d9df9a2641654270911359593bcb5c5
|
|
@ -52,6 +52,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
<h3 class="mt-4">{{'options' | i18n}}</h3>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6 form-group">
|
<div class="col-6 form-group">
|
||||||
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
|
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
|
||||||
|
|
|
@ -51,9 +51,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--Listing Table-->
|
<!--Listing Table-->
|
||||||
<table class="table table-hover table-list" *ngIf="sends && sends.length">
|
<table class="table table-hover table-list" *ngIf="filteredSends && filteredSends.length">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr *ngFor="let s of sends">
|
<tr *ngFor="let s of filteredSends">
|
||||||
<td class="table-list-icon">
|
<td class="table-list-icon">
|
||||||
<div class="icon" aria-hidden="true">
|
<div class="icon" aria-hidden="true">
|
||||||
<i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type == sendType.File"></i>
|
<i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type == sendType.File"></i>
|
||||||
|
@ -96,6 +96,17 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div class="no-items" *ngIf="filteredSends && !filteredSends.length">
|
||||||
|
<ng-container *ngIf="!loaded">
|
||||||
|
<i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
|
||||||
|
<span class="sr-only">{{'loading' | i18n}}</span>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="loaded">
|
||||||
|
<p>{{'noSendsInList' | i18n}}</p>
|
||||||
|
<button (click)="addSend()" class="btn btn-outline-primary">
|
||||||
|
<i class="fa fa-plus fa-fw"></i>{{'createSend' | i18n}}</button>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -32,18 +32,25 @@ export class SendComponent implements OnInit {
|
||||||
@ViewChild('sendAddEdit', { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef;
|
@ViewChild('sendAddEdit', { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef;
|
||||||
|
|
||||||
sendType = SendType;
|
sendType = SendType;
|
||||||
|
loaded = false;
|
||||||
loading = true;
|
loading = true;
|
||||||
|
refreshing = false;
|
||||||
expired: boolean = false;
|
expired: boolean = false;
|
||||||
type: SendType = null;
|
type: SendType = null;
|
||||||
sends: SendView[] = [];
|
sends: SendView[] = [];
|
||||||
|
filteredSends: SendView[] = [];
|
||||||
searchText: string;
|
searchText: string;
|
||||||
selectedType: SendType;
|
selectedType: SendType;
|
||||||
selectedAll: boolean;
|
selectedAll: boolean;
|
||||||
searchPlaceholder: string;
|
searchPlaceholder: string;
|
||||||
|
filter: (cipher: SendView) => boolean;
|
||||||
|
searchPending = false;
|
||||||
|
|
||||||
modal: ModalComponent = null;
|
modal: ModalComponent = null;
|
||||||
actionPromise: any;
|
actionPromise: any;
|
||||||
|
|
||||||
|
private searchTimeout: any;
|
||||||
|
|
||||||
constructor(private apiService: ApiService, private userService: UserService,
|
constructor(private apiService: ApiService, private userService: UserService,
|
||||||
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
|
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
|
||||||
private platformUtilsService: PlatformUtilsService, private environmentService: EnvironmentService) { }
|
private platformUtilsService: PlatformUtilsService, private environmentService: EnvironmentService) { }
|
||||||
|
@ -51,8 +58,7 @@ export class SendComponent implements OnInit {
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
await this.load();
|
await this.load();
|
||||||
}
|
}
|
||||||
|
async load(filter: (send: SendView) => boolean = null) {
|
||||||
async load() {
|
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
const userId = await this.userService.getUserId();
|
const userId = await this.userService.getUserId();
|
||||||
const sends = await this.apiService.getSends();
|
const sends = await this.apiService.getSends();
|
||||||
|
@ -66,7 +72,45 @@ export class SendComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.sends = sendsArr;
|
this.sends = sendsArr;
|
||||||
|
this.selectAll();
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
this.loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async reload(filter: (send: SendView) => boolean = null) {
|
||||||
|
this.loaded = false;
|
||||||
|
this.sends = [];
|
||||||
|
await this.load(filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async refresh() {
|
||||||
|
try {
|
||||||
|
this.refreshing = true;
|
||||||
|
await this.reload(this.filter);
|
||||||
|
} finally {
|
||||||
|
this.refreshing = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async applyFilter(filter: (send: SendView) => boolean = null) {
|
||||||
|
this.filter = filter;
|
||||||
|
await this.search(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async search(timeout: number = null) {
|
||||||
|
this.searchPending = false;
|
||||||
|
if (this.searchTimeout != null) {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
}
|
||||||
|
if (timeout == null) {
|
||||||
|
this.filteredSends = this.sends.filter((s) => this.filter == null || this.filter(s));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.searchPending = true;
|
||||||
|
this.searchTimeout = setTimeout(async () => {
|
||||||
|
this.filteredSends = this.sends.filter((s) => this.filter == null || this.filter(s));
|
||||||
|
this.searchPending = false;
|
||||||
|
}, timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
addSend() {
|
addSend() {
|
||||||
|
@ -155,14 +199,23 @@ export class SendComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
searchTextChanged() {
|
searchTextChanged() {
|
||||||
// TODO
|
this.search(200);
|
||||||
}
|
}
|
||||||
|
|
||||||
selectAll() {
|
selectAll() {
|
||||||
// TODO
|
this.clearSelections();
|
||||||
|
this.selectedAll = true;
|
||||||
|
this.applyFilter(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
selectType(type: SendType) {
|
selectType(type: SendType) {
|
||||||
// TODO
|
this.clearSelections();
|
||||||
|
this.selectedType = type;
|
||||||
|
this.applyFilter((s) => s.type === type);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearSelections() {
|
||||||
|
this.selectedAll = false;
|
||||||
|
this.selectedType = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3333,5 +3333,9 @@
|
||||||
},
|
},
|
||||||
"downloadFile": {
|
"downloadFile": {
|
||||||
"message": "Download File"
|
"message": "Download File"
|
||||||
|
},
|
||||||
|
"noSendsInList": {
|
||||||
|
"message": "There are no Sends to list.",
|
||||||
|
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue