281 lines
11 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;
}
.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="row mb-3 mt-3">
<!-- Unit Kerja -->
<div class="col-md-2">
<label for="unit_kerja" class="form-label">Unit Kerja</label>
<select class="form-control unit_kerja" id="unit_kerja"{{ ($allAkses && ($allAkses->all_akses || $allAkses->unit_akses)) ? '' : 'disabled' }}>
</select>
</div>
<!-- Sub Unit Kerja -->
<div class="col-md-2">
<label for="sub_unit_kerja" class="form-label">Sub Unit Kerja</label>
<select class="form-control sub_unit_kerja" id="sub_unit_kerja" @if($allAkses && ($allAkses->all_akses || $allAkses->unit_akses)) multiple="multiple" @else disabled @endif>
</select>
</div>
<!-- Kategori Dokumen -->
<div class="col-md-2">
<label for="kategori_dok" class="form-label">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>
<!-- Klasifikasi Dokumen -->
<div class="col-md-2">
<label for="klasifikasi_dok" class="form-label">Klasifikasi Dok.</label>
<select class="form-control klasifikasi_dok" id="klasifikasi_dok" multiple="multiple" placeholder="--Pilih klasifikasi dokumen--">
<option value="" disabled>Select Choose</option>
@foreach ($klasifikasiDok as $kla)
<option value="{{ $kla->master_klasifikasi_directory_id }}">{{ $kla->nama_klasifikasi_directory }}</option>
@endforeach
</select>
</div>
<!-- Button Cari -->
<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-primary w-100" onclick="searchData()">Cari</button>
</div>
<!-- Button Tambah File -->
<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-success w-100" data-bs-target="#modalCreateFile" data-bs-toggle="modal">
<i data-feather="plus" class="me-1"></i>
Tambah File</button>
</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">
<button class="btn btn-sm btn-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>
<input type="text" id="search_file" oninput="debounceSearch(this)" class="form-control form-control-sm" placeholder="Search" style="max-width:220px;">
</div>
<div id="file_tree"></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]);
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-name_file');
let upload = e.target.getAttribute('data-upload');
let time = e.target.getAttribute('data-time');
let klasifikasiView = e.target.getAttribute('data-klasifikasi');
console.log(fileUrl);
$("#confirm-upload-dokumen").html(upload);
$("#confirm-time-dokumen").html(time);
$("#confirm-upload-klasifikasi").html(klasifikasiView);
$("#confirm_preview_file").html(fileName);
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 => {
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();
}
// Reset modal preview
document.getElementById('file-preview').innerHTML =
`<p>📂 Pilih file untuk melihat preview</p>`;
document.getElementById('confirm_preview_file').innerHTML = "";
document.getElementById('confirm-upload-dokumen').innerHTML = "";
document.getElementById('confirm-time-dokumen').innerHTML = "";
document.getElementById('confirm-upload-klasifikasi').innerHTML = "";
// 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);
});
}
});
}
// $("#download-file").off('click').on('click', function(){
// if(currentFile){
// let link = document.createElement('a');
// link.href = 'file/' + currentFile; // alamat file
// link.download = currentFile.split('/').pop(); // nama file otomatis
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// }else{
// console.error('error');
// }
// })
});
</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