feat: filtering

angular.json

@@ -192,6 +192,12 @@
           }
         }
       }
-    }},
-  "defaultProject": "explorer-app"
-}
+    }
+  },
+  "defaultProject": "explorer-app",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
+}

package.json

@@ -18,7 +18,6 @@
     "@angular/common": "~10.0.14",
     "@angular/compiler": "~10.0.14",
     "@angular/core": "~10.0.14",
-    "@angular/forms": "~10.0.14",
     "@angular/platform-browser": "~10.0.14",
     "@angular/platform-browser-dynamic": "~10.0.14",
     "@angular/router": "~10.0.14",

projects/ngx-explorer/src/lib/common/types.ts

@@ -6,12 +6,12 @@ export interface Dictionary<T> {
     [Key: string]: T;
 }
 
-export interface XNode {
+export interface INode {
     id: number;
     parentId: number;
     data: any;
     isLeaf: boolean;
-    children: XNode[];
+    children: INode[];
 }
 
 export interface IDataService<T> {

projects/ngx-explorer/src/lib/components/base-view/base-view.directive.ts

@@ -1,13 +1,13 @@
 import { Directive, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { XNode } from '../../common/types';
+import { INode } from '../../common/types';
 import { ExplorerService } from '../../services/explorer.service';
 import { HelperService } from '../../services/helper.service';
 
 @Directive()
 export class BaseView implements OnDestroy {
-    public selection: XNode[] = [];
-    public items: XNode[] = [];
+    public selection: INode[] = [];
+    public items: INode[] = [];
     protected subs = new Subscription();
 
     constructor(protected explorerService: ExplorerService, protected helperService: HelperService) {
@@ -24,7 +24,7 @@ export class BaseView implements OnDestroy {
         return this.helperService.getName(data);
     }
 
-    select(event: MouseEvent, item: XNode) {
+    select(event: MouseEvent, item: INode) {
         const selectedIndex = this.selection.findIndex(i => i === item);
         const alreadySelected = selectedIndex !== -1;
         const metaKeyPressed = event.metaKey || event.ctrlKey || event.shiftKey;
@@ -40,14 +40,14 @@ export class BaseView implements OnDestroy {
         this.explorerService.selectNodes(this.selection);
     }
 
-    open(event: MouseEvent, item: XNode) {
+    open(event: MouseEvent, item: INode) {
         const metaKeyPressed = event.metaKey || event.ctrlKey || event.shiftKey;
         if (!metaKeyPressed) {
             this.explorerService.openNode(item.id);
         }
     }
 
-    isSelected(item: XNode) {
+    isSelected(item: INode) {
         return this.selection.indexOf(item) !== -1;
     }
 

projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.html

@@ -1,4 +1,4 @@
-<div class="nxe-breadcrumbs-container">
+<div class="nxe-breadcrumbs">
     <span *ngFor="let crumb of breadcrumbs; last as last">
         <button (click)="click(crumb)" class="nxe-breadcrumb-button">{{ crumb.name }}</button>
         <span *ngIf="!last" class="nxe-breadcrumb-separator">

projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss

@@ -1,6 +1,4 @@
-.nxe-breadcrumbs-container {
-    padding: 10px;
-
+.nxe-breadcrumbs {
     .nxe-breadcrumb-button {
         cursor: pointer;
         padding: 5px 5px;

projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { XNode } from '../../common/types';
+import { INode } from '../../common/types';
 import { ExplorerService } from '../../services/explorer.service';
 import { HelperService } from '../../services/helper.service';
 
 interface Breadcrumb {
-    node: XNode;
+    node: INode;
     name: string;
 }
 
@@ -23,7 +23,7 @@ export class BreadcrumbsComponent implements OnDestroy {
         this.sub.add(this.explorerService.breadcrumbs.subscribe(n => this.buildBreadcrumbs(n)));
     }
 
-    private buildBreadcrumbs(nodes: XNode[]) {
+    private buildBreadcrumbs(nodes: INode[]) {
         // TODO: configurable home node name
         this.breadcrumbs = nodes.map(n => ({ name: this.helperService.getName(n.data) || 'Files', node: n }));
     }

projects/ngx-explorer/src/lib/components/filter/filter.component.html

@@ -0,0 +1,4 @@
+<div class="nxe-filter">
+    <input class="nxe-filter-input" type="text" #input (keyup)="onChange($event, input.value)">
+    <button class="nxe-filter-button" (click)="clear()"><i class="fa fa-times" aria-hidden="true"></i></button>
+</div>

projects/ngx-explorer/src/lib/components/filter/filter.component.scss

@@ -0,0 +1,29 @@
+.nxe-filter {
+    .nxe-filter-input {
+        border: 1px solid #ccc;
+        font-size: 1rem;
+        font-weight: 300;
+        padding: 0.25rem;
+    }
+
+    .nxe-filter-button {
+        cursor: pointer;
+        padding: 5px 2px 5px 5px;
+        border-radius: 5px;
+        background: transparent;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        margin-left: 10px;
+
+        .fa {
+            margin-right: 5px;
+            color: #555;
+        }
+
+        &:hover {
+            background-color: #d7edff;
+        }
+    }
+}

projects/ngx-explorer/src/lib/components/filter/filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-explorer/src/lib/components/filter/filter.component.ts

@@ -0,0 +1,41 @@
+import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { FILTER_STRING } from '../../injection-tokens/current-view.token';
+import { ExplorerService } from '../../services/explorer.service';
+
+@Component({
+  selector: 'nxe-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterComponent implements OnDestroy {
+  @ViewChild('input') input: ElementRef<HTMLInputElement>;
+
+  private sub = new Subscription();
+
+  constructor(@Inject(FILTER_STRING) private filter: BehaviorSubject<string>, explorerService: ExplorerService) {
+    this.sub.add(explorerService.tree.subscribe(() => {
+      this.clear();
+    }));
+  }
+
+  onChange(e: KeyboardEvent, value: string) {
+    if (e.key === 'Escape') {
+      this.input.nativeElement.value = '';
+      this.filter.next('');
+      return;
+    }
+    this.filter.next(value.trim());
+  }
+
+  clear() {
+    if (!this.input) { return; }
+    this.input.nativeElement.value = '';
+    this.filter.next('');
+  }
+
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+
+}

projects/ngx-explorer/src/lib/components/icons/icons.component.html

@@ -1,7 +1,7 @@
 <div class="nxe-icons">
     <div class="nxe-icons-backpad" (click)="emptySpaceClick()"></div>
     <div class="nxe-icons-container">
-        <div class="nxe-icons-wrapper" *ngFor="let item of items" (dblclick)="open($event, item)" (click)="select($event, item)">
+        <div class="nxe-icons-wrapper" *ngFor="let item of filteredItems" (dblclick)="open($event, item)" (click)="select($event, item)">
             <div class="nxe-icons-wrapper-inner" [ngClass]="{'nxe-icon-selected':isSelected(item)}">
                 <div class="nxe-icons-icon">
                     <i [className]="item.isLeaf ? icons.leaf : icons.node"></i>

projects/ngx-explorer/src/lib/components/icons/icons.component.ts

@@ -1,4 +1,7 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { INode } from '../../common/types';
+import { FILTER_STRING } from '../../injection-tokens/current-view.token';
 import { ExplorerService } from '../../services/explorer.service';
 import { HelperService } from '../../services/helper.service';
 import { BaseView } from '../base-view/base-view.directive';
@@ -16,9 +19,17 @@ export class IconsComponent extends BaseView {
         leaf: 'fa fa-file-o',
     };
 
-    constructor(explorerService: ExplorerService, helperService: HelperService) {
+    constructor(explorerService: ExplorerService, helperService: HelperService, @Inject(FILTER_STRING) private filter: BehaviorSubject<string>) {
         super(explorerService, helperService);
     }
 
+    get filteredItems(): INode[] {
+        const filter = this.filter.value;
+        if (!filter) {
+            return this.items;
+        }
+        return this.items.filter(i => this.helperService.getName(i.data).toLowerCase().includes(filter.toLowerCase()));
+    }
+
 }
 

projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { XNode } from '../../common/types';
+import { INode } from '../../common/types';
 import { ExplorerService } from '../../services/explorer.service';
 import { HelperService } from '../../services/helper.service';
 
@@ -18,7 +18,7 @@ export class MenuBarComponent implements OnDestroy {
     canRename = false;
 
     private sub = new Subscription();
-    private selection: XNode[] = [];
+    private selection: INode[] = [];
 
     constructor(private explorerService: ExplorerService, private helperService: HelperService) {
         this.sub.add(this.explorerService.selectedNodes.subscribe(n => {

projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.html

@@ -3,6 +3,6 @@
         <nxe-breadcrumbs></nxe-breadcrumbs>
     </div>
     <div class="nxe-second-menu-bar-right">
-
+        <nxe-filter></nxe-filter>
     </div>
 </div>

projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.scss

@@ -1,5 +1,6 @@
 .nxe-second-menu-bar {
     display: flex;
+    padding: 10px;
 
     .nxe-second-menu-bar-left {
         flex-grow: 1;

projects/ngx-explorer/src/lib/components/tree/tree.component.ts

@@ -3,9 +3,9 @@ import { ExplorerService } from '../../services/explorer.service';
 import { filter } from 'rxjs/operators';
 import { HelperService } from '../../services/helper.service';
 import { Subscription } from 'rxjs';
-import { XNode } from '../../common/types';
+import { INode } from '../../common/types';
 
-interface TreeNode extends XNode {
+interface TreeNode extends INode {
     children: TreeNode[];
     expanded: boolean;
 }
@@ -28,32 +28,32 @@ export class TreeComponent implements OnDestroy {
         }));
     }
 
-    open(node: XNode) {
+    open(node: INode) {
         this.addExpandedNode(node.id);
         this.explorerService.openNode(node.id);
     }
 
-    expand(node: XNode) {
+    expand(node: INode) {
         this.addExpandedNode(node.id);
         this.explorerService.expandNode(node.id);
     }
 
-    collapse(node: XNode) {
+    collapse(node: INode) {
         this.removeExpandedNode(node.id);
-        let nodes: XNode;
-        this.explorerService.tree.pipe(filter(x => !!x)).subscribe(x => nodes = x);
+        let nodes: INode;
+        this.sub.add(this.explorerService.tree.pipe(filter(x => !!x)).subscribe(x => nodes = x));
         this.treeNodes = this.buildTree(nodes).children;
     }
 
-    getName(node: XNode) {
+    getName(node: INode) {
         return this.helperService.getName(node);
     }
 
     ngOnDestroy(): void {
         this.sub.unsubscribe();
     }
 
-    private buildTree(node: XNode): TreeNode {
+    private buildTree(node: INode): TreeNode {
         const treeNode = {
             id: node.id,
             parentId: node.parentId,

projects/ngx-explorer/src/lib/injection-tokens/current-view.token.ts

@@ -6,3 +6,8 @@ export const CURRENT_VIEW = new InjectionToken<BehaviorSubject<AvialableView>>('
     providedIn: 'root',
     factory: () => new BehaviorSubject(AvialableView.Icon),
 });
+
+export const FILTER_STRING = new InjectionToken<BehaviorSubject<string>>('FILTER_STRING', {
+    providedIn: 'root',
+    factory: () => new BehaviorSubject(''),
+});

projects/ngx-explorer/src/lib/ngx-explorer.module.ts

@@ -8,6 +8,7 @@ import { ListComponent } from './components/list/list.component';
 import { SecondMenuBarComponent } from './components/second-menu-bar/second-menu-bar.component';
 import { ViewSwitcherComponent } from './components/view-switcher/view-switcher.component';
 import { TreeComponent } from './components/tree/tree.component';
+import { FilterComponent } from './components/filter/filter.component';
 
 @NgModule({
   declarations: [
@@ -19,6 +20,7 @@ import { TreeComponent } from './components/tree/tree.component';
     SecondMenuBarComponent,
     ViewSwitcherComponent,
     TreeComponent,
+    FilterComponent,
   ],
   imports: [
     CommonModule
@@ -32,6 +34,7 @@ import { TreeComponent } from './components/tree/tree.component';
     SecondMenuBarComponent,
     ViewSwitcherComponent,
     TreeComponent,
+    FilterComponent
   ]
 })
 export class NgxExplorerModule { }