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

Commit f38114c

Browse files
qjonqjon
committed
Update README
1 parent f37939d commit f38114c

13 files changed

+232
-32
lines changed

‎README.md

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,68 @@
11
# angular2-tree
22

3-
## Instalation
3+
## Installation
44

5-
npm i
5+
npm i rign/angular2-tree
6+
7+
## Usage
8+
9+
Include _TreeModule_ in your application module;
10+
11+
import {TreeModule} from '@rign/angular2-tree/main';
12+
13+
@NgModule({
14+
declarations: [
15+
...
16+
],
17+
imports: [
18+
...
19+
TreeModule
20+
]
21+
})
22+
23+
In any html file put
24+
25+
<rign-tree
26+
[showAddButton]="true"
27+
[nodes]="folders"
28+
[menu]="contextMenu"
29+
(onAdd)="onAdd($event)"
30+
(onChange)="onChange($event)"
31+
(onRemove)="onRemove($event)"
32+
(onToggle)="onToggle($event)"
33+
(onSelect)="onSelect($event)"
34+
></rign-tree>
35+
36+
## Parameters
37+
38+
* __showAddButton__ - show/hide add button at the top
39+
* __nodes__ - list of nodes in root directory (_NodeModels[]_)
40+
* __menu__ - context menu items (_IContextMenu[]_)
41+
42+
## Events
43+
44+
* __onAdd($event)__ - fired after add new node to tree
45+
* __onChange($event)__ - fired after change name
46+
* __onSelect($event)__ - fired after selection
47+
* __onRemove($event)__ - fired after remove node
48+
* __onToggle($event)__ - fired after expand or collapse
49+
50+
Each of above _$event_ parameter is _ITreeItemEvent_ which contains:
51+
52+
* _eventName_: string - event name
53+
* _node_: NodeModel - current node on which the event is fired
54+
* _status_: boolean - optional parameter (used in _onToggle_ event: _true_ - expand , _false_ - collapse)
55+
56+
## Example
57+
58+
In folder example you can find application which use _TreeModule_
59+
60+
To run this example run in console:
61+
62+
* frontend
63+
64+
npm start
65+
66+
* backend (be sure that directory _backend/data_ has permissions to write)
67+
68+
npm run backend

