8 changed files with 1787 additions and 6 deletions
-
69gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.java
-
65gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaApiController.java
-
9gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaMainController.java
-
623gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.java
-
4gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
-
1gcc_officer_portal/src/main/resources/application.properties
-
217gcc_officer_portal/src/main/resources/templates/modules/callcenterqaqc/socialmediacomplaints.html
-
805gcc_officer_portal/src/main/resources/templates/modules/callcenterqaqc/socialmediaregcompclosing.html
@ -0,0 +1,805 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
||||
|
<head th:replace="~{fragments/modules/base/head :: head}"> |
||||
|
|
||||
|
</head> |
||||
|
<style> |
||||
|
#modalBody h4 { |
||||
|
font-weight: bold; |
||||
|
margin-top: 15px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
#modalBody p { |
||||
|
margin: 5px 0; |
||||
|
} |
||||
|
|
||||
|
#modalBody hr { |
||||
|
margin: 15px 0; |
||||
|
} |
||||
|
.comment { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.comment p { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
border: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
.col-4 { |
||||
|
font-weight: bold; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.col-8 { |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.comment { |
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.comment .text-muted { |
||||
|
font-size: 0.9em; |
||||
|
color: #6c757d; |
||||
|
} |
||||
|
|
||||
|
.comment hr { |
||||
|
border-top: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
.comment .btn-link { |
||||
|
font-size: 0.9em; |
||||
|
text-decoration: underline; |
||||
|
color: #007bff; |
||||
|
} |
||||
|
/* Make the modal body scrollable */ |
||||
|
#detailsModal .modal-body { |
||||
|
max-height: 70vh; /* Limit the height to 70% of the viewport */ |
||||
|
overflow-y: auto; /* Enable vertical scrolling */ |
||||
|
} |
||||
|
.width1{ |
||||
|
width: 100px; |
||||
|
} |
||||
|
.width2{ |
||||
|
width: 120px; |
||||
|
} |
||||
|
</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>SocialMedia Complaints</h5> |
||||
|
<span>Closing Social Media Registered Complaints</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 Social Media</li> |
||||
|
<li class="breadcrumb-item active" aria-current="page">Close Reg Complaints</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="row mt-4"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card"> |
||||
|
<div class="card-header"> |
||||
|
<span style="font-size: medium;font-weight: bold;">Complaints List</span> |
||||
|
<span th:text="${userId}" style="display:none;" id="userIdSpan"></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 no-sort">Complaint No</th> |
||||
|
<th class="text-center">Agent</th> |
||||
|
<th class="text-center">Agent Submitted Date</th> |
||||
|
<th class="text-center">View</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
|
||||
|
</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> |
||||
|
|
||||
|
|
||||
|
<!-- Modal --> |
||||
|
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" |
||||
|
aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> |
||||
|
<div class="modal-dialog modal-lg" role="document"> |
||||
|
<div class="modal-content"> |
||||
|
<div class="modal-header"> |
||||
|
<h5 class="modal-title" id="detailsModalLabel">Complaint |
||||
|
Details</h5> |
||||
|
<button type="button" class="close" data-dismiss="modal" |
||||
|
aria-label="Close"> |
||||
|
<span aria-hidden="true">×</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="modal-body" id="modalBody"> |
||||
|
<!-- Details will be populated here --> |
||||
|
</div> |
||||
|
<div class="modal-footer"> |
||||
|
<button type="button" class="btn btn-secondary" |
||||
|
data-dismiss="modal">Close</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</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).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: '100vh', |
||||
|
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 |
||||
|
}); |
||||
|
|
||||
|
$('#pageLoader').show(); |
||||
|
|
||||
|
$.ajax({ |
||||
|
type: "GET", |
||||
|
url: `/gcc/api/callcenterqaqc/socialmedia/getfilteredregcomps`, |
||||
|
success: function (response) { |
||||
|
$('#pageLoader').hide(); |
||||
|
if (response.status === "success") { |
||||
|
|
||||
|
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 columns = [ |
||||
|
{ |
||||
|
data: null, |
||||
|
render: (data, type, row, meta) => meta.row + 1, |
||||
|
className: 'text-center' |
||||
|
}, |
||||
|
{ data: 'complaintnumber', defaultContent: '-', className: 'text-center' }, |
||||
|
{ data: 'agent_name', defaultContent: '-', className: 'text-center' }, |
||||
|
{ data: 'submitted_date', defaultContent: '-', className: 'text-center' }, |
||||
|
|
||||
|
{ |
||||
|
data: null, |
||||
|
render: function(data, type, row) { |
||||
|
return ` |
||||
|
<button |
||||
|
type="button" |
||||
|
class="btn btn-info btn-view" |
||||
|
data-complaint-number="${row.complaintnumber}" |
||||
|
data-remarks="${row.remarks || ''}" |
||||
|
data-img="${row.img_full_path || ''}"> |
||||
|
View |
||||
|
</button> |
||||
|
`; |
||||
|
}, |
||||
|
className: 'text-center' |
||||
|
} |
||||
|
|
||||
|
]; |
||||
|
|
||||
|
|
||||
|
// Initialize the DataTable |
||||
|
$('#ReportDatatable').DataTable({ |
||||
|
destroy: true, |
||||
|
searching: true, |
||||
|
autoWidth: true, |
||||
|
responsive: true, |
||||
|
paging: true, |
||||
|
info: true, |
||||
|
data: response.details, |
||||
|
columns: columns, |
||||
|
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: '100vh', |
||||
|
fixedColumns: { |
||||
|
left: 1, |
||||
|
right: 1 |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
else if (response.status === "nodata") { |
||||
|
$('#pageLoader').hide(); |
||||
|
Swal.fire({ |
||||
|
icon: 'warning', |
||||
|
title: 'No Data', |
||||
|
text: 'No data available.' |
||||
|
}); |
||||
|
} |
||||
|
else if (response.status === "error") { |
||||
|
$('#pageLoader').hide(); |
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Error', |
||||
|
text: response.message |
||||
|
}); |
||||
|
} |
||||
|
else { |
||||
|
$('#pageLoader').hide(); |
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Error', |
||||
|
text: response.message |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
error: function (error) { |
||||
|
$('#pageLoader').hide(); |
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Error', |
||||
|
text: response.message |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
$(document).on('click', '.btn-info', function () { |
||||
|
const complaintNumber = $(this).data('complaint-number'); |
||||
|
const remarks = $(this).data('remarks'); |
||||
|
const imgFullPath = $(this).data('img'); |
||||
|
|
||||
|
viewDetails(complaintNumber, remarks, imgFullPath); |
||||
|
}); |
||||
|
|
||||
|
function viewDetails(complaintNumber, remarks, imgFullPath) { |
||||
|
document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>'; |
||||
|
$('#detailsModal').modal('show'); |
||||
|
|
||||
|
// Fetch the main complaint details |
||||
|
$.ajax({ |
||||
|
url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails', |
||||
|
type: 'GET', |
||||
|
data:{complaintNumber:complaintNumber}, |
||||
|
success: function (data) { |
||||
|
//console.log('Complaint Data:', data); |
||||
|
|
||||
|
// Fetch agent response details |
||||
|
$.ajax({ |
||||
|
url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory', |
||||
|
type: 'GET', |
||||
|
data: { complaintNumber }, |
||||
|
success: function (agentResponse) { |
||||
|
//console.log('Agent Response:', agentResponse); |
||||
|
|
||||
|
// Use the logic for building complaint and agent details as HTML |
||||
|
const detailsHtml = generateDetailsHtml(data, agentResponse,remarks,imgFullPath); |
||||
|
|
||||
|
// Update modal content |
||||
|
document.getElementById('modalBody').innerHTML = detailsHtml; |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
error: function () { |
||||
|
document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>'; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
error: function () { |
||||
|
document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>'; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function generateDetailsHtml(data, agentResponse,remarks,imgFullPath) { |
||||
|
|
||||
|
// Helper function to format date to yyyy-mm-dd |
||||
|
function formatDate(dateStr) { |
||||
|
if (!dateStr) return 'N/A'; |
||||
|
const date = new Date(dateStr); |
||||
|
return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd |
||||
|
} |
||||
|
// Format complaint messages |
||||
|
let messagesHtml = ''; |
||||
|
if (data.comments && data.comments.length > 0) { |
||||
|
data.comments.forEach((comment) => { |
||||
|
const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available" |
||||
|
? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>` |
||||
|
: '<p style="color: red;">No image available for this comment.</p>'; |
||||
|
|
||||
|
messagesHtml += ` |
||||
|
<div class="comment mb-4"> |
||||
|
<div class="row"> |
||||
|
<div class="col-2 text-center"> |
||||
|
<p class="text-muted">${comment.comment_date}</p> |
||||
|
</div> |
||||
|
<div class="col-10"> |
||||
|
<p><strong>${comment.user || 'N/A'}</strong> Says:</p> |
||||
|
<p>${comment.message || 'No message available'}</p> |
||||
|
<div class="user-image">${commentImageLink}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
}); |
||||
|
} else { |
||||
|
messagesHtml = '<p>No comments available.</p>'; |
||||
|
} |
||||
|
|
||||
|
// Format agent responses |
||||
|
let agentRepliedHtml = ''; |
||||
|
if (agentResponse.length > 0) { |
||||
|
agentResponse.forEach((agentItem) => { |
||||
|
agentRepliedHtml += ` |
||||
|
<div class="comment mb-4"> |
||||
|
<div class="row"> |
||||
|
<div class="col-2 text-center"> |
||||
|
<p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p> |
||||
|
</div> |
||||
|
<div class="col-10"> |
||||
|
<p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p> |
||||
|
<p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p> |
||||
|
<p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
}); |
||||
|
} else { |
||||
|
agentRepliedHtml = '<p>No agent replied messages available.</p>'; |
||||
|
} |
||||
|
|
||||
|
// Check for user images |
||||
|
const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {}; |
||||
|
const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== "" |
||||
|
? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>` |
||||
|
: '<p style="color: red;">UserImages: No image available.</p>'; |
||||
|
|
||||
|
// Combine all sections into the final HTML |
||||
|
const detailsHtml = ` |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<h4>Complaint Person's Details:</h4> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complaint Date:</strong> ${data.complaintdate}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Division:</strong> ${data.Division || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Gender:</strong> ${data.gender || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<hr> |
||||
|
<h4>Complaint Details:</h4> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p> |
||||
|
</div> |
||||
|
<div class="col-6"> |
||||
|
<p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
<p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<hr> |
||||
|
<h4>Complaint Messages:</h4> |
||||
|
${messagesHtml} |
||||
|
<hr> |
||||
|
<h4>Agent Replied Messages:</h4> |
||||
|
${agentRepliedHtml} |
||||
|
<hr> |
||||
|
${imageLink} |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<h4>Registered Complaint Closing Details</h4> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
|
||||
|
<p> |
||||
|
<strong>Resolved Image:</strong> |
||||
|
${ |
||||
|
imgFullPath |
||||
|
? `<a href="${imgFullPath}" |
||||
|
target="_blank" |
||||
|
style="color:blue;text-decoration:underline;"> |
||||
|
View Resolved Image |
||||
|
</a>` |
||||
|
: 'No Image Available' |
||||
|
} |
||||
|
</p> |
||||
|
|
||||
|
<p> |
||||
|
<strong>Remarks:</strong> |
||||
|
${remarks || 'N/A'} |
||||
|
</p> |
||||
|
|
||||
|
<div class="d-flex justify-content-center mt-3"> |
||||
|
<button |
||||
|
type="button" |
||||
|
class="btn btn-success" |
||||
|
onclick="approveComplaint( |
||||
|
'${data.complaintid}', |
||||
|
'${remarks ? remarks.replace(/'/g, "\\'") : ""}', |
||||
|
'${imgFullPath || ""}' |
||||
|
)"> |
||||
|
Complaint Close |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
type="button" |
||||
|
class="btn btn-danger ml-2" |
||||
|
onclick="rejectComplaint( |
||||
|
'${data.complaintid}' |
||||
|
)"> |
||||
|
Reject |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
`; |
||||
|
|
||||
|
return detailsHtml; |
||||
|
} |
||||
|
|
||||
|
function rejectComplaint(complaintId) { |
||||
|
const userid = document.getElementById('userIdSpan').textContent; |
||||
|
|
||||
|
Swal.fire({ |
||||
|
title: 'Are you sure?', |
||||
|
text: 'You want to Reject this complaint?', |
||||
|
icon: 'question', |
||||
|
showCancelButton: true, |
||||
|
confirmButtonText: 'Yes, Reject', |
||||
|
cancelButtonText: 'Cancel' |
||||
|
}).then((result) => { |
||||
|
|
||||
|
if (result.isConfirmed) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
url: '/gcc/api/callcenterqaqc/socialmedia/rejectComplaint', |
||||
|
type: 'POST', |
||||
|
data: { |
||||
|
complaintId: complaintId, |
||||
|
userid:userid |
||||
|
}, |
||||
|
|
||||
|
beforeSend: function () { |
||||
|
Swal.fire({ |
||||
|
title: 'Please Wait...', |
||||
|
text: 'Processing approval...', |
||||
|
allowOutsideClick: false, |
||||
|
didOpen: () => { |
||||
|
Swal.showLoading(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
success: function (response) { |
||||
|
|
||||
|
Swal.close(); |
||||
|
|
||||
|
if (response.status === 'SUCCESS') { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Success', |
||||
|
text: response.message |
||||
|
}).then(() => { |
||||
|
|
||||
|
$('#detailsModal').modal('hide'); |
||||
|
|
||||
|
// reload datatable data if required |
||||
|
location.reload(); |
||||
|
}); |
||||
|
|
||||
|
} else { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Failed', |
||||
|
text: response.message |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
error: function () { |
||||
|
|
||||
|
Swal.close(); |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Error', |
||||
|
text: 'Server error occurred.' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function approveComplaint(complaintId, remarks, imgFullPath) { |
||||
|
|
||||
|
const userid = document.getElementById('userIdSpan').textContent; |
||||
|
//console.log("userid===="+userid); |
||||
|
|
||||
|
Swal.fire({ |
||||
|
title: 'Are you sure?', |
||||
|
text: 'You want to Close this complaint?', |
||||
|
icon: 'question', |
||||
|
showCancelButton: true, |
||||
|
confirmButtonText: 'Yes, Close', |
||||
|
cancelButtonText: 'Cancel' |
||||
|
}).then((result) => { |
||||
|
|
||||
|
if (result.isConfirmed) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
url: '/gcc/api/callcenterqaqc/socialmedia/approveComplaint', |
||||
|
type: 'POST', |
||||
|
data: { |
||||
|
complaintId: complaintId, |
||||
|
remarks: remarks, |
||||
|
imgFullPath: imgFullPath, |
||||
|
userid:userid |
||||
|
}, |
||||
|
|
||||
|
beforeSend: function () { |
||||
|
Swal.fire({ |
||||
|
title: 'Please Wait...', |
||||
|
text: 'Processing approval...', |
||||
|
allowOutsideClick: false, |
||||
|
didOpen: () => { |
||||
|
Swal.showLoading(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
success: function (response) { |
||||
|
|
||||
|
Swal.close(); |
||||
|
|
||||
|
if (response.status === 'SUCCESS') { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Approved', |
||||
|
text: response.message |
||||
|
}).then(() => { |
||||
|
|
||||
|
$('#detailsModal').modal('hide'); |
||||
|
|
||||
|
// reload datatable data if required |
||||
|
location.reload(); |
||||
|
}); |
||||
|
|
||||
|
} else { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Failed', |
||||
|
text: response.message |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
error: function () { |
||||
|
|
||||
|
Swal.close(); |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'error', |
||||
|
title: 'Error', |
||||
|
text: 'Server error occurred.' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue