You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
17 KiB
380 lines
17 KiB
<!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>
|