[add] Employee updated

Corrected a logical  error where the wrong method was being called to get data by code and also made it so the search function only returns names and codes

api-payroll/public/css/landing.css

@@ -7,7 +7,7 @@ body {
     color: black;
 }
 
-#cuerpo{
+#newViewBody{
     top:17%;
     left:1%;
     width:98%;
@@ -23,46 +23,43 @@ body {
 
 }
 
-#cuerpo .modal-body{
+#newViewBody .modal-body{
     color: #000;
     border:none;
 }
 
-#cuerpo .panel-default{
+#newViewBody .panel-default{
     border: 3px solid #4A89A5;
     border-radius: 5px;
 }
 
-#cuerpo .panel > .panel-heading {
+#newViewBody .panel > .panel-heading {
     background-image: none;
     background-color: #4A89A5;
     color: white;
     border-radius: 0;
 }
 
-#cuerpo .btn-default{
+#newViewBody .btn-default{
     border: 2px solid #62655F;
     background: #F9DFAF;
 }
 
-#cuerpo .btn-default:hover{
+#newViewBody .btn-default:hover{
     border: 2px solid #62655F;
     background: #F9DFAF;
 }
 
-#cuerpo .alert-success{
+#newViewBody .alert-success{
     background: #C6E97C;
 }
 
-#modal_header_error{
+.modalHeaderError{
     background-color: #d9534f;
 }
 
-#modal_header_respuesa_servidor_error{
-    background-color: #d9534f;
-}
 
-#modal_header_respuesa_servidor_success{
+.modalHeaderSuccess{
     background-color: #5bc0de;
 }
 

api-payroll/public/html/editEmployee.php

@@ -0,0 +1,111 @@
+<script src="../js/getBaseUrl.js"></script>
+<script src="../js/editEmployee.js"></script>
+
+<form class="form-horizontal" id="editEmployee">
+    <div class="col-md-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h3 class="panel-title">Edit employee</h3>
+            </div>
+            <div class="panel-body">
+                <div class="row">
+                    <div class="form-group">
+                        <label class="col-md-4 control-label" for="editEmploySearch">Employee</label>
+                        <div class="col-md-5">
+                            <input id="editEmploySearch" name="editEmploySearch" type="text" class="form-control input-md">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="form-group">
+                            <label class="col-md-4 control-label" for="editEmployeeFirstName">First name</label>
+                            <div class="col-md-5">
+                                <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="editEmployeeMiddleName">Middle name</label>
+                            <div class="col-md-5">
+                                <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="editEmployeeLastName">Last name</label>
+                            <div class="col-md-5">
+                                <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="editEmployeeBirthDate">Birth date</label>
+                            <div class="col-md-5">
+                                <input id="editEmployeeBirthDate" name="editEmployeeBirthDate" type="text" class="form-control input-md datepicker">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row" id="hidenEmployeeCode">
+                        <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="editEmployeeEmail">Email</label>
+                            <div class="col-md-5">
+                                <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="editEmployeePhone">Phone</label>
+                            <div class="col-md-5">
+                                <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="editEmployeeType">Rol</label>
+                            <div class="col-md-5">
+                                <select class="form-control input-md" name="editEmployeeType" id="editEmployeeType">
+                                    <option>Employee type</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="form-group">
+                            <label class="col-md-4 control-label" for="editEmployeeContractType">Contract type</label>
+                            <div class="col-md-5">
+                                <select class="form-control input-md" name="editEmployeeContractType" id="editEmployeeContractType">
+                                    <option>Contract type</option>
+                                    <option value="INTERNO">interno</option>
+                                    <option value="EXTERNO">Externo</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row col-md-offset-6">
+                    <div class="form-group">
+                        <a href="#" class="btn btn-lg btn-success " onclick="updateEmployee();">Update</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

api-payroll/public/html/landing.php

