diff --git a/bower.json b/bower.json index d144d59..96772d2 100644 --- a/bower.json +++ b/bower.json @@ -46,7 +46,8 @@ "angular-ui-router": "~0.2.15", "angular-chart.js": "~0.8.8", "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": { "amcharts": { diff --git a/src/app/pages/pages.module.js b/src/app/pages/pages.module.js index ab3ef78..a1b6142 100644 --- a/src/app/pages/pages.module.js +++ b/src/app/pages/pages.module.js @@ -22,6 +22,7 @@ 'BlurAdmin.pages.profile', 'BlurAdmin.pages.progressBars', 'BlurAdmin.pages.tables', + 'BlurAdmin.pages.tree', 'BlurAdmin.pages.typography' ]) .config(routeConfig); diff --git a/src/app/pages/tree/tree.html b/src/app/pages/tree/tree.html index 3fb197e..76ceaf8 100644 --- a/src/app/pages/tree/tree.html +++ b/src/app/pages/tree/tree.html @@ -1,10 +1,72 @@ - - - - - - - +
- - \ No newline at end of file + + + +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+
+
+
+
+
    +
  1. +
+
+
+
+ +
+
+ +
+
    +
  1. +
+
+ +
+
+ + +
\ No newline at end of file diff --git a/src/app/pages/tree/tree.module.js b/src/app/pages/tree/tree.module.js index 9d48c2d..e50f457 100644 --- a/src/app/pages/tree/tree.module.js +++ b/src/app/pages/tree/tree.module.js @@ -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' + }); + } + +})(); diff --git a/src/app/pages/tree/treeCtrl.js b/src/app/pages/tree/treeCtrl.js new file mode 100644 index 0000000..84bc272 --- /dev/null +++ b/src/app/pages/tree/treeCtrl.js @@ -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); + + } +})(); \ No newline at end of file diff --git a/src/app/theme/components/contentTop/contentTop.directive.js b/src/app/theme/components/contentTop/contentTop.directive.js index 94dc0a5..b49640e 100644 --- a/src/app/theme/components/contentTop/contentTop.directive.js +++ b/src/app/theme/components/contentTop/contentTop.directive.js @@ -34,6 +34,7 @@ '/modals': 'Modals', '/profile': 'User Profile', '/tables': 'Tables', + '/tree': 'Tree View', '/typography': 'Typography', '/form-layouts': 'Form Layouts', '/form-inputs': 'Form Inputs', diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js index f4a3efa..ef3ab86 100644 --- a/src/app/theme/components/sidebar/SidebarCtrl.js +++ b/src/app/theme/components/sidebar/SidebarCtrl.js @@ -92,6 +92,10 @@ { title: 'Notifications', root: '#/notifications' + }, + { + title: 'Tree View', + root: '#/tree' } ] }, diff --git a/src/app/theme/theme.module.js b/src/app/theme/theme.module.js index 090bd9d..a47b3d6 100644 --- a/src/app/theme/theme.module.js +++ b/src/app/theme/theme.module.js @@ -10,6 +10,7 @@ 'chart.js', 'angular-chartist', 'angular.morris-chart', + 'ui.tree', 'BlurAdmin.theme.components' ]); diff --git a/src/sass/app/_tree.scss b/src/sass/app/_tree.scss new file mode 100644 index 0000000..1fd7b33 --- /dev/null +++ b/src/sass/app/_tree.scss @@ -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; +} \ No newline at end of file