nhance/app/Views/employee_pending_approvals_list.php

407 lines
14 KiB
PHP

<style>
.table th,
.table td {
padding: 8px;
}
table.dataTable tbody td {
padding: 4px 4px !important;
}
.select2-selection__choice {
background-color: #0a8794 !important;
color: white !important;
font-weight: bold;
}
.select2-selection__choice__remove {
color: white !important;
margin-right: 5px;
}
.custom-dropdown-menu {
display: none;
position: absolute;
background-color: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
padding: 0.5rem 0;
min-width: 10rem;
z-index: 9999;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.custom-dropdown-menu .dropdown-item {
display: block !important;
width: 100% !important;
padding: 0.5rem 1rem !important;
color: #212529 !important;
text-decoration: none !important;
background-color: transparent !important;
}
.custom-dropdown-menu .dropdown-item:hover {
background-color: #f8f9fa !important;
color: #16181b !important;
cursor: pointer !important;
}
</style>
<div class="row">
<div class="col-xl-12">
<div class="card-body">
<div id="accordion" class="mb-3">
<div class="card mb-1">
<h4>
Filter
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
aria-expanded="true">
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
</a>
</h4>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-4">
<label>Client</label> <br />
<select class="form-control" id="clients">
<option value="0">Select</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Branch</label> <br />
<select name="branch_id" class="form-control" id="branch_id">
<option value="0">Select</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Policy</label> <br />
<select class="form-control" id="policies">
<option value="0">Select</option>
</select>
</div>
</div>
<div class="row justify-content-end">
<div class="col-auto">
<a href="<?= base_url('employee/pending-approvals'); ?>"
class="btn btn-primary waves-effect waves-light" id="get-emp-list"
onclick="fetchPendingApprovalsList(event);">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="employee_table_list"><?= $default_table_html ?? '' ?></div>
<div id="loader" class="loader" style="display:none;">SPINNER</div>
<script>
var client_list = '';
var branch_list = '';
var policy_list = '';
var policy_list_by_client = '';
var client_id = '<?= isset($getData) ? $getData['client_id'] : '0' ?>';
var client_branch_id = '<?= isset($getData) ? $getData['branch_id'] : '0' ?>';
function init() {
const table = document.getElementById("tickets-table") || document.getElementById("employee-data-list-table");
if (!table) return;
let activeDropdown = null;
table.querySelectorAll("tbody tr").forEach(row => {
const customDropdown = createCustomDropdown(row);
if (!customDropdown) return;
document.body.appendChild(customDropdown);
row.addEventListener("click", function(event) {
handleRowClick(event, customDropdown);
});
customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
item.addEventListener('click', function(e) {
handleItemClick(e, item);
});
});
});
document.addEventListener("click", handleDocumentClick);
function createCustomDropdown(row) {
const originalDropdown = row.querySelector('.dropdown-menu');
if (!originalDropdown) return null;
const customDropdown = document.createElement('div');
customDropdown.className = 'custom-dropdown-menu';
const originalItems = originalDropdown.querySelectorAll('.dropdown-item');
customDropdown.innerHTML = originalDropdown.innerHTML;
customDropdown.querySelectorAll('.dropdown-item').forEach((item, index) => {
const originalItem = originalItems[index];
const originalOnclick = originalItem.getAttribute('onclick');
if (originalOnclick) {
item.setAttribute('data-onclick', originalOnclick);
item.removeAttribute('onclick');
}
});
return customDropdown;
}
function handleRowClick(event, customDropdown) {
if (event.target.closest('td:last-child')) {
return;
}
if (activeDropdown) {
activeDropdown.style.display = 'none';
}
const rect = event.target.getBoundingClientRect();
customDropdown.style.display = 'block';
customDropdown.style.position = 'fixed';
customDropdown.style.left = `${rect.left}px`;
customDropdown.style.top = `${rect.bottom + 5}px`;
activeDropdown = customDropdown;
event.stopPropagation();
}
function handleItemClick(e, item) {
const onclickAttr = item.getAttribute('data-onclick');
if (onclickAttr) {
eval(onclickAttr);
}
const href = item.getAttribute('href');
if (href && href !== '#' && href !== 'javascript: void(0);') {
window.location.href = href;
}
if (activeDropdown) {
activeDropdown.style.display = 'none';
activeDropdown = null;
}
e.stopPropagation();
}
function handleDocumentClick() {
if (activeDropdown) {
activeDropdown.style.display = 'none';
activeDropdown = null;
}
}
}
$(document).ready(function() {
getClientAndBranchAndPolicy();
setTimeout(function() {
init();
}, 500);
});
function getClientAndBranchAndPolicy() {
$.ajax({
url: '<?= base_url("/util/getClientAndBranchAndPolicy") ?>',
type: "GET",
dataType: 'json',
success: function(res) {
if (res.status == true) {
client_list = res.client_data;
branch_list = res.branch_data;
policy_list = res.policy_data;
policy_list_by_client = res.policyListByClient;
appendClients(client_list);
}
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
}
});
}
function appendClients(data) {
var clientID = <?= isset($getData) ? $getData['client_id'] : '0' ?>;
$.each(data, function(index, item) {
var option = $('<option>', {
value: item.id,
text: item.client_name
});
if (clientID == item.id) {
option.attr('selected', true);
}
$('#clients').append(option);
});
}
function appendBranch(data) {
$('#branch_id').empty();
$('#branch_id').append($('<option>', {
value: '0',
text: 'Select'
}));
$.each(data, function(index, item) {
var option = $('<option>', {
value: item.id,
text: item.branch_name
});
if (client_branch_id == item.id) {
option.attr('selected', true);
}
$('#branch_id').append(option);
});
}
function appendPolicies(data) {
$('#policies').empty();
$('#policies').append($('<option>', {
value: '0',
text: 'Select'
}));
var PolicyID = <?= isset($getData) ? $getData['policy_id'] : '0' ?>;
$.each(data, function(index, item) {
var option = $('<option>', {
value: item.id,
text: `${item.policy_type ?? ''} - ${item.policy_no ?? ''}`
});
if (PolicyID == item.id || PolicyID == item.client_policy_id) {
option.attr('selected', true);
}
$('#policies').append(option);
});
}
$(document).ready(function() {
$('#clients').on('change', function() {
$('#branch_id').empty();
$('#branch_id').append($('<option>', { value: '0', text: 'Select'}));
$('#policies').empty();
$('#policies').append($('<option>', { value: '0', text: 'Select' }));
var selectedClient = $(this).val();
var filteredBranch = branch_list[selectedClient];
if (filteredBranch) {
appendBranch(filteredBranch);
}
});
$('#branch_id').on('change', function() {
var selectedBranch = $(this).val();
var selectedClient = $('#clients').val();
var filteredPoliciesByClient = policy_list_by_client[selectedClient] || [];
var filteredPoliciesByBranch = filteredPoliciesByClient.filter(function(item) {
return item.client_branch_id === selectedBranch;
});
appendPolicies(filteredPoliciesByBranch);
if (Array.isArray(filteredPoliciesByBranch) && filteredPoliciesByBranch.length === 0) {
toastr.warning('No policies found for the selected client branch.');
}
});
});
function objectToQueryString(obj) {
return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
}
function fetchPendingApprovalsList(event = null) {
if (event) {
event.preventDefault();
}
var client_id = $('#clients').val();
var policy_id = $('#policies').val();
var branch_id = $('#branch_id').val();
var queryParams = {
client_id: client_id,
policy_id: policy_id,
branch_id: branch_id,
};
const queryString = objectToQueryString(queryParams);
const apiURL = $('#get-emp-list').attr('href') + "?" + queryString;
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
url: apiURL,
method: 'GET',
data: queryParams,
success: function(response) {
if (response.status == true) {
$('#employee_table_list').html(response.html);
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
setTimeout(function() {
init();
}, 1000);
}
},
error: function(xhr, status, error) {
console.error('Error:', error);
toastr.error('Failed to fetch Data', 'Error');
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
}
});
}
document.getElementById('toggleIcon').addEventListener('click', function() {
var icon = document.getElementById('icon');
icon.classList.toggle('mdi-chevron-down');
icon.classList.toggle('mdi-chevron-up');
});
function processPendingDependent(employeeId, clientPolicyId, status) {
var actionLabel = status === 'approved' ? 'approve' : 'reject';
Swal.fire({
title: 'Are you sure?',
text: 'Do you want to ' + actionLabel + ' this dependent?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (!result.isConfirmed) {
return;
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
url: '<?= base_url('processDependentAdd') ?>',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify({
employee_id: employeeId,
client_policy_id: clientPolicyId,
status: status
}),
success: function(response) {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
if (response.status === 'success' || response.code == 200) {
toastr.success(response.message || ('Dependent ' + actionLabel + 'd successfully'));
fetchPendingApprovalsList();
} else {
toastr.error(response.data || response.message || 'Action failed');
}
},
error: function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
toastr.error('Action failed', 'Error');
}
});
});
}
</script>