‎angular-cli.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
"prefix": "app",
1919
"mobile": false,
2020
"styles": [
21-
"styles.css"
21+
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
22+
"../node_modules/font-awesome/css/font-awesome.css",
23+
"styles.less"
2224
],
2325
"scripts": [],
2426
"environments": {

‎backend/data/.gitkeep

Whitespace-only changes.

‎backend/index.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
var express = require('express');
2+
var bodyParser = require('body-parser');
3+
4+
var app = express();
5+
6+
var fs = require('fs');
7+
8+
var basePath = __dirname + '/data/';
9+
10+
var isDirectory = function (path) {
11+
try {
12+
var dir = fs.statSync(basePath + path);
13+
14+
return dir && dir.isDirectory();
15+
} catch (e) {
16+
return false;
17+
}
18+
};
19+
20+
app.use(bodyParser.json());
21+
22+
app.get('/folders', function (req, res) {
23+
var paths = [];
24+
var subdir = req.query.dirId || '';
25+
var items = fs.readdirSync(basePath + subdir);
26+
27+
for (var i = 0; i < items.length; i++) {
28+
var name = items[i];
29+
var stat = fs.statSync(basePath + subdir + '/' + name);
30+
if (stat && stat.isDirectory()) {
31+
var dir = {
32+
id: subdir + '/' + name,
33+
name: name,
34+
children: []
35+
};
36+
37+
paths.push(dir);
38+
}
39+
}
40+
41+
res.json(paths);
42+
43+
});
44+
45+
app.put('/folders', function (req, res) {
46+
var folder = req.body;
47+
48+
if (isDirectory(folder.id)) {
49+
var subdirs = folder.id.split('/');
50+
subdirs[subdirs.length - 1] = folder.name;
51+
var newDirName = subdirs.join('/');
52+
53+
if (isDirectory(newDirName)) {
54+
res.sendStatus(403);
55+
res.json({msg: 'Directory already exists'});
56+
}
57+
else {
58+
fs.renameSync(basePath + folder.id, basePath + newDirName);
59+
60+
if (isDirectory(newDirName)) {
61+
folder.id = newDirName;
62+
res.json(folder);
63+
} else {
64+
res.sendStatus(403);
65+
res.json({msg: 'Could not change directory name'});
66+
}
67+
}
68+
69+
} else {
70+
res.sendStatus(403);
71+
res.json({msg: 'Directory does not exist'});
72+
}
73+
74+
});
75+
76+
77+
app.post('/folders', function (req, res) {
78+
var data = req.body;
79+
var folder = data.node;
80+
var parentFolderId = data.parentNodeId;
81+
var newDirId = parentFolderId + '/' + folder.name;
82+
83+
if (!isDirectory(newDirId)) {
84+
fs.mkdirSync(basePath + newDirId);
85+
86+
if (isDirectory(newDirId)) {
87+
res.json({
88+
id: newDirId,
89+
name: folder.name,
90+
children: []
91+
});
92+
} else {
93+
res.sendStatus(403);
94+
res.json({msg: 'Directory has not been added'});
95+
}
96+
97+
} else {
98+
res.sendStatus(403);
99+
res.json({msg: 'Directory exists'});
100+
}
101+
102+
});
103+
104+
105+
app.delete('/folders', function (req, res) {
106+
var data = req.body;
107+
var folderId = data.dirId || null;
108+
109+
if (isDirectory(folderId)) {
110+
fs.rmdirSync(basePath + folderId);
111+
res.json({
112+
success: !isDirectory(folderId)
113+
});
114+
} else {
115+
res.sendStatus(403);
116+
res.json({msg: 'Directory exists'});
117+
}
118+
119+
});
120+
121+
app.listen(3000, function () {
122+
console.log('Example app listening on port 3000!');
123+
});
124+

‎example/app/app.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ri-tree
1+
<rign-tree
22
[showAddButton]="true"
33
[nodes]="folders"
44
[menu]="contextMenu"
@@ -7,4 +7,4 @@
77
(onRemove)="onRemove($event)"
88
(onToggle)="onToggle($event)"
99
(onSelect)="onSelect($event)"
10-
></ri-tree>
10+
></rign-tree>

‎example/index.html

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<title>Projects</title>
6-
<base href="/">
4+
<meta charset="utf-8">
5+
<title>Projects</title>
6+
<base href="/">
77

8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<link rel="icon" type="image/x-icon" href="favicon.ico">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
</head>
1111
<body>
12-
<app-root>Loading...</app-root>
12+
<div class="container">
13+
<h1>Angular2 - Tree</h1>
14+
15+
<app-root>Loading...</app-root>
16+
</div>
1317
</body>
1418
</html>

‎example/styles.css renamed to ‎example/styles.less

File renamed without changes.

‎package.json

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,8 @@
44
"license": "MIT",
55
"angular-cli": {},
66
"scripts": {
7-
"ng": "ng",
8-
"start": "ng serve",
9-
"lint": "tslint \"src/**/*.ts\"",
10-
"test": "ng test",
11-
"pree2e": "webdriver-manager update --standalone false --gecko false",
12-
"e2e": "protractor"
7+
"backend": "node backend/index.js",
8+
"start": "ng serve --proxy-config proxy.config.example.json"
139
},
1410
"repository": {
1511
"type": "git",

‎proxy.config.example.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"/api": {
3+
"target": "http://localhost:3000/",
4+
"pathRewrite": {
5+
"^/api/folder": "/folders"
6+
},
7+
"secure": false,
8+
"changeOrigin": true,
9+
"logLevel": "debug"
10+
}
11+
}

‎src/item/item.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
[(ngModel)]="node.name" name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
1010
</form>
1111
<div class="tree" *ngIf="node.isExpanded() && node.hasChildren()">
12-
<tree-item *ngFor="let child of node.children" [node]="child"></tree-item>
12+
<rign-tree-item *ngFor="let child of node.children" [node]="child"></rign-tree-item>
1313
</div>
1414
</div>

0 commit comments

Comments
 (0)