jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

add tree view page

pull/3/head
alex 2015-12-21 19:21:32 +03:00
parent 1606d870a2
commit 130f49d646
9 changed files with 383 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -46,7 +46,8 @@
"angular-ui-router": "~0.2.15", "angular-ui-router": "~0.2.15",
"angular-chart.js": "~0.8.8", "angular-chart.js": "~0.8.8",
"angular-chartist.js": "~3.3.12", "angular-chartist.js": "~3.3.12",
"angular-morris-chart": "~1.1.0" "angular-morris-chart": "~1.1.0",
"angular-ui-tree": "~2.12.0"
}, },
"overrides": { "overrides": {
"amcharts": { "amcharts": {

1
src/app/pages/pages.module.js
View File

@ -22,6 +22,7 @@
'BlurAdmin.pages.profile', 'BlurAdmin.pages.profile',
'BlurAdmin.pages.progressBars', 'BlurAdmin.pages.progressBars',
'BlurAdmin.pages.tables', 'BlurAdmin.pages.tables',
'BlurAdmin.pages.tree',
'BlurAdmin.pages.typography' 'BlurAdmin.pages.typography'
]) ])
.config(routeConfig); .config(routeConfig);

80
src/app/pages/tree/tree.html
View File

@ -1,10 +1,72 @@
<!DOCTYPE html> <div>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body> <script type="text/ng-template" id="nodes_renderer.html">
</html> <div ui-tree-handle class="tree-node tree-node-content" ng-class="{'selected' : this.selected}"
ng-click="select(this)">
<a ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><i class="control"
ng-class="{
'ion-chevron-right': collapsed,
'ion-chevron-down': !collapsed
}"></i></a>
<i class="control ion-document" ng-if="!node.nodes || node.nodes.length < 1"></i>
{{node.title}}
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ng-show="visible(node)" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</script>
<div class="row">
<div class="col-md-6">
<blur-panel class-container="with-scroll tree-panel" title="Basic Action">
<div class="row" ng-controller="treeCtrl">
<div class="col-sm-4">
<div class="control-side text-center">
<div>
<button class="btn btn-primary" ng-click="newSubItem()">Add</button>
</div>
<div>
<button class="btn btn-primary" ng-click="remove()">Remove</button>
</div>
<div>
<button class="btn btn-primary" ng-click="collapseAll()">Collapse All</button>
</div>
<div>
<button class="btn btn-primary" ng-click="expandAll()">Expand All</button>
</div>
<div>
<button class="btn btn-primary" ng-click="refresh()">Refresh</button>
</div>
<div>
<div class="form-group text-left search-container">
<label for="search">Filter</label>
<input id="search" type="text" class="form-control" ng-model="query" ng-change="find()">
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div ui-tree data-drag-enabled="false" id="tree-root">
<ol ui-tree-nodes ng-model="basicData">
<li ng-repeat="node in basicData" ng-show="visible(node)" ui-tree-node
ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
</div>
</div>
</blur-panel>
</div>
<div class="col-md-6">
<blur-panel class-container="with-scroll tree-panel" title="Drag & Drop">
<div data-ui-tree="treeOptions" data-drag-enabled="true" id="tree-root-drag" ng-controller="treeCtrl">
<ol data-ui-tree-nodes ng-model="dragData">
<li data-ng-repeat="node in dragData" data-ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
</blur-panel>
</div>
</div>
</blur-panel>
</div>

18
src/app/pages/tree/tree.module.js
View File

@ -1,3 +1,19 @@
/** /**
* Created by alex on 12/21/15. * @author a.demeshko
* created on 12.21.2015
*/ */
(function () {
'use strict';
angular.module('BlurAdmin.pages.tree', []).config(routeConfig);
/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('tree', {
url: '/tree',
templateUrl: 'app/pages/tree/tree.html'
});
}
})();

249
src/app/pages/tree/treeCtrl.js Normal file
View File

