Merge pull request #6 from qjon/develop

v1.0.0

Author: qjon

.travis.yml

@@ -0,0 +1,25 @@
+sudo: required
+dist: trusty
+language: node_js
+node_js: "6.11.0"
+
+cache:
+  directories:
+    - node_modules
+
+apt:
+  sources:
+    - google-chrome
+  packages:
+    - google-chrome-stable
+    - google-chrome-beta
+
+install:
+  - npm i -g @angular/cli
+  - npm i
+  - npm test
+
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2017 The angular-translate team and Pascal Precht
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -4,6 +4,14 @@ This project is a very simple __Angular2 file manager__.
 
 ## Features
 
+### v1.0.0
+* update angular2-tree to verison 2.x.x
+* update angular to version 4.x.x
+* use ngrx/store
+* prepare events for all actions
+* update configuration: allowed file types filter for upload files, allow limit for uploaded file
+* create examples: with backend in node, without backend on local storage
+
 ### v0.5.4
 
 * fix problem with open "choose file window" 
@@ -59,37 +67,110 @@ Install npm package
 
 In your project put this line
 
-    <filemanager  [multiSelection]="isMultiSelection" (onSingleFileSelect)="selectFile($event)">Loading...</filemanager>
-
-## Override API
-
-To override endpoints to manage files and directories provide special provider in you module
-
+    <filemanager>Loading...</filemanager>
+
+### Provide configuration
+In your module add following lines with configuration
+
+    import {FileManagerModule, IFileManagerConfiguration} from '../../../main';
+    ...
+    const fileManagerConfiguration: IFileManagerConfiguration = {
+      urls: {
+        foldersUrl: '/api/folder',
+        filesUrl: /api/files,
+        folderMoveUrl: '/api/folder/move'
+      },
+      isMultiSelection: true,
+      mimeTypes: ['image/jpg', 'image/jpeg', 'image/png'],
+      maxFileSize: 50 * 1024
+    }
+    ... 
+    
+You can create a simple configuration object, it should contains a subset of below options
+
+* __urls__
+  * _foldersUrl_ - url for create (POST), delete (DELETE), edit (PUT) and get (GET) folders
+  * _filesUrl_ - url for upload (POST), edit (PUT), delete (DELETE) and get (GET) files
+  * _folderMoveUrl_ -   
+* __isMultiselection__ - allow/disallow multiselection
+* __mimeTypes__ - list of file type mimes which are allowed to upload
+* __maxFileSize__ - limit of the single file size
+
+Then you have to provide this constant as a configuration service
+   
     @NgModule({
-        ...
-        providers: [
-            ...
-            {
-                provide: 'fileManagerUrls',
-                useValue: {foldersUrl: '/api/filemanager/folder', filesUrl: '/api/filemanager/file'}
-            }
-        ]
-        ...
+      ...
+      imports: [
+        ...,
+        FileManagerModule
+      ],
+      providers: [
+        {provide: 'fileManagerConfiguration', useValue: fileManagerConfiguration}
+      ],
+      bootstrap: [AppComponent]
     })
+    export class AppModule {
+    }
+    
+### Create API service
+    
+Now you should create your own API service to communicate with backend or use existing one _FileManagerBackendApiService_.
+If you create your own API service it should have implemented _IFileManagerApi_ interface
+* _add(node: IOuterNode, parentNodeId: string): Observable<IOuterNode>;_ - create new node of the tree
+* _load(nodeId: string): Observable<IOuterNode[]>;_ - load tree branch (if nodeId is empty string it loads root level)
+* _move(srcNode: IOuterNode, targetNode: IOuterNode | null): Observable<IOuterNode>;_ - move one node (with all its sub nodes) to another parent
+* _update(node: IOuterNode): Observable<IOuterNode>;_ - update node name 
+* _remove(nodeId: string): Observable<IOuterNode>;_ - remove node
+* _cropFile(file: IOuterFile, bounds: ICropBounds): Observable<IOuterFile>;_ - crop file to provided bounds 
+* _loadFiles(nodeId: string): Observable<IOuterFile[]>;_ - load files from given node
+* _removeFile(file: IOuterFile): Observable<boolean>;_ - remove single file
+* _uploadFile(file: IOuterFile): Observable<IOuterFile>;_ - do actions with uploaded file (real upload is done in ng2-upload-file)
+
+All those actions should manipulate on two protected properties: 
+* _nodes: IOuterNode[]_ - list of all loaded nodes
+* _files: IFileDataProperties[]_ - list of files form current node 
+
+You can see two examples of that service:
+* [_FileManagerApiService_](src/store/fileManagerApi.service.ts) - works on local storage
+* [_FileManagerBackendApiService_](src/store/fileManagerBackendApi.service.ts) - works on backend (written in node)
+
+### Attach to any Effects
+
+Because of using _store_, _actions_ and _effects_ you can attach to any actions by creating your own effects service.
+You are able to connect to actions for doing something special (but this is not obligatory, this is only possibility):
+* _FileManagerActionsService.FILEMANAGER_CROP_FILE_
+* _FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS_
+* _FileManagerActionsService.FILEMANAGER_CROP_FILE_ERROR_
+* _FileManagerActionsService.FILEMANAGER_DELETE_FILE_
+* _FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS_
+* _FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION_
+* _FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS_
+* _FileManagerActionsService.FILEMANAGER_INVERSE_FILE_SELECTION_
+* _FileManagerActionsService.FILEMANAGER_LOAD_FILES_
+* _FileManagerActionsService.FILEMANAGER_LOAD_FILES_SUCCESS_
+* _FileManagerActionsService.FILEMANAGER_SELECT_ALL_
+* _FileManagerActionsService.FILEMANAGER_SELECT_FILE_
+* _FileManagerActionsService.FILEMANAGER_UNSELECT_FILE_
+* _FileManagerActionsService.FILEMANAGER_UNSELECT_ALL_
+* _FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_
+* _FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_ERROR_
+* _FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_SUCCESS_ 
 
 ## Demo
 
-To run demo you have to serve frontend and backend. To do this run:
+To run local demo you have to serve frontend and backend. To do this run:
 
 * frontend:
-    
+  * using local storage
+  
         npm start
+        
+  * or using real backend
+  
+        npm run startWithBackend
 
 * backend
 
         npm run backend
 
-## TODO
-
-* files upload progress
-* multi selection events (delete, select)
+Or you can see online [demo](https://qjon.github.io/angular2-filemanager/) with _local storage_

angular-cli.json

@@ -1,11 +1,12 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.32.3",
+    "version": "1.2.0",
     "name": "angular2-filemanager"
   },
   "apps": [
     {
+      "name": "withoutBackend",
       "root": "demo/src",
       "outDir": "dist",
       "assets": [
@@ -16,8 +17,37 @@
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
-      "test": "test.ts",
+      "test": "../../src/test.ts",
       "tsconfig": "tsconfig.json",
+      "testTsconfig": "../../src/tsconfig.spec.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "../../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../../node_modules/font-awesome/css/font-awesome.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    },
+    {
+      "name": "withBackend",
+      "root": "demo/src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "icons",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "mainWithBackend.ts",
+      "polyfills": "polyfills.ts",
+      "test": "../../src/test.ts",
+      "tsconfig": "tsconfig.json",
+      "testTsconfig": "../../src/tsconfig.spec.json",
       "prefix": "app",
       "mobile": false,
       "styles": [