From c750177feeade31de259cc0365a4a7d88de4c0b6 Mon Sep 17 00:00:00 2001 From: JokoPrasetio Date: Thu, 11 Jun 2026 12:05:12 +0700 Subject: [PATCH] fixing scroll bar --- .../views/dataAkreditasi/index.blade.php | 73 ++++++++++++++++++- resources/views/layout/main.blade.php | 49 +++++++++++++ 2 files changed, 118 insertions(+), 4 deletions(-) diff --git a/resources/views/dataAkreditasi/index.blade.php b/resources/views/dataAkreditasi/index.blade.php index de1e358..cbe0a44 100644 --- a/resources/views/dataAkreditasi/index.blade.php +++ b/resources/views/dataAkreditasi/index.blade.php @@ -221,7 +221,7 @@ const paginationEl = document.getElementById('paginationControls'); // === INITIALIZATION === document.addEventListener('DOMContentLoaded', () => { - fetchData(); + loadAkreData().finally(() => fetchData()); initEventListeners(); initTooltips(); }); @@ -319,12 +319,13 @@ // MODE 1: SEARCH VIEW (Flat View - Langsung tampilkan semua file) if (keyword.length > 0) { - currentData.forEach(item => renderFileRow(tbody, item)); + sortAkreItemsByJff(currentData).forEach(item => renderFileRow(tbody, item)); return; } // MODE 2: TREE VIEW (All folders & files) - const tree = buildTree(currentData); + const orderedItems = sortAkreItemsByJff(currentData); + const tree = buildTree(orderedItems); if (expandedFolders.size === 0) { expandAllFolders(tree, ''); } @@ -398,7 +399,11 @@ } function renderTree(tbody, node, basePath, level) { - const folderNames = Object.keys(node.folders || {}).sort(); + const folderNames = Object.keys(node.folders || {}).sort((left, right) => { + const leftPath = basePath ? `${basePath}/${left}` : left; + const rightPath = basePath ? `${basePath}/${right}` : right; + return compareAkrePaths(leftPath, rightPath); + }); folderNames.forEach(folder => { const folderPath = basePath ? `${basePath}/${folder}` : folder; @@ -683,6 +688,64 @@ let akreData = []; let akreLoaded = false; let akreFlat = []; + let akreOrderMap = new Map(); + + function buildAkreOrderMap() { + akreOrderMap = new Map(); + (akreData || []).forEach((typeItem, typeIndex) => { + const typeName = String(typeItem?.name || '').trim(); + if (!typeName) return; + akreOrderMap.set(typeName, [typeIndex, -1, -1]); + + const segments = Array.isArray(typeItem?.segment) ? typeItem.segment : []; + segments.forEach((segment, segmentIndex) => { + const segmentName = String(segment?.name || '').trim(); + if (!segmentName) return; + const segmentPath = `${typeName}/${segmentName}`; + akreOrderMap.set(segmentPath, [typeIndex, segmentIndex, -1]); + + const children = Array.isArray(segment?.turunan) ? segment.turunan : []; + children.forEach((child, childIndex) => { + const childName = String(child?.name || '').trim(); + if (!childName) return; + akreOrderMap.set(`${segmentPath}/${childName}`, [typeIndex, segmentIndex, childIndex]); + }); + }); + }); + } + + function getAkreFolderPathFromFile(filePath) { + const parts = String(filePath || '').split('/').filter(Boolean); + if (parts.length <= 1) return ''; + parts.pop(); + return parts.join('/'); + } + + function compareAkrePaths(leftPath, rightPath) { + const leftOrder = akreOrderMap.get(leftPath) || [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]; + const rightOrder = akreOrderMap.get(rightPath) || [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]; + + for (let i = 0; i < 3; i++) { + if (leftOrder[i] !== rightOrder[i]) { + return leftOrder[i] - rightOrder[i]; + } + } + + return leftPath.localeCompare(rightPath, undefined, { numeric: true, sensitivity: 'base' }); + } + + function sortAkreItemsByJff(items = []) { + return [...items].sort((left, right) => { + const leftFolderPath = getAkreFolderPathFromFile(left?.file || ''); + const rightFolderPath = getAkreFolderPathFromFile(right?.file || ''); + const pathCompare = compareAkrePaths(leftFolderPath, rightFolderPath); + if (pathCompare !== 0) return pathCompare; + + const leftName = String(left?.nama_dokumen || left?.file || '').toLowerCase(); + const rightName = String(right?.nama_dokumen || right?.file || '').toLowerCase(); + return leftName.localeCompare(rightName, undefined, { numeric: true, sensitivity: 'base' }); + }); + } function loadAkreData(){ if(akreLoaded) return Promise.resolve(akreData); @@ -691,12 +754,14 @@ .then(data => { akreData = Array.isArray(data) ? data : []; akreFlat = []; + buildAkreOrderMap(); akreLoaded = true; return akreData; }) .catch(() => { akreData = []; akreFlat = []; + akreOrderMap = new Map(); akreLoaded = true; return akreData; }); diff --git a/resources/views/layout/main.blade.php b/resources/views/layout/main.blade.php index 2e6dba7..459f14a 100644 --- a/resources/views/layout/main.blade.php +++ b/resources/views/layout/main.blade.php @@ -21,6 +21,55 @@