|
|
<!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 eventsbindCheckboxEvents();
// Function to fetch category dropdownfunction 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 categoryfunction 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 detailsfunction 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 agentsfunction 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 listfunction 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 campaignfunction 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 detailsfunction 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" functionalityfunction 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 countfunction 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 agentsfunction 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: agentsDatatablefunction 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: editagentsDatatablefunction 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>
|