@@ -26,28 +26,28 @@ if(!isset($_SESSION['userName'])){
                     </button>
                 </div>
                 <div class="collapse navbar-collapse navbar-menubuilder">
-                        <ul class="nav navbar-nav navbar-left">
+                        <ul class="nav navbar-nav navbar-left" id="nevatation-options">
 
                             <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> Employees<span class="caret"></span></a>
                                 <ul class="dropdown-menu">
-                                    <li><a href="#" data-nav_accion="views/cliente.php" onclick="vista_crear_nuevo_salon_evento();"> New employee</a></li>
+                                    <li><a href="#" data-nav_accion="newEmployee.php"> New employee</a></li>
-                                    <li><a href="#" data-nav_accion="views/clientess.php" onclick="vista_crear_nuevo_coach();"> Modify employee</a></li>
+                                    <li><a href="#" data-nav_accion="editEmployee.php"> Modify employee</a></li>
                                 </ul>
                             </li>
 
 
                             <li>
-                                <a href="#" onclick="vista_calendario();"><span class="glyphicon glyphicon-tasks"></span> Management</a>
+                                <a href="#" onclick="loadView();"><span class="glyphicon glyphicon-tasks"></span> Management</a>
                             </li>
 
                             <li>
-                                <a href="#" onclick="vista_calendario();"><span class="glyphicon glyphicon-wrench"></span> Change password</a>
+                                <a href="#" onclick="loadView();"><span class="glyphicon glyphicon-wrench"></span> Change password</a>
                             </li>
                         </ul>
                     <ul class="nav navbar-nav navbar-right">
                         <li>
-                            <a href="#" onclick="logout();"><span class="fa fa-fw fa-power-off"></span> Cerrar Sesión</a>
+                            <a href="#" onclick="logout();"><span class="fa fa-fw fa-power-off"></span> logout</a>
                         </li>
                     </ul>
 
@@ -55,26 +55,25 @@ if(!isset($_SESSION['userName'])){
             </div>
         </div>
     </div>
-    <div class="col-md-12" id="cuerpo"></div>
+
+    <div class="col-md-12" id="newViewBody"></div>
 
     <!--
     =================================================================================
-                            Errores en query de AJAX
+                           Modals for errors encountered by ajax
     =================================================================================
     -->
 
-    <!-- Fallo en la conexion de internet -->
+    <div id="modalErrorInternetConnection" class="modal fade" role="dialog">
-    <div id="modal_error_internet" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p>Por favor revise su conexión a internet.</p>
+                    <p>Please verify your internet connection and try again.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -84,18 +83,16 @@ if(!isset($_SESSION['userName'])){
         </div>
     </div>
 
-    <!-- El recurso solicitado no existe -->
+    <div id="modalError404" class="modal fade" role="dialog">
-    <div id="modal_error_404" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p>El URL del formulario no pudo ser encontrado en el servidor.</p>
+                    <p>Unable to find the requested url in the sever.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -105,18 +102,16 @@ if(!isset($_SESSION['userName'])){
         </div>
     </div>
 
-    <!-- Error interno del servidor donde no es posible detectar la causa especifica -->
+    <div id="modalError500" class="modal fade" role="dialog">
-    <div id="modal_error_500" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p>Error interno del servidor.</p>
+                    <p>The server has encountered an internal error, please try again later.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -126,18 +121,16 @@ if(!isset($_SESSION['userName'])){
         </div>
     </div>
 
-    <!-- El servidor respone con un string que no esta en formato JSON o contiene caracteres adicionales al JSON -->
+    <div id="modalErrorParsererror" class="modal fade" role="dialog">
-    <div id="modal_error_parsererror" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p>Fallo al procesar el JSON enviado por el servidor.</p>
+                    <p>The response from the sever wasn't a proper JSON format</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -147,18 +140,16 @@ if(!isset($_SESSION['userName'])){
         </div>
     </div>
 
-    <!-- El servidortardo demasiado en responder -->
+    <div id="modalErrorTimeout" class="modal fade" role="dialog">
-    <div id="modal_error_timeout" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p>La petición excedió el limite de tiempo.</p>
+                    <p>The request timeout, please try again or verify your connection.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -168,18 +159,16 @@ if(!isset($_SESSION['userName'])){
         </div>
     </div>
 
-    <!-- Si el request AJAX falla por alguna razon no listada -->
+    <div id="modalErrorOther" class="modal fade" role="dialog">
-    <div id="modal_error_otro" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p>Ha ocurrido un error desconocido.</p>
+                    <p>An unknown error occurred.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -191,22 +180,20 @@ if(!isset($_SESSION['userName'])){
 
     <!--
     =================================================================================
-                            Respuesta del servidor
+                            Generic response modals
     =================================================================================
     -->
 
-    <!-- Si el request AJAX falla por alguna razon no listada -->
+    <div id="modalServerResponseError" class="modal fade" role="dialog">
-    <div id="modal_respuesa_servidor_error" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_respuesa_servidor_error">
+                <div class="modal-header modalHeaderError">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>Ha ocurrido un error</center></h4>
+                    <h4 class="modal-title">An error has occurred</h4>
                 </div>
                 <div class="modal-body">
-                    <p id="respuesa_servidor_error"></p>
+                    <p id="modalResponseError"></p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -216,18 +203,16 @@ if(!isset($_SESSION['userName'])){
         </div>
     </div>
 
-    <!-- Si el request AJAX recibe un success en la variable pasasa por el servidor -->
+    <div id="modalServerResponseSuccess" class="modal fade" role="dialog">
-    <div id="modal_respuesa_servidor_success" class="modal fade" role="dialog">
         <div class="modal-dialog">
 
-            <!-- Modal content-->
             <div class="modal-content">
-                <div class="modal-header" id="modal_header_respuesa_servidor_success">
+                <div class="modal-header modalHeaderSuccess" id="modalHeaderServerResponseSuccess">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title"><center>El almacenado ha sido exitoso</center></h4>
+                    <h4 class="modal-title">Success</h4>
                 </div>
                 <div class="modal-body">
-                    <p id="respuesa_servidor_success"></p>
+                    <p id="serverResponseSuccess"></p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@@ -240,4 +225,8 @@ if(!isset($_SESSION['userName'])){
 
 <script src="../js/getBaseUrl.js"></script>
 <script src="../js/landing.js"></script>
+<script src="../js/bootstrap-datepicker.min.js"></script>
+<script src="../js/typeahead.bundle.js"></script>
+
+<link href="../css/bootstrap-datepicker.min.css" rel="stylesheet">
 <link href="../css/landing.css" rel="stylesheet">

api-payroll/public/html/newEmployee.php

@@ -0,0 +1,93 @@
+<script src="../js/newEmployee.js"></script>
+<script src="../js/getBaseUrl.js"></script>
+
+<form class="form-horizontal" id="newEmployeeForm">
+    <div class="col-md-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h3 class="panel-title">New employee</h3>
+            </div>
+            <div class="panel-body">
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="form-group">
+                            <label class="col-md-4 control-label" for="newEmployeeFirstName">First name</label>
+                            <div class="col-md-5">
+                                <input id="newEmployeeFirstName" name="newEmployeeFirstName" 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>
+                            <div class="col-md-5">
+                                <input id="newEmployeeMiddleName" name="newEmployeeMiddleName" 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>
+                            <div class="col-md-5">
+                                <input id="newEmployeeLastName" name="newEmployeeLastName" 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>
+                            <div class="col-md-5">
+                                <input id="newEmployeeBirthDate" name="newEmployeeBirthDate" type="text" class="form-control input-md datepicker">
+                            </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>
+                            <div class="col-md-5">
+                                <input id="newEmployeeEmail" name="newEmployeeEmail" 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>
+                            <div class="col-md-5">
+                                <input id="newEmployeePhone" name="newEmployeePhone" 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>
+                            <div class="col-md-5">
+                                <select class="form-control input-md" name="newEmployeeType" id="newEmployeeType">
+                                    <option>Employee type</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="form-group">
+                            <label class="col-md-4 control-label" for="NewEmpployyContractType">Contract type</label>
+                            <div class="col-md-5">
+                                <select class="form-control input-md" name="NewEmpployyContractType" id="NewEmpployyContractType">
+                                    <option>Contract type</option>
+                                    <option value="INTERNO">interno</option>
+                                    <option value="EXTERNO">Externo</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row col-md-offset-6">
+                    <div class="form-group">
+                        <a href="#" class="btn btn-lg btn-success " onclick="saveNewEmployee();">Create</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

api-payroll/public/js/editEmployee.js

@@ -0,0 +1,180 @@
+/**
+ * Bootstrapping the starting actions for the module
+ */
+$(document).ready(function(){
+    let baseUrl = getbaseUrl();
+
+    loadEmployeeTypes();
+
+    $('.datepicker').datepicker({
+        format: "yyyy/mm/dd",
+        autoclose: true
+    });
+
+    // Not to be edited
+    $("#hidenEmployeeCode").hide();
+
+    // Setting up bloodhound typeahead
+    let employeesList = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        remote: {
+            'cache': false,
+            url: baseUrl + '/api/employee/find',
+
+            replace: function(url, uriEncodedQuery) {
+
+                return url + '/' + uriEncodedQuery
+
+            },
+            wildcard: '%QUERY',
+            filter: function (data) {
+                return data;
+            }
+        }
+    });
+
+    employeesList.initialize();
+
+    $("#editEmploySearch").typeahead({
+            hint: true,
+            highlight: true,
+            minLength: 3
+        },
+        {
+            name: "result",
+            displayKey: "fullName",
+            source: employeesList.ttAdapter()
+        }).bind("typeahead:selected", function(obj, datum, name) {
+        $(this).data("id", 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":$('#editEmployeeFirstName').val(),
+        "middleName":$('#editEmployeeMiddleName').val(),
+        "lastName":$('#editEmployeeLastName').val(),
+        "birthDate":$('#editEmployeeBirthDate').val(),
+        "code":$('#editEmployeeCode').val(),
+        "email":$('#editEmployeeEmail').val(),
+        "phone":$('#editEmployeePhone').val(),
+        "idEmployeeType":$('#editEmployeeType').val(),
+        "contractType":$('#editEmployeeContractType').val()
+    };
+
+    $.ajax({
+        url: baseUrl + '/api/employee',
+        type: 'PUT',
+        dataType: 'json',
+        data: parameters,
+        success:function(data){
+            $('#modalServerResponseSuccess').modal('show');
+            document.getElementById('serverResponseSuccess').innerHTML = 'The employee ' + data['fullName'] + ' has been updated.';
+        },
+        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');
+            }
+        },
+    });
+}

api-payroll/public/js/landing.js

@@ -1,5 +1,9 @@
+/**
+ * Destorys the session for the current user and redirects
+ * back to the login form
+ */
 function logout() {
-    var baseUrl = getbaseUrl();
+    let baseUrl = getbaseUrl();
 
     $.ajax({
         url: baseUrl + '/api/session/logout',
@@ -8,10 +12,65 @@ function logout() {
         success:function(data){
             window.location.replace(baseUrl + '/html/login.php');
         },
-        error:function(x) {
+        error:function(x,e) {
-            if (x.status==500){
+            if (x.status==0) {
-                $('#modalLoginError').modal('show');
+                $('#modalErrorInternetConnection').modal('show');
-                document.getElementById('modalLoginErrorBody').innerHTML = "The user or password didnt match, please try again";
+            } else if(x.status==404) {
+                $('#modalError404').modal('show');
+            } else if(x.status==500) {
+                $('#modalError500').modal('show');
+            } else if(e=='parsererror') {
+                $('#modalErrorParsererror').modal('show');
+            } else if(e=='timeout'){
+                $('#modalErrorTimeout').modal('show');
+            } else {
+                $('#modal_error_otro').modal('show');
+            }
+        },
+    });
+}
+
+/**
+ * Entry point for loading elements from the navatation var, this functuion
+ * will filter the junk clicks that have landed in a dropdown menu and pass
+ * only the ones containing an action to the actual view loader
+ */
+$('#nevatation-options li a').click(function(){
+
+    let view = $(this).data('nav_accion');
+
+    if (view != "#" && view != undefined) {
+        loadView(view);
+    }
+});
+
+/**
+ * Will fetch the html of the desired view and load it into the landing page
+ *
+ * @param requestedView string
+ */
+function loadView(requestedView){
+    let baseUrl = getbaseUrl();
+
+    $.ajax({
+        url: baseUrl + '/html/' + requestedView,
+        type: 'get',
+        success:function(data){
+            $("#newViewBody").hide().html(data).show('slow');
+        },
+        error:function(x,e) {
+            if (x.status==0) {
+                $('#modalErrorInternetConnection').modal('show');
+            } else if(x.status==404) {
+                $('#modalError404').modal('show');
+            } else if(x.status==500) {
+                $('#modalError500').modal('show');
+            } else if(e=='parsererror') {
+                $('#modalErrorParsererror').modal('show');
+            } else if(e=='timeout'){
+                $('#modalErrorTimeout').modal('show');
+            } else {
+                $('#modal_error_otro').modal('show');
             }
         },
     });

api-payroll/public/js/login.js

@@ -16,9 +16,9 @@ $(document).keypress(function(e) {
  * display errors to the user
  */
 function processLogin() {
-    var baseUrl = getbaseUrl();
+    let baseUrl = getbaseUrl();
 
-    var parameters = {
+    let parameters = {
         "userName":$('#userName').val(),
         "password":$('#password').val()
     };
@@ -29,7 +29,6 @@ function processLogin() {
         dataType: 'json',
         data: parameters,
         success:function(data){
-            console.log(JSON.stringify(data));
             if(data["status"] == "success"){
                 window.location.replace(baseUrl + '/html/landing.php');
 

api-payroll/public/js/newEmployee.js

@@ -0,0 +1,94 @@
+/**
+ * Bootstrapping the starting actions for the module
+ */
+$(document).ready(function(){
+    loadEmployeeTypes();
+
+    $('.datepicker').datepicker({
+        format: "yyyy/mm/dd",
+        autoclose: true
+    });
+
+});
+
+/**
+ * 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){
+                $('#newEmployeeType').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');
+            }
+        },
+    });
+}
+
+function saveNewEmployee(){
+    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');
+            }
+        },
+    });
+}

api-payroll/src/application/EmployeeApplication.php

@@ -138,13 +138,18 @@ class EmployeeApplication{
         $email = $requestData['email'];
         $this->asserts->isNotEmpty($email, "The email can't be empty.");
         $this->asserts->betweenLength($email, 1, 100, "The middle name must have a length between 1 and 100 characters.");
+        $this->asserts->isEmail($email, "The email isn't in a correct format");
 
         $phone = $requestData['phone'];
         $this->asserts->isNotEmpty($phone, "The phone number can't be empty.");
         $this->asserts->betweenLength($phone, 10, 10, "The phone number must be 10 digits without special characters.");
 
         $idEmployeeType = $requestData{'idEmployeeType'};
+        $this->asserts->higherThanZero($idEmployeeType, 'idEmployeeType must be higher than zero.');
+
         $contractType = $requestData{'contractType'};
+        $this->asserts->isNotEmpty($contractType, "The contract type can't be empty.");
+        $this->asserts->existInArray($contractType, $this->settings['contractTypes'], 'The contract type is not a valid one.');
 
         // Encrypting the sensitive data
         $securedFirstName = $this->cryptographyService->encryptString($firstName);
@@ -228,6 +233,33 @@ class EmployeeApplication{
         return $results[0]['id'];
     }
 
+    /**
+     * @param $code string
+     * @return integer
+     */
+    function getIdEmployeeByCode($code){
+        $this->asserts->isNotEmpty($code, "The code can't be empty.");
+
+        $stmt = $this->pdo->prepare("SELECT 
+                                    COALESCE((SELECT 
+                                                    id
+                                                FROM
+                                                    employees
+                                                WHERE
+                                                    code = :code),
+                                            0) AS id;
+                                    ");
+
+        $stmt->execute(array(':code' => $code));
+        $results = $stmt->fetchAll();
+        if(!$results){
+            exit($this->databaseSelectQueryErrorMessage);
+        }
+        $stmt = null;
+
+        return $results[0]['id'];
+    }
+
     /**
      * Gets the data associated with the employee
      *
@@ -238,13 +270,16 @@ class EmployeeApplication{
         $this->asserts->higherThanZero($idEmployee, "idEmployee must be higher than 0");
 
         $stmt = $this->pdo->prepare("SELECT 
+                                        e.id AS idEmployee,
                                         p.id AS idPerson,
                                         p.firstName,
                                         p.middleName,
                                         IFNULL(p.lastName, '') AS lastName,
+                                        p.birthDate,
                                         p.email,
                                         p.phone,
                                         e.code,
+                                        e.idEmployeeType,
                                         e.contractType
                                     FROM
                                         employees e
@@ -276,6 +311,7 @@ class EmployeeApplication{
         $employeeData = $this->getEmployeeDataById($idEmployee);
 
         $response = array(
+            "idEmployee" => (int)$employeeData['idEmployee'],
             "idPerson" => (int)$employeeData['idPerson'],
             "firstName" => $this->cryptographyService->decryptString($employeeData['firstName']),
             "middleName" => $this->cryptographyService->decryptString($employeeData['middleName']),
@@ -284,9 +320,11 @@ class EmployeeApplication{
                 ? $this->cryptographyService->decryptString($employeeData['lastName'])
                 : '',
 
+            "birthDate" => $employeeData['birthDate'],
             "email" => $this->cryptographyService->decryptString($employeeData['email']),
             "phone" => $employeeData['phone'],
             "code" => $employeeData['code'],
+            "idEmployeeType" => $employeeData['idEmployeeType'],
             "contractType" => $employeeData['contractType']
 
         );
@@ -301,7 +339,7 @@ class EmployeeApplication{
     function getEmployeeDataByCode($code){
         $this->asserts->isNotEmpty($code, "The code can't be empty.");
 
-        $idEmployee = $this->getIdEmployeeTypeByCode($code);
+        $idEmployee = $this->getIdEmployeeByCode($code);
 
         return $this->proxyGetEmployeeDataById($idEmployee);
     }
@@ -382,15 +420,12 @@ class EmployeeApplication{
      */
     function updateEmployeeData($requestData){
         // Getting and validating the data
-        $idEmployee = $requestData['idEmployee'];
-        $this->asserts->higherThanZero($idEmployee, "idEmployee must be higher than 0");
-
-        $idPerson = $this->getIdPersonByIdEmployee($idEmployee);
-        $this->asserts->higherThanZero($idPerson, "idPerson must be higher than 0");
-
         $code = $requestData['code'];
         $this->asserts->isNotEmpty($code, "The code can't be empty.");
 
+        $idEmployee = $this->getIdEmployeeByCode($code);
+        $idPerson = $this->getIdPersonByIdEmployee($idEmployee);
+
         $firstName = $requestData['firstName'];
         $this->asserts->isNotEmpty($firstName, "The first name can't be empty.");
         $this->asserts->isString($firstName, "The first name must be a string.");
@@ -409,6 +444,7 @@ class EmployeeApplication{
         $email = $requestData['email'];
         $this->asserts->isNotEmpty($email, "The email can't be empty.");
         $this->asserts->betweenLength($email, 1, 100, "The middle name must have a length between 1 and 100 characters.");
+        $this->asserts->isEmail($email, "The email isn't in a correct format");
 
         $phone = $requestData['phone'];
         $this->asserts->isNotEmpty($phone, "The phone number can't be empty.");
@@ -419,6 +455,7 @@ class EmployeeApplication{
 
         $contractType = $requestData{'contractType'};
         $this->asserts->isNotEmpty($contractType, "The contract type can't be empty.");
+        $this->asserts->existInArray($contractType, $this->settings['contractTypes'], 'The contract type is not a valid one.');
 
         // Encrypting the sensitive data
         $securedFirstName = $this->cryptographyService->encryptString($firstName);
@@ -498,6 +535,9 @@ class EmployeeApplication{
     }
 
     /**
+     * Uses an already existing method to create and array containing the details of
+     * all currently active employees
+     *
      * @return array
      */
     function listAllActiveEmployees(){
@@ -506,10 +546,36 @@ class EmployeeApplication{
         $result = array();
 
         foreach($ids as $row){
-            $result[] = $this->proxyGetEmployeeDataById($row['id']);
+            $currentEmployee = $this->proxyGetEmployeeDataById($row['id']);
+
+            $result[] = array(
+                'fullName' => $currentEmployee['firstName']." ".
+                    $currentEmployee['middleName']." ".
+                    $currentEmployee['lastName'],
+                'code' => $currentEmployee['code']
+            );
         }
 
         return $result;
     }
+
+    /**
+     * Takes an array of all active employees and filters them by a string, returning
+     * all sub arrays that contain such string
+     *
+     * @param $partialName string
+     * @return array
+     */
+    function findEmployeeByFullName($partialName){
+        $fullList = $this->listAllActiveEmployees();
+
+        $pattern = '/'.$partialName.'/';
+
+        $matches = array_filter($fullList, function($a) use($pattern)  {
+            return preg_grep($pattern, $a);
+        });
+
+        return $matches;
+    }
 }
 ?>

api-payroll/src/routes.php

@@ -41,10 +41,12 @@ $app->get('/api/employee/types', function (Request $request, Response $response,
         ->write(json_encode($this->employeeApplication->listEmployeeTypes()));
 });
 
-$app->get('/api/employee/all', function (Request $request, Response $response, array $args) {
+$app->get('/api/employee/find/{partialName}', function (Request $request, Response $response, array $args) {
+    $partialName = $args['partialName'];
+
     return $response->withStatus(200)
         ->withHeader('Content-Type', 'application/json')
-        ->write(json_encode($this->employeeApplication->listAllActiveEmployees()));
+        ->write(json_encode($this->employeeApplication->findEmployeeByFullName($partialName)));
 });
 
 $app->post('/api/employee', function ($request, $response) {

api-payroll/src/service/Asserts.php

@@ -56,5 +56,30 @@ class Asserts{
             throw new Exception($errorMessage);
         }
     }
+
+    /**
+     * Compares a string against a regex to determine if it's an email
+     *
+     * @param $string string
+     * @param $errorMessage string
+     * @throws Exception
+     */
+    function isEmail($string, $errorMessage){
+        if(!filter_var($string, FILTER_VALIDATE_EMAIL)){
+            throw new Exception($errorMessage);
+        }
+    }
+
+    /**
+     * @param $string string
+     * @param $array array
+     * @param $errorMessage string
+     * @throws Exception
+     */
+    function existInArray($string, $array, $errorMessage){
+        if(!in_array($string, $array)){
+            throw new Exception($errorMessage);
+        }
+    }
 }
 ?>

api-payroll/src/settings.php

@@ -45,6 +45,7 @@ return [
         // Employee settings
         'employee' => [
             'codeLength' => '3',
+            'contractTypes' => array('INTERNO', 'EXTERNO'),
         ],
     ],
 ];

database/database.sql

@@ -11,7 +11,7 @@ CREATE TABLE IF NOT EXISTS `persons` (
   `lastName` varbinary(500) comment 'The last name of the person',
   `birthDate` DATE NOT NULL DEFAULT '1900-01-01' comment 'Date of birth of the person',
   `email` varbinary(500) NOT NULL comment 'The email adress of the person',
-  `phone` INT(10) UNSIGNED NOT NULL comment 'The phone number of the person should be the mobile one but leaves room for home ones',
+  `phone` BIGINT(10) UNSIGNED NOT NULL comment 'The phone number of the person should be the mobile one but leaves room for home ones',
   `status` ENUM('ACTIVE', 'INACTIVE') NOT NULL DEFAULT 'ACTIVE',
   `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP comment 'The date on which the registry was created',
   `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP comment 'The date of the last time the row was modified',