Skip to content
GitLab
Commit 38b810e8 authored by D’jalmar Gutierrez Titirico's avatar D’jalmar Gutierrez Titirico 🚲
Browse files

se implemento un nuevo organigrama usando treant.js

parent 1abb716d
Expand all Hide whitespace changes
Inline Side-by-side
bower.json
View file @ 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"
......
client/app/app.scss
View file @ 38b810e8
......@@ -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
View file @ 38b810e8
......@@ -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
View file @ 38b810e8
......@@ -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/jquery.orgchart.scss
View file @ 38b810e8
/*
* jQuery OrgChart Plugin
* https://github.com/dabeng/OrgChart
*
* Demos of jQuery OrgChart Plugin
* http://dabeng.github.io/OrgChart/local-datasource/
* http://dabeng.github.io/OrgChart/ajax-datasource/
* http://dabeng.github.io/OrgChart/ondemand-loading-data/
* http://dabeng.github.io/OrgChart/option-createNode/
* http://dabeng.github.io/OrgChart/export-orgchart/
* http://dabeng.github.io/OrgChart/integrate-map/
*
* Copyright 2016, dabeng
* http://dabeng.github.io/
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.hidden {
display: none !important;
}
@mixin orgchart-brand($color) {
overflow-x: auto;
.orgchart {
background-image: linear-gradient(90deg, rgba($color, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba($color, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
}
.orgchart .node.focused {
background-color: rgba($color, 0.5);
}
.orgchart .node:hover {
background-color: rgba($color, 0.5);
}
.orgchart .node .content {
border: 1px solid $color;
}
.orgchart .node .title {
background-color: $color;
}
.orgchart td.top {
border-top: 2px solid $color;
}
.orgchart td.right {
border-right: 1px solid $color;
}
.orgchart td.left {
border-left: 1px solid $color;
}
.orgchart td > .down {
background-color: $color;
margin: 0px auto;
height: 20px;
width: 2px;
}
}
.orgchart {
display: inline-block;
min-height: 202px;
min-width: 202px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
background-size: 10px 10px;
border: 1px dashed rgba(0, 0, 0, 0);
transition: border .3s;
padding: 20px;
}
.orgchart td.top {
border-top: 2px solid rgba(217, 83, 79, 0.8);
}
.orgchart td.right {
border-right: 1px solid rgba(217, 83, 79, 0.8);
}
.orgchart td.left {
border-left: 1px solid rgba(217, 83, 79, 0.8);
}
.orgchart td > .down {
background-color: rgba(217, 83, 79, 0.8);
margin: 0px auto;
height: 20px;
width: 2px;
}
.orgchart-primary {
@include orgchart-brand($brand-primary)
}
.orgchart-danger {
@include orgchart-brand($brand-danger)
}
.orgchart-info {
@include orgchart-brand($brand-info)
}
.orgchart-warning {
@include orgchart-brand($brand-warning)
}
.orgchart-success {
@include orgchart-brand($brand-success)
}
@mixin orgchart-brand-color-node($color) {
.title {
background-color: $color;
}
.content {
border: 1px solid $color;
}
}
.orgchart .node{
&.danger {
@include orgchart-brand-color-node($brand-danger);
}
&.warning {
@include orgchart-brand-color-node($brand-warning);
}
&.success {
@include orgchart-brand-color-node($brand-success);
}
&.primary {
@include orgchart-brand-color-node($brand-primary);
}
&.info {
@include orgchart-brand-color-node($brand-info);
}
&.small {
width: 28px;
}
}
.orgchart > .spinner {
font-size: 100px;
margin-top: 30px;
color: rgba(68, 157, 68, 0.8);
}
.orgchart table {
border-spacing: 0;
border-collapse: inherit;
}
.orgchart > table:first-child {
margin: 20px auto;
}
.orgchart td {
text-align: center;
vertical-align: top;
padding: 0;
}
/* node styling */
.orgchart .node {
display: inline-block;
position: relative;
margin: 0;
padding: 3px;
border: 2px dashed transparent;
text-align: center;
width: 160px;
}
.orgchart .node > .spinner {
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
vertical-align: middle;
font-size: 30px;
color: rgba(68, 157, 68, 0.8);
}
.orgchart .node:hover {
background-color: rgba(238, 217, 54, 0.5);
transition: .5s;
cursor: default;
z-index: 20;
}
.orgchart .node.focused {
background-color: rgba(238, 217, 54, 0.5);
}
.orgchart .node.allowedDrop {
border-color: rgba(68, 157, 68, 0.9);
}
.orgchart .node .title {
position: relative;
text-align: center;
font-size: 12px;
font-weight: bold;
min-height: 20px;
line-height: 18px;
//overflow: hidden;
text-overflow: ellipsis;
//white-space: nowrap;
background-color: rgba(217, 83, 79, 0.8);
color: #fff;
border-radius: 4px 4px 0 0;
}
.orgchart .node .title .symbol {
float: left;
margin-top: 4px;
margin-left: 2px;
}
.orgchart .node .content {
position: relative;
width: 100%;
font-size: 11px;
line-height: 13px;
padding: 2px;
border: 1px solid rgba(217, 83, 79, 0.8);
border-radius: 0 0 4px 4px;
text-align: center;
background-color: #fff;
color: #333;
overflow: hidden;
}
.orgchart .node .edge {
font-size: 15px;
position: absolute;
color: rgba(68, 157, 68, 0.5);
cursor: default;
transition: .2s;
-webkit-transition: .2s;
}
.orgchart .edge:hover {
color: #449d44;
cursor: pointer;
}
.orgchart .node .verticalEdge {
width: calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -moz-calc(100% - 10px);
left: 5px;
}
.orgchart .node .topEdge {
top: -4px;
}
.orgchart .node .bottomEdge {
bottom: -4px;
}
.orgchart .node .horizontalEdge {
width: 15px;
height: calc(100% - 10px);
height: -webkit-calc(100% - 10px);
height: -moz-calc(100% - 10px);
top: 5px;
}
.orgchart .node .rightEdge {
right: -4px;
}
.orgchart .node .leftEdge {
left: -4px;
}
.orgchart .node .horizontalEdge::before {
position: absolute;
top: calc(50% - 7px);
top: -webkit-calc(50% - 7px);
top: -moz-calc(50% - 7px);
}
.orgchart .node .rightEdge::before {
right: 3px;
}
.orgchart .node .leftEdge::before {
left: 3px;
}
.orgchart .node .edge.fa-chevron-up:hover {
transform: translate(0, -4px);
-webkit-transform: translate(0, -4px);
}
.orgchart .node .edge.fa-chevron-down:hover {
transform: translate(0, 4px);
-webkit-transform: translate(0, 4px);
}
.orgchart .node .edge.fa-chevron-right:hover {
transform: translate(4px, 0);
-webkit-transform: translate(4px, 0);
}
.orgchart .node .edge.fa-chevron-left:hover {
transform: translate(-4px, 0);
-webkit-transform: translate(-4px, 0);
}
.orgchart .node .edge.fa-chevron-right:hover ~ .fa-chevron-left {
transform: translate(-4px, 0);
-webkit-transform: translate(-4px, 0);
}
.orgchart .node .edge.fa-chevron-left:hover ~ .fa-chevron-right {
transform: translate(4px, 0);
-webkit-transform: translate(4px, 0);
}
.rightEdgeMoveRight {
transform: translate(4px, 0);
-webkit-transform: translate(4px, 0);
}
.rightEdgeMoveLeft {
transform: translate(-4px, 0);
-webkit-transform: translate(-4px, 0);
}
.oc-export-btn {
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background-color: #5cb85c;
border: 1px solid transparent;
border-color: #4cae4c;
border-radius: 4px;
}
.oc-export-btn[disabled] {
cursor: not-allowed;
filter: alpha(opacity=30);
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.3;
}
.oc-export-btn:hover, .oc-export-btn:focus, .oc-export-btn:active {
background-color: #449d44;
border-color: #347a34;
}
.orgchart ~ .mask {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 999;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
}
.orgchart ~ .mask .spinner {
position: absolute;
top: calc(50% - 54px);
left: calc(50% - 54px);
color: rgba(255, 255, 255, 0.8);
font-size: 108px;
}
.node {
transition: all 0.3s;
webkit-transition: all 0.3s;
opacity: 1;
top: 0;
left: 0;
}
.slide-down {
opacity: 0;
top: 42px;
}
.slide-up {
opacity: 0;
top: -42px;
}
.slide-right {
opacity: 0;
left: 130px;
}
.slide-left {
opacity: 0;
left: -130px;
}
///*
// * jQuery OrgChart Plugin
// * https://github.com/dabeng/OrgChart
// *
// * Demos of jQuery OrgChart Plugin
// * http://dabeng.github.io/OrgChart/local-datasource/
// * http://dabeng.github.io/OrgChart/ajax-datasource/
// * http://dabeng.github.io/OrgChart/ondemand-loading-data/
// * http://dabeng.github.io/OrgChart/option-createNode/
// * http://dabeng.github.io/OrgChart/export-orgchart/
// * http://dabeng.github.io/OrgChart/integrate-map/
// *
// * Copyright 2016, dabeng
// * http://dabeng.github.io/
// *
// * Licensed under the MIT license:
// * http://www.opensource.org/licenses/MIT
// */
//
//.hidden {
// display: none !important;
//}
//
//@mixin orgchart-brand($color) {
// overflow-x: auto;
// .orgchart {
// background-image: linear-gradient(90deg, rgba($color, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba($color, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
// }
// .orgchart .node.focused {
// background-color: rgba($color, 0.5);
// }
// .orgchart .node:hover {
// background-color: rgba($color, 0.5);
// }
// .orgchart .node .content {
// border: 1px solid $color;
// }
// .orgchart .node .title {
// background-color: $color;
// }
// .orgchart td.top {
// border-top: 2px solid $color;
// }
//
// .orgchart td.right {
// border-right: 1px solid $color;
// }
//
// .orgchart td.left {
// border-left: 1px solid $color;
// }
//
// .orgchart td > .down {
// background-color: $color;
// margin: 0px auto;
// height: 20px;
// width: 2px;
// }
//}
//
//.orgchart {
// display: inline-block;
// min-height: 202px;
// min-width: 202px;