[add] Loading employee data

api-payroll/public/html/editEmployee.php

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

api-payroll/public/js/editEmployee.js

@@ -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');
+            }
+        },
+    });
+}