diff --git a/src/app/components/nodes/file-box/file-box.component.html b/src/app/components/nodes/file-box/file-box.component.html index 3b977d2..e3af33b 100644 --- a/src/app/components/nodes/file-box/file-box.component.html +++ b/src/app/components/nodes/file-box/file-box.component.html @@ -20,13 +20,23 @@   Folder   Upload Files +
+ +
+ + +
+
No files or folders.
- +
{{ item.title }}
@@ -34,7 +44,7 @@
- +
{{ item.title }}
diff --git a/src/app/components/nodes/file-box/file-box.component.scss b/src/app/components/nodes/file-box/file-box.component.scss index 611b0c4..1475adc 100644 --- a/src/app/components/nodes/file-box/file-box.component.scss +++ b/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; diff --git a/src/app/components/nodes/file-box/file-box.component.ts b/src/app/components/nodes/file-box/file-box.component.ts index dd9ab4a..d27638d 100644 --- a/src/app/components/nodes/file-box/file-box.component.ts +++ b/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; + } + } }