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

Commit 2806b64

Browse files
qjonqjon
authored
v2.0.0
- drag and drop - ngrx/store - CI - upgrade packages
2 parents 2ecc6c8 + 175b8a0 commit 2806b64

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+1810
-1181
lines changed

‎.angular-cli.json

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@
66
},
77
"apps": [
88
{
9-
"root": "demo/src",
10-
"outDir": "dist",
9+
"root": "./demo/src",
10+
"outDir": "./dist",
1111
"assets": [
1212
"assets",
1313
"favicon.ico"
1414
],
1515
"index": "index.html",
1616
"main": "main.ts",
1717
"polyfills": "polyfills.ts",
18-
"test": "test.ts",
18+
"test": "../../src/test.ts",
1919
"tsconfig": "tsconfig.json",
20+
"testTsconfig": "../../src/tsconfig.spec.json",
2021
"prefix": "app",
2122
"styles": [
2223
"../../node_modules/bootstrap/dist/css/bootstrap.css",
@@ -31,14 +32,20 @@
3132
}
3233
}
3334
],
35+
"e2e": {
36+
"protractor": {
37+
"config": "./protractor.conf.js"
38+
}
39+
},
3440
"lint": [
3541
{
36-
"files": "src/**/*.ts",
37-
"project": "src/tsconfig.json"
42+
"project": "src/tsconfig.app.json"
43+
},
44+
{
45+
"project": "src/tsconfig.spec.json"
3846
},
3947
{
40-
"files": "e2e/**/*.ts",
41-
"project": "e2e/tsconfig.json"
48+
"project": "e2e/tsconfig.e2e.json"
4249
}
4350
],
4451
"test": {

‎.travis.yml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
sudo: required
2+
dist: trusty
3+
language: node_js
4+
node_js: "6.11.0"
5+
6+
cache:
7+
directories:
8+
- node_modules
9+
10+
apt:
11+
sources:
12+
- google-chrome
13+
packages:
14+
- google-chrome-stable
15+
- google-chrome-beta
16+
17+
install:
18+
- npm i -g @angular/cli
19+
- npm i
20+
- npm test
21+
22+
before_install:
23+
- export CHROME_BIN=chromium-browser
24+
- export DISPLAY=:99.0
25+
- sh -e /etc/init.d/xvfb start

‎README.md

Lines changed: 136 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,17 @@
11
# angular2-tree
22

3-
## Installation
4-
5-
npm i @rign/angular2-tree
6-
7-
## Changes
8-
9-
### v0.8.1
10-
11-
* fix package.json
12-
13-
### v0.8.0
14-
15-
* allow to create own template for tree item (if not specify it use default) - look in demo
16-
* input option _disableContextMenu_ to disable context menu (default: false)
17-
* update Demo - add alternative view of tree
18-
19-
### v0.7.0
20-
21-
* remove API config service (see section _Usage_)
22-
23-
### v0.6.2
24-
25-
* change name FolderService to NodeService
26-
* change params names from _dirId_ to _nodeId_
27-
* now you can use in your API paths parameter _{nodeId}_ which will be replaced on _nodeId_
28-
29-
### v0.6.1
30-
31-
* expose _ConfigService_ - it allow override urls for create, edit, and delete folder
32-
33-
### v0.6.0
3+
## Demo
344

35-
* upgrade angular/cli to version _beta.32.3_
36-
* fix demo
5+
Working demo with _local storage_ you can find [here](https://qjon.github.io/angular2-tree/).
376

38-
### v0.5.0
7+
## Installation
398

40-
* primary version with all features described below.
9+
npm i @rign/angular2-tree
10+
4111

4212
## Usage
4313

44-
Include _TreeModule_ in your application module;
14+
Include _TreeModule_ in your application module and create Store
4515

4616
import {TreeModule} from '@rign/angular2-tree/main';
4717

@@ -51,22 +21,14 @@ Include _TreeModule_ in your application module;
5121
],
5222
imports: [
5323
...
54-
TreeModule
24+
TreeModule,
25+
StoreModule.provideStore({trees: treeReducer})
5526
]
5627
})
5728

5829
In any html file put
5930

60-
<rign-tree
61-
[showAddButton]="true"
62-
[nodes]="folders"
63-
[menu]="contextMenu"
64-
(onAdd)="onAdd($event)"
65-
(onChange)="onChange($event)"
66-
(onRemove)="onRemove($event)"
67-
(onToggle)="onToggle($event)"
68-
(onSelect)="onSelect($event)"
69-
></rign-tree>
31+
<rign-tree [treeModel]="treeModel"></rign-tree>
7032

