Merge pull request #7 from qjon/develop

v2.1.0

Author: qjon

.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.32.3",
+    "version": "2.1.0",
     "name": "angular2-tree"
   },
   "apps": [

README.md

@@ -7,7 +7,7 @@
 
 ## Usage
 
-Include _TreeModule_ in your application module and create Store
+Include _TreeModule_  in your application module and create Store
 
     import {TreeModule} from '@rign/angular2-tree/main';
 
@@ -22,6 +22,22 @@ Include _TreeModule_ in your application module and create Store
       ]
     })
 
+You need also init translations module, because Tree needs it to translate all labels. 
+
+    @NgModule({
+      declarations: [
+        ...
+      ],
+      imports: [
+        ...
+        TranslationModule.forRoot(),
+        TreeModule,
+        StoreModule.provideStore({trees: treeReducer})
+      ]
+    })
+    
+More information about translations you can find below in section _Translation_.
+    
 In any html file put 
 
     <rign-tree [treeModel]="treeModel"></rign-tree>
@@ -53,7 +69,8 @@ In component where you create tree, you should register _tree store_, create _Tr
         disableMoveNodes: false,
         treeId: 'tree3',
         dragZone: 'tree3',
-        dropZone: ['tree3']
+        dropZone: ['tree3'],
+        isAnimation: true     // add animation to action "expand" and "collapse"
       };
 
       public treeModel: TreeModel;
@@ -102,7 +119,7 @@ and _newItem.component.html_
          ri-draggable
          [dragZone]="treeModel.configuration.dragZone"
          [dropConfig]="{dropAllowedCssClass: 'drop-enabled', dropZone: treeModel.configuration.dropZone}"
-         [node]="node"
+         [data]="node"
     >
       <div class="col-sm-8">
         <i *ngIf="!isExpanded" (click)="expand()" class="fa fa-plus pointer"></i>
@@ -124,8 +141,10 @@ and _newItem.component.html_
           </span>
       </div>
     </div>
-    <div class="tree" *ngIf="isExpanded">
-      <new-tree-item  *ngFor="let child of children$ | async" [node]="child" [treeModel]="treeModel" [contextMenu]="contextMenu"></new-tree-item>
+    <div class="tree" [@isExpanded]="animationState" (@isExpanded.done)="onAnimationDone($event)">
+      <div *ngIf="isExpanded">
+        <new-tree-item  *ngFor="let child of children$ | async" [node]="child" [treeModel]="treeModel" [contextMenu]="contextMenu"></new-tree-item>
+      </div>
     </div>
 
 
@@ -157,9 +176,61 @@ Using _ngrx/store_ you can listen on below actions and do whatever you want:
     TreeActionsService.TREE_MOVE_NODE_ERROR
     TreeActionsService.TREE_REGISTER
 
