#75 - add quick filter to file box

src/app/components/nodes/file-box/file-box.component.html

@@ -20,13 +20,23 @@
             <ion-button (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button>
             <ion-button (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button>
 
+            <div class="buffer"></div>
+
+            <div class="filter">
+                <i class="filter-icon fa fa-search"></i>
+                <ion-input
+                    placeholder="Quick filter..."
+                    (ionChange)="onQuickFilterChange($event)"
+                ></ion-input>
+            </div>
+
             <input type="file" name="fileInput" #fileInput multiple style="display: none;" (change)="onUploadFilesChange($event)">
         </ion-buttons>
     </ion-toolbar>
     <div class="content-wrapper" (contextmenu)="onSurfaceContextMenu($event)">
         <div *ngIf="!items || !items.length" class="empty-text" (contextmenu)="onSurfaceContextMenu($event)">No files or folders.</div>
         <div *ngIf="items && items.length" class="folders">
-            <ng-container *ngFor="let item of items">
+            <ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)">
                 <div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
                     <div class="icon folder"><i class="fa fa-folder"></i></div>
                     <div class="title">{{ item.title }}</div>
@@ -34,7 +44,7 @@
             </ng-container>
         </div>
         <div *ngIf="items && items.length" class="files">
-            <ng-container *ngFor="let item of items">
+            <ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)">
                 <div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
                     <div [ngClass]="'icon ' + item.category"><i [ngClass]="categoryIcons[item.category]"></i></div>
                     <div class="title">{{ item.title }}</div>

src/app/components/nodes/file-box/file-box.component.scss

@@ -88,6 +88,19 @@ div.file-box-wrapper {
   }
 }
 
+.buffer {
+  flex: 1;
+}
+
+.filter {
+  display: flex;
+  flex-direction: row;
+
+  .filter-icon {
+    margin-top: 10px;
+  }
+}
+
 .file-box-wrapper.dark {
   .content-wrapper {
     background: #222;

src/app/components/nodes/file-box/file-box.component.ts

@@ -57,6 +57,9 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
     public fileBoxName = 'New File Box';
     public record?: FileBoxRecord;
 
+    public quickFilterValue?: string;
+    public visibleFilterItems?: FileBoxItem[];
+
     public history: FileBoxRecord[] = [];
 
     public items: FileBoxItem[] = [];
@@ -138,6 +141,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
         const children = await this.api.getFileBoxChildren(this.page.UUID, this.record.UUID);
 
         this.items = [...children, ...files];
+        this.refilter();
     }
 
     public async navigateUp() {
@@ -452,4 +456,24 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
 
         await alert.present();
     }
+
+    onQuickFilterChange(event) {
+        this.quickFilterValue = event.detail.value || undefined;
+        this.refilter();
+    }
+
+    refilter() {
+        if ( this.quickFilterValue ) {
+            let visible = [...this.items];
+            const parts = this.quickFilterValue.toLowerCase().split(/\s/);
+
+            for ( const part of parts ) {
+                visible = visible.filter(item => item.title.toLowerCase().includes(part));
+            }
+
+            this.visibleFilterItems = visible;
+        } else {
+            this.visibleFilterItems = undefined;
+        }
+    }
 }