Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

#75 - add quick filter to file box
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills 2021-02-04 15:39:32 -06:00
parent 53a6d6d316
commit ed81610f31
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
3 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/components/nodes/file-box/file-box.component.html
View File

@ -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>

13
src/app/components/nodes/file-box/file-box.component.scss
View File

@ -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;

24
src/app/components/nodes/file-box/file-box.component.ts
View File

@ -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;
}
}
}