%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"><%= category.title %></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"><a href="/hr/jobs">Jobs</a>
</li>
<li class="breadcrumb-item active"><%= category.title %>
</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 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 " >
<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">
<% category.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>
</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>
<% 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{
$('#titles').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#job_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)
}
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