From 7f94fc78be45b3bba60da3b7b40c37e6aeccabe2 Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Tue, 13 Sep 2016 20:00:06 +0200 Subject: [PATCH] [web] menu tree --- bower.json | 3 +- public/app/app.js | 1 + public/app/app.styl | 24 +++++++++++++ public/app/web/webmenu.jade | 68 +++++++++++++++++++++++-------------- public/app/web/webmenu.js | 65 +++++++++++++++++++++++------------ public/components/config.js | 2 +- public/index.html | 6 ++-- 7 files changed, 116 insertions(+), 53 deletions(-) diff --git a/bower.json b/bower.json index 61e413a..4fd8d54 100644 --- a/bower.json +++ b/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" } } diff --git a/public/app/app.js b/public/app/app.js index e161386..6468797 100644 --- a/public/app/app.js +++ b/public/app/app.js @@ -5,6 +5,7 @@ angular.module('warehost', [ 'ui.router', 'ui.bootstrap', 'ui.select', + 'ui.tree', 'ngTable', 'config', 'session', diff --git a/public/app/app.styl b/public/app/app.styl index d16070e..1082a0c 100644 --- a/public/app/app.styl +++ b/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 diff --git a/public/app/web/webmenu.jade b/public/app/web/webmenu.jade index 47dafc6..4ee4382 100644 --- a/public/app/web/webmenu.jade +++ b/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") - span.glyphicon.glyphicon-plus - form(ng-submit="add()",name="addform",ng-if="isAdding") - .form-group - label(for="name") Name - input.form-control(id="name",name="name",ng-model="obj.name",ng-minlength="3") - button.btn.btn-primary(type="submit") - span.glyphicon.glyphicon-floppy-disk - | Save - table.table.table-bordered(ng-table="tableParams") - tr(ng-hide='group.$hideRows',ng-repeat="item in $data") - 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 + .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 + 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",ng-model="obj.name") + .form-group + label(for="shortUrl") URL + i (http(s)://PLACEHOLDER/{{obj.url}}) + input.form-control(id="shortUrl",ng-model="obj.url") + submit.btn.btn-default Save diff --git a/public/app/web/webmenu.js b/public/app/web/webmenu.js index b51bc63..a767f53 100644 --- a/public/app/web/webmenu.js +++ b/public/app/web/webmenu.js @@ -1,44 +1,67 @@ 'use strict'; angular.module('warehost') - .controller('WebmenuWebCtrl',function(session,config,alert,NgTableParams,$scope,$rootScope,$http){ - $scope.tableParams = new NgTableParams({ - sorting: { 'invited.username': 'asc' }, - total: 0, - count: config.table.count - }, { dataset: [] }); + .controller('WebmenuWebCtrl',function(session,config,alert,$scope,$stateParams,$http){ + $scope.data = []; alert.set({}); - $scope.obj = {}; - function resetObj(){ - $scope.obj = {}; - } + $scope.treeOptions = { + 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; + load(); } } - resetObj(); load(); - $rootScope.$on('warehost.web.website.update',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(){ - $http.post(config.api+'/web/website',$scope.obj).then(submitresult); + $scope.add = function(a){ + $scope.obj = {}; + if(a){ + $scope.obj.parentid = a.$modelValue.ID; + $scope.parent = a.$modelValue; + }else{ + $scope.parent = null; + } }; }); diff --git a/public/components/config.js b/public/components/config.js index 181cfdc..582a254 100644 --- a/public/components/config.js +++ b/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 } diff --git a/public/index.html b/public/index.html index 342cc78..2eb5408 100644 --- a/public/index.html +++ b/public/index.html @@ -17,11 +17,10 @@ + - - @@ -45,9 +44,8 @@ + - -