319 lines
14 KiB
PHP
319 lines
14 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="searchFile(this)" class="form-control form-control-sm" placeholder="Search" style="max-width:220px;">
|
|
</div>
|
|
<div id="file_tree"></div>
|
|
</div>
|
|
<div id="preview-wrapper" class="col-md-6 d-none">
|
|
<div class="card shadow-sm h-100">
|
|
|
|
<!-- Header -->
|
|
<div class="card-header d-flex justify-content-between align-items-center py-2">
|
|
<h6 class="mb-0">
|
|
📄 Preview <strong id="confirm_preview_file"></strong>
|
|
</h6>
|
|
<button class="btn btn-sm btn-outline-danger" id="close-preview" title="Tutup Preview">✕</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body p-2" style="min-height:250px; max-height:70vh; overflow:auto;">
|
|
<div class="d-flex justify-content-end align-items-center" style="position: sticky; top: 0; background: #ffffff; z-index: 10;">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="download-file">⬇ Download</button>
|
|
</div>
|
|
<div id="file-preview"
|
|
class="text-center text-muted d-flex justify-content-center align-items-center"
|
|
style="height:100%;">
|
|
<p>📂 Pilih file untuk melihat preview</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="card-footer p-2 ">
|
|
<div class="text-black">Klasifikasi Dokumen <strong id="confirm-upload-klasifikasi"></strong></div>
|
|
<div class="mt-2 text-muted fst-italic small text-black">
|
|
Ditambahkan oleh <strong id="confirm-upload-dokumen"></strong> pada <span id="confirm-time-dokumen"></span>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn btn-sm btn-outline-danger" id="delete-file">
|
|
🗑 Hapus
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@include('dashboard.modal.create')
|
|
<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');
|
|
$("#confirm-upload-dokumen").html(upload)
|
|
$("#confirm-time-dokumen").html(time)
|
|
$("#confirm-upload-klasifikasi").html(klasifikasiView)
|
|
currentFile = fileUrl
|
|
idDirectory = e.target.getAttribute('data-id');
|
|
let ext = fileUrl.split('.').pop().toLowerCase();
|
|
$("#confirm_preview_file").html(fileName)
|
|
// ubah layout
|
|
document.getElementById('tree-wrapper').classList.remove('col-md-12');
|
|
document.getElementById('tree-wrapper').classList.add('col-md-6');
|
|
document.getElementById('preview-wrapper').classList.remove('d-none');
|
|
let previewBox = document.getElementById('file-preview');
|
|
|
|
if (['jpg','jpeg','png','gif','webp'].includes(ext)) {
|
|
previewBox.innerHTML = `
|
|
<img src="/file/${fileUrl}" class="img-fluid rounded shadow-sm" width="100%" height="450px" alt="preview">
|
|
`;
|
|
} else if (ext === 'pdf') {
|
|
previewBox.innerHTML = `
|
|
<iframe src="/file/${fileUrl}" width="100%" height="500px" style="border:none;"></iframe>
|
|
|
|
`;
|
|
} else {
|
|
previewBox.innerHTML = `
|
|
<p class="text-muted">Tidak bisa preview file ini. Silakan download:</p>
|
|
<a href="/file/${fileUrl}" target="_blank" class="btn btn-sm btn-primary">⬇️ Download</a>
|
|
`;
|
|
}
|
|
}
|
|
|
|
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
|
|
});
|
|
const fileLink = document.querySelector(`a.file-link[data-id="${idDirectory}"]`);
|
|
if (fileLink) {
|
|
const li = fileLink.closest('li.file-tree-li');
|
|
li?.remove();
|
|
}
|
|
// reset preview
|
|
document.getElementById('file-preview').innerHTML =
|
|
`<p>📂 Pilih file untuk melihat preview</p>`;
|
|
|
|
document.getElementById('preview-wrapper').classList.add('d-none');
|
|
document.getElementById('tree-wrapper').classList.remove('col-md-6');
|
|
document.getElementById('tree-wrapper').classList.add('col-12');
|
|
currentFile = null; // reset
|
|
} 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');
|
|
|
|
}
|
|
})
|
|
});
|
|
|
|
// tombol close
|
|
document.getElementById('close-preview').addEventListener('click', function() {
|
|
document.getElementById('tree-wrapper').classList.remove('col-md-6');
|
|
document.getElementById('tree-wrapper').classList.add('col-md-12');
|
|
document.getElementById('preview-wrapper').classList.add('d-none');
|
|
});
|
|
|
|
</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
|