some filtering logic for sends (#689)

jslib

@@ -1 +1 @@
-Subproject commit 0e9e73ce95a321ee05edbb62c50f9e1828f69c5a
+Subproject commit 9aa3cbf73d9df9a2641654270911359593bcb5c5

src/app/send/add-edit.component.html

@@ -52,6 +52,7 @@
                         </div>
                     </div>
                 </ng-container>
+                <h3 class="mt-4">{{'options' | i18n}}</h3>
                 <div class="row">
                     <div class="col-6 form-group">
                         <label for="deletionDate">{{'deletionDate' | i18n}}</label>

src/app/send/send.component.html

@@ -51,9 +51,9 @@
                 </div>
             </div>
             <!--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>
-                    <tr *ngFor="let s of sends">
+                    <tr *ngFor="let s of filteredSends">
                         <td class="table-list-icon">
                             <div class="icon" aria-hidden="true">
                                 <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type == sendType.File"></i>
@@ -96,6 +96,17 @@
                     </tr>
                 </tbody>
             </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>

src/app/send/send.component.ts

@@ -32,18 +32,25 @@ export class SendComponent implements OnInit {
     @ViewChild('sendAddEdit', { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef;
 
     sendType = SendType;
+    loaded = false;
     loading = true;
+    refreshing = false;
     expired: boolean = false;
     type: SendType = null;
     sends: SendView[] = [];
+    filteredSends: SendView[] = [];
     searchText: string;
     selectedType: SendType;
     selectedAll: boolean;
     searchPlaceholder: string;
+    filter: (cipher: SendView) => boolean;
+    searchPending = false;
 
     modal: ModalComponent = null;
     actionPromise: any;
 
+    private searchTimeout: any;
+
     constructor(private apiService: ApiService, private userService: UserService,
         private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
         private platformUtilsService: PlatformUtilsService, private environmentService: EnvironmentService) { }
@@ -51,8 +58,7 @@ export class SendComponent implements OnInit {
     async ngOnInit() {
         await this.load();
     }
-
-    async load() {
+    async load(filter: (send: SendView) => boolean = null) {
         this.loading = true;
         const userId = await this.userService.getUserId();
         const sends = await this.apiService.getSends();
@@ -66,7 +72,45 @@ export class SendComponent implements OnInit {
             }
         }
         this.sends = sendsArr;
+        this.selectAll();
         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() {
@@ -155,14 +199,23 @@ export class SendComponent implements OnInit {
     }
 
     searchTextChanged() {
-        // TODO
+        this.search(200);
     }
 
     selectAll() {
-        // TODO
+        this.clearSelections();
+        this.selectedAll = true;
+        this.applyFilter(null);
     }
 
     selectType(type: SendType) {
-        // TODO
+        this.clearSelections();
+        this.selectedType = type;
+        this.applyFilter((s) => s.type === type);
+    }
+
+    clearSelections() {
+        this.selectedAll = false;
+        this.selectedType = null;
     }
 }

src/locales/en/messages.json

@@ -3333,5 +3333,9 @@
   },
   "downloadFile": {
     "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."
   }
 }