Commit fdc2528b authored by D’jalmar Gutierrez Titirico's avatar D’jalmar Gutierrez Titirico 🚲
Browse files

pruebas de implementacion del framework para el organigrama

parent f2ee4ddf
......@@ -143,6 +143,7 @@ h4.color-primary {
@import 'cargos/cargos.scss';
@import 'comentarios/comentarios.scss';
@import 'datosPostulantes/datosPostulantes.scss';
@import 'entidades/entidades.scss';
@import 'main/main.scss';
@import 'postulaciones/postulaciones.scss';
@import 'postulantes/postulantes.scss';
......@@ -151,4 +152,5 @@ h4.color-primary {
@import 'tiposDato/tiposDato.scss';
@import '../components/footer/footer.scss';
@import '../components/modal/modal.scss';
@import '../components/organigrama/framework/jquery.orgchart.scss';
// endinjector
'use strict';
(()=>{
angular.module('moduloPersonalApp')
.controller('EntidadesCtrl', function ($scope) {
});
})();
'use strict';
describe('Controller: EntidadesCtrl', function () {
// load the controller's module
beforeEach(module('moduloPersonalApp'));
var EntidadesCtrl, scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
EntidadesCtrl = $controller('EntidadesCtrl', {
$scope: scope
});
}));
it('should ...', function () {
expect(1).to.equal(1);
});
});
<div class="row">
<div class="container">
<div>Vista de las entidades</div>
<a ui-sref=".organigrama({entidadId:2})" class="btn btn-link">Ver organigrama</a>
</div>
</div>
<div ui-view class="container"></div>
'use strict';
angular.module('moduloPersonalApp')
.config(function ($stateProvider) {
$stateProvider
.state('entidades', {
url: '/entidades',
templateUrl: 'app/entidades/entidades.html',
controller: 'EntidadesCtrl'
})
.state('entidades.organigrama', {
url: '/:entidadId/organigrama',
templateUrl: 'app/entidades/organigrama/entidades.organigrama.html',
controller: 'EntidadOrganigramaCtrl',
controllerAs: 'vm'
});
});
'use strict';
(()=> {
class EntidadService {
constructor($resource, appConfig) {
}
getEntidades() {
return {
'name': 'Jan Perez',
'title': 'Jefe de innovacion',
'children': [
{'name': 'Teodoro Nina', 'title': 'Consultor en linea'},
{
'name': 'Djalmar Gutierrez', 'title': 'Consultor en lineaEncargado Firma Digital',
'children': [
{'name': 'Gustavo Callejas', 'title': 'Pasante'}
]
},
{'name': 'David Mamani', 'title': 'Encargado Firma Digital'}
]
};
}
}
angular.module('moduloPersonalApp')
.service('EntidadService', EntidadService);
})();
'use strict';
describe('Service: entidades', function () {
// load the service's module
beforeEach(module('moduloPersonalApp'));
// instantiate service
var entidades;
beforeEach(inject(function (_entidades_) {
entidades = _entidades_;
}));
it('should do something', function () {
expect(!!entidades).to.be.true;
});
});
/**
* Created by adsib on 03-05-16.
*/
'use strict';
(()=> {
class EntidadOrganigramaController {
constructor(EntidadService, $stateParams) {
this.service = EntidadService;
this.id = $stateParams.entidadId;
this.arbol = EntidadService.getEntidades();
}
}
angular.module('moduloPersonalApp')
.controller('EntidadOrganigramaCtrl', EntidadOrganigramaController)
})();
'use strict';
(()=> {
'use strict';
class PostulanteService {
constructor($resource, appConfig) {
......
This diff is collapsed.
/*
* 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) {
.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)
}
.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: 130px;
}
.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;
height: 20px;
line-height: 20px;
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;
}
'use strict';
class OrganigramaController {
constructor($scope) {
this.arbol = $scope.vm.arbol;
$('#chart').orgchart({
data: this.arbol,
nodeTitle: 'name',
nodeContent: 'title',
draggable: true
});
}
}
angular.module('moduloPersonalApp')
.controller('OrganigramaController', OrganigramaController);
/**
* Created by adsib on 03-05-16.
*/
'use strict';
angular.module('moduloPersonalApp')
.directive('organigrama', ()=>({
templateUrl: 'components/organigrama/organigrama.html',
// restrict: 'E',
require: '^parent',
controller: 'OrganigramaController'
}));
<div class="container">
<div id="chart" class="orgchart-primary center-block"></div>
<p>{{vm.arbol}}</p>
</div>