2026-02-05 09:39:23 +07:00

294 lines
12 KiB
PHP

@extends('layout.main')
<style>
.file-tree-ul {
list-style: none;
padding-left: 20px;
position: relative;
}
/* Garis vertikal */
.file-tree-ul::before {
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
border-left: 1px solid #ccc;
}
.file-tree-li {
margin: 4px 0;
padding-left: 20px;
position: relative;
}
/* Garis horizontal */
.file-tree-li::before {
content: '';
position: absolute;
top: 12px;
left: 0;
width: 20px;
border-top: 1px solid #ccc;
}
/* Hilangkan garis di root */
.file-tree-ul > .file-tree-li::before {
border-top: none;
}
.folder > span {
cursor: pointer;
user-select: none;
}
.folder-menu-icon {
cursor: pointer;
opacity: 0;
visibility: hidden;
padding: 0 4px;
}
.file-tree-li.folder:hover .folder-menu-icon {
opacity: 1;
visibility: visible;
}
.folder-menu-icon.dropdown-toggle::after {
display: none;
}
.collapsed > .file-tree-ul {
display: none;
}
.add-file-btn {
margin-left: 8px;
font-size: 12px;
color: blue;
cursor: pointer;
}
</style>
@section('body_main')
<div class="row">
<div class="col-md-12">
<div class="card w-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h4 class="mb-0">Data</h4>
</div>
{{-- @dd($allAkses) --}}
<div class="card-body p-3">
<div class="bg-light rounded-3 p-3 mb-3 shadow-sm border">
<div class="row g-3 align-items-end">
<div class="col-md-4">
<label for="unit_kerja" class="form-label fw-semibold text-muted small">Unit Kerja</label>
<select class="form-control unit_kerja" id="unit_kerja">
</select>
</div>
<div class="col-md-4">
<label for="sub_unit_kerja" class="form-label fw-semibold text-muted small">Sub Unit Kerja</label>
<select class="form-control sub_unit_kerja" id="sub_unit_kerja" multiple="multiple">
</select>
</div>
<div class="col-md-4">
<label for="kategori_dok" class="form-label fw-semibold text-muted small">Kategori Dok.</label>
<select class="form-control kategori_dok" id="kategori_dok" multiple="multiple" placeholder="--Pilih kategori dokumen--">
<option value="" disabled>Select Choose</option>
@foreach ($katDok as $kat)
<option value="{{ $kat->master_kategori_directory_id }}">{{ $kat->nama_kategori_directory }}</option>
@endforeach
</select>
</div>
<div class="col-md-6 d-flex gap-2">
<button type="button" class="btn btn-primary flex-grow-1" onclick="searchData()">
<i class="fa fa-search me-1"></i> Cari
</button>
<button class="btn btn-outline-secondary" onclick="referesh()">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="col-md-6 d-flex justify-content-md-end">
<button type="button" class="btn btn-success w-100 w-md-auto" data-bs-target="#modalCreateFile" data-bs-toggle="modal">
<i class="fa fa-plus me-1"></i> Tambah Dokumen
</button>
</div>
</div>
<div class="d-flex align-items-center gap-2 mt-3 flex-wrap">
<div class="badge bg-light text-secondary border">
Tips: pilih Unit/Sub Unit & Kategori untuk menampilkan data.
</div>
<div class="ms-auto small text-muted d-flex align-items-center gap-2">
<i class="fa fa-filter"></i> Filter aktif siap digunakan
</div>
</div>
</div>
<div class="row">
<div id="tree-wrapper" class="col-md-12 mb-3">
<div class="d-flex gap-2 mb-3 flex-wrap align-items-center">
<button class="btn btn-sm btn-outline-primary" onclick="referesh()">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button type="button" id="btn-download-multi" class="btn btn-sm btn-primary" onclick="downloadMultiple()" disabled>
<i class="fas fa-download"></i> Download Multiple (<span id="multi-count">0</span>)
</button>
<div class="input-group input-group-sm" style="max-width:260px;">
<span class="input-group-text bg-white"><i class="fa fa-search text-muted"></i></span>
<input type="text" id="search_file" oninput="debounceSearch(this.value)" class="form-control" placeholder="Cari nama/no dokumen">
</div>
<div class="d-flex align-items-center gap-2 ms-auto">
<span class="badge bg-success">Umum</span>
<span class="badge bg-secondary">Internal</span>
</div>
</div>
<div id="file_tree" style="max-height: 60vh; overflow-y:auto;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
@include('dashboard.modal.create')
@include('dashboard.modal.view')
<script>
const klasifikasiDok = @json($klasifikasiDok);
const katDok = @json($katDok);
const allAkses = @json($allAkses);
const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);
window.__prefillFromSession = @json($prefillFilter ?? null);
function isPublic(permissionVal){
if(permissionVal === null || permissionVal === undefined) return false;
const val = String(permissionVal).toLowerCase();
return val === '1' || val === 'true' || val === 'iya' || val === 'yes';
}
let currentFile = null;
let idDirectory = null;
document.addEventListener('click', function(e) {
if (e.target.matches('.file-link')) {
e.preventDefault();
let fileUrl = e.target.getAttribute('data-file');
let fileName = e.target.getAttribute('data-fileName') || '-';
let noDokumen = e.target.getAttribute('data-no_dokumen') || '-';
let tanggalTerbit = e.target.getAttribute('data-tanggal_terbit') || '-';
let klasifikasiView = e.target.getAttribute('data-klasifikasi') || '-';
let permissionFile = e.target.getAttribute('data-permission_file');
$("#confirm-upload-dokumen").text(noDokumen);
$("#confirm-time-dokumen").text(tanggalTerbit);
$("#confirm-upload-klasifikasi").text(klasifikasiView);
$("#confirm_preview_file").text(fileName);
const permEl = document.getElementById('confirm-permission');
if (permEl) {
const publicDoc = isPublic(permissionFile);
permEl.textContent = publicDoc ? 'Umum' : 'Internal Unit';
permEl.className = 'badge ' + (publicDoc ? 'bg-success' : 'bg-secondary');
}
currentFile = fileUrl;
idDirectory = e.target.getAttribute('data-id');
let ext = fileUrl.split('.').pop().toLowerCase();
let previewBox = document.getElementById('file-preview');
previewBox.innerHTML = `<iframe src="/file-preview/${idDirectory}" width="100%" height="500px" style="border:none;"></iframe>`;
$("#previewModal").modal('show')
// 🔥 Tampilkan modal
$("#previewModal").modal("show");
}
if (e.target.id === 'delete-file') {
if (!currentFile) {
Swal.fire({
text: "Tidak ada file yang dipilih!",
icon: "warning",
confirmButtonText: "OK"
});
return;
}
Swal.fire({
title: 'Yakin ingin menghapus file ini?',
text: "File akan dihapus",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6c757d',
confirmButtonText: 'Ya, hapus',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
fetch(`/delete-file/${idDirectory}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
},
body: JSON.stringify({ file: currentFile })
})
.then(res => res.json())
.then(data => {
console.log(data);
if (data.success) {
Swal.fire({
text: 'File berhasil dihapus',
icon: 'success',
timer: 2000,
showConfirmButton: false
});
// Hapus link file dari tree
const fileLink = document.querySelector(`a.file-link[data-id="${idDirectory}"]`);
if (fileLink) {
const li = fileLink.closest('li.file-tree-li');
li?.remove();
}
// Tutup modal otomatis setelah hapus
let modalEl = document.getElementById('previewModal');
let modal = bootstrap.Modal.getInstance(modalEl);
modal.hide();
// Reset variabel
currentFile = null;
idDirectory = null;
} else {
Swal.fire({
text: 'Gagal menghapus file',
icon: 'error'
});
}
})
.catch(err => {
Swal.fire({
text: 'Terjadi error saat menghapus file',
icon: 'error'
});
console.error(err);
});
}
});
}
if(e.target.matches('#btn-view-full')){
window.open(`/file-preview/${idDirectory}`, '_blank');
}
});
</script>
<script src="{{ ver('/js/dashboard/_init.js') }}"></script>
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
<script src="{{ ver('/js/dashboard/functions.js') }}"></script>
<script src="{{ ver('/js/dashboard/action.js') }}"></script>
@endsection