sum7/warehost-frontend
sum7
/
warehost-frontend
Archived
1
0
Fork 0

[web] menu tree

This commit is contained in:
Martin Geno 2016-09-13 20:00:06 +02:00
parent 58aab8dfd8
commit 7f94fc78be
7 changed files with 116 additions and 53 deletions

View File

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

View File

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

View File

@ -5,3 +5,27 @@
display inline display inline
margin 0 10px margin 0 10px
height 100% 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

View File

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

View File

@ -1,44 +1,67 @@
'use strict'; 'use strict';
angular.module('warehost') 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({}); 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(){ 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); 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){ function submitresult(res){
session.set(res); session.set(res);
alert.set(res); alert.set(res);
if(res.data.data){ if(res.data.data){
$rootScope.$broadcast('warehost.web.website.update'); load();
resetObj();
$scope.isAdding = false;
} }
} }
resetObj();
load(); load();
$rootScope.$on('warehost.web.website.update',load);
$scope.edit = function(a){ $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){ $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;
}
}; };
}); });

View File

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

View File

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