107 lines
5.6 KiB
JavaScript
107 lines
5.6 KiB
JavaScript
function renderTree(units, katDok) {
|
||
if (!Array.isArray(units)) return '';
|
||
|
||
return `
|
||
<ul class="file-tree-ul">
|
||
${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">
|
||
${katDok.map(kat => `
|
||
<li class="folder file-tree-li">
|
||
<span>📂 ${kat.nama_kategori_directory}</span>
|
||
<ul class="file-tree-ul">
|
||
${Array.isArray(sub.file_directory) && sub.file_directory.length > 0 ? `
|
||
${sub.file_directory.map(file => `
|
||
${kat.master_kategori_directory_id === file.master_kategori_directory_id ? `
|
||
<li class="file-tree-li ms-2">
|
||
📄 <a href="/file/${file.file}" target="_blank" rel="noopener noreferrer">${file.file}</a>
|
||
</li>
|
||
` : ''}
|
||
|
||
`).join('')}
|
||
` : ''}
|
||
<li class="file-tree-li ms-2">
|
||
<button class="add-file-btn btn btn-sm btn-primary ms-2 btn-transaparent"
|
||
onclick="addFile(this)"
|
||
data-id_unit_kerja="${el.id}"
|
||
data-nama_unit_kerja="${el.name || 'tidak_ada'}"
|
||
data-id_sub_unit_kerja="${sub?.id}"
|
||
data-nama_sub_unit_kerja="${sub?.name || 'tidak_ada'}"
|
||
data-id_kategori="${kat?.master_kategori_directory_id}"
|
||
data-nama_kategori="${kat?.nama_kategori_directory}">
|
||
➕ Add File
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
`).join('')}
|
||
</ul>
|
||
` : ''}
|
||
</li>
|
||
`).join('')}
|
||
</ul>
|
||
` : ''}
|
||
</li>
|
||
`).join('')}
|
||
</ul>
|
||
`;
|
||
}
|
||
|
||
function index() {
|
||
fetch('/data-unit-kerja')
|
||
.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:red">Terdapat kesalahan pada server</p>';
|
||
}
|
||
})
|
||
.catch(error => console.error('Error : ', error));
|
||
}
|
||
|
||
index();
|
||
|
||
function addFile(el){
|
||
let id_unit_kerja =$(el).data('id_unit_kerja')
|
||
let nama_unit_kerja =$(el).data('nama_unit_kerja')
|
||
let id_sub_unit_kerja =$(el).data('id_sub_unit_kerja')
|
||
let nama_sub_unit_kerja =$(el).data('nama_sub_unit_kerja')
|
||
let id_kategori =$(el).data('id_kategori')
|
||
let nama_kategori =$(el).data('nama_kategori')
|
||
|
||
$("#id_unit_kerja").val(id_unit_kerja)
|
||
$("#id_sub_unit_kerja").val(id_sub_unit_kerja)
|
||
$("#master_kategori_directory_id").val(id_kategori)
|
||
$("#confirm_location_file").html(`Unit Kerja : <b>${nama_unit_kerja}</b> / Sub Unit Kerja : <b>${nama_sub_unit_kerja}</b> / Kategori : <b>${nama_kategori}</b>`)
|
||
new bootstrap.Modal(modalCreate).show();
|
||
|
||
|
||
}
|