2026-01-23 01:16:48 +07:00

643 lines
28 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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-3">
<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3">
<div class="input-group input-group-sm flex-grow-1">
<span class="input-group-text bg-white border-end-0">
<i class="fa fa-search text-muted"></i>
</span>
<input type="search"
id="tableSearch"
class="form-control border-start-0"
placeholder="Cari nama file, No Dokumen atau folder"
oninput="debouncedTableSearch(this.value)">
</div>
<div class="d-flex align-items-center gap-2">
<select id="tablePageSize" class="form-select form-select-sm" style="width: auto;">
<option value="5">5</option>
<option value="10"selected>10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="small text-muted ms-md-auto" id="tableSummary">Memuat data...</div>
</div>
<div class="table-responsive" style="max-height: 100vh; overflow-y:auto;">
<table class="table table-sm table-hover align-middle mb-0" id="lastUpdatedTable">
<thead>
<tr>
<th>Nomor Surat</th>
<th>Nama</th>
<th>File Folder</th>
<th>Akses</th>
<th>Tanggal Modifikasi</th>
</tr>
</thead>
<tbody id="tableFolderLastUpdated">
<!-- data dari fetch masuk sini -->
</tbody>
</table>
</div>
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-3" id="paginationControls"></div>
</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]);
const formCreate = $("#formFile")
const modalCreate = document.getElementById('modalCreateFile')
const tableState = { data: [], page: 1, pageSize: 8, search: '', lastPage: 1, total: 0 };
const tbody = document.getElementById('tableFolderLastUpdated');
const paginationEl = document.getElementById('paginationControls');
const summaryEl = document.getElementById('tableSummary');
const pageSizeSelect = document.getElementById('tablePageSize');
if(pageSizeSelect){
const initialSize = parseInt(pageSizeSelect.value);
if(!isNaN(initialSize)) tableState.pageSize = initialSize;
pageSizeSelect.addEventListener('change', (e) => {
const val = parseInt(e.target.value);
if(!isNaN(val) && val > 0){
tableState.pageSize = val;
tableState.page = 1;
fetchData();
}
});
}
function resetCreateForm(){
colCount = 1;
$("#col_add_fileV2").html('');
formCreate[0]?.reset();
formCreate.find('select').val(null).trigger('change');
formCreate.find('input[type="file"]').val('');
formCreate.find('.file-name').addClass('d-none').text('');
}
function isPublic(permissionVal){
if(permissionVal === null || permissionVal === undefined) return false;
const val = String(permissionVal).toLowerCase();
return val === '1' || val === 'true' || val === 'iya' || val === 'yes';
}
function buildRow(item){
const parts = (item.file || '').split('/');
const fileName = parts.pop() || '-';
const folderPath = parts.join('/') || '-';
const publicDoc = isPublic(item.permission_file);
return `
<tr>
<td class="text-nowrap">${item.no_dokumen || '-'}</td>
<td>
<span class="me-1">📄</span>
<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 class="text-break"><span class="badge bg-light text-dark fw-semibold">${folderPath}</span></td>
<td>
<span class="badge ${publicDoc ? 'bg-success' : 'bg-secondary'}">
${publicDoc ? 'Umum' : 'Internal Unit'}
</span>
</td>
<td class="text-nowrap">${formatTanggal(item.entry_at)}</td>
</tr>
`;
}
function renderPagination(totalPages){
if(!paginationEl) return;
if(totalPages <= 1){
paginationEl.innerHTML = '';
return;
}
const maxButtons = 5;
let start = Math.max(1, tableState.page - Math.floor(maxButtons/2));
let end = Math.min(totalPages, start + maxButtons - 1);
start = Math.max(1, end - maxButtons + 1);
let buttons = '';
buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="prev" ${tableState.page === 1 ? 'disabled' : ''}> Sebelumnya</button>`;
for(let i=start; i<=end; i++){
buttons += `<button class="btn btn-sm ${i === tableState.page ? 'btn-primary' : 'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
}
buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="next" ${tableState.page === totalPages ? 'disabled' : ''}>Berikutnya </button>`;
paginationEl.innerHTML = `
<div class="d-flex align-items-center gap-2 flex-wrap">
<div class="btn-group" role="group">${buttons}</div>
<span class="small text-muted">Halaman ${tableState.page} dari ${totalPages}</span>
</div>
`;
}
if(paginationEl){
paginationEl.addEventListener('click', (e) => {
const page = e.target.getAttribute('data-page');
if(!page) return;
if(page === 'prev' && tableState.page > 1) tableState.page--;
else if(page === 'next'){
if(tableState.page < tableState.lastPage) tableState.page++;
}else{
tableState.page = parseInt(page);
}
fetchData();
});
}
function renderTable(){
const pageData = tableState.data || [];
if(pageData.length === 0){
tbody.innerHTML = `
<tr>
<td colspan="5" class="text-center text-muted py-4">
Tidak ada data yang cocok
</td>
</tr>
`;
}else{
tbody.innerHTML = pageData.map(buildRow).join('');
}
const from = tableState.total === 0 ? 0 : ((tableState.page -1) * tableState.pageSize) + 1;
const to = Math.min(((tableState.page -1) * tableState.pageSize) + pageData.length, tableState.total);
if(summaryEl){
summaryEl.textContent = tableState.total ? `Menampilkan ${from} - ${to} dari ${tableState.total} dokumen` : 'Tidak ada data';
}
renderPagination(tableState.lastPage || 1);
}
function debouncedTableSearch(value){
clearTimeout(window.tableSearchTimer);
window.tableSearchTimer = setTimeout(() => {
tableState.search = value.trim();
tableState.page = 1;
fetchData();
}, 250);
}
function fetchData(){
if(summaryEl) summaryEl.textContent = 'Memuat data...';
const params = new URLSearchParams({
page: tableState.page,
per_page: tableState.pageSize,
keyword: tableState.search
});
fetch(`/last-document?${params.toString()}`)
.then(response => response.json())
.then(data => {
tableState.data = data?.data || [];
tableState.lastPage = data?.pagination?.last_page || 1;
tableState.total = data?.pagination?.total || 0;
renderTable();
})
.catch(error => {
console.error('Error : ', error);
if(summaryEl) summaryEl.textContent = 'Gagal memuat data';
})
}
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) {
const publicDoc = isPublic(permissionFile);
permEl.textContent = publicDoc ? 'Bisa dilihat unit lain' : 'Hanya unit ini';
permEl.className = 'badge ' + (publicDoc ? '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');
}
})
formCreate.off('submit').on('submit', function(e){
e.preventDefault();
const submitBtn = $(this).find('button[type="submit"]');
submitBtn.prop('disabled', true).text('menyimpan...')
const formData = new FormData(this);
console.log(formData);
fetch(`/uploadv2`, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
},
body: formData
}).then(async(res) => {
const responseData = await res.json();
if(responseData.status){
Toastify({
text: responseData.message || 'Berhasil melakukan aksi!',
duration: 3000,
gravity: "top",
position: "right",
style: {
background: "linear-gradient(to right, #00b09b, #96c93d)",
color: "#fff",
}
}).showToast();
resetCreateForm();
fetchData()
submitBtn.prop('disabled', false).text('Simpan')
const modalInstance = bootstrap.Modal.getInstance(modalCreate);
modalInstance?.hide();
} else {
throw new Error(responseData.message || 'Terjadi kesalahan saat menyimpan data.');
}
}).catch(err => {
if (err.message) {
Swal.fire({
icon: 'error',
title: 'Gagal',
text: err.message
});
submitBtn.prop('disabled', false).text('Simpan')
}
});
});
</script>
@endsection