feat: close folder, refresh folder

artemnih · Oct 2, 2021 · 6efefc3 · 6efefc3
1 parent b741c3c
commit 6efefc3
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 15 deletions.
diff --git a/projects/ngx-explorer/src/lib/common/types.ts b/projects/ngx-explorer/src/lib/common/types.ts
@@ -1,6 +1,8 @@
 import { Observable } from "rxjs";
 
-export type NodeContent = { files: any[], folders: any[] };
+export type TLeaf = any;
+export type TNode = any;
+export type NodeContent = { leafs: TLeaf[], nodes: TNode[] };
 
 export interface Dictionary<T> {
     [Key: string]: T;
@@ -9,11 +11,12 @@ export interface Dictionary<T> {
 export interface NxeNode {
     id: string;
     parentId: string;
-    data: any;
+    data: TNode | TLeaf;
     isLeaf: boolean;
     children: NxeNode[];
 }
 
 export interface DataProvider {
-    getNodeChildren(nodeInfo: any): Observable<NodeContent>;
+    getNodeChildren(nodeInfo: TNode): Observable<NodeContent>;
+    createNode(parentData: TNode, data: TNode) : Observable<TNode>;
 }
diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html
@@ -1,4 +1,5 @@
 <div>
     <button (click)="back()">Back</button>
+    <button (click)="createFolder()">New Folder</button>
 </div>
 <nxe-icons></nxe-icons>
diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {ExplorerService } from '../../services/explorer.service';
+import { ExplorerService } from '../../services/explorer.service';
 
 @Component({
     selector: 'nxe-explorer',
@@ -17,4 +17,15 @@ export class ExplorerComponent implements OnInit {
         this.explorerService.openNode(currentNode.parentId);
     }
 
+    createFolder() {
+        const currentNode = this.explorerService.openedNode.value;
+
+        // TODO: inject custom popup, inject custom text
+        let name = prompt("Enter new folder name");
+        if (name) {
+            this.explorerService.createNode(currentNode, name);
+        }
+    }
+
+
 }
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,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { DataProvider, NodeContent } from '../common/types';
+import { DataProvider, NodeContent, TNode } from '../common/types';
+import { v4 as uuid } from 'uuid';
 
 const mock_folders = [
     { id: 1, name: 'Music', path: 'music' },
@@ -43,23 +44,30 @@ const mock_files = [
 })
 export class ExampleDataService implements DataProvider {
 
-    getNodeChildren(folder: any): Observable<NodeContent> {
-        const folderPath = folder?.path || '';
+    createNode(node: TNode, data: TNode): Observable<TNode> {
+        const path = (node?.path? node.path + '/' : '') + data.replace(/[\W_]+/g, " ");
+        const newFolder = { path, id: uuid(), name: data };
+        mock_folders.push(newFolder);
+        return of(newFolder);
+    }
+
+    getNodeChildren(node: TNode): Observable<NodeContent> {
+        const folderPath = node?.path || '';
 
-        const folders = mock_folders.filter(f => {
+        const nodes = mock_folders.filter(f => {
             const paths = f.path.split('/');
             paths.pop();
             const filteredPath = paths.join('/');
             return filteredPath === folderPath;
         });
 
-        const files = mock_files.filter(f => {
+        const leafs = mock_files.filter(f => {
             const paths = f.path.split('/');
             paths.pop();
             const filteredPath = paths.join('/');
             return filteredPath === folderPath;
         });
 
-        return of({ files: files, folders });
+        return of({ leafs, nodes });
     }
 }
diff --git a/projects/ngx-explorer/src/lib/services/explorer.service.ts b/projects/ngx-explorer/src/lib/services/explorer.service.ts
@@ -25,22 +25,35 @@ export class ExplorerService {
 
     public openNode(nodeId: string) {
         const parent = this.flatPointers[nodeId];
+
         if (parent.isLeaf) {
-            throw new Error('Cannot open leaf node');
+            throw new Error('Cannot open leaf node'); // TODO: temp. download or open file
         }
 
         this.dataService
             .getNodeChildren(parent.data)
-            .subscribe(({ files, folders }: NodeContent) => {
-                const childrenFolders = folders.map(data => Utils.createNode(nodeId, false, data));
-                const childrenFiles = files.map(data => Utils.createNode(nodeId, true, data));
-                parent.children = childrenFolders.concat(childrenFiles);
+            .subscribe(({ leafs, nodes }: NodeContent) => {
+                const childrenNodes = nodes.map(data => Utils.createNode(nodeId, false, data));
+                const childrenLeafs = leafs.map(data => Utils.createNode(nodeId, true, data));
+                parent.children = childrenNodes.concat(childrenLeafs);
                 this.flatPointers = Utils.getHashMap(this.tree);
                 this.openedNode.next(parent);
                 // TODO: update enitre tree
                 // TODO: update selected nodes: parent node should be selected
             });
     }
+
+    public createNode(parentNode: NxeNode, name: string) {
+        const parent = this.flatPointers[parentNode.id];
+        this.dataService.createNode(parent.data, name).subscribe(() => {
+            this.refresh();
+        })
+    }
+
+    public refresh() {
+        this.openNode(this.openedNode.value.id); // TODO: temp, until left nav is done
+    }
+
 }
 
 // TODO: navigateToNode // -- later feature for left nav