7133
Create your own loader service as it is done in example
7234

@@ -80,13 +42,53 @@ Create your own loader service as it is done in example
8042
}
8143
}
8244

83-
and use it to load data.
45+
and use it to load data. Or you can extend and rewrite all methods of that service to store your data wherever you want. See example _localStorage.service.ts_
46+
47+
48+
In component where you create tree, you should register _tree store_, create _TreeModel_ and load root tree
49+
50+
export class MyTreeComponent implements OnInit {
51+
public folders: Observable<ITreeData>;
52+
53+
public contextMenu: IContextMenu[] = [];
54+
55+
public treeConfiguration: IConfiguration = {
56+
showAddButton: true,
57+
disableMoveNodes: false,
58+
treeId: 'tree3',
59+
dragZone: 'tree3',
60+
dropZone: ['tree3']
61+
};
62+
63+
public treeModel: TreeModel;
64+
65+
public constructor(private store: Store<ITreeState>,
66+
private treeActions: TreeActionsService,
67+
private nodeDispatcherService: NodeDispatcherService,
68+
private appNodeService: AppNodeService) {
69+
}
70+
71+
public ngOnInit() {
72+
const treeId = this.treeConfiguration.treeId;
73+
this.nodeDispatcherService.register(treeId, this.appNodeService);
74+
75+
this.store.dispatch(this.treeActions.registerTree(treeId));
76+
77+
this.folders = this.store.select('trees')
78+
.map((data: ITreeState) => {
79+
return data[treeId];
80+
})
81+
.filter((data: ITreeData) => !!data)
82+
;
83+
this.treeModel = new TreeModel(this.folders, this.treeConfiguration);
84+
}
85+
}
86+
8487

8588
### Create own item template
8689

8790
Also you can use your own template to display items. You can do that when you extend _ItemComponent_
8891

