I am working on an employee performance appraisal application and I am in the assignment part of employees (subordinates) to bosses (superiors).
I have the following table that shows the list of employees, but only when the user type is boss, an extra button (employee assignment) is enabled to the buttons to edit and delete.
The table is like this:
var vm = this;
vm.dt_data = [];
vm.item = {};
vm.edit = edit;
vm.asignacionEmpleados = asignacionEmpleados;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('initComplete', function(){
$timeout(function(){
$compile($('.dt-uikit .md-input'))($scope);
})
})
.withPaginationType('full_numbers')
.withOption('createdRow', function(row, data, dataIndex){
$compile(angular.element(row).contents())($scope);
})
.withOption('ajax', {
dataSrc: function(json){
json['draw'] = 1
json['recordsFiltered'] = json.records.length
json['recordsTotal'] = json.records.length
return json.records;
},
url: server+'ws/colaboradores',
type: 'GET',
})
.withOption('processing', true)
.withOption('responsive', true);
var index = 1;
countIndex = function(){
return index++;
}
vm.dtColumns = [
DTColumnBuilder.newColumn(countIndex).withTitle('id'),
DTColumnBuilder.newColumn('name').withTitle('Nombre'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('tipos_colaboradores.nombre').withTitle('Tipo colaborador'),
DTColumnBuilder.newColumn('puestos_colaboradores.nombre').withTitle('Puesto'),
DTColumnBuilder.newColumn('departamento').withTitle('Departamento'),
DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.item[data.id] = data;
return ' <a href="#" data-uk-modal="{target:\'#modalEditar\'}" ng-click="Colaboradores.edit(Colaboradores.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
' <a href="#" data-uk-modal="{target:\'#modalEliminar\'}" ng-click="Colaboradores.edit(Colaboradores.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>'+
' <a ng-show="formVisibility" ng-if="'+data.idtipocolaborador+' == 2 || '+data.idtipocolaborador+' == 3 " ng-click="Colaboradores.asignacionEmpleados(Colaboradores.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-teal-900 uk-text-contrast"></i></a>'; //este es el boton extra que se agrega si el tipo de usuario es 'jefe' o 'gerente'
})
];
$scope.formVisibility = true;
function edit(item){
$scope.item = item;
}
It turns out that when you click on the 'Employee Assignment' button, you hide the previous table and enter the Employee Assignment function showing the table with the list of employees that you have or will have charge a boss, all this in one view. The following table is the employee assignment that I mention at this point:
function asignacionEmpleados(item){
console.log("ENTRO A LA SECCION PARA AGREGAR EMPLEADOS");
var modalAsignarEmpleado = UIkit.modal("#modalAsignarEmpleado");
var modalEliminarAsignacion = UIkit.modal("#modalEliminarAsignacion");
$scope.item = item;
$scope.formVisibility = !$scope.formVisibility; //Ocultar tabla de colaboradores y mostrar la asignacion de empleados
console.log(item);
vm.dt_data2 = [];
vm.item2 = {};
vm.edit2 = edit2;
vm.dtOptions2 = DTOptionsBuilder.newOptions()
.withOption('initComplete', function() {
$timeout(function() {
$compile($('.dt-uikit .md-input'))($scope);
})
})
.withPaginationType('full_numbers')
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withOption('ajax', {
dataSrc: function(json) {
json['draw']=1
json['recordsFiltered'] = json.records.length
json['recordsTotal'] =json.records.length
return json.records;
},
url: server+'ws/jefesubordinados/'+item.id,
type: 'GET',
})
.withOption('processing', true)
.withOption('responsive', true);
vm.dtColumns2 = [
DTColumnBuilder.newColumn('subordinados.name').withTitle('Subordinado'),
DTColumnBuilder.newColumn('subordinados.usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data2,type,full){
vm.item2[data2.id] = data2;
return ' <a href="#" data-uk-modal="{target:\'#modalEliminarAsignacion\'}" ng-click="Colaboradores.edit2(Colaboradores.item2[' + data2.id + '])">'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>'
})
];
function edit2(item2){
$scope.item2 = item2;
console.log(item2);
console.log("ENTRO A LA FUNCION EDIT2");
}
$scope.regresarVista = function(){
$scope.formVisibility = !$scope.formVisibility;
}
}
When I delete an employee assignment, the first time I do it shows the following modal to confirm the elimination of the sign. In this first time I do it, everything is perfect, it shows the information in the modal I delete and everything OK.
<div class="uk-modal" id="modalEliminarAsignacion">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<h3 class="uk-modal-title">Eliminar Asignacion</h3>
</div>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1">
<div class="parsley-row">
<label for="fullname">Subordinado<span class="req">*</span></label>
<input type="text" ng-model="item2.subordinados.name" required class="md-input" md-input disabled />
</div>
</div>
</div>
<div class="uk-modal-footer uk-text-right">
<button type="button" class="md-btn md-btn-flat uk-modal-close">Cerrar</button>
<button type="button" ng-click="EliminarAsignacion(item2)" class="md-btn md-btn-flat md-btn-flat-primary">Eliminar</button>
</div>
</div>
</div>
The problem arises when I go back to the previous view, that is to say where all the employees are and then I return to the employee assignment and try to eliminate an assignment tells me that the object item2
is undefined, therefore no longer I load the information well in the modal and I can not delete it, until I refresh the page, this only happens when I only enter with an employee of type 'boss' since if I change to another employee of type 'boss' everything works well for me.