114 lines
4.5 KiB
JavaScript
114 lines
4.5 KiB
JavaScript
function renderTree(units, katDok) {
|
|
if (!Array.isArray(units)) return '';
|
|
|
|
return `
|
|
<button type="button" class="btn btn-sm btn-primary" onclick="referesh()"><i class="fas fa-sync-alt"></i></button>
|
|
<ul class="file-tree-ul mt-3">
|
|
${units.map(el => `
|
|
<li class="file-tree-li folder">
|
|
<span class="fw-bolder">📂 ${el.name}</span>
|
|
|
|
${Array.isArray(el.sub_unit_kerja) && el.sub_unit_kerja.length > 0 ? `
|
|
<ul class="file-tree-ul mt-1 ms-2">
|
|
${el.sub_unit_kerja.map(sub => `
|
|
<li class="file-tree-li folder">
|
|
<span class="fw-semibold">📂 ${sub.name}</span>
|
|
|
|
${Array.isArray(katDok) && katDok.length > 0 ? `
|
|
<ul class="file-tree-ul ms-2">
|
|
${katDok.map(kat => {
|
|
// filter file sesuai kategori
|
|
const files = (sub.file_directory || []).filter(
|
|
file => file.master_kategori_directory_id === kat.master_kategori_directory_id
|
|
);
|
|
|
|
if (!files.length) return '';
|
|
|
|
return `
|
|
<li class="file-tree-li folder">
|
|
<span>📂 ${kat.nama_kategori_directory}</span>
|
|
<ul class="file-tree-ul ms-2">
|
|
${files.map(file => `
|
|
<li class="file-tree-li">
|
|
📄 <a href="#" class="file-link" data-file="${file.file}" data-id="${file?.file_directory_id}">
|
|
${file.file} - <strong>(${file?.klasifikasi?.nama_klasifikasi_directory})</strong>
|
|
</a>
|
|
</li>
|
|
`).join('')}
|
|
</ul>
|
|
</li>
|
|
`;
|
|
}).join('')}
|
|
</ul>
|
|
` : ''}
|
|
</li>
|
|
`).join('')}
|
|
</ul>
|
|
` : ''}
|
|
</li>
|
|
`).join('')}
|
|
</ul>
|
|
`;
|
|
}
|
|
|
|
function index(kategori_dok = [], unitKerja = [], subUnitKerja = [], klasifikasi_id = []) {
|
|
const params = new URLSearchParams();
|
|
console.log(kategori_dok, unitKerja, subUnitKerja);
|
|
|
|
if (kategori_dok.length) params.append("kategori", kategori_dok);
|
|
if (unitKerja.length) params.append("unitKerja", unitKerja);
|
|
if (subUnitKerja.length) params.append("subUnit", subUnitKerja);
|
|
if (klasifikasi_id.length) params.append("klasifikasi", klasifikasi_id);
|
|
|
|
fetch(`/data-unit-kerja?${params.toString()}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let file_tree = document.getElementById("file_tree");
|
|
file_tree.innerHTML = '';
|
|
|
|
if (Array.isArray(data?.data?.unitKerja)) {
|
|
file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok);
|
|
// Toggle buka/tutup folder
|
|
file_tree.querySelectorAll(".folder > span").forEach(span => {
|
|
span.addEventListener("click", () => {
|
|
let li = span.parentElement;
|
|
li.classList.toggle("collapsed");
|
|
// Ganti ikon 📂 <-> 📁
|
|
if (li.classList.contains("collapsed")) {
|
|
span.textContent = span.textContent.replace("📂", "📁");
|
|
} else {
|
|
span.textContent = span.textContent.replace("📁", "📂");
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
file_tree.innerHTML = '<p style="color:primary">Silakan lakukan pencarian terlebih dahulu untuk menampilkan data</p>';
|
|
}
|
|
})
|
|
.catch(error => console.error('Error : ', error));
|
|
}
|
|
|
|
index();
|
|
|
|
function referesh(){
|
|
index()
|
|
}
|
|
function searchData(){
|
|
let klasifikasi_id = $("#klasifikasi_dok").val()
|
|
let kategori_dok = $("#kategori_dok").val()
|
|
let unitKerja = $("#unit_kerja").val()
|
|
let subUnitKerja = $("#sub_unit_kerja").val()
|
|
if( klasifikasi_id.length === 0 ||
|
|
kategori_dok.length === 0 ||
|
|
unitKerja.length === 0 ||
|
|
subUnitKerja.length === 0){
|
|
Swal.fire({
|
|
text: 'Lengkapi Isi form pencarian',
|
|
icon: 'warning'
|
|
})
|
|
return
|
|
}
|
|
|
|
index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id);
|
|
}
|