+
+
Dokumen Akreditasi
+
Buka struktur di kiri sampai folder tujuan, lalu dokumen akan tampil di kanan.
+
+
-
-
-
+
+ Path
+ Belum ada folder dipilih
+
+
+
+
+
+
+ Name
+ Tipe
+ Struktur
-
-
+
+
Pilih folder pada struktur kiri untuk melihat isinya.
-
-
-
- Tampilkan
-
- data
-
-
-
-
-
- Memuat data...
-
-
-
@@ -213,15 +443,15 @@
// === STATE MANAGEMENT ===
let currentData = [];
let selectedIds = [];
- let expandedFolders = new Set();
let searchTimer;
+ let activeFileSearch = '';
const isAdminUser = @json(Auth::guard('admin')->check());
const btn = document.getElementById('btnDownloadMultiple');
- const tableState = { page: 1, pageSize: 10, lastPage: 1, total: 0, from: 0, to: 0, search: '' };
- const paginationEl = document.getElementById('paginationControls');
// === INITIALIZATION ===
document.addEventListener('DOMContentLoaded', () => {
- fetchData();
+ loadAkreData().then(() => initAkreTree(true));
+ currentData = [];
+ renderAkreSubtree();
initEventListeners();
initTooltips();
});
@@ -239,24 +469,35 @@
// === EVENT LISTENERS ===
function initEventListeners() {
- // Search dengan Debounce
- document.getElementById('tableSearch').addEventListener('input', (e) => {
- clearTimeout(searchTimer);
- searchTimer = setTimeout(() => {
- tableState.page = 1;
- fetchData(e.target.value, 1);
- }, 500);
- });
+ const fileNameSearch = document.getElementById('fileNameSearch');
+ if (fileNameSearch) {
+ const runFileSearch = (value) => {
+ activeFileSearch = String(value || '').trim();
+ if (activeAkrePath) {
+ fetchData(activeAkrePath, 1);
+ } else {
+ renderAkreSubtree();
+ }
+ };
- // Per Page Change
- document.getElementById('tablePageSize').addEventListener('change', (e) => {
- const keyword = document.getElementById('tableSearch').value;
- tableState.page = 1;
- fetchData(keyword, 1);
- });
+ fileNameSearch.addEventListener('input', function(e) {
+ clearTimeout(searchTimer);
+ searchTimer = setTimeout(() => {
+ runFileSearch(e.target.value);
+ }, 150);
+ });
+
+ fileNameSearch.addEventListener('keydown', function(e) {
+ if (e.key !== 'Enter') return;
+ e.preventDefault();
+ clearTimeout(searchTimer);
+ runFileSearch(e.target.value);
+ });
+ }
// Check All Rows
- document.getElementById('checkAllRows').addEventListener('change', function() {
+ const checkAllRows = document.getElementById('checkAllRows');
+ if (checkAllRows) checkAllRows.addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.row-checkbox');
selectedIds = [];
checkboxes.forEach(cb => {
@@ -273,253 +514,41 @@
* Mengambil data dari server
*/
function fetchData(keyword = '', page = 1) {
- const tbody = document.getElementById('tableDataAkreditasi');
- const perPage = parseInt(document.getElementById('tablePageSize').value, 10) || 10;
+ const perPage = 100;
+ const subtreeEl = document.getElementById('akreSubtreeContainer');
+ if (subtreeEl) {
+ subtreeEl.innerHTML = '
Memuat isi folder...
';
+ }
- tableState.search = keyword;
- tableState.pageSize = perPage;
- tableState.page = page;
+ const params = new URLSearchParams({
+ per_page: String(perPage),
+ page: String(page),
+ });
- tbody.innerHTML = '
| Memuat data... |
';
+ if (keyword) {
+ params.set('folder_path', keyword);
+ }
+ if (activeFileSearch) {
+ params.set('keyword', activeFileSearch);
+ }
- fetch(`/datatable-akreditasi?keyword=${encodeURIComponent(keyword)}&per_page=${perPage}&page=${page}`)
+ fetch(`/datatable-akreditasi?${params.toString()}`)
.then(res => res.json())
.then(response => {
if (response.status) {
currentData = response.data || [];
- renderTable(keyword);
- const pag = response.pagination || {};
- tableState.total = pag.total || 0;
- tableState.lastPage = pag.last_page || 1;
- tableState.from = pag.from || 0;
- tableState.to = pag.to || 0;
- renderPagination(tableState.lastPage);
- updateSummary();
+ renderAkreSubtree();
} else {
- tbody.innerHTML = `
| ${response.message} |
`;
+ currentData = [];
+ renderAkreSubtree();
}
})
.catch(err => {
console.error('Error fetching data:', err);
- tbody.innerHTML = '
| Gagal memuat data dari server. |
';
+ currentData = [];
+ renderAkreSubtree();
});
}
-
- /**
- * Merender tabel berdasarkan mode (Folder vs Search)
- */
- function renderTable(keyword = '') {
- const tbody = document.getElementById('tableDataAkreditasi');
- tbody.innerHTML = '';
-
- if (currentData.length === 0) {
- tbody.innerHTML = '
| Tidak ada data ditemukan |
';
- return;
- }
-
- // MODE 1: SEARCH VIEW (Flat View - Langsung tampilkan semua file)
- if (keyword.length > 0) {
- currentData.forEach(item => renderFileRow(tbody, item));
- return;
- }
-
- // MODE 2: TREE VIEW (All folders & files)
- const tree = buildTree(currentData);
- if (expandedFolders.size === 0) {
- expandAllFolders(tree, '');
- }
- renderTree(tbody, tree, '', 0);
- initTooltips();
- }
-
- /**
- * 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 += `
-
- |
-
- |
-
-
- |
-
-
- ${item.nama_dokumen}
- Path: ${item.file}
-
- |
- ${typeDok} |
- |
- ${item.entry_at || '-'} |
-
`;
- }
-
- // === TREE FUNCTIONS ===
-
- function buildTree(items) {
- const root = { folders: {}, files: [] };
- (items || []).forEach(item => {
- const path = (item.file || '').split('/').filter(Boolean);
- if (path.length === 0) {
- root.files.push(item);
- return;
- }
- const fileName = path.pop();
- let node = root;
- path.forEach(part => {
- if (!node.folders[part]) {
- node.folders[part] = { folders: {}, files: [] };
- }
- node = node.folders[part];
- });
- node.files.push({ ...item, __fileName: fileName });
- });
- return root;
- }
-
- function expandAllFolders(node, basePath) {
- Object.keys(node.folders || {}).forEach(folder => {
- const folderPath = basePath ? `${basePath}/${folder}` : folder;
- expandedFolders.add(folderPath);
- expandAllFolders(node.folders[folder], folderPath);
- });
- }
-
- function renderTree(tbody, node, basePath, level) {
- const folderNames = Object.keys(node.folders || {}).sort();
-
- folderNames.forEach(folder => {
- const folderPath = basePath ? `${basePath}/${folder}` : folder;
- const isExpanded = expandedFolders.has(folderPath);
- const folderNode = node.folders[folder];
- const depth = folderPath.split('/').filter(Boolean).length;
- const canAddChild = isAdminUser && (depth === 1 || depth === 2);
-
- let lines = '';
- for (let i = 0; i < level; i++) {
- lines += '
';
- }
-
- tbody.innerHTML += `
-
- | |
-
- ${lines}
-
-
-
-
- ${folder}
- ${canAddChild ? `
-
-
-
- ` : ''}
-
- |
- FOLDER |
- | |
- `;
-
- if (isExpanded) {
- renderTree(tbody, folderNode, folderPath, level + 1);
- }
- });
-
- // Bagian ini akan memanggil renderTreeFileRow yang menampilkan tanggal
- (node.files || []).forEach(item => {
- renderTreeFileRow(tbody, item, level);
- });
- }
-
- function getFolderMaxDate(node) {
- let dates = [];
-
- // Ambil tanggal dari file di level ini
- (node.files || []).forEach(f => {
- if (f.entry_at) dates.push(new Date(f.entry_at));
- });
-
- // Ambil tanggal dari sub-folder (rekursif)
- Object.values(node.folders || {}).forEach(subNode => {
- const subDate = getFolderMaxDate(subNode);
- if (subDate) dates.push(new Date(subDate));
- });
-
- if (dates.length === 0) return null;
-
- // Cari tanggal paling besar (terbaru)
- const maxDate = new Date(Math.max(...dates));
-
- // Format balik ke YYYY-MM-DD
- return maxDate.toISOString().split('T')[0];
- }
-
- function renderTreeFileRow(targetTbody, item, level){
- const fileName = item.__fileName || (item.file ? item.file.split('/').pop() : 'Unknown');
- const typeDok = fileName.split('.').pop().toUpperCase();
- const isChecked = selectedIds.includes(String(item.file_directory_id)) ? 'checked' : '';
-
- let lines = '';
- for (let i = 0; i < level; i++) {
- lines += '
';
- }
-
- targetTbody.innerHTML += `
-
- |
-
- |
-
-
-
-
- |
-
-
- ${lines}
-
-
- ${item.nama_dokumen}
- ${fileName}
-
- |
- ${typeDok} |
- ${item.unit?.name || '-'} |
- ${formatDateTime(item.entry_at)} |
-
`;
- }
- // Tambahkan fungsi ini di dalam