%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">Salary Components</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">Salary Components
</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">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 ">
<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>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<input type="hidden" id="_csrf" name="_csrf" value="<%= _csrfToken %>">
<!-- /////////// -->
<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>
<% include ../../partials/footer %>
<!-- <script src="/app-assets/ekko-lightbox/dist/ekko-lightbox.js"></script> -->
<script>
$("#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{
$('#salaries').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)
// console.log()
// if(salary.type == "Earning")
// $(`#typeEarning`).prop("checked",true);
// else
// $(`#typeDeduction`).prop("checked",true);
// if(salary.partOfTotal == 1)
// $(`input[name=partOfTotal][value=1]`).prop("checked",true);
// else
// $(`input[name=partOfTotal][value=2]`).prop("checked",true);
// if(salary.valueType == "Amount")
// $(`input[name=valueType][value=1]`).prop("checked",true);
// else
// $(`input[name=valueType][value=2]`).prop("checked",true);
// console.log(salary.type)
$('#salaryTitle').val(salary.title)
}
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