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.
486 lines
14 KiB
486 lines
14 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head th:replace="~{fragments/modules/base/head :: head}">
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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 mb-2">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-8">
|
|
<div class="page-header-title">
|
|
<!-- <i class="far fa-calendar-plus bg-blue"></i> -->
|
|
<div class="d-inline">
|
|
<h5 >Create New Batch</h5>
|
|
<span>Create a new batch for application bundle intake</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="card" style="margin-top: 15px;">
|
|
<div class="col-lg-8" style="margin-top: 25px;">
|
|
<h3>Batch Information</h3>
|
|
<span>Fill in the details for the new application batch</span>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<input type="hidden" id="loginUserId" th:value="${loginUserId}">
|
|
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<label class="form-label" for="receivedate">Receiving Date<span
|
|
class="text-danger">*</span></label>
|
|
<input type="date" class="form-control" id="receivedate" onclick="this.showPicker()" required>
|
|
</div>
|
|
|
|
<!-- Department -->
|
|
|
|
<div class="col-sm-12 col-md-6">
|
|
<label class="form-label" for="department">Department
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<select class="form-control" id="department" required>
|
|
<option value=""> Select Department </option>
|
|
</select>
|
|
</div>
|
|
<!-- Office Name -->
|
|
|
|
<div class="col-sm-12 col-md-6" style="margin-top: 15px;">
|
|
<label class="form-label" for="officename">Office Name
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<select class="form-control" id="officename" required>
|
|
<option value="">Select Office Name </option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6" style="margin-top: 15px;">
|
|
<label class="form-label" for="noofapplication">Number of Applications<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="noofapplication" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-group text-center">
|
|
<button type="submit" class="btn btn-primary " id="createdBtn">Create Batch</button>
|
|
<button type="reset" class="btn btn-secondary ml-2" id="resetBtn">Reset</button></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batch List Table -->
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><b>All Batches</b></h3>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
<table id="batchDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
|
|
<thead class="thead-dark">
|
|
<tr role="row">
|
|
<th class="text-center">S.No</th>
|
|
<th class="text-center">Batch ID</th>
|
|
<th class="text-center">Receiving Date</th>
|
|
<th class="text-center">Department</th>
|
|
<th class="text-center">Office Name</th>
|
|
<th class="text-center">No Of Application</th>
|
|
<th class="text-center">Completed</th>
|
|
<th class="text-center">Pending</th>
|
|
<th class="text-center">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody style="text-align:center;">
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<!-- Add the 'Please wait' text below the spinner -->
|
|
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
|
|
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- modal box -->
|
|
|
|
|
|
<div class="modal fade" id="editBatchModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Update Batch Details</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<input type="hidden" id="edit_batch_id">
|
|
|
|
<div class="col-md-6 mb-4">
|
|
<label class="form-label">Receive Date</label>
|
|
<input type="date" class="form-control" id="edit_receivedate" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-4">
|
|
<label class="form-label">Department</label>
|
|
<input type="text" class="form-control" id="edit_department" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-12 mb-4">
|
|
<label class="form-label">Office Name</label>
|
|
<input type="text" class="form-control" id="edit_officename" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="edit_noofapplication">Number of Applications <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="edit_noofapplication" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-2 mt-2">
|
|
<div class="col-md-12 d-flex justify-content-center">
|
|
<button type="button" class="btn btn-primary mx-2" onclick="updateBatch()">Update</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script th:replace="~{fragments/modules/base/script :: script}"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Reset Button
|
|
document.getElementById('resetBtn').addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
location.reload();
|
|
});
|
|
|
|
// Disable Future Dates
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var today = new Date().toISOString().split('T')[0];
|
|
document.getElementById("receivedate").setAttribute("max", today);
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
|
var batchTable = $('#batchDatatable').DataTable({
|
|
dom: 'Bftip',
|
|
|
|
autoWidth: false,
|
|
responsive: false,
|
|
scrollX: true,
|
|
scrollY: '80vh',
|
|
scrollCollapse: true,
|
|
fixedHeader: true,
|
|
|
|
lengthMenu: [
|
|
[50, 100, 200, 500, -1],
|
|
['50 rows', '100 rows', '200 rows', 'Show all']
|
|
],
|
|
|
|
buttons: [
|
|
{ extend: 'pageLength', className: 'btn btn-warning' },
|
|
{ extend: 'copyHtml5', className: 'btn btn-secondary' },
|
|
{ extend: 'excelHtml5', className: 'btn btn-secondary' },
|
|
{ extend: 'csvHtml5', className: 'btn btn-secondary' },
|
|
{ extend: 'pdfHtml5', className: 'btn btn-secondary' }
|
|
],
|
|
|
|
ajax: {
|
|
url: "/election/api/dataentryadmin/getallbatches",
|
|
type: "GET",
|
|
dataSrc: ""
|
|
},
|
|
|
|
columns: [
|
|
{
|
|
data: null,
|
|
className: "text-center",
|
|
render: (d, t, r, m) => m.row + 1
|
|
},
|
|
{ data: "id", className: "text-center" },
|
|
{ data: "rec_date", className: "text-center" },
|
|
{ data: "dept_name", className: "text-center" },
|
|
{
|
|
data: null,
|
|
className: "text-center",
|
|
render: function (data, type, row) {
|
|
|
|
let address = '';
|
|
|
|
if (row.address1) address += row.address1;
|
|
if (row.address2) address += (address ? ', ' : '') + row.address2;
|
|
|
|
return `
|
|
<div>
|
|
<span>${row.office_name}</span><br>
|
|
<span class="text-muted">${address || '-'}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
/*{ data: "office_name", className: "text-center" }*/
|
|
{ data: "noof_application", className: "text-center" },
|
|
{ data: "completed", className: 'text-center' },
|
|
{ data: "pending", className: 'text-center' },
|
|
{
|
|
data: "id",
|
|
className: "text-center",
|
|
render: d => `<button class="btn btn-primary btn-sm" onclick="editBatch(${d})">Edit</button>`
|
|
}
|
|
],
|
|
|
|
columnDefs: [
|
|
{ targets: "_all", className: "text-center" }
|
|
]
|
|
});
|
|
|
|
// Load Departments with searchable dropdown
|
|
$.ajax({
|
|
|
|
url: "/election/api/dataentryadmin/getalldepartments",
|
|
method: "GET",
|
|
success: function (data) {
|
|
|
|
let department = $("#department");
|
|
department.empty().append('<option value="">-- Select Department --</option>');
|
|
|
|
data.forEach(dept => {
|
|
department.append(
|
|
`<option value="${dept.dept_id}">${dept.dept_name}</option>`
|
|
);
|
|
});
|
|
|
|
// Enable search inside dropdown
|
|
department.select2({
|
|
placeholder: "Select Department",
|
|
allowClear: true,
|
|
width: '100%'
|
|
|
|
});
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
$("#department").on("change", function () {
|
|
|
|
let deptId = $(this).val();
|
|
let office = $("#officename");
|
|
|
|
// Reset office dropdown
|
|
office.empty().append('<option value="">-- Select Office Name --</option>');
|
|
|
|
|
|
if (deptId !== "") {
|
|
$.ajax({
|
|
url: "/election/api/dataentryadmin/getallofficenames",
|
|
method: "GET",
|
|
data: { deptId: deptId },
|
|
success: function (data) {
|
|
|
|
data.forEach(o => {
|
|
office.append(
|
|
`<option value="${o.id}">${o.office_full_address}</option>`
|
|
);
|
|
});
|
|
|
|
// Enable searchable dropdown
|
|
office.select2({
|
|
placeholder: "Select Office Name",
|
|
allowClear: true,
|
|
width: '100%'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Create Batch
|
|
$("#createdBtn").click(function () {
|
|
|
|
const $btn = $(this); // cache button
|
|
|
|
let receivedate = $("#receivedate").val();
|
|
let department = $("#department").val();
|
|
let officename = $("#officename").val();
|
|
let noofapplication = $("#noofapplication").val();
|
|
let loginUserId = $("#loginUserId").val();
|
|
|
|
if (!receivedate || !department || !officename || !noofapplication || noofapplication <= 0) {
|
|
Swal.fire("Validation Error", "All fields are mandatory and must be valid.", "warning");
|
|
return;
|
|
}
|
|
|
|
// Disable button immediately
|
|
$btn.prop("disabled", true).text("Saving...");
|
|
|
|
$.ajax({
|
|
url: "/election/api/dataentryadmin/savebatchdeatils",
|
|
type: "POST",
|
|
data: {
|
|
receivedate,
|
|
department,
|
|
officename,
|
|
noofapplication,
|
|
userid: loginUserId
|
|
},
|
|
success: function (response) {
|
|
|
|
Swal.fire({
|
|
icon: "success",
|
|
title: "Batch Created Successfully!",
|
|
text: "Reference ID is: " + response
|
|
}).then(() => location.reload());
|
|
|
|
},
|
|
error: function (xhr) {
|
|
Swal.fire("Error", "Failed to save data: " + xhr.responseText, "error");
|
|
|
|
// Re-enable button only if error occurs
|
|
$btn.prop("disabled", false).text("Create");
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// Load Edit Modal
|
|
function editBatch(batchId) {
|
|
$.ajax({
|
|
url: "/election/api/dataentryadmin/getbatchbyId",
|
|
type: "GET",
|
|
data: { id: batchId },
|
|
success: function (data) {
|
|
|
|
$("#edit_batch_id").val(data.id);
|
|
$("#edit_receivedate").val(data.rec_date);
|
|
$("#edit_department").val(data.dept_name);
|
|
$("#edit_officename").val(data.office_name);
|
|
|
|
// Set value + store counts for validation
|
|
$("#edit_noofapplication")
|
|
.val(data.noof_application)
|
|
.data("oldCount", data.noof_application)
|
|
.data("completed", data.completed);
|
|
|
|
$("#editBatchModal").modal('show');
|
|
},
|
|
error: function () {
|
|
Swal.fire("Error!", "Unable to load batch details", "error");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// Update Batch
|
|
|
|
function updateBatch() {
|
|
|
|
let id = $("#edit_batch_id").val();
|
|
let userId = $("#loginUserId").val();
|
|
|
|
let newCount = Number($("#edit_noofapplication").val());
|
|
let completed = Number($("#edit_noofapplication").data("completed"));
|
|
|
|
// Basic validation
|
|
if (!newCount || newCount <= 0) {
|
|
Swal.fire("Validation Error", "Enter a valid number of applications", "warning");
|
|
return;
|
|
}
|
|
|
|
// Prevent reducing below completed count
|
|
if (newCount < completed) {
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "Invalid Update",
|
|
text: `Number of applications cannot be less than completed count (${completed})`,
|
|
confirmButtonText: "OK"
|
|
});
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: "/election/api/dataentryadmin/updatebatch",
|
|
type: "POST",
|
|
data: {
|
|
id,
|
|
noofapplication: newCount,
|
|
userId
|
|
},
|
|
success: function () {
|
|
Swal.fire("Success", "Batch Updated Successfully", "success").then(() => {
|
|
$("#editBatchModal").modal("hide");
|
|
$('#batchDatatable').DataTable().ajax.reload(null, false);
|
|
});
|
|
},
|
|
error: function () {
|
|
Swal.fire("Error", "Failed to update batch", "error");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|