844 lines
29 KiB
PHP
Executable File
844 lines
29 KiB
PHP
Executable File
<!-- <style>
|
||
body {
|
||
.multiselect-native-select {
|
||
position: relative;
|
||
/* bottom: 32px; */
|
||
select {
|
||
border: 0 !important;
|
||
clip: rect(0 0 0 0) !important;
|
||
height: 1px !important;
|
||
margin: -1px -1px -1px -3px !important;
|
||
overflow: hidden !important;
|
||
padding: 0 !important;
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
left: 50%;
|
||
top: 30px;
|
||
}
|
||
}
|
||
|
||
.multiselect-container{
|
||
width: 100% !important;
|
||
}
|
||
|
||
.multiselect-selected-text{
|
||
float: left !important;
|
||
}
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
</style> -->
|
||
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 20px;
|
||
}
|
||
|
||
.multiselect-native-select {
|
||
position: relative;
|
||
}
|
||
|
||
.multiselect-native-select select {
|
||
border: 0 !important;
|
||
clip: rect(0 0 0 0) !important;
|
||
height: 1px !important;
|
||
margin: -1px -1px -1px -3px !important;
|
||
overflow: hidden !important;
|
||
padding: 0 !important;
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
left: 50%;
|
||
top: 30px;
|
||
}
|
||
|
||
.multiselect-container {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.multiselect-selected-text {
|
||
float: left !important;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
/* Tooltip Styles */
|
||
.tooltip-trigger {
|
||
color: #007bff;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.tooltip-trigger:hover {
|
||
color: #0056b3;
|
||
}
|
||
|
||
.tooltip-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
}
|
||
|
||
|
||
.tooltip {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
position: absolute;
|
||
background-color: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
padding: 15px;
|
||
transition: opacity 0.3s, visibility 0.3s;
|
||
max-width: 600px;
|
||
min-width: 500px;
|
||
max-height: 600px; /* Limits height */
|
||
overflow-y: auto; /* Enables scrolling */
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Optional: Custom scrollbar styling */
|
||
.tooltip::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.tooltip::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tooltip::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tooltip::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
/* .tooltip {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
position: absolute;
|
||
background-color: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
padding: 15px;
|
||
transition: opacity 0.3s, visibility 0.3s;
|
||
max-width: 600px;
|
||
min-width: 500px;
|
||
pointer-events: auto;
|
||
} */
|
||
|
||
.tooltip::after {
|
||
content: "";
|
||
position: absolute;
|
||
border-width: 5px;
|
||
border-style: solid;
|
||
}
|
||
|
||
.tooltip.show {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
|
||
.tooltip-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
.tooltip-table th {
|
||
background-color: #f8f9fa;
|
||
font-weight: bold;
|
||
padding: 8px;
|
||
border: 1px solid #dee2e6;
|
||
text-align: left;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.tooltip-table td {
|
||
padding: 6px 8px;
|
||
border: 1px solid #dee2e6;
|
||
vertical-align: top;
|
||
font-size: 11px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.tooltip-table tbody tr:nth-child(even) {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.tooltip-table tbody tr:hover {
|
||
background-color: #e3f2fd;
|
||
}
|
||
|
||
.team-cell {
|
||
font-weight: bold;
|
||
background-color: #e7f3ff !important;
|
||
}
|
||
|
||
/* Form styling for demo */
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-control {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 0.375rem 0.75rem;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
color: #495057;
|
||
background-color: #fff;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 0.25rem;
|
||
}
|
||
|
||
label {
|
||
display: inline-block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.text-danger {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.btn-color{
|
||
background-color: rgba(52, 174, 178, 1);
|
||
color: white;
|
||
border:1px solid rgba(52, 174, 178, 1);
|
||
}
|
||
|
||
.btn-color:hover{
|
||
background-color: rgba(41, 139, 142, 1);
|
||
color: white;
|
||
border:1px solid rgba(41, 139, 142, 1);
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<!-- End ADD and EDIT Page HTML -->
|
||
<div class="row" id="List-page">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row" style="margin-bottom:1rem;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">User List</h4>
|
||
</div>
|
||
</div>
|
||
<table class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0" id="tickets-table">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium">Name</th>
|
||
<th class="font-weight-medium">Email</th>
|
||
<th class="font-weight-medium">Mobile No</th>
|
||
<th class="font-weight-medium">Role</th>
|
||
<th class="font-weight-medium">Status</th>
|
||
<th class="font-weight-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php foreach($UserList as $row) { ?>
|
||
<tr id="<?php echo $row->id;?>">
|
||
<td class="text-dark"><?php echo $row->first_name; ?></td>
|
||
<td><?php echo $row->email; ?></td>
|
||
<td><?php echo $row->mobile; ?></td>
|
||
<td><?php echo $row->user_role; ?></td>
|
||
<td>
|
||
<span class="<?php if($row->is_active == 1){ echo 'badge badge-success'; }else{ echo 'badge badge-danger'; } ?>">
|
||
<?php if($row->is_active == 1){ echo 'Active'; }else{ echo 'In-Active'; } ?>
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<div class="btn-group dropdown" style="position: relative !important;left:0px !important;top:0px !important;">
|
||
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right" style="cursor: pointer;">
|
||
<a data-toggle="modal" data-target="#con-close-modal" class="dropdown-item btnEdit" data-id="<?php echo $row->id; ?>"><i data-id="<?php echo $row->id; ?>" class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle btnEdit"></i>Edit</a>
|
||
<a class="dropdown-item btnDelete" data-id="<?php echo $row->id; ?>"><i data-id="<?php echo $row->id; ?>" class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle btnDelete"></i>Delete</a>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
|
||
|
||
<!-- modal content -->
|
||
|
||
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" data-backdrop="static">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">Add User</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body p-4">
|
||
<div class="">
|
||
|
||
<form role="form" class="parsley-examples" method="post" id="UserForm" action="" enctype="multipart/form-data">
|
||
<input type="hidden" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>"/>
|
||
<input type="hidden" name="PrimaryKey" id="UserId"/>
|
||
<div class="form-group">
|
||
|
||
<div class="form-row">
|
||
<div class="form-group col-md-4">
|
||
<label for="emp_code">Employee Code<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="emp_code" placeholder="Enter Code" name="emp_code" required>
|
||
</div>
|
||
<div class="form-group col-md-8">
|
||
<label for="first_name">Name<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="first_name" placeholder="Ente Name" name="first_name" required>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="email">Email<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="email" placeholder="Enter Email" name="email" data-parsley-trigger="change" data-parsley-type="email" required>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="mobile">Mobile Number<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="mobile" placeholder="Enter Mobile Number ( starting with 6, 7, 8, or 9 only. )" name="mobile" onkeypress = "return onlyNumbers(event)" maxlength="10" minlength="10" pattern="^[6-9]\d{9}$" data-parsley-type-message="Please enter a valid 10-digit mobile number starting with 6, 7, 8, or 9." data-parsley-required-message="Please enter a valid 10-digit mobile number starting with 6, 7, 8, or 9." required>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="emp_code">User Role<span class="text-danger">*</span>
|
||
<span class="tooltip-trigger fa fa-info-circle" id="roleAccessMatrixTrigger"></span>
|
||
</label>
|
||
<select class="form-control" id="role" name="role" required>
|
||
<option value="">Select Role</option>
|
||
<?php foreach($roleData as $value) { ?>
|
||
<option value="<?= $value['id'] ?>"><?= $value['role'] ?></option>
|
||
<?php } ?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="profile">User Team<span class="text-danger">*</span>
|
||
<span class="tooltip-trigger fa fa-info-circle" id="accessMatrixTrigger"></span>
|
||
</label>
|
||
<select hidden class="form-control" id="team" name="team[]" multiple required>
|
||
<?php foreach($teamData as $value) { ?>
|
||
<option value="<?= $value['id'] ?>"><?= $value['name'] ?></option>
|
||
<?php } ?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-group text-right m-b-0">
|
||
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1" id="btnSubmit">Submit</button>
|
||
<!-- <button type="button" class="btn btn-secondry waves-effect waves-light mr-1" data-dismiss="modal" aria-hidden="true">Close</button> -->
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /.modal -->
|
||
|
||
<!-- Tooltip container separate from trigger -->
|
||
<div class="tooltip-container" id="tooltipContainer">
|
||
<div class="tooltip" id="accessMatrixTooltip">
|
||
<table class="tooltip-table" style="color: black;">
|
||
<thead>
|
||
<tr>
|
||
<th>Team</th>
|
||
<th>Module</th>
|
||
<th>Access Rights</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="team-cell">Management</td>
|
||
<td>BDS - All access</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell" rowspan="5">Finance</td>
|
||
<td>BDS - Policy Transaction</td>
|
||
<td>Policy | Endorsement | Statement Upload</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Report</td>
|
||
<td>TAT wise | ACM Status wise | ACM TAT wise</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Pending Actions</td>
|
||
<td>Finance Team</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Masters</td>
|
||
<td>Vehicle | CD</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Documents</td>
|
||
<td>✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell" rowspan="5">Business</td>
|
||
<td>BDS - Policy Transaction</td>
|
||
<td>Policy | Endorsement</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Report</td>
|
||
<td>TAT wise | ACM Status wise | ACM TAT wise</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Pending Actions</td>
|
||
<td>Business Team</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Masters</td>
|
||
<td>Vehicle | CD</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Documents</td>
|
||
<td>✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell" rowspan="2">POS</td>
|
||
<td>BDS - Policy Transaction</td>
|
||
<td>Policy | Endorsement</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BDS - Report</td>
|
||
<td>BDS, TAT wise | ACM Status wise | ACM TAT wise</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Enrollment</td>
|
||
<td>Inception File Upload</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Claims</td>
|
||
<td>Claims</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Sales</td>
|
||
<td>LEAD</td>
|
||
<td>Lead creation | RFQ creation</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Business Support</td>
|
||
<td>LEAD</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tooltip-container" id="roleTooltipContainer">
|
||
<div class="tooltip" id="roleAccessMatrixTooltip">
|
||
<table class="tooltip-table" style="color: black;">
|
||
<thead>
|
||
<tr>
|
||
<th>Team</th>
|
||
<th>Module</th>
|
||
<th>Access Rights</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="team-cell">Head</td>
|
||
<td>All modules</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Admin</td>
|
||
<td>All modules</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Manager</td>
|
||
<td>Access to all modules except the "Masters" module</td>
|
||
<td>All access</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Account Manager</td>
|
||
<td>Access to all modules except the "Masters" module</td>
|
||
<td>All access without "Delete option"</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="team-cell">Staff</td>
|
||
<td>Based on the "Teams"</td>
|
||
<td>Based on the "Teams"</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
$(document).ready(function () {
|
||
|
||
|
||
$('#tickets-table').DataTable({
|
||
dom: "<'row'<'col-sm-0'f><'col-sm-9 text-right'B>>" + // Keep your original alignment for the search and buttons
|
||
"<'row'<'col-sm-12'tr>>" + // Table rows
|
||
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
text: 'CSV',
|
||
title: 'UserList',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
}
|
||
},
|
||
{
|
||
text: 'ADD',
|
||
className: 'btn-color',
|
||
attr: {
|
||
id: 'btnAdd',
|
||
title: 'Add'
|
||
}
|
||
}
|
||
|
||
|
||
],
|
||
|
||
|
||
language: {
|
||
search: "_INPUT_",
|
||
searchPlaceholder: "Search..."
|
||
},
|
||
|
||
});
|
||
|
||
|
||
$('#team').multiselect({
|
||
nonSelectedText: 'Select Team',
|
||
enableFiltering: false,
|
||
enableCaseInsensitiveFiltering: false,
|
||
includeSelectAllOption : false,
|
||
buttonWidth:'100%'
|
||
});
|
||
|
||
|
||
|
||
|
||
$('.close').click(function(){
|
||
$('#UserId').val('');
|
||
$('#first_name').val('');
|
||
$('#email').val('');
|
||
$('#mobile').val('');
|
||
$('#emp_code').val('');
|
||
$('#role').val('')
|
||
})
|
||
|
||
|
||
$('body').on('click', '.btnEdit', function () {
|
||
var user_id = $(this).attr('data-id');
|
||
$.ajax({
|
||
url: '<?php echo base_url('user/getuser/');?>'+user_id,
|
||
type: "GET",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
console.log(res)
|
||
$('#updateModal').modal('show');
|
||
$('#role').val('')
|
||
$('#UserForm').attr('action', '<?php echo base_url('user/edit');?>');
|
||
$('#UserId').val(res.data.id);
|
||
$('#first_name').val(res.data.first_name);
|
||
$('#last_name').val(res.data.last_name);
|
||
$('#email').val(res.data.email);
|
||
$('#mobile').val(res.data.mobile);
|
||
$('#emp_code').val(res.data.emp_code);
|
||
$('#role option[value="' + res.data.role + '"]').prop('selected', true);
|
||
$('#btnSubmit').html('Update');
|
||
|
||
$.each(res.userTeamData, function(index, item) {
|
||
$('#team option[value="' + item.team_id + '"]').prop('selected', true);
|
||
$('#team').multiselect('refresh');
|
||
});
|
||
|
||
},
|
||
error: function (xhr, status, error) {
|
||
console.error("Error Details:");
|
||
console.error("Status Code:", xhr.status);
|
||
console.error("Status Text:", xhr.statusText);
|
||
console.error("Response Text:", xhr.responseText);
|
||
console.error("Ready State:", xhr.readyState);
|
||
console.error("Response Headers:", xhr.getAllResponseHeaders());
|
||
console.error("Error Thrown:", error);
|
||
console.error("Status:", status);
|
||
}
|
||
|
||
});
|
||
});
|
||
|
||
|
||
$('body').on('click', '.btnDelete', function () {
|
||
|
||
Swal.fire({
|
||
title: "Are you sure?",
|
||
text: "You need to remove this user",
|
||
icon: "info",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#3085d6",
|
||
confirmButtonText: "Yes",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
|
||
var student_id = $(this).attr('data-id');
|
||
$.get('<?php echo base_url('user/deactive/');?>'+student_id, function (data) {
|
||
console.log(data);
|
||
toastr.success('User removed successfully', 'success');
|
||
window.location.reload()
|
||
})
|
||
}
|
||
});
|
||
});
|
||
|
||
});
|
||
|
||
function onlyNumbers(event){
|
||
var charcode;
|
||
charcode = event.which || event.keyCode;
|
||
if(charcode>= 48 && charcode <= 57)return true;
|
||
return false;
|
||
}
|
||
|
||
var form = document.getElementById("UserForm");
|
||
|
||
// Add submit event listener to the form
|
||
form.addEventListener("submit", function(event) {
|
||
// Disable the submit button to avoid multiple submissions
|
||
// document.getElementById("btnSubmit").disabled = true;
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
function initializeTooltip() {
|
||
|
||
const trigger = document.getElementById('accessMatrixTrigger');
|
||
console.log(trigger);
|
||
const tooltip = document.getElementById('accessMatrixTooltip');
|
||
console.log(tooltip);
|
||
const tooltipContainer = document.getElementById('tooltipContainer');
|
||
console.log(tooltipContainer);
|
||
|
||
if (!trigger || !tooltip || !tooltipContainer) {
|
||
console.error('Tooltip elements not found');
|
||
return;
|
||
}
|
||
|
||
function positionTooltip(event) {
|
||
const triggerRect = trigger.getBoundingClientRect();
|
||
const tooltipRect = tooltip.getBoundingClientRect();
|
||
const viewportWidth = window.innerWidth;
|
||
const viewportHeight = window.innerHeight;
|
||
|
||
let left = triggerRect.right + 10; // 10px to the right of trigger
|
||
let top = triggerRect.top;
|
||
|
||
// Check if tooltip goes off-screen to the right
|
||
if (left + tooltipRect.width > viewportWidth) {
|
||
left = triggerRect.left - tooltipRect.width - 10; // Show to the left instead
|
||
}
|
||
|
||
// Check if tooltip goes off-screen at the bottom
|
||
if (top + tooltipRect.height > viewportHeight) {
|
||
top = viewportHeight - tooltipRect.height - 10;
|
||
}
|
||
|
||
// Ensure tooltip doesn't go above viewport
|
||
if (top < 10) {
|
||
top = 10;
|
||
}
|
||
|
||
tooltipContainer.style.left = left + 'px';
|
||
tooltipContainer.style.top = top + 'px';
|
||
|
||
// Position arrow
|
||
const arrow = tooltip.querySelector('::after');
|
||
if (left < triggerRect.left) {
|
||
// Tooltip is to the left, arrow should point right
|
||
tooltip.style.setProperty('--arrow-position', 'right');
|
||
} else {
|
||
// Tooltip is to the right, arrow should point left
|
||
tooltip.style.setProperty('--arrow-position', 'left');
|
||
}
|
||
}
|
||
|
||
// Show tooltip on hover
|
||
trigger.addEventListener('mouseenter', function(event) {
|
||
positionTooltip(event);
|
||
tooltip.classList.add('show');
|
||
});
|
||
|
||
// Hide tooltip when mouse leaves trigger
|
||
trigger.addEventListener('mouseleave', function() {
|
||
tooltip.classList.remove('show');
|
||
});
|
||
|
||
// Keep tooltip visible when hovering over the tooltip itself
|
||
tooltip.addEventListener('mouseenter', function() {
|
||
tooltip.classList.add('show');
|
||
});
|
||
|
||
tooltip.addEventListener('mouseleave', function() {
|
||
tooltip.classList.remove('show');
|
||
});
|
||
|
||
// Reposition on window resize
|
||
window.addEventListener('resize', function() {
|
||
if (tooltip.classList.contains('show')) {
|
||
positionTooltip();
|
||
}
|
||
});
|
||
}
|
||
|
||
function initializeRoleTooltip() {
|
||
|
||
const trigger = document.getElementById('roleAccessMatrixTrigger');
|
||
console.log(trigger);
|
||
const tooltip = document.getElementById('roleAccessMatrixTooltip');
|
||
console.log(tooltip);
|
||
const tooltipContainer = document.getElementById('roleTooltipContainer');
|
||
console.log(tooltipContainer);
|
||
|
||
if (!trigger || !tooltip || !tooltipContainer) {
|
||
console.error('Tooltip elements not found');
|
||
return;
|
||
}
|
||
|
||
function positionTooltip(event) {
|
||
const triggerRect = trigger.getBoundingClientRect();
|
||
const tooltipRect = tooltip.getBoundingClientRect();
|
||
const viewportWidth = window.innerWidth;
|
||
const viewportHeight = window.innerHeight;
|
||
|
||
let left = triggerRect.right + 10; // 10px to the right of trigger
|
||
let top = triggerRect.top;
|
||
|
||
// Check if tooltip goes off-screen to the right
|
||
if (left + tooltipRect.width > viewportWidth) {
|
||
left = triggerRect.left - tooltipRect.width - 10; // Show to the left instead
|
||
}
|
||
|
||
// Check if tooltip goes off-screen at the bottom
|
||
if (top + tooltipRect.height > viewportHeight) {
|
||
top = viewportHeight - tooltipRect.height - 10;
|
||
}
|
||
|
||
// Ensure tooltip doesn't go above viewport
|
||
if (top < 10) {
|
||
top = 10;
|
||
}
|
||
|
||
tooltipContainer.style.left = left + 'px';
|
||
tooltipContainer.style.top = top + 'px';
|
||
|
||
// Position arrow
|
||
const arrow = tooltip.querySelector('::after');
|
||
if (left < triggerRect.left) {
|
||
// Tooltip is to the left, arrow should point right
|
||
tooltip.style.setProperty('--arrow-position', 'right');
|
||
} else {
|
||
// Tooltip is to the right, arrow should point left
|
||
tooltip.style.setProperty('--arrow-position', 'left');
|
||
}
|
||
}
|
||
|
||
// Show tooltip on hover
|
||
trigger.addEventListener('mouseenter', function(event) {
|
||
positionTooltip(event);
|
||
tooltip.classList.add('show');
|
||
});
|
||
|
||
// Hide tooltip when mouse leaves trigger
|
||
trigger.addEventListener('mouseleave', function() {
|
||
tooltip.classList.remove('show');
|
||
});
|
||
|
||
// Keep tooltip visible when hovering over the tooltip itself
|
||
tooltip.addEventListener('mouseenter', function() {
|
||
tooltip.classList.add('show');
|
||
});
|
||
|
||
tooltip.addEventListener('mouseleave', function() {
|
||
tooltip.classList.remove('show');
|
||
});
|
||
|
||
// Reposition on window resize
|
||
window.addEventListener('resize', function() {
|
||
if (tooltip.classList.contains('show')) {
|
||
positionTooltip();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Initialize when DOM is ready
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initializeTooltip);
|
||
document.addEventListener('DOMContentLoaded', initializeRoleTooltip);
|
||
} else {
|
||
initializeTooltip();
|
||
initializeRoleTooltip();
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
$(document).on('click', '#btnAdd', function(){
|
||
$('#first_name').val('');
|
||
$('#last_name').val('');
|
||
$('#email').val('');
|
||
$('#mobile').val('');
|
||
$('#emp_code').val('');
|
||
$('#UserForm').attr('action', '<?php echo base_url('/user/create');?>');
|
||
let myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.show(); // open modal
|
||
|
||
});
|
||
|
||
</script>
|