329 lines
14 KiB
PHP
329 lines
14 KiB
PHP
@extends('layout.main')
|
|
@section('body_main')
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body p-3">
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<h4 class="mb-0">Dokumen Umum</h4>
|
|
<div class="d-flex align-items-start gap-3">
|
|
<!-- DOWNLOAD + COUNT -->
|
|
{{-- <a
|
|
href="/download-excel/data-umum"
|
|
class="btn btn-success btn-sm"
|
|
>
|
|
<i class="ti ti-download me-1"></i>
|
|
Download Excel
|
|
</a> --}}
|
|
<div class="d-flex flex-column align-items-start">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary btn-sm"
|
|
id="btnDownloadMultiple"
|
|
disabled
|
|
>
|
|
<i class="ti ti-download me-1"></i>
|
|
Download Terpilih
|
|
</button>
|
|
|
|
<span
|
|
id="selectedCount"
|
|
class="small text-muted mt-1"
|
|
>
|
|
0 dipilih
|
|
</span>
|
|
</div>
|
|
<!-- Tambah Dokumen -->
|
|
<button
|
|
type="button"
|
|
class="btn btn-success btn-sm"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#modalCreateFile"
|
|
>
|
|
<i class="ti ti-plus me-1"></i>
|
|
Tambah Dokumen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3">
|
|
<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 flex-grow-1">
|
|
<input type="search" id="tableSearch" class="form-control"
|
|
placeholder="Cari nama dokumen atau No Dokumen" autocomplete="off">
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive" style="max-height: 70vh; overflow-y:auto;">
|
|
<table class="table table-sm table-hover align-middle mb-0 table-fixed" id="lastUpdatedTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center" style="width: 36px;">
|
|
<input type="checkbox" id="checkAllRows" class="form-check-input">
|
|
</th>
|
|
<th>Aksi</th>
|
|
<th>Nama Dokumen</th>
|
|
<th>Tipe Dokumen</th>
|
|
<th>Tanggal Unggah</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableDataAkreditasi">
|
|
<!-- data dari fetch masuk sini -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="d-flex flex-wrap align-items-center gap-2 mt-3">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<span class="small text-muted">Tampilkan</span>
|
|
<select id="tablePageSize" class="form-select form-select-sm" style="width: 80px;">
|
|
<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>
|
|
<span class="small text-muted">data</span>
|
|
</div>
|
|
|
|
<div id="paginationControls" class="ms-auto"></div>
|
|
|
|
<div class="small text-muted text-nowrap" id="tableSummary">
|
|
Memuat data...
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// === STATE MANAGEMENT ===
|
|
let currentData = [];
|
|
let selectedIds = [];
|
|
let currentPath = "";
|
|
let searchTimer;
|
|
|
|
// === INITIALIZATION ===
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
fetchData();
|
|
initEventListeners();
|
|
});
|
|
|
|
// === EVENT LISTENERS ===
|
|
function initEventListeners() {
|
|
// Search dengan Debounce
|
|
document.getElementById('tableSearch').addEventListener('input', (e) => {
|
|
clearTimeout(searchTimer);
|
|
searchTimer = setTimeout(() => {
|
|
fetchData(e.target.value, 1);
|
|
}, 500);
|
|
});
|
|
|
|
// Per Page Change
|
|
document.getElementById('tablePageSize').addEventListener('change', (e) => {
|
|
const keyword = document.getElementById('tableSearch').value;
|
|
fetchData(keyword,1);
|
|
});
|
|
|
|
// Check All Rows
|
|
document.getElementById('checkAllRows').addEventListener('change', function() {
|
|
const checkboxes = document.querySelectorAll('.row-checkbox');
|
|
selectedIds = [];
|
|
checkboxes.forEach(cb => {
|
|
cb.checked = this.checked;
|
|
if (this.checked) selectedIds.push(cb.value);
|
|
});
|
|
updateDownloadButton();
|
|
});
|
|
}
|
|
|
|
// === CORE FUNCTIONS ===
|
|
|
|
/**
|
|
* Mengambil data dari server
|
|
*/
|
|
function fetchData(keyword = '', page = 1) {
|
|
const tbody = document.getElementById('tableDataAkreditasi');
|
|
const perPage = document.getElementById('tablePageSize').value;
|
|
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center">Memuat data...</td></tr>';
|
|
|
|
fetch(`/datatable-akreditasi?keyword=${encodeURIComponent(keyword)}&per_page=${perPage}&page=${page}`)
|
|
.then(res => res.json())
|
|
.then(response => {
|
|
if (response.status) {
|
|
currentData = response.data || [];
|
|
renderTable(keyword);
|
|
updateSummary(response.pagination.total);
|
|
} else {
|
|
tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">${response.message}</td></tr>`;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error fetching data:', err);
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Gagal memuat data dari server.</td></tr>';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Merender tabel berdasarkan mode (Folder vs Search)
|
|
*/
|
|
function renderTable(keyword = '') {
|
|
const tbody = document.getElementById('tableDataAkreditasi');
|
|
tbody.innerHTML = '';
|
|
|
|
if (currentData.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center">Tidak ada data ditemukan</td></tr>';
|
|
return;
|
|
}
|
|
|
|
// MODE 1: SEARCH VIEW (Flat View - Langsung tampilkan semua file)
|
|
if (keyword.length > 0) {
|
|
currentData.forEach(item => renderFileRow(tbody, item));
|
|
return;
|
|
}
|
|
|
|
// MODE 2: EXPLORER VIEW (Folder Navigation)
|
|
|
|
// Tombol Kembali
|
|
if (currentPath !== "") {
|
|
const displayPath = currentPath
|
|
.replace(/\/$/, "")
|
|
.replace(/\//g, ' <i class="ti ti-chevron-right mx-1 text-muted"></i> ');
|
|
|
|
tbody.innerHTML += `
|
|
<tr class="table-light">
|
|
<td></td>
|
|
<td colspan="4">
|
|
<div class="d-flex small">
|
|
|
|
<!-- Kembali -->
|
|
<div class="text-primary d-flex align-items-center cursor-pointer"
|
|
onclick="goBack()">
|
|
<i class="ti ti-arrow-back-up me-1"></i>
|
|
<span class="fw-semibold">Kembali</span>
|
|
</div>
|
|
|
|
<!-- Lokasi -->
|
|
<div class="d-flex align-items-center text-muted">
|
|
<i class="ti ti-folder-open me-1"></i>
|
|
<span class="fw-semibold me-1">Lokasi:</span>
|
|
<span>${displayPath}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
const folders = new Set();
|
|
const filesInCurrentPath = [];
|
|
|
|
currentData.forEach(item => {
|
|
if (item.file && item.file.startsWith(currentPath)) {
|
|
const relativePath = item.file.substring(currentPath.length);
|
|
const parts = relativePath.split('/');
|
|
|
|
if (parts.length > 1) {
|
|
folders.add(parts[0]); // Ini Folder
|
|
} else {
|
|
filesInCurrentPath.push(item); // Ini File
|
|
}
|
|
}
|
|
});
|
|
|
|
// Render Folder
|
|
folders.forEach(folderName => {
|
|
tbody.innerHTML += `
|
|
<tr style="cursor:pointer" onclick="openFolder('${folderName}')">
|
|
<td></td>
|
|
<td><i class="ti ti-folder text-warning fs-5"></i></td>
|
|
<td><strong>${folderName}</strong></td>
|
|
<td colspan="2">Folder</td>
|
|
</tr>`;
|
|
});
|
|
|
|
// Render File
|
|
filesInCurrentPath.forEach(item => renderFileRow(tbody, item));
|
|
}
|
|
|
|
/**
|
|
* Render Baris File (Digunakan di kedua mode)
|
|
*/
|
|
function renderFileRow(targetTbody, item) {
|
|
const fileName = item.file ? item.file.split('/').pop() : 'Unknown';
|
|
const typeDok = fileName.split('.').pop().toUpperCase();
|
|
const isChecked = selectedIds.includes(String(item.file_directory_id)) ? 'checked' : '';
|
|
|
|
targetTbody.innerHTML += `
|
|
<tr>
|
|
<td class="text-center">
|
|
<input type="checkbox" class="form-check-input row-checkbox"
|
|
value="${item.file_directory_id}" ${isChecked} onchange="handleRowCheck(this)">
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<a href="/file-download/${item.file_directory_id}" target="_blank"
|
|
class="btn btn-sm btn-outline-primary" download title="Download">
|
|
<i class="ti ti-download"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="d-flex flex-column">
|
|
<strong>${item.nama_dokumen || fileName}</strong>
|
|
<small class="text-muted" style="font-size: 10px;">Path: ${item.file}</small>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-light text-primary border">${typeDok}</span></td>
|
|
<td>${item.entry_at || '-'}</td>
|
|
</tr>`;
|
|
}
|
|
|
|
// === NAVIGATION FUNCTIONS ===
|
|
|
|
function openFolder(name) {
|
|
currentPath += name + "/";
|
|
renderTable();
|
|
}
|
|
|
|
function goBack() {
|
|
const parts = currentPath.split('/').filter(p => p !== "");
|
|
parts.pop();
|
|
currentPath = parts.length > 0 ? parts.join('/') + "/" : "";
|
|
renderTable();
|
|
}
|
|
|
|
// === UTILITY FUNCTIONS ===
|
|
|
|
function handleRowCheck(checkbox) {
|
|
const val = String(checkbox.value);
|
|
if (checkbox.checked) {
|
|
if (!selectedIds.includes(val)) selectedIds.push(val);
|
|
} else {
|
|
selectedIds = selectedIds.filter(id => id !== val);
|
|
document.getElementById('checkAllRows').checked = false;
|
|
}
|
|
updateDownloadButton();
|
|
}
|
|
|
|
function updateDownloadButton() {
|
|
const btn = document.getElementById('btnDownloadMultiple');
|
|
const countLabel = document.getElementById('selectedCount');
|
|
btn.disabled = selectedIds.length === 0;
|
|
countLabel.innerText = `${selectedIds.length} dipilih`;
|
|
}
|
|
|
|
function updateSummary(total) {
|
|
const summary = document.getElementById('tableSummary');
|
|
if (summary) summary.innerText = `Total: ${total} data`;
|
|
}
|
|
</script>
|
|
@endsection |