%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">Jobs</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">Jobs
</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 >
<form method="POST" action="/hr/employee/add" enctype="multipart/form-data" id="form">
<input type="hidden" name="_csrf" value="<%= _csrfToken %>">
<div id="accordionWrap2" role="tablist" aria-multiselectable="true">
<div class="card collapse-icon accordion-icon-rotate" >
<div id="heading4" class="card-header">
<a data-toggle="collapse" data-parent="#accordionWrap2" href="#accordion4" aria-expanded="false" aria-controls="accordion" class="card-title lead collapsed">Job Detail<i class="la ft-chevrons-down"></i></a>
</div>
<div id="accordion4" role="tabpanel" aria-labelledby="heading4" class="collapse show" style="">
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<label for="gender">Job Category</label>
<select class="custom-select" name="jobCategoryId" id="jobCategoryId" >
<option >Select Job Category</option>
<% jobCategories.forEach( category =>{ %>
<option value="<%= category.id %>"><%= category.title %> </option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label for="gender">Job Title</label>
<select class="custom-select" name="jobTitleId" id="jobTitleId" required>
</select>
</div>
<div class="col-md-4">
<label for="gender">Employment Status</label>
<select class="custom-select" name="employmentStatusId" id="employmentStatusId" >
<% employmentStatuses.forEach( status =>{ %>
<option value="<%= status.id %>"><%= status.title %> </option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label for="gender">Work Shift</label>
<select class="custom-select" name="workShiftId" id="workShiftId" >
<% workShifts.forEach( shift =>{ %>
<option value="<%= shift.id %>"><%= shift.title %> </option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label for="dob">Date of Employment</label>
<input type="date" class="form-control " name="dateOfEmployment" id="doEmployment" placeholder="Date of Employment">
</div>
<div class="col-md-4">
<label for="dob">Permanent on</label>
<input type="date" class="form-control " name="dateOfPermanency" id="dateOfPermanency" placeholder="Date of Permanency">
</div>
<div class="col-md-4">
<label for="dob">Contract Starts</label>
<input type="date" class="form-control " name="contractStart" id="contractStart" placeholder="Contract Effective Date">
</div>
<div class="col-md-4">
<label for="dob">Contract Ends</label>
<input type="date" class="form-control " name="contractEnd" id="contractEnd" placeholder="Contract End Date">
</div>
</div>
</div>
</div>
</div>
<div id="heading5" class="card-header">
<a data-toggle="collapse" data-parent="#accordionWrap2" href="#accordion5" aria-expanded="false" aria-controls="accordion" class="card-title lead collapsed">Salary<i class="la ft-chevrons-down"></i></a>
</div>
<div id="accordion5" role="tabpanel" aria-labelledby="heading5" class="collapse " style="">
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<label for="gender">Pay Grade</label>
<select class="custom-select" name="payGradeId" id="payGradeId" >
<option >Select Pay Grade</option>
<% payGrades.forEach( grade =>{ %>
<option data-grade="<%= JSON.stringify(grade) %>" value="<%= grade.id %>" id="grade<%= grade.id %>"><%= grade.title %> </option>
<% }) %>
</select>
</div>
<div class="row col-md-8 col-sm-12 col-lg-8">
<div class="col-md-4">
<label for="dob">Currency</label>
<div name="currency" id="currency" class="">--</div>
<input type="hidden" name="currencyId" value="1" class="">
</div>
<div class="col-md-4">
<label for="dob">Minimum Salary</label>
<div name="minSalary" id="minSalary" >--</div>
</div>
<div class="col-md-4">
<label for="dob">Maximum Salary</label>
<div name="maxSalary" id="maxSalary" >--</div>
</div>
</div>
<input type="hidden" name="salaryComponents" id="components" class="form-control">
<div class="col-12"><br> <p></p>Salary Component</div>
<% type = "Earning" %>
<div class="col-md-6" >
<table class="table">
<thead>
<th> Earning</th>
<th> Amount/Percentage</th>
<th> </th>
</thead>
<tbody >
<% salaryComponents.forEach( component => { %>
<% if(type != component.type){ %>
<% type = component.type %>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table" >
<thead>
<th> <%= component.type %></th>
<th> Amount/Percentage</th>
</thead>
<tbody >
<% } %>
<tr>
<td ><%= component.title %></td>
<td >
<%= component.valueType %>
<input type="number" id="components<%= component.id %>" class="form-control components" oninput="calculateSalary()" min="0.00">
</td>
<td> </td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-12 text-center text-md-left">
</div>
<div class="col-md-5 col-sm-12">
<p class="lead">Total </p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Total Earning</td>
<td class="text-right"><span class="_currencyLabel"></span><span id="totalEarning">0.00</span></td>
</tr>
<tr>
<td>Total Deduction</td>
<td class="text-right"><span class="_currencyLabel"></span><span id="totalDeduction">0.00</span></td>
</tr>
<tr>
<td>Annual Payment</td>
<td class=" text-right"><span class="_currencyLabel"></span><span id="annualPayment">0.00</span></td>
</tr>
<tr class="bg-grey bg-lighten-4">
<td class="text-bold-800">Monthly Payment</td>
<td class="text-bold-800 text-right pink"><span class="_currencyLabel"></span><span class="balanceDue" id="monthlyPayment">0.00</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="display: flex; justify-content: center;">
<button class="btn btn-success btn-min-width mr-1 mb-1" type="submit">Save</button>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<input type="hidden" id="_csrf" name="_csrf" value="<%= _csrfToken %>">
<!-- /////////// -->
<% include ../partials/footer %>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script>
var salaryComponents ;
///same script exist in employee/view
$("#jobCategoryId").on('change', (event)=>{
$('#spinnerContainer').addClass('show');
$("#jobTitleId").html('');
var jobCategoryId = $("#jobCategoryId").val();
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/get-jobTitles", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: {_csrf: "<%= _csrfToken %>", jobCategoryId }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response.jobTitles)
if(response.status == "success"){
var jobTitles = response.jobTitles;
$("#jobTitleId").append("<option >Select Job Title</option>");
jobTitles.forEach(job => {
$("#jobTitleId").append(`<option value="${job.id}">${job.title}</option>`);
});
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
$("#payGradeId").on('change', (event)=>{
// $('#spinnerContainer').addClass('show');
// $("#jobTitleId").html('');
var payGradeId = $("#payGradeId").val();
if(isNaN(payGradeId)){
$("#currency").html("--");
$("#minSalary").html('--');
$("#maxSalary").html("--");
$("._currencyLabel").html("");
}
else{
payGrade = $(`#grade${payGradeId}`).data('grade');
$("#currency").html("NGN - Nigeria");
// $("#minSalary").html(numeral(payGrade.minSalary).format('0,0.00'));
$("#minSalary").html(payGrade.minSalary);
$("#maxSalary").html(payGrade.maxSalary);
$("._currencyLabel").html("N");
}
calculateSalary();
})
$("#form").on('submit', event =>{
var components = []
$('.components').each( (index, component) =>{
components.push($(component).val());
// console.log(component)
})
$("#components").val(JSON.stringify(components));
// console.log($("#components").val())
// event.preventDefault();
})
function calculateSalary(){
var earnings = 0, deduction = 0, annualPayment = 0, monthlySalary = 0;
var basicSalary = parseFloat($(`#components${salaryComponents[0].id}`).val())
if(isNaN(basicSalary)){
console.log(basicSalary, "NAN")
return;
}
salaryComponents.forEach((component, index)=>{
var componentValue = parseFloat($(`#components${component.id}`).val());
if(!isNaN(componentValue)){ // console.log(componentValue);
if(component.type == "Earning"){
if(component.valueType == "Amount"){
earnings += componentValue;
}
else{
//its percentage
earnings += (componentValue * basicSalary)/100;
}
}
else{
//its deduction
if(component.valueType == "Amount"){
deduction += componentValue;
}
else{
//its percentage
deduction += (componentValue * basicSalary)/100;
}
}
}
})
annualPayment = parseFloat(earnings - deduction);
monthlySalary = parseFloat(annualPayment / 12)
// console.log(monthlySalary,annualPayment,earnings,deduction);
$("#annualPayment").html(numeral(annualPayment).format('0,0.000'))
$("#monthlyPayment").html(numeral(monthlySalary).format('0,0.000'))
$("#totalEarning").html(numeral(earnings).format('0,0.000'))
$("#totalDeduction").html(numeral(deduction).format('0,0.000'))
}
///script in employee/view ends here
// console.log(salaryComponents)
$(document).ready(function(){
$('#spinnerContainer').addClass('show');
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/get-salaryComponents", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: {_csrf: "<%= _csrfToken %>" }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response.jobTitles)
if(response.status == "success"){
salaryComponents = response.salaryComponents;
// $("#jobTitleId").append("<option >Select Job Title</option>");
// jobTitles.forEach(job => {
// $("#jobTitleId").append(`<option value="${job.id}">${job.title}</option>`);
// });
}
else{
// toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
</script>
Zerion Mini Shell 1.0