This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
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.
 
 
 
 

692 lines
25 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 -->
<header th:replace="~{fragments/modules/base/header :: header}"></header>
<div class="page-wrap">
<!-- Left Menu -->
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
<div class="main-content">
<div class="container-fluid">
<div class="page-header">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="fas fa-user-graduate bg-blue"></i>
<div class="d-inline">
<h5>Assign Agents</h5>
<span>1913 Assign agents for Campaign</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="/index"><i class="ik ik-home"></i></a>
</li>
<li class="breadcrumb-item">1913 Campaign</li>
<li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
</ol>
</nav>
</div>
</div>
</div>
<hr>
<!-- Card for Agent Assignment -->
<div class="card">
<div class="card-header">
<h3>Agent Assign</h3>
</div>
<div class="card-body">
<!-- Dropdown for Category -->
<div class="row">
<div class="form-group col-md-6 col-sm-12">
<label for="category">Category</label>
<select id="category" class="form-control">
</select>
</div>
<!-- Dropdown for Campaigns -->
<div class="form-group col-md-6 col-sm-12">
<label for="campaign">Campaign</label>
<select id="campaign" class="form-control" disabled>
</select>
</div>
<div class="form-group col-12 d-flex justify-content-center align-items-center">
<!-- Centered button between the dropdowns -->
<button id="searchBtn" class="btn btn-primary">Search</button>
<button id="resetBtn" class="btn btn-secondary ml-3">Reset</button>
</div>
</div>
</div>
</div>
<!-- Card for Campaign Details -->
<div class="card mt-3" id="campaignDetailsCard" style="display:none;">
<div class="card-header">
<h3>Campaign Details</h3>
</div>
<div class="card-body">
<table class="table table-bordered">
<tbody>
<tr>
<th >Name</th>
<td class="fw-semibold" id="campaignName" style="padding: 0.45rem 0.45rem;"></td>
</tr>
<tr>
<th>From Date</th>
<td class="fw-semibold" id="campaignStartdate" style="padding: 0.45rem 0.45rem;"></td>
</tr>
<tr>
<th>To Date</th>
<td class="fw-semibold" id="campaignEnddate" style="padding: 0.45rem 0.45rem;"></td>
</tr>
<tr>
<th>Agents Assigned</th>
<td class="fw-semibold" id="campaignAgents" style="padding: 0.45rem 0.45rem;"></td>
</tr>
<tr>
<th>Calls Assigned (per person)</th>
<td class="fw-semibold" id="campaignCalls" style="padding: 0.45rem 0.45rem;"></td>
</tr>
<tr>
<th>Description</th>
<td class="fw-semibold" id="campaignDesc" style="padding: 0.45rem 0.45rem;"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row" id="editagentCard" style="display:none;">
<div class="col-md-12">
<div class="card">
<div class="card-block">
<div class="page-header-title" >
<h5 style="margin: 0;font-weight: bold;">Selected Agent List</h5><hr>
</div>
<table id="editagentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
<thead class="thead-dark">
<tr role="row">
<th class="text-center no-sort" width="1%">S.No</th>
<th class="text-center">Agent Id</th>
<th class="text-center">Name of Agents</th>
<th class="text-center">Select/Not Selected</th>
</tr>
</thead>
<tbody id="editagentList" style="text-align:center;">
<!-- Rows will be dynamically inserted here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row" id="agentCard" style="display:none;">
<div class="col-md-12">
<div class="card">
<div class="card-block">
<div class="page-header-title" >
<h5 style="margin: 0;font-weight: bold;">Overall Agent List</h5><hr>
</div>
<div class=" d-flex justify-content-end mb-2">
<button class="btn btn-primary" id="selectedCount"><i class="ik ik-user-plus f-16 mr-2"></i>0</button>
<!-- <button class="btn btn-warning ml-2" id="editAgentsBtn"><i class="ik ik-edit f-16 mr-2"></i>Edit</button> -->
</div>
<table id="agentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
<thead class="thead-dark">
<tr role="row">
<th class="text-center no-sort" width="1%">S.No</th>
<th class="text-center">Agent Id</th>
<th class="text-center">Name of Agents</th>
<th class="text-center"><input type="checkbox" id="selectAllAgents"> Select All</th>
</tr>
</thead>
<tbody id="agentList" style="text-align:center;">
<!-- Rows will be dynamically inserted here -->
</tbody>
</table>
<!-- Center the Submit button -->
<div class="text-center">
<button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
</div>
<!-- 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">
// Fetch category dropdown on page load
fetchCategoryDropdown();
// Handle category change event to fetch campaigns
$(document).on('change', '#category', function() {
let selectedCategoryId = $(this).val();
if (selectedCategoryId != '0') {
fetchCampaignDropdown(selectedCategoryId);
} else {
$('#campaign').empty().prop('disabled', true);
}
});
$("#searchBtn").click(function () {
let selectedCampaignId = $('#campaign').val();
if(selectedCampaignId == null || selectedCampaignId=='0'){
Swal.fire({
title: 'Info!',
text: 'Please Select Category and Campaign!',
icon: 'info',
timer: 2000,
//timerProgressBar: true,
showConfirmButton: false
})
hideCampaignAndAgentDetails();
}
else if (selectedCampaignId != '0') {
fetchCampaignDetails(selectedCampaignId);
checkCampaignInAssigned(selectedCampaignId);
// Disable the category and campaign dropdowns after search
$('#category').prop('disabled', true);
$('#campaign').prop('disabled', true);
}
else {
hideCampaignAndAgentDetails();
}
});
//Approve button click event
$("#submitBtn").click(function () {
handleSubmit();
});
$("#resetBtn").click(function () {
location.reload(); // Reloads the current page
});
// Initial binding for checkbox events
bindCheckboxEvents();
// Function to fetch category dropdown
function fetchCategoryDropdown() {
$.ajax({
url: '/gcc/api/callcenter/admin/getcategory',
type: 'GET',
dataType: 'json'
})
.done(function (data) {
let categoryDropdown = $('#category');
categoryDropdown.empty();
categoryDropdown.append($('<option selected value="0"></option>').text('Select a category'));
$.each(data, function (index, category) {
categoryDropdown.append($('<option></option>').attr('value', category.category_id).text(category.category_name));
});
})
.fail(function (xhr, status, error) {
console.error('Error fetching category:', error);
});
}
// Function to fetch campaigns based on selected category
function fetchCampaignDropdown(categoryId) {
$('#campaign').prop('disabled', false);
$.ajax({
url: '/gcc/api/callcenter/admin/getcampaignbycategory?id=' + categoryId,
type: 'GET',
dataType: 'json'
})
.done(function (data) {
let campaignDropdown = $('#campaign');
campaignDropdown.empty();
campaignDropdown.append($('<option selected value="0"></option>').text('Select a campaign'));
$.each(data, function (index, campaign) {
campaignDropdown.append($('<option></option>').attr('value', campaign.campaign_id).text(campaign.campaign_name));
});
})
.fail(function (xhr, status, error) {
console.error('Error fetching campaign:', error);
});
}
// Function to fetch campaign details
function fetchCampaignDetails(campaignId) {
$.ajax({
url: '/gcc/api/callcenter/admin/getcampaignbyid?id=' + campaignId,
method: 'GET',
dataType: 'json',
success: function (response) {
if (response.length === 0) {
console.error("No campaign details found.");
return;
}
document.getElementById("campaignName").innerHTML = response[0].campaign_name;
document.getElementById("campaignStartdate").innerHTML = response[0].start_date;
document.getElementById("campaignEnddate").innerHTML = response[0].end_date;
document.getElementById("campaignAgents").innerHTML = response[0].no_of_agents;
document.getElementById("campaignCalls").innerHTML = response[0].calls_per_agent;
document.getElementById("campaignDesc").innerHTML = response[0].description;
// Show the campaign details card
document.getElementById('campaignDetailsCard').style.display = 'block';
},
error: function () {
console.error("An error occurred while fetching campaign details.");
}
});
}
// Function to check if campaign is already assigned and fetch agents
function checkCampaignInAssigned(selectedCampaignId) {
$.ajax({
url: '/gcc/api/callcenter/admin/getassignedcampaign?id=' + selectedCampaignId,
type: 'GET',
dataType: 'json',
success: function(response) {
//console.log('checkCampaignInAssigned response:', response);
fetchAgentsForCampaign(selectedCampaignId); // Always fetch agents
if (response.length > 0) {
populateEditAgentList(response);
document.getElementById('editagentCard').style.display = 'block';
initializeEditAgentsDataTable();
}
else{
document.getElementById('editagentCard').style.display = 'none';
}
},
error: function(xhr, status, error) {
console.error('Error fetching assigned agents:', error);
}
});
}
// Function to populate the edit agent list
function populateEditAgentList(agents) {
let editagentList = $('#editagentList');
editagentList.empty();
$.each(agents, function(index, agent) {
let row = `
<tr data-assigned-id="${agent.assigned_id}">
<td>${index + 1}</td>
<td>${agent.agent_id}</td>
<td>${agent.agent_name}</td>
<td>
<button class="btn btn-warning" onclick="editagent(${agent.assigned_id})">Remove</button>
</td>
</tr>
`;
// Log the row HTML to debug
// console.log('Appending row:', row);
editagentList.append(row);
});
}
function editagent(assignedId) {
$.ajax({
url: '/gcc/api/callcenter/admin/deleteassignedbyid?id=' + assignedId,
type: 'GET',
dataType: 'json',
success: function(response) {
$('tr[data-assigned-id="' + assignedId + '"]').remove();
Swal.fire({
title: 'Success!',
text: 'Agents have been removed!',
icon: 'success',
timer: 2000,
//timerProgressBar: true,
showConfirmButton: false
})
},
error: function(xhr, status, error) {
console.error('Error removing agents:', error);
reject(error); // Reject the promise in case of an error
}
});
}
// Function to fetch agents for the selected campaign
function fetchAgentsForCampaign(campaignId) {
$.ajax({
url: '/gcc/api/callcenter/admin/getagentsfortask?id=' +campaignId,
type: 'GET',
dataType: 'json',
success: function(response) {
let agentList = $('#agentList');
agentList.empty();
if (response.length > 0) {
$.each(response, function(index, agent) {
let row = `
<tr>
<td>${index + 1}</td>
<td>${agent.agent_id}</td>
<td>${agent.agent_name}</td>
<td><input type="checkbox" class="agentCheckbox" value="${agent.agent_id}"></td>
</tr>
`;
agentList.append(row);
});
document.getElementById('agentCard').style.display = 'block';
initializeAgentsDataTable();
} else {
agentList.append('<tr><td colspan="4">No agents available</td></tr>');
}
bindCheckboxEvents(); // Rebind checkbox events after adding new checkboxes
},
error: function(xhr, status, error) {
console.error('Error fetching agents:', error);
}
});
}
// Function to hide campaign and agent details
function hideCampaignAndAgentDetails() {
document.getElementById('campaignDetailsCard').style.display = 'none';
document.getElementById('agentCard').style.display = 'none';
document.getElementById('editagentCard').style.display = 'none';
}
// Function to bind checkbox events and handle "Select All" functionality
function bindCheckboxEvents() {
$('#selectAllAgents').on('click', function() {
let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10);
let totalCheckboxes = $('.agentCheckbox').length;
if ($(this).is(':checked')) {
if (campaignAgentsCount > totalCheckboxes) {
Swal.fire({
title: 'Sorry!',
text: 'You cannot select more checkboxes than available.',
icon: 'error',
timer: 2000
}).then(() => {
$('#selectAllAgents').prop('checked', false);
});
} else {
let checkboxes = $('.agentCheckbox');
checkboxes.prop('checked', false);
for (let i = 0; i < campaignAgentsCount; i++) {
if (checkboxes[i]) {
$(checkboxes[i]).prop('checked', true);
}
}
}
} else {
$('.agentCheckbox').prop('checked', false);
}
updateSelectedCount();
});
$(document).on('change', '.agentCheckbox', function () {
if ($('.agentCheckbox:checked').length === $('.agentCheckbox').length) {
$('#selectAllAgents').prop('checked', true);
} else {
$('#selectAllAgents').prop('checked', false);
}
updateSelectedCount();
});
}
// Function to update the selected count
function updateSelectedCount() {
let selectedCount = $('.agentCheckbox:checked').length;
$('#selectedCount').html('<i class="ik ik-user-plus f-16 mr-2"></i>' + selectedCount);
}
// Function to handle form submission and assign agents
function handleSubmit() {
let selectedCategoryId = $('#category').val();
let selectedCampaignId = $('#campaign').val();
let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10); // Get the required agent count
let assignedAgentCount = $('#editagentList tr').length; // Count already assigned agents
// Ensure category and campaign are selected
if (selectedCategoryId == 0 || selectedCampaignId == 0) {
Swal.fire({
title: 'Info!',
text: 'Please select a category and campaign before proceeding.',
icon: 'info',
timer: 2000,
timerProgressBar: true
});
return;
}
let selectedAgentsCount = $(".agentCheckbox:checked").length; // Count of selected checkboxes
// Total agent count (new selections + already assigned)
let totalSelectedCount = selectedAgentsCount + assignedAgentCount;
// Validation: Check if total selected count matches the campaignAgentsCount
if (totalSelectedCount < campaignAgentsCount) {
Swal.fire({
title: 'Error!',
text: `You need to select ${campaignAgentsCount - totalSelectedCount} more agents to meet the required count.`,
icon: 'error',
timer: 3000,
timerProgressBar: true
});
return;
} else if (totalSelectedCount > campaignAgentsCount) {
Swal.fire({
title: 'Error!',
text: `You have selected more agents than allowed. Please reduce the number of selected agents.`,
icon: 'error',
timer: 3000,
timerProgressBar: true
});
return;
}
let requestData = [];
$(".agentCheckbox:checked").each(function () {
requestData.push({
categoryId: parseInt(selectedCategoryId),
campaignId: parseInt(selectedCampaignId),
agentId: parseInt($(this).val())
});
});
if (requestData.length === 0) {
Swal.fire({
title: 'Info!',
text: 'Please select at least one agent to assign.',
icon: 'info',
timer: 3000,
timerProgressBar: true
});
return;
}
// AJAX request to submit the data
$.ajax({
url: "/gcc/api/callcenter/admin/addagentsfortask",
type: "POST",
contentType: "application/json",
data: JSON.stringify(requestData),
success: function (response) {
Swal.fire({
title: 'Success!',
text: 'Agents have been successfully assigned!',
icon: 'success',
timer: 2000,
timerProgressBar: true,
showConfirmButton: false
}).then(() => {
location.reload(); // Reload after success
});
},
error: function (xhr, status, error) {
Swal.fire({
title: 'Error!',
text: 'There was an error while assigning agents.',
icon: 'error',
timer: 3000,
timerProgressBar: true
});
}
});
}
//Initialize the first table: agentsDatatable
function initializeAgentsDataTable() {
if (!$.fn.DataTable.isDataTable('#agentsDatatable')) {
$('#agentsDatatable').DataTable({
dom: 'Bftip',
columnDefs: [{ targets: 'no-sort', orderable: false }],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '30vh',
fixedColumns: { left: 1, right: 1 },
buttons: [
{ extend: 'pageLength', className: 'btn btn-warning' },
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false
});
} else {
$('#agentsDatatable').DataTable().clear().draw();
}
}
// Initialize the second table: editagentsDatatable
function initializeEditAgentsDataTable() {
if (!$.fn.DataTable.isDataTable('#editagentsDatatable')) {
$('#editagentsDatatable').DataTable({
dom: 'Bftip',
columnDefs: [{ targets: 'no-sort', orderable: false }],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '30vh',
fixedColumns: { left: 1, right: 1 },
buttons: [
{ extend: 'pageLength', className: 'btn btn-warning' },
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false
});
} else {
$('#editagentsDatatable').DataTable().clear().draw();
}
}
</script>
</body>
</html>