feat: remove nodes and leafs

artemnih · Oct 3, 2021 · d088e05 · d088e05
1 parent df40934
commit d088e05
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 8 deletions.
diff --git a/projects/ngx-explorer/src/lib/common/types.ts b/projects/ngx-explorer/src/lib/common/types.ts
@@ -21,4 +21,6 @@ export interface DataProvider {
     createNode(parentData: TNode, data: TNode) : Observable<TNode>;
     renameNode(nodeInfo: TNode, newName: string): Observable<TNode>;
     renameLeaf(leafInfo: TLeaf, newName: string): Observable<TLeaf>;
+    deleteNodes(nodeInfos: TNode[]): Observable<any>;
+    deleteLeafs(leafInfos: TLeaf[]): Observable<any>;
 }
diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html
@@ -3,4 +3,5 @@
     <button (click)="createFolder()">New Folder</button>
     <button (click)="refresh()">Refresh</button>
     <button (click)="rename()">Rename</button>
+    <button (click)="remove()">Delete</button>
 </div>
diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts
@@ -41,4 +41,11 @@ export class MenuBarComponent {
         }
     }
 
+    remove() {
+        const selection = this.explorerService.selectedNodes.value;
+        if (selection.length > 0) {
+            this.explorerService.remove(selection);
+        }
+    }
+
 }
diff --git a/projects/ngx-explorer/src/lib/services/example-data.service.ts b/projects/ngx-explorer/src/lib/services/example-data.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { forkJoin, Observable, of } from 'rxjs';
 import { DataProvider, NodeContent, TLeaf, TNode } from '../common/types';
 import { v4 as uuid } from 'uuid';
 
-const mock_folders = [
+let mock_folders = [
     { id: 1, name: 'Music', path: 'music' },
     { id: 2, name: 'Movies', path: 'movies' },
     { id: 3, name: 'Books', path: 'books' },
@@ -17,7 +17,7 @@ const mock_folders = [
     { id: 18, name: 'The Beatles', path: 'music/rock/thebeatles' },
 ];
 
-const mock_files = [
+let mock_files = [
     { id: 428, name: 'notes.txt', path: '' },
     { id: 4281, name: '2.txt', path: '' },
     { id: 28, name: 'Thriller', path: 'music/rock/thebeatles/thriller' },
@@ -44,8 +44,29 @@ const mock_files = [
 })
 export class ExampleDataService implements DataProvider {
 
+    deleteNodes(nodeInfos: TNode[]): Observable<any> {
+        const results = nodeInfos.map(nodeInfo => {
+            const path = nodeInfo.path + '/';
+            mock_files = mock_files.filter(f => !f.path.startsWith(path))
+            mock_folders = mock_folders.filter(f => !f.path.startsWith(path))
+            mock_folders = mock_folders.filter(f => f.id !== nodeInfo.id);
+            return of({});
+        });
+        return forkJoin(results)
+    }
+
+    deleteLeafs(leafInfos: TLeaf[]): Observable<any> {
+        const results = leafInfos.map(leafInfo => {
+            const leaf = mock_files.find(f => f.id === leafInfo.id);
+            const index = mock_files.indexOf(leaf);
+            mock_files.splice(index, 1);
+            return of({});
+        })
+        return forkJoin(results)
+    }
+
     createNode(node: TNode, data: TNode): Observable<TNode> {
-        const path = (node?.path? node.path + '/' : '') + data.replace(/[\W_]+/g, " ");
+        const path = (node?.path ? node.path + '/' : '') + data.replace(/[\W_]+/g, " ");
         const newFolder = { path, id: uuid(), name: data };
         mock_folders.push(newFolder);
         return of(newFolder);
@@ -81,7 +102,7 @@ export class ExampleDataService implements DataProvider {
         const leaf = mock_files.find(f => f.id === leafInfo.id);
         leaf.name = newName;
         return of(leaf);
-       
+
     }
 
 }
diff --git a/projects/ngx-explorer/src/lib/services/explorer.service.ts b/projects/ngx-explorer/src/lib/services/explorer.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { BehaviorSubject, forkJoin, of } from 'rxjs';
+import { take, tap } from 'rxjs/operators';
 import { XNode, Dictionary, NodeContent } from '../common/types';
 import { Utils } from '../shared/utils';
 import { ExampleDataService } from './example-data.service';
@@ -57,7 +57,7 @@ export class ExplorerService {
 
     public rename(target: XNode, name: string) {
         const node = this.flatPointers[target.id];
-        if (node.isLeaf){
+        if (node.isLeaf) {
             this.dataService.renameLeaf(node.data, name).subscribe(() => {
                 this.refresh();
             })
@@ -68,6 +68,19 @@ export class ExplorerService {
         }
     }
 
+    public remove(selection: XNode[]) {
+        const targets = selection.map(node => this.flatPointers[node.id])
+        const nodes = targets.filter(t => !t.isLeaf).map(data => data.data);
+        const leafs = targets.filter(t => t.isLeaf).map(data => data.data);
+
+        const sub1 = nodes.length ? this.dataService.deleteNodes(nodes) : of([]);
+        const sub2 = leafs.length ? this.dataService.deleteLeafs(leafs) : of([]);
+
+        forkJoin([sub1, sub2]).subscribe(() => {
+            this.refresh();
+        });
+    }
+
 }
 
 // TODO: navigateToNode // -- later feature for left nav