@ -0,0 +1,249 @@
/**
* @author a.demeshko
* created on 12/21/15
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.tree')
.controller('treeCtrl', treeCtrl);
/** @ngInject */
function treeCtrl($scope, $timeout) {
var getRootNodesScope = function () {
return angular.element(document.getElementById('tree-root')).scope();
};
var getFirstNode = function () {
return angular.element(document.getElementsByClassName("tree-node")[0]).scope();
};
$scope.select = function (item) {
$scope.current.selected = false;
$scope.current = item;
$scope.current.selected = true;
};
$scope.remove = function () {
$scope.current.remove();
$scope.current = getFirstNode();
$scope.current.selected = true;
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.newSubItem = function () {
var nodeData = $scope.current.$modelValue;
nodeData.nodes.push({
id: nodeData.id * 10 + nodeData.nodes.length,
title: nodeData.title + '.' + (nodeData.nodes.length + 1),
nodes: []
});
};
$scope.collapseAll = function () {
var scope = getRootNodesScope();
scope.collapseAll();
};
$scope.expandAll = function () {
var scope = getRootNodesScope();
scope.expandAll();
};
$scope.visible = function (item) {
return !($scope.query && $scope.query.length > 0
&& item.title.indexOf($scope.query) == -1);
};
$scope.basicData = getDefaultData();
$scope.refresh = function () {
$scope.basicData = getDefaultData();
$scope.current = getFirstNode();
if ($scope.current) $scope.current.selected = true;
else $scope.current = {};
};
$scope.treeOptions = {
beforeDrop: function (e) {
var sourceValue = e.source.nodeScope.$modelValue.value,
destValue = e.dest.nodesScope.node ? e.dest.nodesScope.node.value : undefined;
return true;
}
};
function getDefaultData() {
return [
{
'id': 1,
'title': 'Node 1',
'nodes': [
{
'id': 11,
'title': 'Node 1.1',
'nodes': [
{
'id': 111,
'title': 'Node 1.1.1',
'nodes': []
}
]
},
{
'id': 12,
'title': 'Node 1.2',
'nodes': []
}
]
}, {
'id': 2,
'title': 'Node 2',
'nodes': [
{
'id': 21,
'title': 'Node 2.1',
'nodes': []
},
{
'id': 22,
'title': 'Node 2.2',
'nodes': []
}
]
}, {
'id': 3,
'title': 'Node 3',
'nodes': [
{
'id': 31,
'title': 'Node 3.1',
'nodes': []
},
{
'id': 32,
'title': 'Node 3.2',
'nodes': [{
'id': 321,
'title': 'Node 3.2.1',
'nodes': []
},
{
'id': 322,
'title': 'Node 3.2.2',
'nodes': []
},
{
'id': 323,
'title': 'Node 3.2.3',
'nodes': []
}]
}
]
},
{
'id': 4,
'title': 'Node 4',
'nodes': [
{
'id': 41,
'title': 'Node 4.1',
'nodes': []
}]
}]
}
$scope.dragData = [
{
"id": 1,
"title": "Node 1",
"nodes": [
{
"id": 11,
"title": "Node 1.1",
"nodes": []
},
{
"id": 12,
"title": "Node 1.2",
"nodes": []
},
{
"id": 12,
"title": "Node 1.3",
"nodes": []
},
{
"id": 13,
"title": "Node 1.4",
"nodes": []
}
]
},
{
"id": 2,
"title": "Node 2",
"nodes": [
{
"id": 21,
"title": "Node 2.1",
"nodes": []
},
{
"id": 22,
"title": "Node 2.2",
"nodes": []
},
{
"id": 22,
"title": "Node 2.3",
"nodes": []
},
{
"id": 23,
"title": "Node 2.4",
"nodes": []
}
]
},
{
"id": 3,
"title": "Node 3",
"nodes": [
{
"id": 31,
"title": "Node 3.1",
"nodes": []
},
{
"id": 31,
"title": "Node 3.2",
"nodes": []
},
{
"id": 32,
"title": "Node 3.3",
"nodes": []
},
{
"id": 33,
"title": "Node 3.4",
"nodes": []
}
]
}
];
$scope.find = function(){};
$timeout(function () {
$scope.current = getFirstNode();
if ($scope.current) $scope.current.selected = true;
else $scope.current = {};
}, 1000);
}
})();

1
src/app/theme/components/contentTop/contentTop.directive.js
View File

@ -34,6 +34,7 @@
'/modals': 'Modals', '/modals': 'Modals',
'/profile': 'User Profile', '/profile': 'User Profile',
'/tables': 'Tables', '/tables': 'Tables',
'/tree': 'Tree View',
'/typography': 'Typography', '/typography': 'Typography',
'/form-layouts': 'Form Layouts', '/form-layouts': 'Form Layouts',
'/form-inputs': 'Form Inputs', '/form-inputs': 'Form Inputs',

4
src/app/theme/components/sidebar/SidebarCtrl.js
View File

@ -92,6 +92,10 @@
{ {
title: 'Notifications', title: 'Notifications',
root: '#/notifications' root: '#/notifications'
},
{
title: 'Tree View',
root: '#/tree'
} }
] ]
}, },

1
src/app/theme/theme.module.js
View File

@ -10,6 +10,7 @@
'chart.js', 'chart.js',
'angular-chartist', 'angular-chartist',
'angular.morris-chart', 'angular.morris-chart',
'ui.tree',
'BlurAdmin.theme.components' 'BlurAdmin.theme.components'
]); ]);

37
src/sass/app/_tree.scss Normal file
View File

@ -0,0 +1,37 @@
.tree-node{
line-height: 25px;
cursor: pointer;
&.selected{
background-color: $border-light ;
}
.control{
cursor: pointer;
font-size: 16px;
padding-left: 5px;
}
&:hover{
background-color: $input-border;
}
}
.control-side > div {
margin-top: 5px;
margin-bottom: 10px;
.btn{
width: 100px;
}
}
#tree-root{
border-left: 1px solid $border-light;
padding-left: 10px;
}
.tree-panel{
height: 500px;
}
.search-container{
margin-top: 10px;
}