459 lines
20 KiB
PHP

@extends('layout.main')
@section('body_main')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">Data Terakhir</h4>
<button type="button" class="btn btn-success" data-bs-target="#modalCreateFile" data-bs-toggle="modal">Tambah File</button>
</div>
<div class="card-body p-2">
<div class="d-flex align-items-center gap-2 mb-3">
<input type="text" onchange="searchData(this)" class="form-control" placeholder="Search">
<button type="button" class="btn btn-primary">Cari</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama</th>
<th>File Folder</th>
<th>Tanggal Modifikasi</th>
</tr>
</thead>
<tbody id="tableFolderLastUpdated">
<!-- data dari fetch masuk sini -->
</tbody>
</table>
</div>
</div>
</div>
</div>
@include('dashboardV2.modal.create')
@include('dashboardV2.modal.view')
<script>
const katDok = @json($katDok);
const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]->sub_unit_kerja);
const mappingUnitKerjaPegawai = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);
function fetchData(){
fetch(`/last-document`)
.then(response => response.json())
.then(data => {
const tbody = document.getElementById('tableFolderLastUpdated');
const resData = data?.data || [];
if (resData.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="3" class="text-center text-muted">
Tidak ada data
</td>
</tr>
`;
return;
}
tbody.innerHTML = resData.map(item => {
const fullPath = item.file;
console.log(item);
const parts = fullPath.split('/');
const fileName = parts.pop(); // ambil paling belakang
const folderPath = parts.join('/'); // gabung sisanya
return `
<tr>
<td>📄<a href="#" class="file-link"
data-file="${item.file}"
data-fileName="${fileName || '-'}"
data-id="${item.file_directory_id}"
data-no_dokumen="${item.no_dokumen || '-'}"
data-tanggal_terbit="${item.tanggal_terbit || '-'}" data-permission_file="${item.permission_file || '-'}">${fileName}</a></td>
<td>${folderPath}</td>
<td>${formatTanggal(item.entry_at)}</td>
</tr>
`;
}).join('');
})
.catch(error => console.error('Error : ', error))
}
function formatTanggal(dateString) {
const d = new Date(dateString);
return d.toLocaleDateString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
fetchData()
let colCount = 1;
$(document).ready(function() {
$('.unit_kerja').select2({
placeholder: '--- Pilih Unit Kerja ---',
allowClear: true,
width: '100%',
ajax: {
url : '/select-unit-kerja',
dataType: 'json',
delay: 250,
data: function(params){
let q = '';
if(allAkses){
q = params.term;
}else{
q = authUnitKerja?.name ?? '';
}
return { q };
},
processResults: function(data){
let results = data?.data.map(item => ({
id: item.id,
text: item.name
}));
return { results };
},
cache: true,
},
minimumInputLength: 0,
});
$('.sub_unit_kerja').select2({
placeholder: '-- Pilih Sub Unit Kerja --',
allowClear: true,
width: '100%',
});
// --- isi default unit kerja ---
if(authUnitKerja){
let option = new Option(authUnitKerja.name, authUnitKerja.id, true, true);
$('.unit_kerja').append(option).trigger('change');
}
let initialUnit = $('.unit_kerja').val();
if(initialUnit){
loadSubUnitKerja(initialUnit);
}
// jalankan setiap kali unit_kerja berubah
$('.unit_kerja').on('change', function(){
let idUnit = $(this).val();
if(idUnit){
loadSubUnitKerja(idUnit);
}
});
selectOptionUnitKerjaV1(0);
});
function loadSubUnitKerja(unitId){
$('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');
$.ajax({
url: `/select-sub-unit-kerja/${unitId}`,
method: 'GET',
success: function(response) {
if (response?.data) {
response.data.forEach(unit => {
let selected = (authSubUnitKerja && unit.id === authSubUnitKerja.objectsubunitkerjapegawaifk);
const option = new Option(unit.name, unit.id, false, selected);
$('.sub_unit_kerja').append(option);
});
$('.sub_unit_kerja').trigger('change');
}
}
});
}
function addFormV2(){
let col = $("#col_add_fileV2");
let html = '';
html += `
<div class="row g-3 align-items-start" id="col-${colCount}">
<hr class="my-3" />
<div class="col-12 d-flex justify-content-end">
<button type="button"
class="btn btn-sm btn-danger"
onclick="removeCol(${colCount})">
<i class="fa-solid fa-trash"></i> Hapus
</button>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Unit <span class="text-danger">*</span></label>
<select class="form-select"
name="data[${colCount}][id_unit_kerja]"
id="select_id_unit_kerja_${colCount}"
required>
<option value="" disabled selected>Pilih Unit</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Sub Unit <span class="text-danger">*</span></label>
<select class="form-select"
name="data[${colCount}][id_sub_unit_kerja]"
id="select_id_sub_unit_kerja_${colCount}"
required>
<option value="" disabled selected>Pilih Sub Unit</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Kategori Dokumen <span class="text-danger">*</span></label>
<select class="form-select"
name="data[${colCount}][master_kategori_directory_id]"
id="select_kategori_${colCount}"
required>
<option value="" disabled selected>Pilih Kategori</option>
@foreach ($katDok as $kat)
<option value="{{ $kat->master_kategori_directory_id }}/{{ $kat->nama_kategori_directory }}">
{{ $kat->nama_kategori_directory }}
</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Nomor Dokumen</label>
<div class="input-group">
<span class="input-group-text">#</span>
<input type="text"
class="form-control"
name="data[${colCount}][no_dokumen]"
placeholder="Contoh: 001/RS/IT/I/2026">
</div>
<div class="form-text text-muted">Opsional, isi jika ada nomor resmi dokumen.</div>
</div>
<div class="col-md-3">
<label class="form-label fw-semibold">Tanggal Terbit</label>
<input class="form-control"
type="date"
name="data[${colCount}][date_active]"
required>
</div>
<div class="col-md-3">
<label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>
<div class="border rounded-3 p-2 bg-light">
<div class="form-check">
<input class="form-check-input"
type="radio"
name="data[${colCount}][is_permission]"
id="perm_yes_${colCount}"
value="1"
required>
<label class="form-check-label" for="perm_yes_${colCount}">Iya</label>
</div>
<div class="form-check mt-1">
<input class="form-check-input"
type="radio"
name="data[${colCount}][is_permission]"
id="perm_no_${colCount}"
value="2"
required>
<label class="form-check-label" for="perm_no_${colCount}">Tidak</label>
</div>
</div>
</div>
<div class="col-md-12">
<label for="fileUpload_${colCount}" class="form-label fw-semibold">📂 Upload Dokumen (PDF)</label>
<div class="border rounded-3 p-3 bg-white shadow-sm">
<input class="form-control"
type="file"
id="fileUpload_${colCount}"
accept=".pdf"
name="data[${colCount}][file]">
<div class="mt-2 text-success fw-semibold d-none file-name" id="fileName_${colCount}"></div>
</div>
<div class="form-text text-muted">
Format yang didukung: <b>PDF</b>.
</div>
</div>
</div>
`;
col.append(html)
selectOptionUnitKerjaV1(colCount)
colCount++;
}
function removeCol(count){
$(`#col-${count}`).remove()
}
function selectOptionUnitKerjaV1(colCount) {
let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);
// inisialisasi select2 untuk Unit Kerja
selectUnit.select2({
placeholder: '-- Pilih Unit Kerja --',
allowClear:true,
width: '100%',
dropdownParent: selectUnit.parent(),
ajax:{
url : '/select-unit-kerja',
dataType: 'json',
delay: 250,
data: function(params){
return { q: params.term }
},
processResults: function(data){
return {
results : data?.data.map(item => ({
id: item.id+'/'+item.name,
text: item.name,
sub_units: item.sub_unit_kerja // kirim ke front
}))
}
},
cache: true,
},
minimumInputLength: 1,
});
selectSubUnit.select2({
placeholder: '-- Pilih Sub Unit Kerja --',
allowClear: true,
width: '100%',
dropdownParent: selectSubUnit.parent()
});
// event ketika unit kerja dipilih
selectUnit.on('select2:select', function (e) {
let data = e.params.data; // data unit kerja terpilih
selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');
if (data.sub_units && data.sub_units.length > 0) {
data.sub_units.forEach(sub => {
selectSubUnit.append(`<option value="${sub.id}/${sub.name}">${sub.name}</option>`);
});
}
// aktifkan select2 untuk sub unit
});
}
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 noDokumen = e.target.getAttribute('data-no_dokumen')
let tanggalTerbit = e.target.getAttribute('data-tanggal_terbit')
let permissionFile = e.target.getAttribute('data-permission_file')
let fileName = e.target.getAttribute('data-fileName')
currentFile = fileUrl;
idDirectory = e.target.getAttribute('data-id');
const titleEl = document.getElementById('confirm_preview_file');
if (titleEl) titleEl.textContent = fileName;
// set footer info
const noEl = document.getElementById('confirm-upload-dokumen');
if (noEl) noEl.textContent = noDokumen;
const tglEl = document.getElementById('confirm-time-dokumen');
if (tglEl) tglEl.textContent = tanggalTerbit;
const permEl = document.getElementById('confirm-permission');
if (permEl) {
// contoh label permission biar enak dibaca
const isPublic = (permissionFile === 'true' || permissionFile.toLowerCase() === 'iya');
permEl.textContent = isPublic ? 'Bisa dilihat unit lain' : 'Hanya unit ini';
permEl.className = 'badge ' + (isPublic ? 'bg-success' : 'bg-secondary');
}
let previewBox = document.getElementById('file-preview');
previewBox.innerHTML = `<iframe src="/file-preview/${idDirectory}" width="100%" height="500px" style="border:none;"></iframe>`;
$("#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
});
$("#previewModal").modal("hide");
fetchData()
currentFile = null;
idDirectory = null;
}else{
Swal.fire({
text: 'Gagal menghapus file',
icon: 'error'
});
}
})
.catch(err => {
console.log(err);
Swal.fire({
text: 'Terjadi error saat menghapus file ',
icon: 'error'
});
});
}
})
}
if(e.target.matches('#btn-view-full')){
window.open(`/file-preview/${idDirectory}`, '_blank');
}
})
</script>
@endsection