%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 class="row">
<div class=" col-lg-12 col-md-6 col-sm-12" >
<div class="card " >
<div class="card-header" >
<h4 class="card-title">Job Categories</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="#addCategory"><i class="ft-plus white"></i> Add Job Category</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 " style="max-height:500px; overflow: scroll">
<div class="table-responsive">
<table class="table" >
<thead>
<!-- <th>S/N</th> -->
<th>Job Category</th>
<th>Category Description</th>
<th></th>
</thead>
<tbody id="categories">
<% categories.forEach((category, index) => { %>
<tr id="category<%= category.id %>">
<!-- <td><%= index+1 %></td> -->
<td><%= category.title %></td>
<td><%= category.description %> </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-category" data-toggle="modal" onclick="editCategory('<%= JSON.stringify(category) %>')" value="" data-target="#addCategory"><i class="la la-pencil" ></i> </a></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-6 col-sm-12">
<div class="card " >
<div class="card-header" >
<h4 class="card-title">Job Titles</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="#addTitle"><i class="ft-plus white"></i> Add Job Title</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 " style="max-height:500px; overflow: scroll">
<div class="table-responsive">
<table class="table" >
<thead>
<!-- <th style="width:5%">S/N</th> -->
<th>Job Title</th>
<th>Job Description</th>
<th></th>
</thead>
<tbody id="titles">
<% titles.forEach(title => { %>
<tr id="title<%= title.id %>">
<!-- <td></td> -->
<td><%= title.title %></td>
<td><%= title.description %> </td>
<td>
<a class="btn dropdown-item" href="/hr/jobs/add-title" data-toggle="modal" onclick="editJob('<%= JSON.stringify(title) %>')" data-target="#addTitle"><i class="la la-pencil" ></i> </a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<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">Salary Components</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="#addSalary"><i class="ft-plus white"></i> Add Salary Component</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 " style="max-height:500px; overflow: scroll">
<div class="table-responsive">
<table class="table" >
<thead>
<th>Component Title</th>
<th>Component Type</th>
<th>Part of Total Payable</th>
<th>Value Type</th>
<th></th>
</thead>
<tbody id="salaries">
<% salaryComponents.forEach(salary => { %>
<tr id="salary<%= salary.id %>">
<td><%= salary.title %></td>
<td><%= salary.type %> </td>
<td><% if(salary.partOfTotal) { %> Yes <% }else{ %> No <% } %> </td>
<td><%= salary.valueType %> </td>
<td>
<a class="btn dropdown-item" href="/hr/jobs/add-salary-component" data-toggle="modal" onclick="editSalary('<%= JSON.stringify(salary) %>')" data-target="#addSalary"><i class="la la-pencil" ></i> </a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<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">Employment Status</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="#addStatus"><i class="ft-plus white"></i> Add Employment Status</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 " style="max-height:500px; overflow: scroll">
<div class="table-responsive">
<table class="table" >
<thead>
<th>Status</th>
<th>Description</th>
<th></th>
</thead>
<tbody id="statuses">
<% employmentStatuses.forEach(status => { %>
<tr id="status<%= status.id %>">
<td><%= status.title %></td>
<td><%= status.description %> </td>
<td>
<a class="btn dropdown-item" href="/hr/jobs/add-employment-status" data-toggle="modal" onclick="editStatus('<%= JSON.stringify(status) %>')" data-target="#addStatus"><i class="la la-pencil" ></i> </a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<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">Work Shift</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="#addShift"><i class="ft-plus white"></i> Add Work Shift</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 " style="max-height:500px; overflow: scroll">
<div class="table-responsive">
<table class="table" >
<thead>
<th>Shift</th>
<th>Description</th>
<th>Start Time</th>
<th>End Time</th>
<th>Hours</th>
<th></th>
</thead>
<tbody id="shifts">
<% workShifts.forEach(shift => { %>
<tr id="shift<%= shift.id %>">
<td><%= shift.title %></td>
<td><%= shift.description %> </td>
<td><%= shift.from %> </td>
<td><%= shift.to %> </td>
<td><%= shift.from - shift.to %> </td>
<td>
<a class="btn dropdown-item" href="/hr/jobs/add-employment-shift" data-toggle="modal" onclick="editShift('<%= JSON.stringify(shift) %>')" data-target="#addShift"><i class="la la-pencil" ></i> </a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<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 " style="max-height:500px; overflow: scroll">
<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="addTitle" tabindex="-1" role="dialog" aria-labelledby="addTitle"
aria-hidden="true">
<form action="/hr/jobs/add-title" method="POST" id="addTitleForm" enctype="multipart/form-data">
<input type="hidden" id="job_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="_jobModalLabel">Add Job Title</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="jobTitle" id="">Job Title :</label>
<input type="text" class="form-control" name="title" id="jobTitle" required value="">
</div>
<div class="form-group">
<label for="jobDescription" >Job Description :</label>
<textarea type="text" class="form-control" name="description" id="jobDescription" ></textarea>
</div>
<div class="form-group">
<label for="jobCategory" id="">Job Category :</label>
<select name="categoryId" id="jobCategoryId">
<option >Select Job Category</option>
<% categories.forEach( category => { %>
<option value="<%= category.id %>" ><%= category.title %></option>
<% }) %>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" id="close">Close</button>
<button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
</div>
</div>
</div>
</form>
</div>
<div class="modal fade text-left" id="addCategory" tabindex="-1" role="dialog" aria-labelledby="addCategory"
aria-hidden="true">
<form action="/hr/jobs/add-category" method="POST" id="addCategoryForm">
<input type="hidden" id="category_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="_categoryModalLabel">Add Job Category</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="">Category Title :</label>
<input type="text" class="form-control" id="categoryTitle" name="title" required value="">
</div>
<div class="form-group">
<label for="fromContact" id="">Category Description :</label>
<textarea type="text" class="form-control" id="categoryDescription" name="description" ></textarea>
</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>
<div class="modal fade text-left" id="addSalary" tabindex="-1" role="dialog" aria-labelledby="addSa"
aria-hidden="true">
<form action="/hr/jobs/add-category" method="POST" id="addSalaryForm">
<input type="hidden" id="salary_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="_salaryModalLabel">Add Salary Component</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="">Component Title :</label>
<input type="text" class="form-control" id="salaryTitle" name="title" required value="">
</div>
<div class="form-group">
<label for="fromContact" id="">Type :</label>
<fieldset class="skin skin-flat">
<input type="radio" name="type" required value="1" id="typeEarning">
<label for="input-radio-15">Earning</label>
<input type="radio" name="type" required value="2" id="typeDeduction">
<label for="input-radio-15">Deduction</label>
</fieldset>
</div>
<div class="form-group">
<label for="fromContact" id="">Part of Total Salary :</label>
<fieldset class="skin skin-flat">
<input type="radio" name="partOfTotal" required value="1" id="partOfTotalYes">
<label for="input-radio-15">Yes</label>
<input type="radio" name="partOfTotal" required value="2" id="partOfTotalNo">
<label for="input-radio-15">No</label>
</fieldset>
</div>
<div class="form-group">
<label for="fromContact" id="">Value Type :</label>
<fieldset class="skin skin-flat">
<input type="radio" name="valueType" required value="1" id="valueAmount">
<label for="input-radio-15">Amount</label>
<input type="radio" name="valueType" required value="2" id="valuePercentages">
<label for="input-radio-15">Percentage</label>
</fieldset>
</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>
<div class="modal fade text-left" id="addStatus" tabindex="-1" role="dialog" aria-labelledby="addStatus"
aria-hidden="true">
<form action="/hr/jobs/add-status" method="POST" id="addStatusForm">
<input type="hidden" id="status_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="_statusModalLabel">Add Employment Status</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="">Status :</label>
<input type="text" class="form-control" id="statusTitle" name="title" required value="">
</div>
<div class="form-group">
<label for="fromContact" id="">Status Description :</label>
<textarea type="text" class="form-control" id="statusDescription" name="description" ></textarea>
</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>
<div class="modal fade text-left" id="addShift" tabindex="-1" role="dialog" aria-labelledby="addShift"
aria-hidden="true">
<form action="/hr/jobs/add-shift" method="POST" id="addShiftForm">
<input type="hidden" id="shift_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="_shiftModalLabel">Add Work Shift</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="">Shift :</label>
<input type="text" class="form-control" id="shiftTitle" name="title" >
</div>
<div class="form-group">
<label for="fromContact" id="">Description :</label>
<textarea type="text" class="form-control" id="shiftDescription" name="description" ></textarea>
</div>
<div class="form-group">
<label for="fromContact" id="">Start Time :</label>
<input type="time" class="form-control" id="from" name="from" required value="">
</div>
<div class="form-group">
<label for="fromContact" id="">End Time :</label>
<input type="time" class="form-control" id="to" name="to" 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>
<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>
// // Ekko lightbox Initialization
// $(document).on('click', '[data-toggle="lightbox"]', function(event) {
// event.preventDefault();
// $(this).ekkoLightbox();
// });
// let category_count = parseInt("<%= categories.length %>");
// let title_count = parseInt("<%= titles.length %>");
$("#addTitleForm").on('submit',(event)=>{
$('#spinnerContainer').addClass('show');
event.preventDefault();
var data = getFormData($('#addTitleForm'))
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/add-title", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: data, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
// data = JSON.parse(data);
response = JSON.parse(response);
// console.log(data)
if(response.status == "success"){
job = response.job;
// console.log(category)
var tr = `
<td>${job.title}</td>
<td> ${job.description} </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-category" data-toggle="modal" onclick="editJob('${JSON.stringify(JSON.stringify(job))}')" value="" data-target="#addCategory"><i class="la la-pencil" ></i> </a></td>`;
if(data.id){
$(`#title${data.id}`).html(tr);
}
else{
$('#categories').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#title_id').val('')
$('#jobTitle').val('')
$('#jobDescription').val('');
// $('#jobCategoryId').val('')
$( "#jobCategoryId option[value='']" ).attr( 'selected' , 'selected' )
$('#_jobModalLabel').html("Add Job Title")
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
$(".d").trigger('click');
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
function editJob(job){
job = JSON.parse(job);
$('#_jobModalLabel').html("Edit Job Title")
$('#job_id').val(job.id)
$('#jobTitle').val(job.title)
$(`#jobCategoryId option[value=${job.categoryId}]`).attr( 'selected' , 'selected' )
$('#jobDescription').val(job.description)
}
$("#addCategoryForm").on('submit',(event)=>{
$('#spinnerContainer').addClass('show');
event.preventDefault();
var data = getFormData($('#addCategoryForm'))
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/add-category", //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(data)
if(response.status == "success"){
category = response.category;
// console.log(category)
var tr =
`<td>${category.title}</td>
<td> ${category.description} </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-category" data-toggle="modal" onclick="editCategory('${JSON.stringify(JSON.stringify(category))}')" value="" data-target="#addCategory"><i class="la la-pencil" ></i> </a></td>`
if(data.id){
$(`#category${data.id}`).html(tr);
}
else{
$('#categories').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#category_id').val('')
$('#categoryTitle').val('')
$('#categoryDescription').val('')
$('#_categoryModalLabel').html("Add Job Category")
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
$(".d").trigger('click');
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
function editCategory(category){
category = JSON.parse(category);
$('#_categoryModalLabel').html("Edit Job Category")
$('#category_id').val(category.id)
$('#categoryTitle').val(category.title)
$('#categoryDescription').val(category.description)
}
$("#addSalaryForm").on('submit',(event)=>{
$('#spinnerContainer').addClass('show');
event.preventDefault();
var data = getFormData($('#addSalaryForm'))
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/add-salary-component", //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(data)
if(response.status == "success"){
salary = response.salary;
// console.log(salary)
var tr =
`<td>${salary.title}</td>
<td> ${salary.type} </td>
<td> ${salary.partOfTotal ? "Yes" : "No"} </td>
<td> ${salary.valueType} </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-salary" data-toggle="modal" onclick="editSalary('${JSON.stringify(JSON.stringify(salary))}')" value="" data-target="#addSalary"><i class="la la-pencil" ></i> </a></td>`
if(data.id){
$(`#salary${data.id}`).html(tr);
}
else{
$('#categories').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#salary_id').val('')
$('#salaryTitle').val('')
$('#salaryDescription').val('')
$('#_salaryModalLabel').html("Add Salary Component")
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
$(".d").trigger('click');
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
function editSalary(salary){
salary = JSON.parse(salary);
$('#_salaryModalLabel').html("Edit Salary Component")
$('#salary_id').val(salary.id)
$('#salaryTitle').val(salary.title)
}
$("#addStatusForm").on('submit',(event)=>{
$('#spinnerContainer').addClass('show');
event.preventDefault();
var data = getFormData($('#addStatusForm'))
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/add-employment-status", //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"){
employmentStatus = response.employmentStatus;
// console.log(response.employmentStatus)
var tr =
`<td>${employmentStatus.title}</td>
<td> ${employmentStatus.description} </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-status" data-toggle="modal" onclick="editStatus('${JSON.stringify(JSON.stringify(employmentStatus))}')" value="" data-target="#addStatus"><i class="la la-pencil" ></i> </a></td>`
if(data.id){
$(`#status${data.id}`).html(tr);
}
else{
$('#statuses').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#status_id').val('')
$('#statusTitle').val('')
$('#statusDescription').val('')
$('#_statusModalLabel').html("Add Employment Status")
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
$(".d").trigger('click');
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
function editStatus(employmentStatus){
employmentStatus = JSON.parse(employmentStatus);
$('#_statusModalLabel').html("Edit Employment Status")
$('#status_id').val(employmentStatus.id)
$('#statusTitle').val(employmentStatus.title)
$('#statusDescription').val(employmentStatus.description)
}
$("#addShiftForm").on('submit',(event)=>{
$('#spinnerContainer').addClass('show');
event.preventDefault();
var data = getFormData($('#addShiftForm'))
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/add-work-shift", //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"){
workShift = response.workShift;
// console.log(response.workShift)
var tr =
`<td>${workShift.title}</td>
<td> ${workShift.description} </td>
<td> ${workShift.from} </td>
<td> ${workShift.to} </td>
<td> ${workShift.to} </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-shift" data-toggle="modal" onclick="editShift('${JSON.stringify(JSON.stringify(workShift))}')" value="" data-target="#addShift"><i class="la la-pencil" ></i> </a></td>`
if(data.id){
$(`#shift${data.id}`).html(tr);
}
else{
$('#shifts').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#shift_id').val('')
$('#shiftTitle').val('')
$('#shiftDescription').val('')
$('#from').val('')
$('#to').val('')
$('#_shiftModalLabel').html("Add Work Shift")
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
$(".d").trigger('click');
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
function editShift(workShift){
workShift = JSON.parse(workShift);
$('#_shiftModalLabel').html("Edit Work Shift")
$('#shift_id').val(workShift.id)
$('#shiftTitle').val(workShift.title)
$('#shiftDescription').val(workShift.description)
$('#shiftDescription').val(workShift.description)
document.getElementById('from').valueAsDate = new Date(workShift.from);
document.getElementById('to').valueAsDate = new Date(workShift.to);
}
$("#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