Joko/project_directory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing scroll bar

Browse Source
This commit is contained in:
JokoPrasetio 2026-06-11 12:05:12 +07:00
parent 422ec731dd
commit c750177fee
2 changed files with 118 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
resources/views/dataAkreditasi/index.blade.php
View File

@ -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;
});

49
resources/views/layout/main.blade.php
View File

@ -21,6 +21,55 @@
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<style>
html,
body,
.body-wrapper,
.body-wrapper-inner,
.container-fluid {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.body-wrapper::-webkit-scrollbar,
.body-wrapper-inner::-webkit-scrollbar,
.container-fluid::-webkit-scrollbar {
width: 6px;
height: 6px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.body-wrapper::-webkit-scrollbar-track,
.body-wrapper-inner::-webkit-scrollbar-track,
.container-fluid::-webkit-scrollbar-track {
background: transparent;
border-radius: 999px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.body-wrapper::-webkit-scrollbar-thumb,
.body-wrapper-inner::-webkit-scrollbar-thumb,
.container-fluid::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.5);
border-radius: 999px;
border: 1px solid transparent;
background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.body-wrapper::-webkit-scrollbar-thumb:hover,
.body-wrapper-inner::-webkit-scrollbar-thumb:hover,
.container-fluid::-webkit-scrollbar-thumb:hover {
background: rgba(100, 116, 139, 0.68);
border: 1px solid transparent;
background-clip: padding-box;
}
.modal,
.modal-content,
.modal-body,