196 lines
7.3 KiB
PHP
196 lines
7.3 KiB
PHP
<style>
|
|
.table th,
|
|
.table td {
|
|
padding: 8px;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
padding: 4px 4px !important;
|
|
}
|
|
|
|
/* .col-12 {
|
|
|
|
max-width: 98% !important;
|
|
} */
|
|
|
|
/* .dataTables_filter {
|
|
position: absolute;
|
|
margin-left: -25px;
|
|
} */
|
|
|
|
/* .right-align-input {
|
|
text-align: right;
|
|
} */
|
|
</style>
|
|
|
|
<style>
|
|
/* Put this in your CSS */
|
|
#scroll-horizontal-datatable_wrapper .btn-secondary {
|
|
cursor: pointer;
|
|
width: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid #F5FFFF;
|
|
background-color: #F5FFFF !important;
|
|
}
|
|
|
|
#scroll-horizontal-datatable_wrapper #submitBtn{
|
|
background-color: #E26728 !important;
|
|
color: white !important;
|
|
border: 1px solid #E26728;
|
|
padding: 5px 10px !important;
|
|
border-radius: 10px !important;
|
|
cursor: pointer !important;
|
|
box-shadow: 0px 2px 4px 0px #00000024 !important;
|
|
}
|
|
|
|
#hr_activity_history_append_area tbody tr {
|
|
background-color: transparent !important;
|
|
}
|
|
.dataTables_length label {height: 21px !important;}
|
|
|
|
|
|
</style>
|
|
|
|
<!-- <div class="row" style="position: relative;left: 250px;top: 55px;">
|
|
<div class="form-group col-md-3" id="date_div">
|
|
<div id="reportrange" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
|
|
<i class="mdi mdi-calendar-blank"></i>
|
|
<span></span> <i class="mdi mdi-menu-down"></i>
|
|
</div>
|
|
<input type="hidden" id="startDate">
|
|
<input type="hidden" id="endDate">
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<button type="button" class="btn btn-primary" onclick="appendHrActivityHistoryHtml(this, true)"> submit </button>
|
|
</div>
|
|
</div> -->
|
|
|
|
<table data-custom-table-css="second-table" id="scroll-horizontal-datatable" class="table w-100 nowrap flex-grow">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th>S. No</th>
|
|
<th>Timestamp</th>
|
|
<th>HR Name</th>
|
|
<th>HR Mail</th>
|
|
<th>Activity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (isset($data) && !empty($data)) { ?>
|
|
<?php foreach ($data as $index => $row) { ?>
|
|
<tr>
|
|
<td><?= $index + 1 ?></td>
|
|
<td><?php echo $row['created_at']; ?></td>
|
|
<td><?php echo $row['user_name']; ?></td>
|
|
<td><?php echo $row['user_mail']; ?></td>
|
|
<td><?php echo $row['activity']; ?></td>
|
|
</tr>
|
|
<?php } ?>
|
|
<?php } ?>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
var ticketsTable = $('#scroll-horizontal-datatable');
|
|
|
|
if (ticketsTable.length) {
|
|
var table = ticketsTable.DataTable({
|
|
scrollX: true,
|
|
|
|
// dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
|
|
// "<'row'<'col-sm-12'tr>>" +
|
|
// "<'row'<'col-sm-5'i><'col-sm-7'p>>",
|
|
dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
|
|
"<'row'<'col-sm-12'tr>>" +
|
|
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
|
|
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
|
|
language: {
|
|
search: `
|
|
<div class="datatable-search-wrapper" style="position:relative; display:inline-block; width:100%;">
|
|
_INPUT_
|
|
<i class="mdi mdi-magnify datatable-search-icon"
|
|
style="position:absolute; right:122px !important; top:50%; transform:translateY(-50%); color:#666;"></i>
|
|
|
|
<i class="mdi mdi-close-circle datatable-clear-icon"
|
|
style="position:absolute; right:122px !important; top:50%; transform:translateY(-50%); color:#666; display:none; cursor:pointer;"></i>
|
|
</div>
|
|
`,
|
|
searchPlaceholder: "Search",
|
|
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
|
},
|
|
paging: true,
|
|
pageLength: 10,
|
|
ordering: false,
|
|
buttons: [
|
|
{
|
|
text: '<div id="reportrange" class="form-control d-inline-block mr-2 custom-daterange" style="background:white; cursor: pointer; width: auto; display:inline-flex; align-items:center;">' +
|
|
'<i class="mdi mdi-calendar-blank"></i> <span></span> <i class="mdi mdi-menu-down"></i>' +
|
|
'</div>' +
|
|
'<input type="hidden" id="startDate">' +
|
|
'<input type="hidden" id="endDate">' +
|
|
'<button type="button" id="submitBtn" class="btn btn-primary ml-2">Submit</button>',
|
|
className: 'btn-group d-inline-block btn-secondary',
|
|
style : 'background: white; border: 1px solid #ced4da; padding: 5px 10px; border-radius: 5px;',
|
|
action: function () {
|
|
appendHrActivityHistoryHtml(this, true);
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// run after DataTable is ready
|
|
$('.dataTables_filter input').css({
|
|
'background': '#F0F0F0',
|
|
'border': 'none',
|
|
'border-radius': '8px',
|
|
'padding-right': '35px'
|
|
}).wrap('<div style="position:relative; display:inline-block;"></div>')
|
|
.after('<i class="mdi mdi-magnify" ' +
|
|
'style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>');
|
|
|
|
|
|
// Attach submit handler separately so it works
|
|
$(document).on("click", "#submitBtn", function () {
|
|
appendHrActivityHistoryHtml(this, true);
|
|
});
|
|
|
|
// Daterangepicker setup
|
|
const params = new URLSearchParams(window.location.search);
|
|
const startDateParam = params.get('start_date') || moment().subtract(29, 'days').format('DD-MM-YYYY');
|
|
const endDateParam = params.get('end_date') || moment().format('DD-MM-YYYY');
|
|
|
|
const start = moment(startDateParam, 'DD-MM-YYYY');
|
|
const end = moment(endDateParam, 'DD-MM-YYYY');
|
|
|
|
function cb(start, end) {
|
|
$('#reportrange span').html(start.format('D-MM-YYYY') + ' - ' + end.format('D-MM-YYYY'));
|
|
$('#startDate').val(start.format('DD-MM-YYYY'));
|
|
$('#endDate').val(end.format('DD-MM-YYYY'));
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('#reportrange').daterangepicker({
|
|
startDate: start,
|
|
endDate: end,
|
|
ranges: {
|
|
'Today': [moment(), moment()],
|
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
|
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
|
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
|
}
|
|
}, cb);
|
|
|
|
cb(start, end);
|
|
});
|
|
} else {
|
|
console.error("Table not found.");
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|