|
|
<!DOCTYPE html><html lang="en" dir=""><html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<body> <!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
<div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end -->
<div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header"> <div class="row align-items-end"> <div class="col-lg-6"> <div class="page-header-title"> <i class="ik ik-thumbs-up bg-blue"></i> <div class="d-inline"> <h5>NULM STAFF</h5> <span>Staff Details Updation</span> </div> </div> </div> <div class="col-lg-6"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="/index"><i class="ik ik-home"></i></a> </li> <li class="breadcrumb-item active" aria-current="page">Staff Details Updation</li> </ol> </nav> </div> </div> </div>
<hr> <div class="card-block"> <div> <form id="departmentFilterForm" method="GET" action="/gcc/nulm/updateStaff"> <div class="form-group"> <label for="zone">Zone (Department)</label> <select class="form-control" id="zone" name="department" style="width: 300px;" onchange="this.form.submit()"> <option value="">Select Zone</option> <option th:each="department : ${departments}" th:value="${department.department}" th:text="${department.department}" th:selected="${department.department == selectedDepartment}"> </option> </select> </div> </form> <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%"> <thead class="thead-dark"> <tr role="row"> <th>S.No</th> <th>Employee ID</th> <th>Employee Name</th> <th>Designation</th> <th>Gender</th> <th>Date Of Birth</th> <th>Action</th> </tr> </thead> <tbody> <tr th:each="enrollments, i : ${enrollments}"> <td th:text="${i.count}">0</td> <td th:text="${enrollments.emp_id}"></td> <td th:text="${enrollments.name}"></td> <td th:text="${enrollments.designation}"></td> <td th:text="${enrollments.gender}"></td> <td th:text="${enrollments.date_of_birth}"></td> <td class="text-center"> <a href="#" th:onclick="return callEdit([[${enrollments.enrollment_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"><i class="ik ik-edit f-16 mr-15 text-green"></i></a> </td> </tr> </tbody> <tfoot class="thead-dark"> <tr role="row"> <th>S.No</th> <th>Employee ID</th> <th>Employee Name</th> <th>Designation</th> <th>Gender</th> <th>Date Of Birth</th> <th>Action</th> </tr> </tfoot> </table> </div> </div>
<!-- Enrollment Edit Modal --><div class="modal fade" id="editEnrollmentModal" tabindex="-1" role="dialog" aria-labelledby="editEnrollmentModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editEnrollmentModalLabel">Edit Enrollment Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <!-- Form for Editing Enrollment --> <form id="editEnrollmentForm"> <input type="hidden" id="enrollmentId" name="enrollmentId"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" disabled style="color: black;"> </div> <div class="form-group"> <label for="dateOfBirth">Date of Birth</label> <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required> </div> <div class="form-group"> <label for="gender">Gender</label> <input type="text" class="form-control" id="gender" name="gender" required> </div> <div class="form-group"> <label for="gender">Designation</label> <input type="text" class="form-control" id="designation" name="designation" disabled style="color: black;"> </div> <div class="form-group"> <label for="inchargeName">Incharge Name</label> <input type="text" class="form-control" id="inchargename" name="inchargename" disabled style="color: black;"> </div> <div class="form-group"> <label for="phoneNumber">Incharge Number</label> <input type="number" class="form-control" id="inchargeno" name="inchargeno" disabled style="color: black;"> </div> <div class="form-group"> <label for="shg">Self Help Group</label> <select class="form-control" id="shg" name="shg" required> <!-- Dropdown options will be populated dynamically via JavaScript --> </select> </div> <div class="form-group"> <label for="orderNumber">Order Number</label> <select class="form-control" id="orderNumber" name="orderNumber" required> <!-- Dropdown options will be populated dynamically via JavaScript --> </select> </div> <!-- Add more fields as needed --> <button type="button" class="btn btn-primary" id="updateEnrollmentButton">Save Changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </form> </div> </div> </div></div> </div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div> <div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <script th:replace="~{fragments/modules/pgr/script :: script}"></script><script th:inline="javascript">
$(document).ready(function () { // Initialize DataTable const table = $('#salaryDatatable').DataTable({ dom: 'Bftip', columnDefs: [ { targets: 'no-sort', orderable: false } ], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [ { extend: 'pageLength', className: 'btn btn-warning' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' } ], fixedHeader: true, autoWidth: true, responsive: true, searching: true, select: false, processing: false });
// Function to open the edit modal and populate data window.callEdit = function (enrollmentId) { fetchEnrollmentDetails(enrollmentId); return false; // Prevent default anchor click behavior }; function loadDepartments(selectedDepartment) { $.ajax({ url: '/gcc/api/nulm/getDepartment', type: 'GET', success: function (response) { const departmentDropdown = $('#zone'); departmentDropdown.empty(); // Clear existing options departmentDropdown.append('<option value="">Select Zone</option>'); response.forEach(function (department) { const departmentName = department.department; // Correct the attribute name if necessary const isSelected = departmentName === selectedDepartment ? 'selected' : ''; departmentDropdown.append(new Option(departmentName, departmentName, false, isSelected)); }); // If no department selected, show "Select Zone" if (!selectedDepartment) { departmentDropdown.val(''); } }, error: function (xhr, status, error) { console.error('Error fetching departments:', error); } }); }
// Load departments on page load const selectedDepartment = /*[[${selectedDepartment}]]*/ ''; // Get this from Thymeleaf or other server-side context loadDepartments(selectedDepartment);
function fetchEnrollmentDetails(enrollmentId) { $.ajax({ url: `/gcc/api/nulm/getEnrollmentdeatilsByID/${enrollmentId}`, type: 'GET', success: function (response) { if (response && response.length > 0) { const enrollment = response[0]; // Populate modal fields with data $('#enrollmentId').val(enrollment.enrollment_id); $('#name').val(enrollment.name); $('#dateOfBirth').val(enrollment.date_of_birth); $('#gender').val(enrollment.gender); $('#designation').val(enrollment.designation); $('#inchargename').val(enrollment.incharge_name); $('#inchargeno').val(enrollment.incharge_phoneno); // Call fetchDropdownData and pass the existing group and order values fetchDropdownData(enrollment.group_id, enrollment.order_id); // Open the modal $('#editEnrollmentModal').modal('show'); } else { alert('Enrollment details not found.'); } }, error: function (xhr, status, error) { console.error('Error fetching enrollment details:', error); alert('An error occurred while fetching enrollment details.'); } }); }
function fetchDropdownData(selectedGroupId, selectedOrderId) { // Fetch Self Help Group dropdown $.ajax({ url: '/gcc/api/nulm/selfHelpGroups', type: 'GET', success: function (response) { const selfHelpGroupDropdown = $('#shg'); selfHelpGroupDropdown.empty(); // Clear existing options selfHelpGroupDropdown.append('<option value="">Select Self Help Group</option>');
response.forEach(function (item) { const isSelected = item.groupId == selectedGroupId ? 'selected' : ''; // Check if this option should be selected selfHelpGroupDropdown.append(new Option(item.groupName, item.groupId, false, isSelected)); });
// If no group selected, show "Select Self Help Group" if (!selectedGroupId) { selfHelpGroupDropdown.val(''); } }, error: function (xhr, status, error) { console.error('Error fetching self-help groups:', error); } });
// Fetch Order Number dropdown $.ajax({ url: '/gcc/api/nulm/orderNumbers', type: 'GET', success: function (response) { const orderNumberDropdown = $('#orderNumber'); orderNumberDropdown.empty(); // Clear existing options orderNumberDropdown.append('<option value="">Select Order Number</option>');
response.forEach(function (item) { const isSelected = item.orderId == selectedOrderId ? 'selected' : ''; // Check if this option should be selected orderNumberDropdown.append(new Option(item.orderNumber, item.orderId, false, isSelected)); });
// If no order selected, show "Select Order Number" if (!selectedOrderId) { orderNumberDropdown.val(''); } }, error: function (xhr, status, error) { console.error('Error fetching order numbers:', error); } }); }
$('#updateEnrollmentButton').on('click', function () { const enrollmentId = $('#enrollmentId').val(); const updatedData = { name: $('#name').val(), dateOfBirth: $('#dateOfBirth').val(), gender: $('#gender').val(), groupId: $('#shg').val(), // Get the selected group_id from dropdown orderId: $('#orderNumber').val() // Get the selected order_id from dropdown };
$.ajax({ url: `/gcc/api/nulm/updateEnrollment/${enrollmentId}`, type: 'POST', data: updatedData, success: function (response) { Swal.fire({ title: 'Success!', text: 'Enrollment updated successfully!', icon: 'success', confirmButtonText: 'OK' }).then((result) => { if (result.isConfirmed) { $('#editEnrollmentModal').modal('hide'); // Hide the modal location.reload(); // Optionally reload the page to refresh the data } }); }, error: function (xhr, status, error) { console.error('Error updating enrollment details:', error); alert('An error occurred while updating enrollment details.'); } }); });
});
</script>
</body>
</html>
|