89-
9092
@Component({
9193
selector: 'new-tree-item',
9294
templateUrl: './newItem.component.html',
@@ -98,72 +100,112 @@ Also you can use your own template to display items. You can do that when you ex
98100

99101
and _newItem.component.html_
100102

101-
<div class="tree-item row" (contextmenu)="onContextMenu($event, node)" [ngClass]="{'tree-item-selected': node.isSelected}">
102-
<div class="col-sm-8">
103-
<i *ngIf="!node.isExpanded()" (click)="node.expand()" class="fa fa-plus pointer"></i>
104-
<i *ngIf="node.isExpanded()" (click)="node.collapse()" class="fa fa-minus pointer"></i>
105-
<span *ngIf="!node.editMode" class="tree-item-name" (click)="node.onSelect()">{{node.name}}</span>
106-
<form name="form">
107-
<input #inputElement type="text" class="form-control" *ngIf="node.editMode" [formControl]="nameField"
108-
[(ngModel)]="node.name" name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
109-
</form>
110-
</div>
111-
<div class="col-sm-4 text-right">
103+
<div class="tree-item row"
104+
[ngClass]="{'tree-item-selected': isSelected}"
105+
ri-droppable
106+
ri-draggable
107+
[dragZone]="treeModel.configuration.dragZone"
108+
[dropConfig]="{dropAllowedCssClass: 'drop-enabled', dropZone: treeModel.configuration.dropZone}"
109+
[node]="node"
110+
>
111+
<div class="col-sm-8">
112+
<i *ngIf="!isExpanded" (click)="expand()" class="fa fa-plus pointer"></i>
113+
<i *ngIf="isExpanded" (click)="collapse()" class="fa fa-minus pointer"></i>
114+
<span *ngIf="!isEditMode" class="tree-item-name" (click)="onSelect()">{{node.name}}</span>
115+
<form name="form">
116+
<input #inputElement type="text" class="form-control" *ngIf="isEditMode" [formControl]="nameField"
117+
name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
118+
</form>
119+
</div>
120+
<div class="col-sm-4 text-right">
112121
<span class="btn-group btn-group-sm">
113-
<button class="btn btn-primary" (click)="node.setEditMode(true)" [disabled]="node.editMode">
122+
<button class="btn btn-primary" (click)="onEdit($event)" [disabled]="isEditMode">
114123
<i class="fa fa-edit"></i>
115124
</button>
116-
<button class="btn btn-danger" (click)="node.onRemove()" [disabled]="node.editMode">
125+
<button class="btn btn-danger" (click)="onDelete()" [disabled]="isEditMode">
117126
<i class="fa fa-trash"></i>
118127
</button>
119128
</span>
120-
</div>
129+
</div>
121130
</div>
122-
<div class="tree" *ngIf="node.isExpanded() && node.hasChildren()">
123-
<new-tree-item *ngFor="let child of node.children" [node]="child"></new-tree-item>
131+
<div class="tree" *ngIf="isExpanded">
132+
<new-tree-item *ngFor="let child of children$ | async" [node]="child" [treeModel]="treeModel" [contextMenu]="contextMenu"></new-tree-item>
124133
</div>
134+
125135

126136
Then when you create tree component in your application use such construction
127137

128-
<rign-tree
129-
...
130-
>
131-
<new-tree-item *ngFor="let node of treeComponent.tree.nodes" [node]="node"></new-tree-item>
138+
<rign-tree [treeModel]="treeModel">
139+
<new-tree-item *ngFor="let node of treeModel.getRootNodes() | async" [node]="node" [treeModel]="treeModel" [contextMenu]="contextMenu"></new-tree-item>
132140
</rign-tree>
133141

134142
and that is all. Please see Demo where is such example.
135143

144+
## Events(Actions)
145+
146+
Using _ngrx/store_ you can listen on below actions and do whatever you want:
147+
148+
TreeActionsService.TREE_SAVE_NODE
149+
TreeActionsService.TREE_SAVE_NODE_SUCCESS
150+
TreeActionsService.TREE_SAVE_NODE_ERROR
151+
TreeActionsService.TREE_DELETE_NODE
152+
TreeActionsService.TREE_DELETE_NODE_SUCCESS
153+
TreeActionsService.TREE_DELETE_NODE_ERROR
154+
TreeActionsService.TREE_EDIT_NODE_START
155+
TreeActionsService.TREE_EXPAND_NODE
156+
TreeActionsService.TREE_LOAD
157+
TreeActionsService.TREE_LOAD_SUCCESS
158+
TreeActionsService.TREE_LOAD_ERROR
159+
TreeActionsService.TREE_MOVE_NODE
160+
TreeActionsService.TREE_MOVE_NODE_SUCCESS
161+
TreeActionsService.TREE_MOVE_NODE_ERROR
162+
TreeActionsService.TREE_REGISTER
163+
164+
165+
## Changes
136166

137-
## Parameters
167+
### v2.0.0
168+
* use ngrx/store to store data
169+
* use actions and effects instead of events
170+
* add TravisCI configuration
171+
* remove backend example, move all functionality of demo to local storage
138172

139-
* __showAddButton__ - show/hide add button at the top
140-
* __nodes__ - list of nodes in root directory (_NodeModels[]_)
141-
* __menu__ - context menu items (_IContextMenu[]_)
173+
### v1.0.0
142174

143-
## Events
175+
* use ngrx/store
176+
* remove events ITreeItemEvents - use Actions and Effects
177+
* remove NodeModel
178+
* simplify using tree
144179

145-
* __onAdd($event)__ - fired after add new node to tree
146-
* __onChange($event)__ - fired after change name
147-
* __onSelect($event)__ - fired after selection
148-
* __onRemove($event)__ - fired after remove node
149-
* __onToggle($event)__ - fired after expand or collapse
180+
### v0.8.1
150181

151-
Each of above _$event_ parameter is _ITreeItemEvent_ which contains:
182+
* fix package.json
152183

153-
* _eventName_: string - event name
154-
* _node_: NodeModel - current node on which the event is fired
155-
* _status_: boolean - optional parameter (used in _onToggle_ event: _true_ - expand , _false_ - collapse)
156-
157-
## Demo
184+
### v0.8.0
158185

159-
In folder _demo_ you can find application which use _TreeModule_
186+
* allow to create own template for tree item (if not specify it use default) - look in demo
187+
* input option _disableContextMenu_ to disable context menu (default: false)
188+
* update Demo - add alternative view of tree
160189

161-
To run this example run in console:
162-
163-
* frontend
164-
165-
npm start
166-
167-
* backend (be sure that directory _demo/backend/data_ has permissions to write)
190+
### v0.7.0
191+
192+
* remove API config service (see section _Usage_)
193+
194+
### v0.6.2
195+
196+
* change name FolderService to NodeService
197+
* change params names from _dirId_ to _nodeId_
198+
* now you can use in your API paths parameter _{nodeId}_ which will be replaced on _nodeId_
199+
200+
### v0.6.1
201+
202+
* expose _ConfigService_ - it allow override urls for create, edit, and delete folder
168203

169-
npm run backend
204+
### v0.6.0
205+
206+
* upgrade angular/cli to version _beta.32.3_
207+
* fix demo
208+
209+
### v0.5.0
210+
211+
* primary version with all features described below.

‎demo/backend/data/.gitkeep

Whitespace-only changes.

0 commit comments

Comments
 (0)