Commit 76b82545 authored by D’jalmar Gutierrez Titirico's avatar D’jalmar Gutierrez Titirico 🚲

se agrego la opcion de modificar el orden del organigrama

parent de1fea12
......@@ -228,9 +228,9 @@ input[type=checkbox].with-font:checked ~ label:before {
@import 'tiposEntidad/tiposEntidad.scss';
@import '../components/footer/footer.scss';
@import '../components/modal/modal.scss';
@import '../components/organigrama/framework/angular-treant-js/Treant.scss';
@import '../components/organigrama/framework/angular-treant-js/collapsable.scss';
@import '../components/organigrama/framework/angular-treant-js/custom-colored.scss';
@import '../components/organigrama/framework/angular-treant-js/vendor/perfect-scrollbar/perfect-scrollbar.scss';
@import '../components/organigrama/framework/jquery.orgchart.scss';
@import '../components/organigrama/framework/treant-js/Treant.scss';
@import '../components/organigrama/framework/treant-js/collapsable.scss';
@import '../components/organigrama/framework/treant-js/custom-colored.scss';
@import '../components/organigrama/framework/treant-js/vendor/perfect-scrollbar/perfect-scrollbar.scss';
// endinjector
......@@ -34,6 +34,11 @@
tiposCargo: {
method: 'GET',
url: appConfig.serverAddress + '/api/entidades/:id/tiposCargo'
},
ordenarUnidades: {
method: 'PUT',
isArray: true,
url: appConfig.serverAddress + '/api/entidades/:id/ordenarUnidades'
}
})
}
......@@ -48,7 +53,7 @@
return this.resource.get(parametros).$promise;
}
getOrganigrama(id) {
organigrama(id) {
return this.resource.organigrama({id: id}).$promise;
}
......@@ -82,6 +87,10 @@
return this.resource.tiposCargo({id: id}).$promise;
}
ordenarUnidades(id, parametros) {
return this.resource.ordenarUnidades({id: id}, parametros).$promise;
}
}
angular.module('moduloPersonalApp')
......
......@@ -12,15 +12,31 @@
</div>
</div>
<!--<div class="container-fluid">-->
<!--<div class="row">-->
<!--<div id="chart" class="orgchart-primary">-->
<!--</div>-->
<!--</div>-->
<!--<div class="row">-->
<!--<div id="chart" class="orgchart-primary">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<br>-->
<div class="container-fluid">
<div class="row">
<div class="chart" id="collapsable-example"></div>
</div>
</div>
</div>
<div class="row">
<button class="btn btn-primary-outline" ng-click="vm.borrar()">Borrar</button>
</div>
<div class="row">
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li>
asdasd
</li>
<li>asdasd</li>
</ul>
</span>
</div>
</div>
......@@ -40,8 +40,6 @@
});
}
}
}
angular.module('moduloPersonalApp')
.controller('UnidadOrganizacionalEditarModalCtrl', UnidadOrganizacionalEditarModalController);
......
......@@ -5,7 +5,12 @@
constructor($resource, appConfig) {
this.resource = $resource(appConfig.serverAddress + '/api/unidadesOrganizacional/:id', {id: '@_id'}, {
update: {method: 'PUT'},
query: {isArray: false}
query: {isArray: false},
ordenarCargos: {
method: 'PUT',
isArray: true,
url: appConfig.serverAddress + '/api/unidadesOrganizacional/:id/ordenarCargos'
}
});
}
......@@ -23,9 +28,12 @@
}
editarUnidad(id, unidad) {
console.log(id);
return this.resource.update({id: id}, unidad).$promise;
}
ordenarCargos(id, parametros) {
return this.resource.ordenarCargos({id: id}, parametros).$promise;
}
}
angular.module('moduloPersonalApp')
......
/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart conatiner */
.Treant {
position: relative;
overflow: hidden;
padding: 0 !important;
}
.Treant > .node,
.Treant > .pseudo {
position: absolute;
display: block;
visibility: hidden;
}
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo {
visibility: visible;
}
.Treant > .pseudo {
width: 0;
height: 0;
border: none;
padding: 0;
}
.Treant .collapse-switch {
width: 3px;
height: 3px;
display: block;
border: 1px solid $brand-primary;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
}
.Treant .collapsed .collapse-switch {
background-color: #868DEE;
}
.Treant > .node img {
border: none;
float: left;
}
// import {UTIL} from '../utils/Util';
//
// class NodeDB {
// constructor(nodeStructure, tree) {
// this.db = [];
// var self = this;
//
// function itterateChildren(node, parentId) {
//
// var newNode = self.createNode(node, parentId, tree, null);
//
// if (node.children) {
//
// newNode.children = [];
//
// // pseudo node is used for descending children to the next level
// if (node.childrenDropLevel && node.childrenDropLevel > 0) {
// while (node.childrenDropLevel--) {
// // pseudo node needs to inherit the connection style from its parent for continuous connectors
// var connStyle = UTIL.cloneObj(newNode.connStyle);
// newNode = self.createNode('pseudo', newNode.id, tree, null);
// newNode.connStyle = connStyle;
// newNode.children = [];
// }
// }
//
// var stack = (node.stackChildren && !self.hasGrandChildren(node)) ? newNode.id : null;
//
// // svildren are position on separate leves, one beneeth the other
// if (stack !== null) {
// newNode.stackChildren = [];
// }
//
// for (var i = 0, len = node.children.length; i < len; i++) {
//
// if (stack !== null) {
// newNode = self.createNode(node.children[i], newNode.id, tree, stack);
// if ((i + 1) < len) newNode.children = []; // last node cant have children
// } else {
// itterateChildren(node.children[i], newNode.id);
// }
// }
// }
// }
//
// if (tree.CONFIG.animateOnInit) nodeStructure.collapsed = true;
// itterateChildren(nodeStructure, -1); // root node
// this.createGeometries(tree);
// }
//
// createGeometries(tree) {
// var i = this.db.length, node;
// while (i--) {
// this.get(i).createGeometry(tree);
// }
// }
//
// get(nodeId) {
// return this.db[nodeId]; // get node by ID
// }
//
// createNode(nodeStructure, parentId, tree, stackParentId) {
//
// var node = new TreeNode(nodeStructure, this.db.length, parentId, tree, stackParentId);
//
// this.db.push(node);
// if (parentId >= 0) this.get(parentId).children.push(node.id); //skip root node
//
// if (stackParentId) {
// this.get(stackParentId).stackParent = true;
// this.get(stackParentId).stackChildren.push(node.id);
// }
//
// return node;
// }
//
// getMinMaxCoord(dim, parent, MinMax) { // used for getting the dimensions of the tree, dim = 'X' || 'Y'
// // looks for min and max (X and Y) within the set of nodes
// var parent = parent || this.get(0),
// i = parent.childrenCount(),
// MinMax = MinMax || { // start with root node dimensions
// min: parent[dim],
// max: parent[dim] + ((dim == 'X') ? parent.width : parent.height)
// };
//
// while (i--) {
//
// var node = parent.childAt(i),
// maxTest = node[dim] + ((dim == 'X') ? node.width : node.height),
// minTest = node[dim];
//
// if (maxTest > MinMax.max) {
// MinMax.max = maxTest;
//
// }
// if (minTest < MinMax.min) {
// MinMax.min = minTest;
// }
//
// this.getMinMaxCoord(dim, node, MinMax);
// }
// return MinMax;
// }
//
// static hasGrandChildren(nodeStructure) {
// var i = nodeStructure.children.length;
// while (i--) {
// if (nodeStructure.children[i].children) return true;
// }
// }
// }
//
// export {NodeDB}
// import {TreeStore} from '../treeStore/treeStore';
//
// class Treant {
// static JSONconfig = {
// make: function (configArray) {
//
// var i = configArray.length, node;
//
// this.jsonStructure = {
// chart: null,
// nodeStructure: null
// };
// //fist loop: find config, find root;
// while (i--) {
// node = configArray[i];
// if (node.hasOwnProperty('container')) {
// this.jsonStructure.chart = node;
// continue;
// }
//
// if (!node.hasOwnProperty('parent') && !node.hasOwnProperty('container')) {
// this.jsonStructure.nodeStructure = node;
// node.myID = this.getID();
// }
// }
//
// this.findChildren(configArray);
//
// return this.jsonStructure;
// },
//
// findChildren: function (nodes) {
// var parents = [0]; // start witha a root node
//
// while (parents.length) {
// var parentId = parents.pop(),
// parent = this.findNode(this.jsonStructure.nodeStructure, parentId),
// i = 0, len = nodes.length,
// children = [];
//
// for (; i < len; i++) {
// var node = nodes[i];
// if (node.parent && (node.parent.myID == parentId)) { // skip config and root nodes
//
// node.myID = this.getID();
//
// delete node.parent;
//
// children.push(node);
// parents.push(node.myID);
// }
// }
//
// if (children.length) {
// parent.children = children;
// }
// }
// },
//
// findNode: function (node, nodeId) {
// var childrenLen, found;
//
// if (node.myID === nodeId) {
// return node;
// } else if (node.children) {
// childrenLen = node.children.length;
// while (childrenLen--) {
// found = this.findNode(node.children[childrenLen], nodeId);
// if (found) {
// return found;
// }
// }
// }
// },
//
// getID: (function () {
// var i = 0;
// return function () {
// return i++;
// };
// })()
// };
//
// constructor(jsonConfig, callback) {
// if (jsonConfig instanceof Array) {
// jsonConfig = Treant.JSONconfig.make(jsonConfig);
// }
//
// var newTree = TreeStore.createTree(jsonConfig);
// newTree.positionTree(callback);
//
// this.tree_id = newTree.id;
// }
//
// destroy() {
// TreeStore.destroy(this.tree_id);
// };
// }
//
// export {Treant};
// import {Tree} from '';
//
// class TreeStore {
// constructor() {
// this.store = [];
// }
//
// static createTree(jsonConfig) {
// this.store.push(new Tree(jsonConfig, this.store.length))
// return this.store[this.store.length - 1];
// }
//
// static get(treeId) {
// return this.store[treeId];
// }
//
// static destroy(tree_id) {
// var tree = this.get(tree_id);
// if (tree) {
// tree._R.remove();
// var draw_area = tree.drawArea;
// while (draw_area.firstChild) {
// draw_area.removeChild(draw_area.firstChild);
// }
// var classes = draw_area.className.split(' '),
// classes_to_stay = [];
// for (var i = 0; i < classes.length; i++) {
// var cls = classes[i];
// if (cls != 'Treant' && cls != 'Treant-loaded') {
// classes_to_stay.push(cls);
// }
// }
// ;
// draw_area.style.overflowY = '';
// draw_area.style.overflowX = '';
// draw_area.className = classes_to_stay.join(' ');
// this.store[tree_id] = null;
// }
// }
// }
//
// export {TreeStore};
// class UTIL {
// constructor() {
//
// }
//
// static inheritAttrs(me, from) {
// for (var attr in from) {
// if (typeof from[attr] !== 'function') {
// if (me[attr] instanceof Object && from[attr] instanceof Object) {
// this.inheritAttrs(me[attr], from[attr]);
// } else {
// me[attr] = from[attr];
// }
// }
// }
// }
//
// static createMerge(obj1, obj2) {
// var newObj = {};
// if (obj1) this.inheritAttrs(newObj, this.cloneObj(obj1));
// if (obj2) this.inheritAttrs(newObj, obj2);
// return newObj;
// }
//
// static cloneObj(obj) {
// if (Object(obj) !== obj) {
// return obj;
// }
// var res = new obj.constructor();
// for (var key in obj) if (obj["hasOwnProperty"](key)) {
// res[key] = this.cloneObj(obj[key]);
// }
// return res;
// }
//
// static addEvent(el, eventType, handler) {
// if (el.addEventListener) { // DOM Level 2 browsers
// el.addEventListener(eventType, handler, false);
// } else if (el.attachEvent) { // IE <= 8
// el.attachEvent('on' + eventType, handler);
// } else { // ancient browsers
// el['on' + eventType] = handler;
// }
// }
//
// static hasClass(element, my_class) {
// return (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" " + my_class + " ") > -1;
// }
// }
//
// export {UTIL}
$ancho-nodo: 150px;
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
//h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/* optional Container STYLES */
.chart {
height: 860px;
margin: 5px;
width: 100%;
margin: 5px auto;
border: 3px solid $brand-primary;
border-radius: 3px;
}
.Treant > .node {
}
//.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.Treant .node.collapsed {
background-color: $gray;
}
.Treant .node.collapsed .collapse-switch {
background: none;
}
.Treant {
svg {
path {
stroke: $brand-primary;
}
}
.primary {
background-color: $brand-primary;
border: $brand-primary;
}
.success {
background-color: $brand-success;
border: $brand-success;
}
.info {
background-color: $brand-info;
border: $brand-info;
}
p {
margin: 0;
padding: 0;
}
.collapse-switch {
width: 20px;
height: 20px;
border: none;
i {
color: white;
}
}
.node {
padding: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #FFFFFF;
width: $ancho-nodo;
font-size: 12px;
p {
box-sizing: border-box;
}
.external {
display: none;
}
&:hover {
.external {
width: 20px;
height: 20px;
border: none;
margin-right: -20px;
display: block;
top: 0px;
i {
color: $text-color;
}
}
}
.node-title {
font-weight: bold;
color: white;
text-align: center;
padding-right: 20px;
}
&.no-padding {
.node-title {
padding: 0;
}
}
.node-name-container {
background: white;
color: $text-color;
text-align: center;
margin-bottom: 0;
border-radius: 4px;
&:hover {
span {
color: $gray-light
}
}
span {
padding: 0;
background: none;
color: transparent;
border: none;
}
span:hover {
background: $gray-light;
color: white;
}
}
}
}
/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart conatiner */
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid $brand-primary; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img { border: none; float: left; }
//body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
//h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 820px; margin: 5px; width: 100%; margin: 5px auto; border: 3px solid $brand-primary; border-radius: 3px; }
.Treant > .node { }
//.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold;}
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: $gray; }
.Treant .node.collapsed .collapse-switch { background: none; }
.Treant{
svg{
path{
stroke:$brand-primary;
}
}
.primary{
background-color: $brand-primary;
border: $brand-primary;
}
.success{
background-color: $brand-success;
border: $brand-success;
}
.info{
background-color: $brand-info;
border: $brand-info;
}
p{
margin:0; padding:0;
}
}