se implemento un nuevo organigrama usando treant.js

bower.json

@@ -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"

client/app/app.scss

@@ -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

client/app/entidades/organigrama/entidades.organigrama.controller.js

@@ -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)

client/app/entidades/organigrama/entidades.organigrama.html

@@ -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>

client/components/organigrama/framework/treant-js/Treant.scss

+/* 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; }

client/components/organigrama/framework/treant-js/collapsable.scss

+//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; }

client/components/organigrama/framework/treant-js/custom-colored.scss

+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;
+}

client/components/organigrama/framework/treant-js/vendor/perfect-scrollbar/jquery.mousewheel.js

+/*! 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);

client/components/organigrama/framework/treant-js/vendor/perfect-scrollbar/perfect-scrollbar.scss

+.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);
+}

client/index.html

@@ -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>

karma.conf.js

@@ -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',