feat: DI

package.json

@@ -19,7 +19,6 @@
     "@angular/platform-browser": "~10.0.14",
     "@angular/platform-browser-dynamic": "~10.0.14",
     "@angular/router": "~10.0.14",
-    "ngx-explorer": "0.0.0",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2",

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

@@ -15,7 +15,7 @@ export interface XNode {
     children: XNode[];
 }
 
-export interface DataProvider {
+export interface NxeDataProvider {
     getNodeChildren(node: TNode): Observable<NodeContent>;
     createNode(parentNode: TNode, node: TNode) : Observable<TNode>;
     renameNode(node: TNode, newName: string): Observable<TNode>;

projects/ngx-explorer/src/lib/services/data-provider.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { NxeDataProvider } from "ngx-explorer";
+
+@Injectable({
+    providedIn: 'root'
+})
+export abstract class DataProvider implements NxeDataProvider {
+    abstract getNodeChildren(node: any);
+    abstract createNode(parentNode: any, node: any)
+    abstract renameNode(node: any, newName: string)
+    abstract renameLeaf(node: any, newName: string)
+    abstract deleteNodes(nodes: any[])
+    abstract deleteLeafs(nodes: any[])
+    abstract uploadFiles(node: any, files: File[])
+    abstract download(node: any)
+}

projects/ngx-explorer/src/lib/services/explorer.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, forkJoin, of } from 'rxjs';
 import { XNode, Dictionary, NodeContent } from '../common/types';
 import { Utils } from '../shared/utils';
-import { ExampleDataService } from './example-data.service';
+import { DataProvider } from './data-provider.service';
 
 @Injectable({
     providedIn: 'root'
@@ -14,7 +14,7 @@ export class ExplorerService {
     private tree = Utils.createNode();
     private flatPointers: Dictionary<XNode> = Utils.getHashMap(this.tree);
 
-    constructor(private dataService: ExampleDataService) {
+    constructor(private dataService: DataProvider) {
         this.openNode(this.tree);
     }
 

projects/ngx-explorer/src/public-api.ts

@@ -2,8 +2,10 @@
  * Public API Surface of ngx-explorer
  */
 
-export * from './lib/services/explorer.service';
+export * from './lib/common/types';
 export * from './lib/ngx-explorer.module';
+export * from './lib/services/data-provider.service';
+export * from './lib/services/explorer.service';
 export * from './lib/components/icons/icons.component';
 export * from './lib/components/explorer/explorer.component';
 export * from './lib/components/menu-bar/menu-bar.component';

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';  
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -1,27 +1,20 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
-import { NgxExplorerModule} from 'ngx-explorer';
+import { NgxExplorerModule, DataProvider } from 'ngx-explorer';
+import { DataService } from './data.service';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
     NgxExplorerModule
   ],
-  providers: [],
+  providers: [
+    { provide: DataProvider, useClass: DataService }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
-
-
-/*
-
-NgxExplorerModule.forRoot({
-  views: [ someView]
-  dataParser: someDataParser
-})
-
-*/

src/app/data.service.ts

@@ -0,0 +1,133 @@
+import { forkJoin, Observable, of, Subscriber } from 'rxjs';
+import { NxeDataProvider, NodeContent, TNode } from 'ngx-explorer'
+import { v4 as uuid } from 'uuid';
+
+let mock_folders = [
+  { id: 1, name: 'Music', path: 'music' },
+  { id: 2, name: 'Movies', path: 'movies' },
+  { id: 3, name: 'Books', path: 'books' },
+  { id: 4, name: 'Games', path: 'games' },
+  { id: 5, name: 'Rock', path: 'music/rock' },
+  { id: 6, name: 'Jazz', path: 'music/jazz' },
+  { id: 7, name: 'Classical', path: 'music/classical' },
+  { id: 15, name: 'Aerosmith', path: 'music/rock/aerosmith' },
+  { id: 16, name: 'AC/DC', path: 'music/rock/acdc' },
+  { id: 17, name: 'Led Zeppelin', path: 'music/rock/ledzeppelin' },
+  { id: 18, name: 'The Beatles', path: 'music/rock/thebeatles' },
+];
+
+let mock_files = [
+  { id: 428, name: 'notes.txt', path: '', content: 'hi, this is an example' },
+  { id: 4281, name: '2.txt', path: '', content: 'hi, this is an example' },
+  { id: 28, name: 'Thriller.txt', path: 'music/rock/thebeatles/thriller', content: 'hi, this is an example' },
+  { id: 29, name: 'Back in the U.S.S.R.txt', path: 'music/rock/thebeatles', content: 'hi, this is an example' },
+  { id: 30, name: 'All You Need Is Love.txt', path: 'music/rock/thebeatles', content: 'hi, this is an example' },
+  { id: 31, name: 'Hey Jude.txt', path: 'music/rock/ledzeppelin/heyjude', content: 'hi, this is an example' },
+  { id: 32, name: 'Rock And Roll All Nite.txt', path: 'music/rock/ledzeppelin/rockandrollallnight', content: 'hi, this is an example' },
+]
+
+export class DataService implements NxeDataProvider {
+
+  download(node: TNode): Observable<any> {
+    const file = mock_files.find(f => f.id === node.id);
+
+    const myblob = new Blob([file.content], {
+      type: 'text/plain'
+    });
+    const objectUrl = window.URL.createObjectURL(myblob);
+    const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;
+
+    a.href = objectUrl;
+    a.download = file.name;
+    document.body.appendChild(a);
+    a.click();
+
+    document.body.removeChild(a);
+    URL.revokeObjectURL(objectUrl);
+    return of(null);
+  }
+
+  uploadFiles(node: TNode, files: File[]): Observable<TNode[]> {
+    const results = [];
+
+    for (let i = 0; i < files.length; i++) {
+      const obs = new Observable((observer: Subscriber<any>): void => {
+        const file = files[i];
+        const reader = new FileReader();
+        reader.onload = function () {
+          const nodePath = node ? mock_folders.find(f => f.id === node.id).path : '';
+          const newFile = { id: uuid(), name: file.name, path: nodePath + '/' + file.name, content: reader.result as string };
+          mock_files.push(newFile);
+          console.log(mock_files);
+          observer.next(reader.result);
+          observer.complete();
+        }
+        reader.readAsText(file);
+      });
+      results.push(obs);
+    };
+
+    return forkJoin(results);
+  }
+
+  deleteNodes(nodes: TNode[]): Observable<any> {
+    const results = nodes.map(node => {
+      const path = node.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 !== node.id);
+      return of({});
+    });
+    return forkJoin(results)
+  }
+
+  deleteLeafs(nodes: TNode[]): Observable<any> {
+    const results = nodes.map(node => {
+      const leaf = mock_files.find(f => f.id === node.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 newFolder = { path, id: uuid(), name: data };
+    mock_folders.push(newFolder);
+    return of(newFolder);
+  }
+
+  getNodeChildren(node: TNode): Observable<NodeContent> {
+    const folderPath = node?.path || '';
+
+    const nodes = mock_folders.filter(f => {
+      const paths = f.path.split('/');
+      paths.pop();
+      const filteredPath = paths.join('/');
+      return filteredPath === folderPath;
+    });
+
+    const leafs = mock_files.filter(f => {
+      const paths = f.path.split('/');
+      paths.pop();
+      const filteredPath = paths.join('/');
+      return filteredPath === folderPath;
+    });
+
+    return of({ leafs, nodes });
+  }
+
+  renameNode(nodeInfo: TNode, newName: string): Observable<TNode> {
+    const node = mock_folders.find(f => f.id === nodeInfo.id);
+    node.name = newName;
+    return of(node);
+  }
+
+  renameLeaf(leafInfo: TNode, newName: string): Observable<TNode> {
+    const leaf = mock_files.find(f => f.id === leafInfo.id);
+    leaf.name = newName;
+    return of(leaf);
+
+  }
+}

src/main.ts

@@ -1,6 +1,5 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';