[web] menu tree

bower.json

@@ -20,6 +20,7 @@
     "bootswatch": "^3.3.7",
     "ng-table": "^1.0.0",
     "angular-ui-select": "^0.19.4",
-    "angular-sanitize": "^1.5.8"
+    "angular-sanitize": "^1.5.8",
+    "angular-ui-tree": "^2.21.2"
   }
 }

public/app/app.js

@@ -5,6 +5,7 @@ angular.module('warehost', [
 	'ui.router',
 	'ui.bootstrap',
 	'ui.select',
+	'ui.tree',
 	'ngTable',
 	'config',
 	'session',

public/app/app.styl

@@ -5,3 +5,27 @@
 		display inline
 		margin 0 10px
 		height 100%
+
+.angular-ui-tree
+	.list-group
+		margin-right	5px
+		.list-group-item
+			padding	0px
+			margin	0px
+	.angular-ui-tree-handle
+		padding	10px 10px
+
+		> .btn
+			margin-right	5px
+
+		:hover
+			color	#438eb9
+			background	#f4f6f7
+			border-color	#dce2e8
+
+	.angular-ui-tree-placeholder
+		background	#f0f9ff
+		border	2px dashed #bed2db
+		-webkit-box-sizing	border-box
+		-moz-box-sizing	border-box
+		box-sizing	border-box

public/app/web/webmenu.jade

@@ -1,28 +1,44 @@
+script#nodes_renderer(type="text/ng-template")
+	div(ui-tree-handle)
+		a.btn.btn-defualt.btn-xs(ng-if="node.children && node.children.length > 0",data-nodrag,ng-click="toggle(this)")
+			span.glyphicon(ng-class="{'glyphicon-menu-right': collapsed,'glyphicon-menu-down': !collapsed}")
+		| (\#{{node.ID}}) {{node.name}}
+		.pull-right.btn-group.btn-group-xs(data-nodrag)
+			a.btn.btn-default(data-nodrag,ng-click="add(this)")
+				span.glyphicon.glyphicon-plus
+			a.btn.btn-default(data-nodrag,ng-click="edit(this)")
+				span.glyphicon.glyphicon-pencil
+			a.btn.btn-default(data-nodrag,ng-click="remove(this)")
+				span.glyphicon.glyphicon-remove
+	.list-group(ui-tree-nodes,ng-model="node.children",ng-class="{hidden: collapsed}")
+		.list-group-item(ui-tree-node,ng-repeat="node in node.children",ng-include="'nodes_renderer'")
 .container
 	h1 Menu
-	a.btn.btn-default(ng-click="isAdding=true")
+	.row
+		.well.col-md-6(ui-tree)
+			.btn-toolbar
+				.btn-group
+					a.btn.btn-default(ng-click="$broadcast('angular-ui-tree:collapse-all')")
+						span.glyphicon.glyphicon-chevron-right
+					a.btn.btn-default(ng-click="$broadcast('angular-ui-tree:expand-all')")
+						span.glyphicon.glyphicon-chevron-down
+				.btn-group
+					a.btn.btn-default(ng-click="add(null)")
 						span.glyphicon.glyphicon-plus
-	form(ng-submit="add()",name="addform",ng-if="isAdding")
+			br
+			.list-group(ui-tree-nodes,data-ui-tree="treeOptions",ng-model="data")
+				.list-group-item(ui-tree-node,ng-repeat="node in data",ng-include="'nodes_renderer'")
+		form.col-md-6(ng-submit="save()")
+			h3(ng-if="obj.ID") Edit
+			h3(ng-if="!obj.ID") New
+			.form-group(ng-if="parent")
+				label Under Parent
+				input.form-control(id="name",ng-model="parent.name",readonly)
 			.form-group
 				label(for="name") Name
-			input.form-control(id="name",name="name",ng-model="obj.name",ng-minlength="3")
+				input.form-control(id="name",ng-model="obj.name")
-		button.btn.btn-primary(type="submit")
+			.form-group
-			span.glyphicon.glyphicon-floppy-disk
+				label(for="shortUrl") URL 
-			| Save
+					i (http(s)://PLACEHOLDER/{{obj.url}})
-	table.table.table-bordered(ng-table="tableParams")
+				input.form-control(id="shortUrl",ng-model="obj.url")
-		tr(ng-hide='group.$hideRows',ng-repeat="item in $data")
+			submit.btn.btn-default Save
-			td(data-title="'#'") {{item.website.ID}}
-			td(data-title="'Name'")
-				span(ng-if="!item.isEditing") {{item.website.name}}
-				form(name="myform",ng-if="item.isEditing")
-					.form-group(ng-class="{'has-error': (error.fields.indexOf('name') >= 0 || !myform.name.$valid)}")
-						label(for="name") Name
-						input.form-control(id="name",name="name",ng-model="item.website.name")
-			td(data-title="'Option'")
-				.btn-group.btn-group-xs
-					span.btn.btn-default(ng-click="item.isEditing = true",ng-if="!item.isEditing")
-						span.glyphicon.glyphicon-pencil
-					span.btn.btn-default(ng-click="edit(item)",ng-if="item.isEditing")
-						span.glyphicon.glyphicon-remove-circle
-					span.btn.btn-default(ng-click="delete(item)")
-						span.glyphicon.glyphicon-trash

public/app/web/webmenu.js

@@ -1,44 +1,67 @@
 'use strict';
 
 angular.module('warehost')
-	.controller('WebmenuWebCtrl',function(session,config,alert,NgTableParams,$scope,$rootScope,$http){
+	.controller('WebmenuWebCtrl',function(session,config,alert,$scope,$stateParams,$http){
-		$scope.tableParams = new NgTableParams({
+		$scope.data = [];
-			sorting: { 'invited.username': 'asc' },
-			total: 0,
-			count: config.table.count
-		}, { dataset: [] });
 		alert.set({});
-		$scope.obj = {};
 
-		function resetObj(){
+		$scope.treeOptions = {
-			$scope.obj = {};
+			accept: function(){
+				return true;
+			},
+			beforeDrop: function (){
+				return true;
+			},
+			dropped: function(e){
+				$scope.obj = e.source.nodeScope.$modelValue;
+				$scope.obj.position = e.dest.index;
+				if(e.dest.nodesScope.$nodeScope){
+					$scope.obj.parentid = {
+						Int64: e.dest.nodesScope.$nodeScope.$modelValue.ID,
+						Valid: true
+					};
+				}else{
+					$scope.obj.parentid = {Int64: 0, Valid: false};
 				}
+				$http.put(config.api+'/web/website/'+$stateParams.websiteid+'/menu/'+$scope.obj.ID,$scope.obj).then(submitresult);
+			}
+		};
+
 		function load(){
-			$http.get(config.api+'/web/involve').then(function(res){
+			$http.get(config.api+'/web/website/'+$stateParams.websiteid+'/menu').then(function(res){
 				session.set(res);
-				$scope.tableParams.settings({dataset: angular.copy(res.data.data),total: (res.data.data).length});
+				$scope.data = res.data.data;
 			});
 		}
 		function submitresult(res){
 			session.set(res);
 			alert.set(res);
 			if(res.data.data){
-				$rootScope.$broadcast('warehost.web.website.update');
-				resetObj();
-				$scope.isAdding = false;
-			}
-		}
-		resetObj();
 				load();
-		$rootScope.$on('warehost.web.website.update',load);
+			}
+		}
+		load();
 
 		$scope.edit = function(a){
-			$http.put(config.api+'/web/website/'+a.website.ID,a.website).then(submitresult);
+			$scope.obj = a.$modelValue;
+		};
+		$scope.save = function(){
+			if($scope.obj.ID){
+				$http.put(config.api+'/web/website/'+$stateParams.websiteid+'/menu/'+$scope.obj.ID,$scope.obj).then(submitresult);
+			}else{
+				$http.post(config.api+'/web/website'+$stateParams.websiteid+'/menu/',$scope.obj).then(submitresult);
+			}
 		};
 		$scope.delete = function(a){
-			$http.delete(config.api+'/web/website/'+a.website.ID).then(submitresult);
+			$http.delete(config.api+'/web/website/'+$stateParams.websiteid+'/menu/'+a.website.ID).then(submitresult);
 		};
-		$scope.add = function(){
+		$scope.add = function(a){
-			$http.post(config.api+'/web/website',$scope.obj).then(submitresult);
+			$scope.obj = {};
+			if(a){
+				$scope.obj.parentid = a.$modelValue.ID;
+				$scope.parent = a.$modelValue;
+			}else{
+				$scope.parent = null;
+			}
 		};
 	});

public/components/config.js

@@ -2,7 +2,7 @@
 angular.module('config', [])
 	.factory('config', function() {
 		return {
-			api: 'https://apiv2.warehost.de',
+			api: 'http://[::1]:8080',
 			table: {
 				count: 25
 			}

public/index.html

@@ -17,11 +17,10 @@
 			<!-- bower:css -->
 			<link rel="stylesheet" href="bower_components/ng-table/dist/ng-table.css" />
 			<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
+			<link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.css" />
 			<!-- endbower -->
 			<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
 			<link rel="stylesheet" href="bower_components/bootswatch/paper/bootstrap.min.css" />
-			<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.min.css" />
-			<script src="bower_components/ng-table/dist/ng-table.min.css"></script>
 		<!-- endbuild -->
 		<!-- build:css({.tmp,public}) app/app.css -->
 		<link rel="stylesheet" href="app/app.css">
@@ -45,9 +44,8 @@
 			<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
 			<script src="bower_components/ng-table/dist/ng-table.js"></script>
 			<script src="bower_components/angular-ui-select/dist/select.js"></script>
+			<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
 			<!-- endbower -->
-			<script src="bower_components/ng-table/dist/ng-table.min.js"></script>
-			<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
 			<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
 		<!-- endbuild -->
 		<!-- build:js({.tmp,public}) app/app.js -->