%PDF-
%PDF-
Mini Shell
Mini Shell
<% 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>
Zerion Mini Shell 1.0