358 lines
16 KiB
PHP
358 lines
16 KiB
PHP
@extends('layout.main')
|
||
@section('body_main')
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-header d-flex align-items-center justify-content-between">
|
||
<h4 class="mb-0">Log Aktivitas</h4>
|
||
</div>
|
||
<div class="card-body p-3">
|
||
<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3 flex-wrap">
|
||
<div class="input-group input-group-sm flex-grow-1" style="max-width:320px;">
|
||
<span class="input-group-text bg-white border-end-0">
|
||
<i class="fa fa-search text-muted"></i>
|
||
</span>
|
||
<input type="search"
|
||
id="tableSearch"
|
||
class="form-control border-start-0"
|
||
placeholder="Cari nama file / nomor dokumen / aksi"
|
||
oninput="debouncedTableSearch(this.value)">
|
||
</div>
|
||
<div class="d-flex align-items-center gap-2">
|
||
<label class="small mb-0 text-muted">Mulai</label>
|
||
<input type="date" id="startDate" class="form-control form-control-sm" onchange="applyDateFilter()">
|
||
</div>
|
||
<div class="d-flex align-items-center gap-2">
|
||
<label class="small mb-0 text-muted">Selesai</label>
|
||
<input type="date" id="endDate" class="form-control form-control-sm" onchange="applyDateFilter()">
|
||
</div>
|
||
<div class="d-flex align-items-center gap-2">
|
||
<select id="tablePageSize" class="form-select form-select-sm" style="width: auto;">
|
||
<option value="5">5</option>
|
||
<option value="10"selected>10</option>
|
||
<option value="20">20</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-outline-secondary btn-sm" onclick="refreshLog()">
|
||
<i class="fa fa-rotate"></i> Refresh
|
||
</button>
|
||
<div class="small text-muted ms-md-auto" id="tableSummary"></div>
|
||
</div>
|
||
<div class="table-responsive" style="max-height: 65vh; overflow-y:auto;">
|
||
<table class="table table-sm table-hover align-middle mb-0" id="lastUpdatedTable">
|
||
<thead>
|
||
<tr>
|
||
<th>No Dokumen</th>
|
||
<th>File</th>
|
||
<th>Kategori</th>
|
||
<th>Unit</th>
|
||
<th>Sub Unit</th>
|
||
<th class="text-center">Jumlah Pegawai Melihat</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableLogAktivityDocument">
|
||
<!-- data dari fetch masuk sini -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-3" id="paginationControls"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@endsection
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const tableState = { data: [], page: 1, pageSize: 10, search: '', lastPage: 1, total: 0, startDate: '', endDate: '' };
|
||
const tbody = document.getElementById('tableLogAktivityDocument');
|
||
const paginationEl = document.getElementById('paginationControls');
|
||
const summaryEl = document.getElementById('tableSummary');
|
||
const pageSizeSelect = document.getElementById('tablePageSize');
|
||
const startDateInput = document.getElementById('startDate');
|
||
const endDateInput = document.getElementById('endDate');
|
||
|
||
if(pageSizeSelect){
|
||
const initialSize = parseInt(pageSizeSelect.value);
|
||
if(!isNaN(initialSize)) tableState.pageSize = initialSize;
|
||
pageSizeSelect.addEventListener('change', (e) => {
|
||
const val = parseInt(e.target.value);
|
||
if(!isNaN(val) && val > 0){
|
||
tableState.pageSize = val;
|
||
tableState.page = 1;
|
||
fetchData();
|
||
}
|
||
});
|
||
}
|
||
|
||
window.applyDateFilter = function(){
|
||
tableState.startDate = startDateInput.value || '';
|
||
tableState.endDate = endDateInput.value || '';
|
||
tableState.page = 1;
|
||
fetchData();
|
||
}
|
||
|
||
function buildRow(item){
|
||
const tanggal = item.entry_at ? formatTanggal(item.entry_at) : '-';
|
||
const totalViews = item.total_views ?? 0;
|
||
return `
|
||
<tr role="button" onclick='showLogDetail(${JSON.stringify(item.id)})'>
|
||
<td>${item.no_dokumen}</td>
|
||
<td>${item.file}</td>
|
||
<td>${item.kategori || '-'}</td>
|
||
<td>${item.unit || '-'}</td>
|
||
<td>${item.sub_unit || '-'}</td>
|
||
<td class="text-center fw-semibold">${totalViews}</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
|
||
function formatTanggal(dateString) {
|
||
const d = new Date(dateString);
|
||
return d.toLocaleDateString('id-ID', {
|
||
day: '2-digit',
|
||
month: 'short',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
}
|
||
|
||
window.showLogDetail = function(id){
|
||
if(!id) return;
|
||
const modalEl = document.getElementById('logDetailModal');
|
||
const modal = new bootstrap.Modal(modalEl);
|
||
modal.show();
|
||
|
||
renderLogModal(id, 1, '');
|
||
}
|
||
|
||
function renderLogModal(id, page, keyword){
|
||
const tbody = document.getElementById('logDetailTbody');
|
||
const searchInput = document.getElementById('logSearchInput');
|
||
const searchBtn = document.getElementById('logSearchBtn');
|
||
const paginationBtns = document.getElementById('logPaginationBtns');
|
||
const summaryText = document.getElementById('logSummaryText');
|
||
|
||
if(tbody) tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">Memuat...</td></tr>';
|
||
if(summaryText) summaryText.textContent = 'Memuat data...';
|
||
if(searchInput) searchInput.value = keyword || '';
|
||
|
||
const params = new URLSearchParams({ page, per_page: 10, keyword: keyword || '' });
|
||
fetch(`/datatable/log-activity/${id}?${params.toString()}`)
|
||
.then(res => res.json())
|
||
.then(resp => {
|
||
const logs = resp?.data || [];
|
||
const pagination = resp?.pagination || {};
|
||
|
||
const totalPages = pagination.last_page || 1;
|
||
const currentPage = pagination.current_page || 1;
|
||
|
||
if(searchInput) searchInput.value = keyword || '';
|
||
|
||
const rows = logs.map((row, idx) => `
|
||
<tr>
|
||
<td>${((currentPage - 1) * (pagination.per_page || 10)) + idx + 1}</td>
|
||
<td>${row.pegawai_nama_entry || '-'}</td>
|
||
<td>${row.total_open || 0}</td>
|
||
<td>${formatTanggal(row.last_open)}</td>
|
||
</tr>
|
||
`).join('');
|
||
|
||
const emptyState = logs.length === 0 ? '<tr><td colspan="4" class="text-center text-muted py-3">Belum ada aktivitas</td></tr>' : '';
|
||
if(tbody) tbody.innerHTML = logs.length ? rows : emptyState;
|
||
|
||
if(summaryText){
|
||
summaryText.textContent = `Menampilkan ${logs.length} dari ${pagination.total ?? logs.length} pegawai`;
|
||
}
|
||
|
||
if(paginationBtns){
|
||
let paginationButtons = '';
|
||
if(totalPages > 1){
|
||
paginationButtons += `<button class="btn btn-sm btn-outline-secondary" data-page="prev" ${currentPage===1?'disabled':''}>‹</button>`;
|
||
for(let i=1;i<=totalPages;i++){
|
||
paginationButtons += `<button class="btn btn-sm ${i===currentPage?'btn-primary':'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
|
||
}
|
||
paginationButtons += `<button class="btn btn-sm btn-outline-secondary" data-page="next" ${currentPage===totalPages?'disabled':''}>›</button>`;
|
||
}
|
||
paginationBtns.innerHTML = paginationButtons;
|
||
|
||
paginationBtns.onclick = (e) => {
|
||
const target = e.target;
|
||
const pageAttr = target.getAttribute('data-page');
|
||
if(!pageAttr) return;
|
||
let nextPage = currentPage;
|
||
if(pageAttr === 'prev') nextPage = Math.max(1, currentPage-1);
|
||
else if(pageAttr === 'next') nextPage = Math.min(totalPages, currentPage+1);
|
||
else nextPage = parseInt(pageAttr);
|
||
renderLogModal(id, nextPage, keyword);
|
||
};
|
||
}
|
||
|
||
if(searchBtn){
|
||
searchBtn.onclick = () => renderLogModal(id, 1, searchInput.value.trim());
|
||
}
|
||
if(searchInput){
|
||
searchInput.onkeypress = (e) => {
|
||
if(e.key === 'Enter') renderLogModal(id, 1, searchInput.value.trim());
|
||
};
|
||
}
|
||
})
|
||
.catch(() => {
|
||
if(tbody) tbody.innerHTML = '<tr><td colspan="4" class="text-center text-danger py-3">Gagal memuat data</td></tr>';
|
||
if(summaryText) summaryText.textContent = 'Gagal memuat data';
|
||
if(paginationBtns) paginationBtns.innerHTML = '';
|
||
});
|
||
}
|
||
|
||
function renderPagination(totalPages){
|
||
if(!paginationEl) return;
|
||
if(totalPages <= 1){
|
||
paginationEl.innerHTML = '';
|
||
return;
|
||
}
|
||
const maxButtons = 5;
|
||
let start = Math.max(1, tableState.page - Math.floor(maxButtons/2));
|
||
let end = Math.min(totalPages, start + maxButtons - 1);
|
||
start = Math.max(1, end - maxButtons + 1);
|
||
|
||
let buttons = '';
|
||
buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="prev" ${tableState.page === 1 ? 'disabled' : ''}>‹</button>`;
|
||
for(let i=start; i<=end; i++){
|
||
buttons += `<button class="btn btn-sm ${i === tableState.page ? 'btn-primary' : 'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
|
||
}
|
||
buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="next" ${tableState.page === totalPages ? 'disabled' : ''}>›</button>`;
|
||
|
||
paginationEl.innerHTML = `
|
||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||
<div class="btn-group" role="group">${buttons}</div>
|
||
<span class="small text-muted">Halaman ${tableState.page} dari ${totalPages}</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
if(paginationEl){
|
||
paginationEl.addEventListener('click', (e) => {
|
||
const page = e.target.getAttribute('data-page');
|
||
if(!page) return;
|
||
if(page === 'prev' && tableState.page > 1) tableState.page--;
|
||
else if(page === 'next'){
|
||
if(tableState.page < tableState.lastPage) tableState.page++;
|
||
}else{
|
||
tableState.page = parseInt(page);
|
||
}
|
||
fetchData();
|
||
});
|
||
}
|
||
|
||
function renderTable(){
|
||
const pageData = tableState.data || [];
|
||
if(pageData.length === 0){
|
||
tbody.innerHTML = `
|
||
<tr>
|
||
<td colspan="6" class="text-center text-muted py-4">
|
||
Tidak ada data
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}else{
|
||
tbody.innerHTML = pageData.map(buildRow).join('');
|
||
}
|
||
|
||
const from = tableState.total === 0 ? 0 : ((tableState.page -1) * tableState.pageSize) + 1;
|
||
const to = Math.min(((tableState.page -1) * tableState.pageSize) + pageData.length, tableState.total);
|
||
if(summaryEl){
|
||
summaryEl.textContent = tableState.total ? `Menampilkan ${from} - ${to} dari ${tableState.total} aktivitas` : 'Tidak ada data';
|
||
}
|
||
|
||
renderPagination(tableState.lastPage || 1);
|
||
}
|
||
|
||
let searchDebounce;
|
||
window.debouncedTableSearch = function(value){
|
||
clearTimeout(searchDebounce);
|
||
searchDebounce = setTimeout(() => {
|
||
tableState.search = value.trim();
|
||
tableState.page = 1;
|
||
fetchData();
|
||
}, 250);
|
||
}
|
||
|
||
window.refreshLog = function(){
|
||
tableState.search = '';
|
||
tableState.startDate = '';
|
||
tableState.endDate = '';
|
||
document.getElementById('tableSearch').value = '';
|
||
startDateInput.value = '';
|
||
endDateInput.value = '';
|
||
tableState.page = 1;
|
||
fetchData();
|
||
}
|
||
|
||
function fetchData(){
|
||
if(summaryEl) summaryEl.textContent = 'Memuat data...';
|
||
const params = new URLSearchParams({
|
||
page: tableState.page,
|
||
per_page: tableState.pageSize,
|
||
keyword: tableState.search || '',
|
||
start_date: tableState.startDate || '',
|
||
end_date: tableState.endDate || ''
|
||
});
|
||
fetch(`/datatable/log-activity?${params.toString()}`)
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
tableState.data = data?.data || [];
|
||
tableState.lastPage = data?.pagination?.last_page || 1;
|
||
tableState.total = data?.pagination?.total || 0;
|
||
renderTable();
|
||
})
|
||
.catch(err => {
|
||
console.error(err);
|
||
if(summaryEl) summaryEl.textContent = 'Gagal memuat data';
|
||
});
|
||
}
|
||
|
||
fetchData();
|
||
});
|
||
</script>
|
||
|
||
<!-- Modal Detail Log -->
|
||
<div class="modal fade" id="logDetailModal" tabindex="-1" aria-labelledby="logDetailLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="logDetailLabel">Detail Aktivitas</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body" id="logDetailBody">
|
||
<div class="d-flex align-items-center gap-2 mb-2">
|
||
<input type="search" class="form-control form-control-sm" id="logSearchInput" placeholder="Cari nama pegawai">
|
||
<button class="btn btn-sm btn-outline-secondary" id="logSearchBtn"><i class="fa fa-search"></i></button>
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table class="table table-sm table-striped mb-0">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th>#</th>
|
||
<th>Nama</th>
|
||
<th>Jumlah Membuka</th>
|
||
<th>Terakhir Dilihat</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="logDetailTbody">
|
||
<tr><td colspan="4" class="text-center text-muted py-3">Memuat...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="d-flex align-items-center justify-content-between mt-2">
|
||
<div class="small text-muted" id="logSummaryText">Menampilkan 0 pegawai</div>
|
||
<div class="btn-group" role="group" id="logPaginationBtns"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|