%PDF- %PDF-
Direktori : /home/opti/workflow/src/views/hr/job/ |
Current File : /home/opti/workflow/src/views/hr/job/payGrade.ejs |
<% include ../../partials/header %> <!-- ////////////////////////////////////////////////////////////////////////////--> <% include ../../partials/sidebar %> <!-- <link rel="stylesheet" type="text/css" href="/app-assets/ekko-lightbox/dist/ekko-lightbox.css"> --> <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/icheck.css"> <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/custom.css"> <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/checkboxes-radios.css"> <style> .modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem; } .modal-header { background-color:#2196F3; } /* .dataTables_filter, .dataTables_info { display: none; } */ </style> <div class="app-content content"> <div class="content-wrapper"> <div class="content-header row"> </div> <div class="content-body"> <!-- Breadcrumb starts--> <div class="content-header-left col-md-6 col-12 mb-2"> <h3 class="content-header-title">Employment Status</h3> <div class="row breadcrumbs-top"> <div class="breadcrumb-wrapper col-12"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/">Dashboard</a> </li> <li class="breadcrumb-item"><a href="/hr">Human Resources</a> </li> <li class="breadcrumb-item active">Employment Status </li> </ol> </div> </div> </div> <!-- Breadcrumb ends--> <!-- <div class="text-center"> <a class="quick-btn text-red" href="/accounts/payments/create" > <i class="la la-plus fa-2x"></i> <span>New Payment</span> </a> </div> --> <%- format_messages(messages) %> <section class="row"> <div class="col-lg-12 col-md-6 col-sm-12"> <div class="card " > <div class="card-header" > <h4 class="card-title">Pay Grade</h4> <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a> <div class="heading-elements"> <ul class="list-inline mb-0"> <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addPayGrade"><i class="ft-plus white"></i> Add Pay Grade</button></li> <li><a data-action="collapse"><i class="ft-minus"></i></a></li> <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> --> <li><a data-action="expand"><i class="ft-maximize"></i></a></li> <li><a data-action="close"><i class="ft-x"></i></a></li> </ul> </div> </div> <div class="card-content collapse show"> <div class="card-body card-dashboard " > <div class="table-responsive"> <table class="table" > <thead> <th>payGrade</th> <th>Description</th> <th>Currency</th> <th>Min Salary</th> <th>Max Salary</th> <th></th> </thead> <tbody id="payGrades"> <% payGrades.forEach(payGrade => { %> <tr id="payGrade<%= payGrade.id %>"> <td><%= payGrade.title %></td> <td><%= payGrade.description %> </td> <td><%= /* payGrade.currency */"NGN - Nigeria" %> </td> <td><%= payGrade.minSalary %> </td> <td><%= payGrade.maxSalary %> </td> <td> <a class="btn dropdown-item" href="/hr/jobs/add-employment-payGrade" data-toggle="modal" onclick="editPayGrade('<%= JSON.stringify(payGrade) %>')" data-target="#addPayGrade"><i class="la la-pencil" ></i> </a> </td> </tr> <% }) %> </tbody> </table> </div> </div> </div> </div> </div> </section> </div> </div> </div> <!-- ////////////////////////////////////////////////////////////////////////////--> <input type="hidden" id="_csrf" name="_csrf" value="<%= _csrfToken %>"> <!-- /////////// --> <div class="modal fade text-left" id="addPayGrade" tabindex="-1" role="dialog" aria-labelledby="addPayGrade" aria-hidden="true"> <form action="/hr/jobs/add-payGrade" method="POST" id="addPayGradeForm"> <input type="hidden" id="payGrade_id" name="id"> <input type="hidden" name="_csrf" value="<%= _csrfToken %>"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header bg-blue"> <h3 class="modal-title" ><span id="_payGradeModalLabel">Add Pay Grade</span> </h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="fromContact" id="">Pay Grade :</label> <input type="text" class="form-control" id="payGradeTitle" name="title" > </div> <div class="form-group"> <label for="fromContact" id="">Description :</label> <textarea type="text" class="form-control" id="payGradeDescription" name="description" ></textarea> </div> <div class="form-group"> <label for="fromContact" id="">Currency :</label> <select name="currencyId" id="currencyId"> <option value="1">NGN - Nigeria</option> </select> </div> <div class="form-group"> <label for="fromContact" id="">Minimum Salary :</label> <input type="number" class="form-control" id="minSalary" name="minSalary" required value=""> </div> <div class="form-group"> <label for="fromContact" id="">Maximum Salary :</label> <input type="number" class="form-control" id="maxSalary" name="maxSalary" required value=""> </div> </div> <div class="modal-footer"> <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button> <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button> </div> </div> </div> </form> </div> <% include ../../partials/footer %> <!-- <script src="/app-assets/ekko-lightbox/dist/ekko-lightbox.js"></script> --> <script> $("#addPayGradeForm").on('submit',(event)=>{ $('#spinnerContainer').addClass('show'); event.preventDefault(); var minSalary = parseFloat($("#minSalary").val()); var maxSalary = parseFloat($("#maxSalary").val()); if(minSalary > maxSalary){ $('#spinnerContainer').removeClass('show'); return toastr.info("Minimum Salary can not be greater than Maximum Salary", '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000}); } var data = getFormData($('#addPayGradeForm')) $.ajax({ type: "POST", // Post / Get method url: "/hr/jobs/add-pay-grade", //Where form data is sent on submission dataType: "text", // Data type, HTML, json etc. data: data, //Form variables success: function (response) { $('#spinnerContainer').removeClass('show'); response = JSON.parse(response); // console.log(response) if(response.status == "success"){ payGrade = response.payGrade; // console.log(response.payGrade) var tr = `<td>${payGrade.title}</td> <td> ${payGrade.description} </td> <td> NGN - Nigeria </td> <td> ${payGrade.minSalary} </td> <td> ${payGrade.maxSalary} </td> <td><a class="btn dropdown-item" href="/hr/jobs/add-payGrade" data-toggle="modal" onclick="editPayGrade('${JSON.stringify(JSON.stringify(payGrade))}')" value="" data-target="#addPayGrade"><i class="la la-pencil" ></i> </a></td>` if(data.id){ $(`#payGrade${data.id}`).html(tr); } else{ $('#payGrades').append("<tr>"+tr+"</tr>"); } toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000}); $('#payGrade_id').val('') $('#payGradeTitle').val('') $('#payGradeDescription').val('') // $('#from').val('') $('#payGradeMinSalary').val('') $('#payGradeMaxSalary').val('') $('#_payGradeModalLabel').html("Add Pay Grade") } else{ toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000}); } $(".d").trigger('click'); }, error:function (error){ $('#spinnerContainer').removeClass('show'); alert(error.message) } }) }) function editPayGrade(payGrade){ payGrade = JSON.parse(payGrade); $('#_payGradeModalLabel').html("Edit Pay Grade") $('#payGrade_id').val(payGrade.id) $('#payGradeTitle').val(payGrade.title) $('#payGradeDescription').val(payGrade.description) // $('#payGradeCurrency').val(payGrade.currency) $('#payGradeCurrency').val(payGrade.currency) $('#payGradeMinSalary').val(payGrade.minSalary) $('#payGradeMaxSalary').val(payGrade.maxSalary) } function getFormData(form) { var rawJson = form.serializeArray(); var model = {}; $.map(rawJson, function (n, i) { model[n['name']] = n['value']; }); return model; } </script>