feat: filter in list view

artemnih · Mar 28, 2022 · b1358ea · b1358ea
1 parent 6eb32cd
commit b1358ea
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/projects/ngx-explorer/src/lib/components/base-view/base-view.directive.ts b/projects/ngx-explorer/src/lib/components/base-view/base-view.directive.ts
@@ -1,6 +1,7 @@
-import { Directive, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Directive, Inject, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Subscription } 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';
 
@@ -10,7 +11,7 @@ export class BaseView implements OnDestroy {
     public items: INode[] = [];
     protected subs = new Subscription();
 
-    constructor(protected explorerService: ExplorerService, protected helperService: HelperService) {
+    constructor(protected explorerService: ExplorerService, protected helperService: HelperService, @Inject(FILTER_STRING) private filter: BehaviorSubject<string>) {
         this.subs.add(this.explorerService.openedNode.subscribe(nodes => {
             this.items = nodes.children;
         }));
@@ -20,6 +21,15 @@ export class BaseView implements OnDestroy {
         }));
     }
 
+
+    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()));
+    }
+
     getDisplayName(data) {
         return this.helperService.getName(data);
     }

diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.ts b/projects/ngx-explorer/src/lib/components/icons/icons.component.ts
@@ -19,17 +19,10 @@ export class IconsComponent extends BaseView {
         leaf: 'fa fa-file-o',
     };
 
-    constructor(explorerService: ExplorerService, helperService: HelperService, @Inject(FILTER_STRING) private filter: BehaviorSubject<string>) {
-        super(explorerService, helperService);
+    constructor(explorerService: ExplorerService, helperService: HelperService, @Inject(FILTER_STRING) filter: BehaviorSubject<string>) {
+        super(explorerService, helperService, filter);
     }
 
-    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()));
-    }
 
 }
 
diff --git a/projects/ngx-explorer/src/lib/components/list/list.component.html b/projects/ngx-explorer/src/lib/components/list/list.component.html
@@ -12,7 +12,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let item of items" (dblclick)="open($event, item)" (click)="select($event, item)"
+                    <tr *ngFor="let item of filteredItems" (dblclick)="open($event, item)" (click)="select($event, item)"
                         [ngClass]="{'nxe-list-row-selected':isSelected(item)}">
                         <td>
                             <span class="nxe-list-icon">

diff --git a/projects/ngx-explorer/src/lib/components/list/list.component.ts b/projects/ngx-explorer/src/lib/components/list/list.component.ts
@@ -1,4 +1,6 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+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,8 +18,8 @@ export class ListComponent extends BaseView {
     leaf: 'fa fa-file-o',
   };
 
-  constructor(explorerService: ExplorerService, helperService: HelperService) {
-    super(explorerService, helperService);
+  constructor(explorerService: ExplorerService, helperService: HelperService, @Inject(FILTER_STRING) filter: BehaviorSubject<string>) {
+    super(explorerService, helperService, filter);
   }
 
 }