+## Translation
+
+Tree module has configured translation for english (default language) and polish. You can add translations for other languages as it is described in [Translate Module](https://github.com/ngx-translate/core/blob/master/README.md) documentation.
+In _Tree Module_ you are able to set following labels:
+
+* RI_TREE_LBL_ADD_NODE - Add node
+* RI_TREE_LBL_EDIT_NODE - Edit node
+* RI_TREE_LBL_REMOVE_NODE - Delete node
+* RI_TREE_LBL_DROP_ZONE - Drop here to move node to root level
+
+To change language to polish you have to add these lines to your app module:
+
+    export class AppModule {
+      public constructor(translate: TranslateService) {
+        translate.use('pl');
+      }
+    }
+    
+## Drop elements on tree node
+
+Now you have new possibilities to move different elements to the tree (files or other data). To do that, you have to use _ri-draggable_ directive in following way
+
+    <div ri-draggable [dragZone]="treeModel.configuration.dragZone" [data]="your_data" [sourceType]="'YOUR_SOURCE_TYPE'">Drag element</div>  
+    
+where:
+* _your_data_ - is any object
+* _YOUR_SOURCE_TYPE_ - is any type of string which allow you to filter drop effect
+
+Then you have to create _@Effects_ similar to that one in _[treeEffects.service](src/store/treeEffects.service.ts)_or create only Observable and subscribe to it.
+
+    @Effect() move$ = this.actions$
+      .ofType(TreeActionsService.TREE_MOVE_NODE)
+      .filter((action: ITreeAction) => {
+        return action.payload.sourceOfDroppedData === DragAndDrop.DROP_DATA_TYPE;
+      }) 
+      ...
+      
+but you have to replace 
+
+    .ofType(TreeActionsService.TREE_MOVE_NODE)
+
+to 
+
+    .ofType('YOUR_SOURCE_TYPE')
+      
+At the end do not forget to add this effects to your app.
 
 ## Changes
 
+### v2.1.0
+* add translation module
+* drop elements on tree nodes 
+* update and lock of some npm package versions
+* add possibility to animate action _collapse_ and _expand_ nodes of tree, using in configuration property _isAnimation: true_
+
 ### v2.0.1
 * add [MIT LICENSE](https://github.com/qjon/angular2-tree/blob/master/LICENSE)
 
@@ -210,11 +281,6 @@ Using _ngrx/store_ you can listen on below actions and do whatever you want:
 * primary version with all features described below.
 
 
-## Demo
-
-Working demo with _local storage_ you can find [here](https://qjon.github.io/angular2-tree/).
-
-
 ## Demo
 
 Working demo with _local storage_ you can find [here](https://qjon.github.io/angular2-tree/).

demo/src/app/app.module.ts

@@ -8,6 +8,7 @@ import {TreeTwoModule} from './treeTwo/treeTwo.module';
 import {StoreModule} from '@ngrx/store';
 import {treeReducer} from '../../../main';
 import {StoreDevtoolsModule} from '@ngrx/store-devtools';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
 
 @NgModule({
   declarations: [
@@ -19,6 +20,7 @@ import {StoreDevtoolsModule} from '@ngrx/store-devtools';
     HttpModule,
     TreeTwoModule,
     TreeOneModule,
+    TranslateModule.forRoot(),
     StoreModule.provideStore({trees: treeReducer}),
     StoreDevtoolsModule.instrumentOnlyWithExtension({})
   ],
@@ -27,4 +29,7 @@ import {StoreDevtoolsModule} from '@ngrx/store-devtools';
 })
 export class AppModule {
 
+  public constructor(translate: TranslateService) {
+    translate.use('en');
+  }
 }

demo/src/app/treeOne/treeOne.component.ts

@@ -18,7 +18,8 @@ export class TreeOneComponent implements OnInit {
     disableMoveNodes: false,
     treeId: 'tree3',
     dragZone: 'tree3',
-    dropZone: ['tree3']
+    dropZone: ['tree3'],
+    isAnimation: true
   };
 
   public treeModel: TreeModel;

demo/src/app/treeTwo/newItem.component.html

@@ -4,7 +4,7 @@
      ri-draggable
      [dragZone]="treeModel.configuration.dragZone"
      [dropConfig]="{dropAllowedCssClass: 'drop-enabled', dropZone: treeModel.configuration.dropZone}"
-     [node]="node"
+     [data]="node"
 >
   <div class="col-sm-8">
     <i *ngIf="!isExpanded" (click)="expand()" class="fa fa-plus pointer"></i>

karma.conf.js

@@ -6,6 +6,7 @@ module.exports = function (config) {
     basePath: '',
     frameworks: ['jasmine', '@angular/cli'],
     plugins: [
+      require('karma-jasmine-diff-reporter'),
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
@@ -22,7 +23,7 @@ module.exports = function (config) {
     angularCli: {
       environment: 'dev'
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml', 'jasmine-diff'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

main.ts

@@ -15,20 +15,20 @@ import {ITreeState, ITreeData, ITreeAction} from './src/store/ITreeState';
 import {treeReducer} from './src/store/treeReducer';
 export {
   IApiConfig,
-  TreeModule,
-  TreeComponent,
-  ItemComponent,
-  NodeService,
-  NodeDispatcherService,
-  TreeModel,
   IAppConfig,
   IConfiguration,
   IContextMenu,
   IOuterNode,
+  ItemComponent,
+  ITreeAction,
   ITreeData,
   ITreeState,
-  ITreeAction,
+  NodeService,
+  NodeDispatcherService,
   TreeActionsService,
+  TreeComponent,
   TreeEffectsService,
-  treeReducer
+  treeReducer,
+  TreeModel,
+  TreeModule,
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rign/angular2-tree",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
@@ -9,7 +9,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "test": "./node_modules/.bin/karma --config karma.conf.js start",
-    "gh-pages" : "ng build --env=prod --base-href \"https://qjon.github.io/angular2-tree/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"[email protected]\" --no-silent"
+    "gh-pages": "ng build --env=prod --base-href \"https://qjon.github.io/angular2-tree/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"[email protected]\" --no-silent"
   },
   "repository": {
     "type": "git",
@@ -27,20 +27,21 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
-    "zone.js": "^0.8.4",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^2.0.3",
-    "core-js": "^2.4.1",
     "@ngrx/store": "^2.2.2",
+    "@ngx-translate/core": "^8.0.0",
     "angular2-contextmenu": "^0.7.7",
     "angular2-uuid": "^1.1.1",
     "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
     "font-awesome": "^4.6.3",
     "ng2-dnd": "^2.2.2",
-    "rxjs": "^5.1.0"
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.2.0",
+    "@angular/cli": "1.4.4",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
     "@ngrx/store-devtools": "^3.2.4",
@@ -56,10 +57,11 @@
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
+    "karma-jasmine-diff-reporter": "^1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "tslint": "~5.7.0",
+    "typescript": "~2.5.2"
   }
 }

src/dragAndDrop/dragAndDrop.service.spec.ts

@@ -0,0 +1,69 @@
+import {DragAndDrop} from './dragAndDrop.service';
+import {IDragElement, IDropElement} from '../interfaces/IDragAndDrop';
+
+describe('DragAndDrop', () => {
+  let service: DragAndDrop;
+  let dragElement: IDragElement;
+  let dropElement: IDropElement;
+
+  beforeEach(() => {
+    service = new DragAndDrop();
+
+    dragElement = {
+      zoneId: 'tree',
+      data: {some: 'data'},
+      type: DragAndDrop.DROP_DATA_TYPE
+    };
+
+    dropElement = {
+      zones: ['tree'],
+      data: {id: 'data-id'}
+    };
+  });
+
+  describe('static data', () => {
+    it('DROP_DATA_TYPE should be set to "TREE_NODE"', () => {
+      expect(DragAndDrop.DROP_DATA_TYPE).toBe('TREE_NODE');
+    });
+  });
+
+  describe('dragStart', () => {
+    it('should emit new drag element', () => {
+      const handler = jasmine.createSpy('handler');
+
+      service.getDragStream()
+        .subscribe(handler);
+
+      service.dragStart(dragElement);
+
+      expect(handler).toHaveBeenCalledWith(dragElement);
+    });
+  });
+
+  describe('dragEnd', () => {
+    it('should emit drop element', () => {
+      const handler = jasmine.createSpy('handler');
+
+      service.drop$
+        .subscribe(handler);
+
+      service.dragStart(dragElement);
+      service.dragEnd(dropElement);
+
+      expect(handler).toHaveBeenCalledWith({
+        dragNode: dragElement,
+        dropNode: dropElement,
+        type: DragAndDrop.DROP_DATA_TYPE
+      });
+    });
+  });
+
+  describe('getLastDragElement', () => {
+    it('should return last dragged element', () => {
+      service.dragStart(dragElement);
+
+      expect(service.getLastDragElement()).toEqual(dragElement);
+    });
+  });
+
+});