Commit 7bf8f95f authored by D’jalmar Gutierrez Titirico's avatar D’jalmar Gutierrez Titirico 🚲

Merge branch 'iss6175-implementar-nuevo-organigrama' into 'desarrollo'

#42 se implemento un nuevo organigrama usando treant.js



See merge request !57
parents 2e349b8a 38b810e8
......@@ -20,7 +20,9 @@
"ui-router-extras": "^0.1.2",
"angular-i18n": "^1.5.6",
"angular-ui-tree": "^2.16.0",
"angular-loading-bar": "^0.9.0"
"angular-loading-bar": "^0.9.0",
"raphael": "^2.2.1",
"jquery.easing": "^1.3.1"
},
"devDependencies": {
"angular-mocks": "~1.4.11"
......
......@@ -229,4 +229,8 @@ input[type=checkbox].with-font:checked ~ label:before {
@import '../components/footer/footer.scss';
@import '../components/modal/modal.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
......@@ -38,8 +38,63 @@
}
}
});
this.arbolFormateado = this.formatearArbol(this.arbol);
this.arbolFormateado.collapsed = true;
this.chart_config = {
chart: {
container: "#collapsable-example",
animateOnInit: true,
node: {
collapsable: true,
HTMLclass: 'nodeExample1'
},
connectors: {
type: 'curve'
},
nodeAlign:'BOTTOM',
animation: {
nodeAnimation: "easeOutQuart",
nodeSpeed: 700,
connectorsAnimation: "easeOutQuart",
connectorsSpeed: 300
}
},
nodeStructure: this.arbolFormateado
};
var chart = new Treant(this.chart_config);
});
}
formatearArbol(raiz) {
raiz.text = {name: raiz.name, title: raiz.title};
if (!raiz.name) {
raiz.HTMLclass = 'nodo-vacio';
}
switch (raiz.tipo) {
case 'oficina':
raiz.HTMLclass = 'success';
break;
case 'unidadOrganizacional':
raiz.HTMLclass = 'success';
break;
case 'cargo':
raiz.HTMLclass = 'info';
break;
case 'entidad':
raiz.HTMLclass = 'primary';
break;
default:
break;
}
// raiz.image = 'https://fperucic.github.io/treant-js/examples/collapsable/img/cheryl.png?1468447409285';
if (raiz.children) {
raiz.children.forEach(hijo=> {
this.formatearArbol(hijo)
})
}
return raiz;
}
}
angular.module('moduloPersonalApp')
.controller('EntidadOrganigramaCtrl', EntidadOrganigramaController)
......
......@@ -11,9 +11,16 @@
</div>
</div>
</div>
<!--<div class="container-fluid">-->
<!--<div class="row">-->
<!--<div id="chart" class="orgchart-primary">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<br>-->
<div class="container-fluid">
<div class="row">
<div id="chart" class="orgchart-primary">
<div class="chart" id="collapsable-example"></div>
</div>
</div>
</div>
This diff is collapsed.
/* 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: 100%; margin: 5px; width: 100%; }
//.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
//.Treant > .node img { width: 100%; height: 100%; }
//
//.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
//.Treant .node.collapsed { background-color: #DEF82D; }
//.Treant .node.collapsed .collapse-switch { background: none; }
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;
}
}
.nodo-vacio{
display: none !important;
}
.nodeExample1 {
padding: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: $brand-primary;
border: 2px solid $brand-primary;
color:#FFFFFF;
width: 150px;
font-size: 12px;
p{
box-sizing: border-box;
}
.node-name{
color:white;
text-align: center;
}
.node-title{
background: white;
color:black;
text-align: center;
}
}
.nodeExample1 img {
margin-right: 10px;
}
.Treant > a:link {
color: $brand-info;
}
.Treant > a:visited {
color: $brand-info;
}
.Treant > a:link:hover {
color: $brand-primary;
}
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);
.ps-container .ps-scrollbar-x {
position: absolute; /* please don't change 'position' */
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
height: 8px;
background-color: #aaa;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
opacity: 0;
filter: alpha(opacity = 0);
-webkit-transition: opacity.2s linear;
-moz-transition: opacity .2s linear;
transition: opacity .2s linear;
}
.ps-container:hover .ps-scrollbar-x {
opacity: 0.6;
filter: alpha(opacity = 60);
}
.ps-container .ps-scrollbar-x:hover {
opacity: 0.9;
filter: alpha(opacity = 90);
cursor:default;
}
.ps-container .ps-scrollbar-x.in-scrolling {
opacity: 0.9;
filter: alpha(opacity = 90);
}
.ps-container .ps-scrollbar-y {
position: absolute; /* please don't change 'position' */
right: 3px; /* there must be 'right' for ps-scrollbar-y */
width: 8px;
background-color: #aaa;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
opacity: 0;
filter: alpha(opacity = 0);
-webkit-transition: opacity.2s linear;
-moz-transition: opacity .2s linear;
transition: opacity .2s linear;
}
.ps-container:hover .ps-scrollbar-y {
opacity: 0.6;
filter: alpha(opacity = 60);
}
.ps-container .ps-scrollbar-y:hover {
opacity: 0.9;
filter: alpha(opacity = 90);
cursor: default;
}
.ps-container .ps-scrollbar-y.in-scrolling {
opacity: 0.9;
filter: alpha(opacity = 90);
}
......@@ -69,6 +69,9 @@
<script src="bower_components/angular-i18n/angular-locale_es-bo.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/eve/eve.js"></script>
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/jquery.easing/js/jquery.easing.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js(.tmp) app/app.js -->
......@@ -77,7 +80,7 @@
<script src="components/autenticacion/autenticacion.module.js"></script>
<script src="components/modal/modal.module.js"></script>
<script src="components/util/util.module.js"></script>
<script src="app/migracionMoodle/migracionMoodle.service.js"></script>
<script src="app/oficinas/editar/oficinas.editar.controller.js"></script>
<script src="app/cargos/cargos.js"></script>
<script src="app/cargos/cargos.service.js"></script>
<script src="app/cargos/editar/cargos.editar.controller.js"></script>
......@@ -130,8 +133,8 @@
<script src="app/migracionMoodle/evaluaciones/migracionMoodle.evaluaciones.controller.js"></script>
<script src="app/migracionMoodle/migracionMoodle.controller.js"></script>
<script src="app/migracionMoodle/migracionMoodle.js"></script>
<script src="app/migracionMoodle/migracionMoodle.service.js"></script>
<script src="app/calificaciones/calificaciones.service.js"></script>
<script src="app/oficinas/editar/oficinas.editar.controller.js"></script>
<script src="app/oficinas/modals/oficina.entidad.crear.modal.controller.js"></script>
<script src="app/oficinas/modals/oficina.entidad.editar.modal.controller.js"></script>
<script src="app/oficinas/modals/oficinas.crear.modal.controller.js"></script>
......@@ -182,6 +185,9 @@
<script src="components/navbar/navbar.controller.js"></script>
<script src="components/navbar/navbar.directive.js"></script>
<script src="components/organigrama/framework/jquery.orgchart.js"></script>
<script src="components/organigrama/framework/treant-js/Treant.js"></script>
<script src="components/organigrama/framework/treant-js/vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
<script src="components/organigrama/framework/treant-js/vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="components/organigrama/organigrama.controller.js"></script>
<script src="components/organigrama/organigrama.directive.js"></script>
<script src="app/cargos/cargos.controller.js"></script>
......
......@@ -32,6 +32,10 @@ module.exports = function (config) {
'client/bower_components/ui-router-extras/release/ct-ui-router-extras.js',
'client/bower_components/angular-i18n/angular-locale_es-bo.js',
'client/bower_components/angular-ui-tree/dist/angular-ui-tree.js',
'client/bower_components/angular-loading-bar/build/loading-bar.js',
'client/bower_components/eve/eve.js',
'client/bower_components/raphael/raphael.min.js',
'client/bower_components/jquery.easing/js/jquery.easing.js',
'client/bower_components/angular-mocks/angular-mocks.js',
// endbower
'client/app/app.js',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment