%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/salaryComponent.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">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">&times;</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>&nbsp;&nbsp;&nbsp;&nbsp;
                        <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> &nbsp;&nbsp;&nbsp;&nbsp;
                        <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> &nbsp;&nbsp;&nbsp;&nbsp;
                            <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