[add] Loading employee data
This commit is contained in:
parent
38d3466f16
commit
b0a19c6daa
@ -20,59 +20,68 @@
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeeFirstName">First name</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeFirstName">First name</label>
|
||||
<div class="col-md-5">
|
||||
<input id="newEmployeeFirstName" name="newEmployeeFirstName" type="text" class="form-control input-md">
|
||||
<input id="editEmployeeFirstName" name="editEmployeeFirstName" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeeMiddleName">Middle name</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeMiddleName">Middle name</label>
|
||||
<div class="col-md-5">
|
||||
<input id="newEmployeeMiddleName" name="newEmployeeMiddleName" type="text" class="form-control input-md">
|
||||
<input id="editEmployeeMiddleName" name="editEmployeeMiddleName" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeeLastName">Last name</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeLastName">Last name</label>
|
||||
<div class="col-md-5">
|
||||
<input id="newEmployeeLastName" name="newEmployeeLastName" type="text" class="form-control input-md">
|
||||
<input id="editEmployeeLastName" name="editEmployeeLastName" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeeBirthDate">Birth date</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeBirthDate">Birth date</label>
|
||||
<div class="col-md-5">
|
||||
<input id="newEmployeeBirthDate" name="newEmployeeBirthDate" type="text" class="form-control input-md datepicker">
|
||||
<input id="editEmployeeBirthDate" name="editEmployeeBirthDate" type="text" class="form-control input-md datepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="editEmployeeCode">Code</label>
|
||||
<div class="col-md-5">
|
||||
<input id="editEmployeeCode" name="editEmployeeCode" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeeEmail">Email</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeEmail">Email</label>
|
||||
<div class="col-md-5">
|
||||
<input id="newEmployeeEmail" name="newEmployeeEmail" type="text" class="form-control input-md">
|
||||
<input id="editEmployeeEmail" name="editEmployeeEmail" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeePhone">Phone</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeePhone">Phone</label>
|
||||
<div class="col-md-5">
|
||||
<input id="newEmployeePhone" name="newEmployeePhone" type="text" class="form-control input-md">
|
||||
<input id="editEmployeePhone" name="editEmployeePhone" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newEmployeeType">Rol</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeType">Rol</label>
|
||||
<div class="col-md-5">
|
||||
<select class="form-control input-md" name="newEmployeeType" id="newEmployeeType">
|
||||
<select class="form-control input-md" name="editEmployeeType" id="editEmployeeType">
|
||||
<option>Employee type</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -80,9 +89,9 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="NewEmpployyContractType">Contract type</label>
|
||||
<label class="col-md-4 control-label" for="editEmployeeContractType">Contract type</label>
|
||||
<div class="col-md-5">
|
||||
<select class="form-control input-md" name="NewEmpployyContractType" id="NewEmpployyContractType">
|
||||
<select class="form-control input-md" name="editEmployeeContractType" id="editEmployeeContractType">
|
||||
<option>Contract type</option>
|
||||
<option value="INTERNO">interno</option>
|
||||
<option value="EXTERNO">Externo</option>
|
||||
@ -93,7 +102,7 @@
|
||||
</div>
|
||||
<div class="row col-md-offset-6">
|
||||
<div class="form-group">
|
||||
<a href="#" class="btn btn-lg btn-success " onclick="saveNewEmployee();">Create</a>
|
||||
<a href="#" class="btn btn-lg btn-success " onclick="saveeditEmployee();">Create</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
$(document).ready(function(){
|
||||
let baseUrl = getbaseUrl();
|
||||
|
||||
loadEmployeeTypes();
|
||||
|
||||
// Setting up bloodhound typeahead
|
||||
let employeesList = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
|
||||
@ -29,7 +31,7 @@ $(document).ready(function(){
|
||||
$("#editEmploySearch").typeahead({
|
||||
hint: true,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
minLength: 3
|
||||
},
|
||||
{
|
||||
name: "result",
|
||||
@ -37,6 +39,133 @@ $(document).ready(function(){
|
||||
source: employeesList.ttAdapter()
|
||||
}).bind("typeahead:selected", function(obj, datum, name) {
|
||||
$(this).data("id", datum.code);
|
||||
console.log(datum.code);
|
||||
loadEmployeeData(datum.code);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Loads the the enmployee types into their select option
|
||||
*/
|
||||
function loadEmployeeTypes(){
|
||||
let baseUrl = getbaseUrl();
|
||||
|
||||
$.ajax({
|
||||
url: baseUrl + '/api/employee/types',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success:function(data){
|
||||
$(data).each(function(i,v){
|
||||
$('#editEmployeeType').append(
|
||||
'<option value="' + v.id + '">'+ v.name + '</option>'
|
||||
);
|
||||
});
|
||||
},
|
||||
error:function(x,e) {
|
||||
let responseText = $.parseJSON(x["responseText"]);
|
||||
|
||||
if (x.status==0) {
|
||||
$('#modalErrorInternetConnection').modal('show');
|
||||
} else if(x.status==404) {
|
||||
$('#modalError404').modal('show');
|
||||
} else if(x.status==500) {
|
||||
$('#modalServerResponseError').modal('show');
|
||||
document.getElementById('modalResponseError').innerHTML = responseText['message'];
|
||||
} else if(e=='parsererror') {
|
||||
$('#modalErrorParsererror').modal('show');
|
||||
} else if(e=='timeout'){
|
||||
$('#modalErrorTimeout').modal('show');
|
||||
} else {
|
||||
$('#modalErrorOther').modal('show');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Searches the employee data by its employee code and loads it
|
||||
* into the form to be edited and updated
|
||||
*
|
||||
* @param code string
|
||||
*/
|
||||
function loadEmployeeData(code){
|
||||
let baseUrl = getbaseUrl();
|
||||
|
||||
$.ajax({
|
||||
url: baseUrl + '/api/employee/code/' + code,
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success:function(data){
|
||||
$('#editEmployeeFirstName').val(data['firstName']);
|
||||
$('#editEmployeeMiddleName').val(data['middleName']);
|
||||
$('#editEmployeeLastName').val(data['lastName']);
|
||||
$('#editEmployeeBirthDate').val(data['birthDate']);
|
||||
$('#editEmployeeCode').val(data['code']);
|
||||
$('#editEmployeeEmail').val(data['email']);
|
||||
$('#editEmployeePhone').val(data['phone']);
|
||||
$('#editEmployeeType').val(data['idEmployeeType']);
|
||||
$('#editEmployeeContractType').val(data['contractType']);
|
||||
},
|
||||
error:function(x,e) {
|
||||
let responseText = $.parseJSON(x["responseText"]);
|
||||
|
||||
if (x.status==0) {
|
||||
$('#modalErrorInternetConnection').modal('show');
|
||||
} else if(x.status==404) {
|
||||
$('#modalError404').modal('show');
|
||||
} else if(x.status==500) {
|
||||
$('#modalServerResponseError').modal('show');
|
||||
document.getElementById('modalResponseError').innerHTML = responseText['message'];
|
||||
} else if(e=='parsererror') {
|
||||
$('#modalErrorParsererror').modal('show');
|
||||
} else if(e=='timeout'){
|
||||
$('#modalErrorTimeout').modal('show');
|
||||
} else {
|
||||
$('#modalErrorOther').modal('show');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function updateEmployee(){
|
||||
let baseUrl = getbaseUrl();
|
||||
|
||||
let parameters = {
|
||||
"firstName":$('#newEmployeeFirstName').val(),
|
||||
"middleName":$('#newEmployeeMiddleName').val(),
|
||||
"lastName":$('#newEmployeeLastName').val(),
|
||||
"birthDate":$('#newEmployeeBirthDate').val(),
|
||||
"email":$('#newEmployeeEmail').val(),
|
||||
"phone":$('#newEmployeePhone').val(),
|
||||
"idEmployeeType":$('#newEmployeeType').val(),
|
||||
"contractType":$('#NewEmpployyContractType').val()
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: baseUrl + '/api/employee',
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: parameters,
|
||||
success:function(data){
|
||||
$('#modalServerResponseSuccess').modal('show');
|
||||
document.getElementById('serverResponseSuccess').innerHTML = 'The employee ' + data['fullName'] + ' has been created with the code ' + data['employeeCode'];
|
||||
},
|
||||
error:function(x,e) {
|
||||
let responseText = $.parseJSON(x["responseText"]);
|
||||
|
||||
if (x.status==0) {
|
||||
$('#modalErrorInternetConnection').modal('show');
|
||||
} else if(x.status==404) {
|
||||
$('#modalError404').modal('show');
|
||||
} else if(x.status==500) {
|
||||
$('#modalServerResponseError').modal('show');
|
||||
document.getElementById('modalResponseError').innerHTML = responseText['message'];
|
||||
} else if(e=='parsererror') {
|
||||
$('#modalErrorParsererror').modal('show');
|
||||
} else if(e=='timeout'){
|
||||
$('#modalErrorTimeout').modal('show');
|
||||
} else {
|
||||
$('#modalErrorOther').modal('show');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user