|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}">
</head><style>
</style><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="fa fa-list-alt bg-blue"></i> <div class="d-inline"> <h5>QAQC Unattended List</h5> <span>1913 QAQC Unattended List</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item" aria-current="page">1913 QAQC</li> <li class="breadcrumb-item active" aria-current="page">Admin QAQC</li> <li class="breadcrumb-item active" aria-current="page">Unattended</li> </ol> </nav> </div> </div> </div> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header"> <span th:text="${userId}" style="display:none;" id="userIdSpan"></span> <span style="font-size: medium;font-weight: bold;">Closing Unattended Complaints (<span class="text-danger">You can receive and close only 100 complaints at a time</span>):</span> </div> <div class="card-body"> <span class="text-danger" style="font-size: medium;font-weight: bold;">Use after 7.00 pm</span><br> <div class="row"> <!-- <div class="col-sm-2 mb-2">
<label for="startDate" style="font-size: medium;">From Date:</label> <input type="date" id="startDate" class="form-control"> </div> <div class="col-sm-2 mb-2"> <label for="endDate" style="font-size: medium;">To Date:</label> <input type="date" id="endDate" class="form-control"> </div> --> <div class="col-sm-3 mb-2"> <label for="unattended_count" style="font-size: medium;">Enter Minimum no of unattended counts:</label> <input type="number" id="unattended_count" class="form-control" > <!-- <select id="stsdropdown" class="form-control">
<option value="total">Select</option> <option value="processing">Processing</option> <option value="reopened">Reopened</option> <option value="redressed">Action Taken 1</option> <option value="closed">Action Taken 2</option> <option value="completed">Final Closure</option> </select> --> </div> <!-- <div class="col-sm-2 mb-2">
<label for="dropdown4" style="font-size: medium;">Group:</label> <select id="dropdown4" class="form-control"> <option value="">Select</option> <option value="">general</option> Add options here </select> </div> --> <!-- <div class="col-sm-2 mb-2">
<label for="dropdown1" style="font-size: medium;">Type:</label> <select id="dropdown1" class="form-control"> <option value="">Select</option> <option value="Cleanliness in Parks">Cleanliness in Parks</option>
</select> </div> -->
<!-- <div class="col-sm-2 mb-2">
<label for="dropdown3" style="font-size: medium;">Mode:</label> <select id="dropdown3" class="form-control"> <option value="">Select</option> <option value="">INTERNET</option>
</select> </div> --> </div> <!-- <div class="row mt-2">
<div class="col-sm-2 mb-2"> <label for="dropdown2" style="font-size: medium;">Zone:</label> <select id="dropdown2" class="form-control"> <option value="">Select</option> <option value="N01">N01</option> <option value="ALL">ALL</option>
</select> </div> </div> --> <div class="row mt-4"> <div class="col-12 d-flex justify-content-center"> <button type="submit" id="searchBtn" class="btn btn-primary mx-2">Search</button>
<button class="btn btn-danger mx-2" id="resetBtn" name="reset" type="reset">Reset</button> </div> </div> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <span style="font-size: medium;font-weight: bold;">Unattended List</span> </div> <div class="card-body"> <div class="table-responsive">
<table id="ReportDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> <thead class="thead-dark"> <tr role="row">
<th class="text-center no-sort">S.No</th> <th class="text-center">Reg Date</th> <th class="text-center no-sort">Complaint No</th> <th class="text-center">ComplaintGroup</th> <th class="text-center">ComplaintType</th> <th class="text-center">Mode</th> <th class="text-center no-sort">Public Name</th> <th class="text-center">Public Mobile no</th> </tr> </thead> <tbody>
</tbody> </table> </div> </div> </div> </div> </div> <div id="submitcard" style="display: none;"> <div class="card pl-4 pr-4"> <div class="row mt-4"> <div class="col-md-12"> <label for="remarks" class="form-label fw-bold">Remarks<span class="text-danger">*</span></label> <textarea id="remarks" class="form-control" rows="4" placeholder="Enter your remarks here"></textarea> </div> </div> <div class="row mb-2 mt-3"> <div class="col-md-12 d-flex justify-content-center"> <button type="button" class="btn btn-primary" id="closebutton">Mark as Completed</button> </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>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<!-- in the code use to show the download different type microsoft -->
<!-- Include jQuery and Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <!-- sweet alert --> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script type="text/javascript"> /* document.addEventListener("DOMContentLoaded", function () { const complaintTypeDropdown = document.getElementById('dropdown1'); const complaintGroupDropdown = document.getElementById('dropdown4'); const complaintModeDropdown = document.getElementById('dropdown3');// const complaintZoneDropdown = document.getElementById('dropdown2');
// Load Complaint Groups fetch('/gcc/api/callcenterqaqc/getComplaintGroup') .then(response => response.json()) .then(data => { // Clear existing options complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
// Add options from the API response data.forEach(complaintGroupName => { complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`; }); }) .catch(error => { console.error('Error fetching complaint groups:', error); });
// Event Listener for Complaint Group Change complaintGroupDropdown.addEventListener('change', function () { const selectedGroup = complaintGroupDropdown.value;
if (selectedGroup) { // Fetch Complaint Types based on selected group fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`) .then(response => response.json()) .then(data => { // Clear existing options complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
// Add options from the API response data.forEach(complaintTypeName => { complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`; }); }) .catch(error => { console.error('Error fetching complaint types:', error); }); } else { // Clear complaint type dropdown if no group is selected complaintTypeDropdown.innerHTML = `<option value="">Select</option>`; } }); // Load all Modes fetch('/gcc/api/callcenterqaqc/getModes') .then(response => response.json()) .then(data => { // Clear existing options complaintModeDropdown.innerHTML = `<option value="">Select</option>`;
// Add options from the API response data.forEach(complaintMode => { complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`; }); }) .catch(error => { console.error('Error fetching complaint groups:', error); }); // Load all zones fetch('/gcc/api/callcenterqaqc/getZones') .then(response => response.json()) .then(data => { // Clear existing options complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
// Add options from the API response data.forEach(complaintZone => { complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`; }); }) .catch(error => { console.error('Error fetching complaint groups:', error); }); }); */ $(document).ready(function() {
var table = $('#ReportDatatable').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 }); document.getElementById('resetBtn').addEventListener('click', function () { event.preventDefault(); window.location.href="/gcc/callcenterqaqc/admin/unattendedcomplaints"; }); document.getElementById('searchBtn').addEventListener('click', function (e) { let ucount = document.getElementById('unattended_count').value; console.log("ucount: ",ucount);
if (ucount=="") { Swal.fire({ icon: 'info', title: 'Info', text: 'Enter Unattended Count', showConfirmButton: true, timer: 3000 }); e.preventDefault(); // Prevent the default action return; // Stop further execution } if (ucount=="0") { Swal.fire({ icon: 'info', title: 'Info', text: 'You Entered 0 Count', showConfirmButton: true, timer: 3000 }); e.preventDefault(); // Prevent the default action return; // Stop further execution } let entryDetails = { ucount:ucount }; console.log("entryDetails:",entryDetails); $('#pageLoader').show(); $.ajax({ type: "GET", url: `/gcc/api/callcenterqaqc/getunattendedcount?ucount=${ucount}`, success: function (response) { //console.log("API Response:", response); $('#pageLoader').hide(); if (response.status === "success") { $("#submitcard").show(); console.log("Details Array:", response.details); // Ensure details is an array and has at least one entry if (Array.isArray(response.details) && response.details.length > 0) { let table = $('#ReportDatatable').DataTable({ destroy: true, searching: true, autoWidth: true, responsive: true, paging: true, info: true, data: response.details, columns: [ { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' }, { data: 'complaint_date', defaultContent: '-', className: 'text-center' }, { data: 'complaint_number', defaultContent: '-', className: 'text-center' }, { data: 'complaint_group', defaultContent: '-', className: 'text-center' }, { data: 'complaint_type', defaultContent: '-', className: 'text-center' }, { data: 'complaint_mode', defaultContent: '-', className: 'text-center' }, { data: 'complaint_person_name', defaultContent: '-', className: 'text-center' }, { data: 'complaint_mobilenumber', defaultContent: '-', className: 'text-center' }, ], dom: 'Bfrtip', 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' } ], 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 } }); } } else if (response.status === "nodata") { $("#submitcard").hide(); Swal.fire({ icon: 'warning', title: 'No Data', text: 'No data available for the count.' }); } else { $("#submitcard").hide(); Swal.fire({ icon: 'error', title: 'Error', text: response.message }); } },
error: function (error) { $("#submitcard").hide(); Swal.fire({ icon: 'error', title: 'Error', text: error.responseJSON?.message }); } }); }); document.getElementById('closebutton').addEventListener('click', function (e) { let userId = document.getElementById('userIdSpan').textContent; console.log("userId=" + userId); let remarks = $('#remarks').val().trim(); // Get all complaint numbers from the DataTable let table = $('#ReportDatatable').DataTable(); let complaintNumbers = table .column(2) // Assuming 'complaint_number' is in the 3rd column (index 2) .data() .toArray(); // Convert to an array let compDetails = { remarks:remarks, userId:userId, complaintNumbers: complaintNumbers // Add the list of complaint numbers }; console.log("compDetails:",compDetails);
// Regular expression to allow only letters, numbers, and spaces (No special characters) let regex = /^[a-zA-Z0-9\s]+$/;
if (!compDetails.remarks || compDetails.remarks === '') { Swal.fire({ icon: 'info', title: 'Info', text: 'Remarks are required to complete complaints.', confirmButtonText: 'OK' }); return; // Stop execution }
if (!regex.test(compDetails.remarks)) { Swal.fire({ icon: 'error', title: 'Invalid Input', text: 'Remarks should not contain special characters.', confirmButtonText: 'OK' }); return; // Stop execution } $('#closebutton').prop('disabled', true).text('Processing...'); $('#pageLoader').show(); $.ajax({ url: '/gcc/api/callcenterqaqc/closingunattendedcomplaints', type: 'POST', contentType: 'application/json', data: JSON.stringify(compDetails), success: function (response) { $('#pageLoader').hide(); $('#closebutton').prop('disabled', false).text('Mark as Completed'); if (response.status === "success") { Swal.fire({ icon: 'success', title: 'Success', text: response.message, allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, confirmButtonText: 'OK' }).then((result) => { if (result.isConfirmed) { window.location.href = "/gcc/callcenterqaqc/admin/unattendedcomplaints"; } }); } else if (response.status === "partial_success") { Swal.fire({ icon: 'warning', title: 'Partial Success', text: response.message + " Completed: " + response.completedCount + ", Failed: " + response.failedCount, allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, confirmButtonText: 'OK' }); } else { Swal.fire({ icon: 'error', title: 'Error', text: response.message, confirmButtonText: 'OK' }); } }, error: function (xhr) { $('#pageLoader').hide(); $('#closebutton').prop('disabled', false).text('Mark as Completed');
let errorMessage = "An unknown error occurred."; if (xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; }
Swal.fire({ icon: 'error', title: 'Error', text: errorMessage, confirmButtonText: 'OK' });
console.error('Error:', xhr.responseText); } }); }); }); </script>
</body></html>
|