Skip to content
This repository was archived by the owner on Nov 20, 2018. It is now read-only.

Commit bec7bd7

Browse files
qjonqjon
authored
Merge pull request #10 from qjon/feature/v2.2.0
v2.2.0
2 parents e056445 + fd074d7 commit bec7bd7

32 files changed

+303
-238
lines changed

‎README.md

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
[![npm (scoped)](https://img.shields.io/npm/v/@rign/angular2-tree.svg)]()
2+
[![Build Status](https://travis-ci.org/qjon/angular2-tree.svg?branch=master)](https://travis-ci.org/qjon/angular2-tree)
3+
[![npm version](https://badge.fury.io/js/%40rign%2Fangular2-tree.svg)](https://badge.fury.io/js/%40rign%2Fangular2-tree.svg)
4+
[![npm](https://img.shields.io/npm/dm/@rign\/angular2-tree.svg)](https://img.shields.io/npm/dm/@rign\/angular2-tree.svg)
5+
[![npm](https://img.shields.io/npm/l/@rign\/angular2-tree.svg)](https://github.com/qjon/angular2-tree/blob/master/LICENSE)
6+
17
# angular2-tree
28

39
## Installation
@@ -7,7 +13,7 @@
713

814
## Usage
915

10-
Include _TreeModule_ in your application module and create Store
16+
Include _TreeModule_ in your application module and create Store with empty state and initialize Effects
1117

1218
import {TreeModule} from '@rign/angular2-tree/main';
1319

@@ -17,8 +23,9 @@ Include _TreeModule_ in your application module and create Store
1723
],
1824
imports: [
1925
...
20-
TreeModule,
21-
StoreModule.provideStore({trees: treeReducer})
26+
TreeModule.forRoot(),
27+
EffectsModule.forRoot([]),
28+
StoreModule.forRoot({})
2229
]
2330
})
2431

@@ -31,16 +38,15 @@ You need also init translations module, because Tree needs it to translate all l
3138
imports: [
3239
...
3340
TranslationModule.forRoot(),
34-
TreeModule,
35-
StoreModule.provideStore({trees: treeReducer})
41+
TreeModule.forRoot()
3642
]
3743
})
3844

3945
More information about translations you can find below in section _Translation_.
4046

4147
In any html file put
4248

43-
<rign-tree [treeModel]="treeModel"></rign-tree>
49+
<ri-tree [treeModel]="treeModel"></ri-tree>
4450

4551
Create your own loader service as it is done in example
4652

@@ -87,7 +93,7 @@ In component where you create tree, you should register _tree store_, create _Tr
8793

8894
this.store.dispatch(this.treeActions.registerTree(treeId));
8995

90-
this.folders = this.store.select('trees')
96+
this.folders = this.store.select(treeStateSelector)
9197
.map((data: ITreeState) => {
9298
return data[treeId];
9399
})
@@ -115,8 +121,8 @@ and _newItem.component.html_
115121

116122
<div class="tree-item row"
117123
[ngClass]="{'tree-item-selected': isSelected}"
118-
ri-droppable
119-
ri-draggable
124+
riDroppable
125+
riDraggable
120126
[dragZone]="treeModel.configuration.dragZone"
121127
[dropConfig]="{dropAllowedCssClass: 'drop-enabled', dropZone: treeModel.configuration.dropZone}"
122128
[data]="node"
@@ -196,7 +202,7 @@ To change language to polish you have to add these lines to your app module:
196202

197203
## Drop elements on tree node
198204

199-
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
205+
Now you have new possibilities to move different elements to the tree (files or other data). To do that, you have to use _riDraggable_ directive in following way
200206

201207
<div ri-draggable [dragZone]="treeModel.configuration.dragZone" [data]="your_data" [sourceType]="'YOUR_SOURCE_TYPE'">Drag element</div>
202208

@@ -208,9 +214,11 @@ Then you have to create _@Effects_ similar to that one in _[treeEffects.service]
208214

209215
@Effect() move$ = this.actions$
210216
.ofType(TreeActionsService.TREE_MOVE_NODE)
211-
.filter((action: ITreeAction) => {
212-
return action.payload.sourceOfDroppedData === DragAndDrop.DROP_DATA_TYPE;
213-
})
217+
.pipe(
218+
filter((action: ITreeAction) => {
219+
return action.payload.sourceOfDroppedData === DragAndDrop.DROP_DATA_TYPE;
220+
})
221+
)
214222
...
215223
216224
but you have to replace
@@ -225,6 +233,13 @@ At the end do not forget to add this effects to your app.
225233

226234
## Changes
227235

236+
### v2.2.0
237+
* add _forRoot_ static method
238+
* change translation module to _ng2-translate_
239+
* upgrade angular to verison _^5.0.0_
240+
* upgrade @ngrx/store to version ^4.1.0 (use _forFeature_ to init store and effects)
241+
* rename selector __ri-tree__
242+
228243
### v2.1.1
229244
* fix bug with adding new node to root element
230245

‎demo/src/app/app.module.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
1-
import {BrowserModule} from '@angular/platform-browser';
21
import {NgModule} from '@angular/core';
32
import {FormsModule} from '@angular/forms';
4-
import {HttpModule} from '@angular/http';
53
import {AppComponent} from './app.component';
64
import {TreeOneModule} from './treeOne/treeOne.module';
75
import {TreeTwoModule} from './treeTwo/treeTwo.module';
8-
import {StoreModule} from '@ngrx/store';
9-
import {treeReducer} from '../../../main';
106
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
11-
import {TranslateModule, TranslateService} from '@ngx-translate/core';
7+
import {TranslateModule, TranslateService} from 'ng2-translate';
8+
import {HttpClientModule} from '@angular/common/http';
9+
import {StoreModule} from '@ngrx/store';
10+
import {EffectsModule} from '@ngrx/effects';
11+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
12+
import {TreeModule} from '../../../src/tree.module';
1213

1314
@NgModule({
1415
declarations: [
1516
AppComponent
1617
],
1718
imports: [
18-
BrowserModule,
19+
BrowserAnimationsModule,
1920
FormsModule,
20-
HttpModule,
21+
HttpClientModule,
2122
TreeTwoModule,
2223
TreeOneModule,
24+
TreeModule.forRoot(),
2325
TranslateModule.forRoot(),
24-
StoreModule.provideStore({trees: treeReducer}),
25-
StoreDevtoolsModule.instrumentOnlyWithExtension({})
26+
EffectsModule.forRoot([]),
27+
StoreModule.forRoot({}),
28+
StoreDevtoolsModule.instrument()
2629
],
2730
providers: [],
2831
bootstrap: [AppComponent]

‎demo/src/app/treeOne/treeOne.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<rign-tree
1+
<ri-tree
22
[treeModel]="treeModel"
3-
></rign-tree>
3+
></ri-tree>

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
import {Component, OnInit} from '@angular/core';
2-
import {IConfiguration, IContextMenu, ITreeState, ITreeData, TreeActionsService, TreeModel, NodeDispatcherService} from '../../../../main';
2+
import {
3+
IConfiguration,
4+
IContextMenu,
5+
ITreeState,
6+
ITreeData,
7+
TreeActionsService,
8+
TreeModel,
9+
NodeDispatcherService,
10+
treeStateSelector
11+
} from '../../../../main';
312
import {Store} from '@ngrx/store';
413
import {Observable} from 'rxjs/Observable';
514
import {TreeOneNodeService} from './treeOneNode.service';
15+
import {filter, map} from 'rxjs/operators';
616

717
@Component({
818
selector: 'app-tree-one',
@@ -36,12 +46,14 @@ export class TreeOneComponent implements OnInit {
3646

3747
this.store.dispatch(this.treeActions.registerTree(treeId));
3848

39-
this.folders = this.store.select('trees')
40-
.map((data: ITreeState) => {
41-
return data[treeId];
42-
})
43-
.filter((data: ITreeData) => !!data)
44-
;
49+
this.folders = this.store.select(treeStateSelector)
50+
.pipe(
51+
map((data: ITreeState) => {
52+
return data[treeId];
53+
}),
54+
filter((data: ITreeData) => !!data)
55+
);
56+
4557
this.treeModel = new TreeModel(this.folders, this.treeConfiguration);
4658
}
4759
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="tree-item row"
22
[ngClass]="{'tree-item-selected': isSelected}"
3-
ri-droppable
4-
ri-draggable
3+
riDroppable
4+
riDraggable
55
[dragZone]="treeModel.configuration.dragZone"
66
[dropConfig]="{dropAllowedCssClass: 'drop-enabled', dropZone: treeModel.configuration.dropZone}"
77
[data]="node"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<rign-tree [treeModel]="treeModel">
1+
<ri-tree [treeModel]="treeModel">
22
<new-tree-item *ngFor="let node of treeModel.getRootNodes() | async" [node]="node" [treeModel]="treeModel" [contextMenu]="contextMenu"></new-tree-item>
3-
</rign-tree>
3+
</ri-tree>

‎demo/src/app/treeTwo/treeTwo.component.ts

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import {Component, OnInit} from '@angular/core';
2-
import {IConfiguration, IContextMenu, ITreeState, ITreeData, TreeModel, TreeActionsService, NodeDispatcherService} from '../../../../main';
2+
import {IConfiguration, IContextMenu, ITreeState, ITreeData, TreeModel, TreeActionsService, NodeDispatcherService, treeStateSelector} from '../../../../main';
33
import {Store} from '@ngrx/store';
44
import {Observable} from 'rxjs/Observable';
55
import {TreeTwoNodeService} from './treeTwoNode.service';
6+
import {filter, map} from 'rxjs/operators';
67

78
@Component({
89
selector: 'app-tree-two',
@@ -35,12 +36,14 @@ export class TreeTwoComponent implements OnInit {
3536

3637
this.store.dispatch(this.treeActions.registerTree(treeId));
3738

38-
this.folders = this.store.select('trees')
39-
.map((data: ITreeState) => {
40-
return data[treeId];
41-
})
42-
.filter((data: ITreeData) => !!data)
43-
;
39+
40+
this.folders = this.store.select(treeStateSelector)
41+
.pipe(
42+
map((data: ITreeState) => {
43+
return data[treeId];
44+
}),
45+
filter((data: ITreeData) => !!data)
46+
);
4447
this.treeModel = new TreeModel(this.folders, this.treeConfiguration);
4548
}
4649
}

‎main.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {TreeActionsService} from './src/store/treeActions.service';
1212
import {NodeDispatcherService} from './src/service/nodesDispatcher.service';
1313
import {TreeEffectsService} from './src/store/treeEffects.service';
1414
import {ITreeState, ITreeData, ITreeAction} from './src/store/ITreeState';
15-
import {treeReducer} from './src/store/treeReducer';
15+
import {treeStateSelector} from './src/store/treeReducer'
1616
export {
1717
IApiConfig,
1818
IAppConfig,
@@ -28,7 +28,7 @@ export {
2828
TreeActionsService,
2929
TreeComponent,
3030
TreeEffectsService,
31-
treeReducer,
3231
TreeModel,
3332
TreeModule,
33+
treeStateSelector
3434
}

‎package.json

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rign/angular2-tree",
3-
"version": "2.1.1",
3+
"version": "2.2.0",
44
"license": "MIT",
55
"angular-cli": {},
66
"scripts": {
@@ -18,33 +18,34 @@
1818
"main": "main",
1919
"author": "Rafal Ignaszewski <[email protected]> http://ignaszewski.pl",
2020
"dependencies": {
21-
"@angular/animations": "^4.0.0",
22-
"@angular/common": "^4.0.0",
23-
"@angular/compiler": "^4.0.0",
24-
"@angular/core": "^4.0.0",
25-
"@angular/forms": "^4.0.0",
26-
"@angular/http": "^4.0.0",
27-
"@angular/platform-browser": "^4.0.0",
28-
"@angular/platform-browser-dynamic": "^4.0.0",
29-
"@angular/router": "^4.0.0",
21+
"@angular/animations": "^5.0.0",
22+
"@angular/cdk": "^2.0.0-beta.12",
23+
"@angular/common": "^5.0.0",
24+
"@angular/compiler": "^5.0.0",
25+
"@angular/core": "^5.0.0",
26+
"@angular/forms": "^5.0.0",
27+
"@angular/http": "^5.0.0",
28+
"@angular/platform-browser": "^5.0.0",
29+
"@angular/platform-browser-dynamic": "^5.0.0",
30+
"@angular/router": "^5.0.0",
3031
"@ngrx/core": "^1.2.0",
31-
"@ngrx/effects": "^2.0.3",
32-
"@ngrx/store": "^2.2.2",
33-
"@ngx-translate/core": "^8.0.0",
34-
"angular2-contextmenu": "^0.7.7",
32+
"@ngrx/effects": "^4.1.0",
33+
"@ngrx/store": "^4.1.0",
34+
"@ngrx/store-devtools": "^4.0.0",
3535
"angular2-uuid": "^1.1.1",
3636
"bootstrap": "^3.3.7",
3737
"core-js": "^2.4.1",
3838
"font-awesome": "^4.6.3",
3939
"ng2-dnd": "^2.2.2",
40-
"rxjs": "^5.1.0",
40+
"ng2-translate": "^5.0.0",
41+
"ngx-contextmenu": "^2.0.0-beta.6",
42+
"rxjs": "^5.5.2",
4143
"zone.js": "^0.8.4"
4244
},
4345
"devDependencies": {
4446
"@angular/cli": "1.4.4",
45-
"@angular/compiler-cli": "^4.0.0",
46-
"@angular/language-service": "^4.0.0",
47-
"@ngrx/store-devtools": "^3.2.4",
47+
"@angular/compiler-cli": "^5.0.0",
48+
"@angular/language-service": "^5.0.0",
4849
"@types/jasmine": "~2.5.53",
4950
"@types/jasminewd2": "~2.0.2",
5051
"@types/node": "~6.0.60",

‎src/dragAndDrop/dragAndDrop.service.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import {Injectable} from '@angular/core';
2-
import {BehaviorSubject, Observable, Subject} from 'rxjs';
32
import {IDragAndDrop, IDragElement, IDropElement} from '../interfaces/IDragAndDrop';
3+
import {Subject} from 'rxjs/Subject';
4+
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
5+
import {Observable} from 'rxjs/Observable';
6+
import 'rxjs/add/operator/withLatestFrom';
47

58
@Injectable()
69
export class DragAndDrop {

‎src/dragAndDrop/draggable.directive.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {By} from '@angular/platform-browser';
88

99
@Component({
1010
template: `
11-
<div ri-draggable [data]="data" [dragZone]="dragZone"></div>`
11+
<div riDraggable [data]="data" [dragZone]="dragZone"></div>`
1212
})
1313
class FakeComponent {
1414
public data: any;

‎src/dragAndDrop/draggable.directive.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Directive, ElementRef, Input, OnInit, Renderer} from '@angular/core';
22
import {DragAndDrop} from './dragAndDrop.service';
33

44
@Directive({
5-
selector: '[ri-draggable]'
5+
selector: '[riDraggable]'
66
})
77
export class DraggableDirective implements OnInit {
88
@Input() data: any;
@@ -37,7 +37,7 @@ export class DraggableDirective implements OnInit {
3737
this.el.nativeElement.draggable = this.dragEnabled;
3838

3939
if (!this.data) {
40-
throw 'DraggableDirective needs data';
40+
throw new Error('DraggableDirective needs data');
4141
}
4242
}
4343
}

‎src/dragAndDrop/droppable.directive.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {DropConfig, DroppableDirective} from './droppable.directive';
88

99
@Component({
1010
template: `
11-
<div ri-droppable [data]="data" [dropConfig]="dropConfig"></div>`
11+
<div riDroppable [data]="data" [dropConfig]="dropConfig"></div>`
1212
})
1313
class FakeComponent {
1414
public data: any;

‎src/dragAndDrop/droppable.directive.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface DropConfig {
99

1010

1111
@Directive({
12-
selector: '[ri-droppable]'
12+
selector: '[riDroppable]'
1313
})
1414
export class DroppableDirective implements OnInit {
1515
@Input() data: IOuterNode;
@@ -42,7 +42,7 @@ export class DroppableDirective implements OnInit {
4242
this.initConfig();
4343

4444
if (!this.data) {
45-
throw 'DroppableDirective needs data';
45+
throw new Error('DroppableDirective needs data');
4646
}
4747
}
4848

@@ -89,7 +89,9 @@ export class DroppableDirective implements OnInit {
8989
};
9090

9191
for (const key in defaultConfig) {
92-
this.dropConfig[key] = this.dropConfig[key] || defaultConfig[key];
92+
if (defaultConfig.hasOwnProperty(key)) {
93+
this.dropConfig[key] = this.dropConfig[key] || defaultConfig[key];
94+
}
9395
}
9496
}
9597
}

0 commit comments

Comments
 (0)