%PDF- %PDF-
Direktori : /home/opti/workflow/src/views/hr/job/ |
Current File : /home/opti/workflow/src/views/hr/job/index.ejs |
<% 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>