Merge pull request #23 from qjon/develop

v3.1.0

Author: qjon

.gitignore

@@ -44,3 +44,4 @@ proxy.config.json
 
 .rpt2_cache
 /e2e/screenshots/
+backend/node_modules

.travis.yml

@@ -3,17 +3,17 @@ dist: trusty
 addons:
   apt:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
-      - google-chrome-stable
+    - google-chrome-stable
 language: node_js
 node_js:
-  - 6
+- 6
 before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 install:
-  - npm install
+- npm install
 script:
-  - ./node_modules/.bin/webdriver-manager update
-  - npm run ci
+- ./node_modules/.bin/webdriver-manager update
+- npm run ci

README.md

@@ -59,7 +59,7 @@ You need also init translations and animations module, because Tree needs it to
         ...
         BrowserAnimationsModule,
         TranslateModule.forRoot(),
-        TreeModule.forRoot(AppNodeService)
+        TreeModule.forRoot()
       ]
     })
 
@@ -69,7 +69,7 @@ In any html file put
 
     <ri-tree [treeModel]="treeModel"></ri-tree>
 
-In component where you create tree, you should initialize _TreeModel_, remember that in configuration object, parameter _treeId_ should be the same as in _AppNodeService_ it allows to use proper API service in each instance of node.
+In component where you create tree, you should create _TreeModel_ passing _configuration_ and _AppNodeService_.
 
     export class MyTreeComponent implements OnInit {
       public folders: Observable<ITreeData>;
@@ -88,15 +88,18 @@ In component where you create tree, you should initialize _TreeModel_, remember
       public treeModel: TreeModel;
 
 
-      public constructor(private treeModelGenerator: TreeModelGeneratorService) {
+      public constructor(private treeInitializerService: TreeInitializerService,
+                         private appNodeService: AppNodeService) {
       }
 
-      public ngOnInit() {
-        this.treeModel = this.treeModelGenerator.createTreeModel(this.treeConfiguration);
+      public ngOnInit(): void {
+        const nodes: IOuterNode[] = JSON.parse(localStorage.getItem('treeOne')) || [];
+    
+        this.treeModel = this.treeInitializerService.init(this.treeConfiguration, this.appNodeService, nodes);
       }
     }
 
-If function _createTreeModel_ has got second parameter - array of nodes, then the tree will be marked as fully loaded. It will not use _load API_ function to get new subnodes it will use only passed nodes. 
+If function _init_ has got third parameter - array of nodes, then the tree will be marked as fully loaded. It will not use _load API_ function to get new subnodes it will use only passed nodes. 
 
 ### CSS Styles
 
@@ -155,17 +158,24 @@ and _newItem.component.html_
           </span>
       </div>
     </div>
-    <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 class="tree" *ngIf="isExpanded" [@expand]>
+      <ri-tree-item *ngFor="let child of children$ | async" [node]="child; trackBy: trackByFn"
+                    [treeModel]="treeModel"
+                    [isExpanded]="treeModel.isExpanded(child)"
+                    [isSelected]="treeModel.isSelected(child)"
+                    [contextMenu]="contextMenu"></ri-tree-item>
     </div>
 
 
 Then when you create tree component in your application use such construction
 
     <rign-tree [treeModel]="treeModel">
-      <new-tree-item *ngFor="let node of treeModel.getRootNodes() | async" [node]="node" [treeModel]="treeModel" [contextMenu]="contextMenu"></new-tree-item>
+      <new-tree-item *ngFor="let node of treeModel.getRootNodes() | async; trackBy: trackByFn" 
+                      [node]="node" 
+                      [treeModel]="treeModel" 
+                      [isSelected]="treeModel.isSelected(node)"
+                      [isExpanded]="treeModel.isExpanded(node)"
+                      [contextMenu]="contextMenu"></new-tree-item>
     </rign-tree>
 
 and that is all. Please see Demo where is such example.
@@ -190,24 +200,24 @@ The _treeModel_ value is the same object that is used in _ri-tree_.
 
 Using _ngrx/store_ you can listen on below actions and do whatever you want:
 
-    TreeActionsService.TREE_SAVE_NODE
-    TreeActionsService.TREE_SAVE_NODE_ERROR
-    TreeActionsService.TREE_SAVE_NODE_SUCCESS
-    TreeActionsService.TREE_DELETE_NODE
-    TreeActionsService.TREE_DELETE_NODE_ERROR
-    TreeActionsService.TREE_DELETE_NODE_SUCCESS
-    TreeActionsService.TREE_EDIT_NODE_START
-    TreeActionsService.TREE_EXPAND_NODE
-    TreeActionsService.TREE_LOAD
-    TreeActionsService.TREE_LOAD_ERROR
-    TreeActionsService.TREE_LOAD_SUCCESS
-    TreeActionsService.TREE_LOAD_PATH
-    TreeActionsService.TREE_MOVE_NODE
-    TreeActionsService.TREE_MOVE_NODE_ERROR
-    TreeActionsService.TREE_MOVE_NODE_SUCCESS
-    TreeActionsService.TREE_REGISTER
-    TreeActionsService.TREE_SET_ALL_NODES
-    TreeActionsService.TREE_SELECT_NODE
+    TreeActionTypes.TREE_SAVE_NODE
+    TreeActionTypes.TREE_SAVE_NODE_ERROR
+    TreeActionTypes.TREE_SAVE_NODE_SUCCESS
+    TreeActionTypes.TREE_DELETE_NODE
+    TreeActionTypes.TREE_DELETE_NODE_ERROR
+    TreeActionTypes.TREE_DELETE_NODE_SUCCESS
+    TreeActionTypes.TREE_EDIT_NODE_START
+    TreeActionTypes.TREE_EXPAND_NODE
+    TreeActionTypes.TREE_LOAD
+    TreeActionTypes.TREE_LOAD_ERROR
+    TreeActionTypes.TREE_LOAD_SUCCESS
+    TreeActionTypes.TREE_LOAD_PATH
+    TreeActionTypes.TREE_MOVE_NODE
+    TreeActionTypes.TREE_MOVE_NODE_ERROR
+    TreeActionTypes.TREE_MOVE_NODE_SUCCESS
+    TreeActionTypes.TREE_REGISTER
+    TreeActionTypes.TREE_SET_ALL_NODES
+    TreeActionTypes.TREE_SELECT_NODE
 
 ## Translation
 
@@ -240,7 +250,7 @@ where:
 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)
+      .ofType(TreeActionTypes.TREE_MOVE_NODE)
       .pipe(
         filter((action: ITreeAction) => {
           return action.payload.sourceOfDroppedData === DragAndDrop.DROP_DATA_TYPE;
@@ -250,7 +260,7 @@ Then you have to create _@Effects_ similar to that one in _[treeEffects.service]
       
 but you have to replace 
 
-    .ofType(TreeActionsService.TREE_MOVE_NODE)
+    .ofType(TreeActionTypes.TREE_MOVE_NODE)
 
 to 
 
@@ -260,6 +270,19 @@ At the end do not forget to add this effects to your app.
 
 ## Changes
 
+### v3.1.0
+* change tree model initialize and injecting NodeService
+* add NestJS server with new _TreeTwoNodeBackendService_ angular service to show how Tree works with real backend (details in _Demo_ section)
+* actions and reducer
+  * change events from TreeActionService to TreeActionTypes (the first one will be removed in 4.0.0)
+  * rewrite actions from one class to many simpler classes
+  * create one type _TreeAction_ which cover all tree actions
+* rewrite _TreeItemComponent_ - improved performance and reduce code
+   * move information about expanded nodes from _TreeItemComponent_ to _store_, these cause that _isExpanded_ is now _@Input()_ property for _TreeItemComponent_
+   * _TreeItemComponent_ has new _@Input()_ property _isSelected_  
+   * small changes in expand animation
+* fix issue - when add new node parent node was expanded but not loaded
+
 ### v3.0.2
 * small fixes with interfaces
 * fix export CSS styles
@@ -346,6 +369,18 @@ Working demo with _local storage_ you can find [here](https://qjon.github.io/ang
 To run Demo locally clone this repository and run
 
     npm start
+    
+If you would like to use demo with real API then you have to make small change. 
+In _demo/srx/app/treeTwo.component.ts_ change injection from _TreeTwoNodeService_ to _TreeTwoNodeBackendService_.  
+Then run real backend written in NestJS
+
+    cd backend
+    npm install
+    npm start
+    
+and in second terminal run tree application
+
+    npm start
 
 ## License
 

backend/.nestcli.json

@@ -0,0 +1,4 @@
+{
+  "language": "ts",
+  "collection": "@nestjs/schematics"
+}

backend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

backend/README.md

@@ -0,0 +1,38 @@
+# backend
+
+## Description
+
+Backend for @angular2-tree
+
+## Installation
+
+```bash
+$ npm install
+```
+
+## Running the app
+
+```bash
+# development
+$ npm run start
+
+# watch mode
+$ npm run start:dev
+
+# production mode
+npm run start:prod
+```
+
+## Test
+
+```bash
+# unit tests
+$ npm run test
+
+# e2e tests
+$ npm run test:e2e
+
+# test coverage
+$ npm run test:cov
+```
+

backend/nodemon.json

@@ -0,0 +1,10 @@
+{
+  "watch": [
+    "src"
+  ],
+  "ext": "ts",
+  "ignore": [
+    "src/**/*.spec.ts"
+  ],
+  "exec": "ts-node -r tsconfig-paths/register src/main.ts"
+}

backend/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "Backend for @angular2-tree",
+  "author": "Rafał Ignaszewski",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write \"**/*.ts\"",
+    "start": "ts-node -r tsconfig-paths/register src/main.ts",
+    "start:dev": "nodemon",
+    "prestart:prod": "rm -rf dist && tsc",
+    "start:prod": "node dist/main.js",
+    "start:hmr": "node dist/server",
+    "test": "jest",
+    "test:cov": "jest --coverage",
+    "test:e2e": "jest --config ./test/jest-e2e.json",
+    "webpack": "webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "@nestjs/common": "^5.0.0",
+    "@nestjs/core": "^5.0.0", 
+    "fastify-formbody": "^2.0.0",
+    "reflect-metadata": "^0.1.12",
+    "rxjs": "^6.0.0",
+    "typescript": "^2.6.2"
+  },
+  "devDependencies": {
+    "@nestjs/testing": "^5.0.0",
+    "@types/express": "^4.0.39",
+    "@types/jest": "^21.1.8",
+    "@types/node": "^9.3.0",
+    "@types/supertest": "^2.0.4",
+    "jest": "^21.2.1",
+    "nodemon": "^1.14.1",
+    "prettier": "^1.11.1",
+    "supertest": "^3.0.0",
+    "ts-jest": "^21.2.4",
+    "ts-loader": "^4.1.0",
+    "ts-node": "^4.1.0",
+    "tsconfig-paths": "^3.1.1",
+    "tslint": "5.3.2",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.13",
+    "webpack-node-externals": "^1.6.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".spec.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "coverageDirectory": "../coverage"
+  }
+}

backend/src/app.module.ts

@@ -0,0 +1,10 @@
+import {Module} from '@nestjs/common';
+import {TreeModule} from './tree/tree.module';
+
+@Module({
+  imports: [TreeModule],
+  controllers: [],
+  providers: [],
+})
+export class AppModule {
+}

backend/src/app.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class AppService {
+  root(): string {
+    return 'Hello World!';
+  }
+}

backend/src/main.hmr.ts

@@ -0,0 +1,15 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+declare const module: any;
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  await app.listen(3000);
+
+  if (module.hot) {
+    module.hot.accept();
+    module.hot.dispose(() => app.close());
+  }
+}
+bootstrap();

backend/src/main.ts

@@ -0,0 +1,8 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  await app.listen(3000);
+}
+bootstrap();

backend/src/tree/tree-data.service.spec.ts

@@ -0,0 +1,15 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { TreeDataService } from './tree-data.service';
+
+describe('TreeDataService', () => {
+  let service: TreeDataService;
+  beforeAll(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [TreeDataService],
+    }).compile();
+    service = module.get<TreeDataService>(TreeDataService);
+  });
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+});