1105 lines
49 KiB
PHP
1105 lines
49 KiB
PHP
@extends('layout.main')
|
||
<style>
|
||
/* --- SELECT2: teks terlihat (hitam) --- */
|
||
.select2-container--default .select2-selection--multiple {
|
||
background: #fff !important;
|
||
border: 1px solid #ced4da !important;
|
||
min-height: 31px; /* cocok form-select-sm */
|
||
}
|
||
|
||
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
|
||
color: #111 !important;
|
||
}
|
||
|
||
.select2-container--default .select2-search--inline .select2-search__field {
|
||
color: #111 !important;
|
||
}
|
||
|
||
.select2-container--default .select2-dropdown {
|
||
background: #fff !important;
|
||
border: 1px solid #ced4da !important;
|
||
}
|
||
|
||
.select2-container--default .select2-results__option {
|
||
color: #111 !important;
|
||
}
|
||
|
||
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
|
||
background: #e9ecef !important;
|
||
color: #111 !important;
|
||
}
|
||
|
||
/* tag chip */
|
||
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||
background: #f1f3f5 !important;
|
||
border: 1px solid #dee2e6 !important;
|
||
color: #111 !important;
|
||
}
|
||
</style>
|
||
|
||
@section('body_main')
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-body p-3">
|
||
<div class="tab-content">
|
||
<div class="tab-pane fade show active">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<h4 class="mb-0">Dokumen Umum</h4>
|
||
<div class="d-flex align-items-start gap-3">
|
||
<!-- DOWNLOAD + COUNT -->
|
||
{{-- <a
|
||
href="/download-excel/data-umum"
|
||
class="btn btn-success btn-sm"
|
||
>
|
||
<i class="ti ti-download me-1"></i>
|
||
Download Excel
|
||
</a> --}}
|
||
<div class="d-flex flex-column align-items-start">
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary btn-sm"
|
||
id="btnDownloadMultiple"
|
||
disabled
|
||
>
|
||
<i class="ti ti-download me-1"></i>
|
||
Download Terpilih
|
||
</button>
|
||
|
||
<span
|
||
id="selectedCount"
|
||
class="small text-muted mt-1"
|
||
>
|
||
0 dipilih
|
||
</span>
|
||
</div>
|
||
<!-- Tambah Dokumen -->
|
||
{{-- <button
|
||
type="button"
|
||
class="btn btn-success btn-sm"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#modalCreateFile"
|
||
>
|
||
<i class="ti ti-plus me-1"></i>
|
||
Tambah Dokumen
|
||
</button> --}}
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3">
|
||
<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 flex-grow-1">
|
||
<select id="tableUnit" class="form-select form-select-sm unit_kerja_filter" style="max-width: 260px;" multiple></select>
|
||
<select id="tableKategori" class="form-select form-select-sm kategori_kerja_filter" style="max-width: 260px;" multiple>
|
||
@foreach ($katDok as $kat)
|
||
<option value="{{ $kat->master_kategori_directory_id }}">
|
||
{{ $kat->nama_kategori_directory }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
<input type="search"
|
||
id="tableSearch"
|
||
class="form-control"
|
||
placeholder="Cari nama dokumen atau No Dokumen"
|
||
autocomplete="off">
|
||
<button class="btn btn-outline-secondary" type="button" id="btnTableSearch">Cari</button>
|
||
</div>
|
||
<div class="d-flex align-items-center gap-2">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="table-responsive" style="max-height: 70vh; overflow-y:auto;">
|
||
<table class="table table-sm table-hover align-middle mb-0 table-fixed" id="lastUpdatedTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-center" style="width: 36px;">
|
||
<input type="checkbox" id="checkAllRows" class="form-check-input">
|
||
</th>
|
||
<th>Aksi</th>
|
||
<th>No Dokumen</th>
|
||
<th>Nama Dokumen</th>
|
||
<th>Kategori</th>
|
||
<th>Unit</th>
|
||
<th>Tanggal Unggah</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableDataUmum">
|
||
<!-- data dari fetch masuk sini -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="d-flex flex-wrap align-items-center gap-2 mt-3">
|
||
<div class="d-flex align-items-center gap-1">
|
||
<span class="small text-muted">Tampilkan</span>
|
||
<select id="tablePageSize" class="form-select form-select-sm" style="width: 80px;">
|
||
<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>
|
||
<span class="small text-muted">data</span>
|
||
</div>
|
||
|
||
<div id="paginationControls" class="ms-auto"></div>
|
||
|
||
<div class="small text-muted text-nowrap" id="tableSummary">
|
||
Memuat data...
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@include('dataUmum.modal.create')
|
||
@include('dataUmum.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 authPegawai = @json(auth()->user()->objectpegawaifk);
|
||
const formCreate = $("#formFile")
|
||
const modalCreate = document.getElementById('modalCreateFile')
|
||
const tableState = { data: [], page: 1, pageSize: 8, search: '', unit: [], kategori: [], lastPage: 1, total: 0 };
|
||
const tbody = document.getElementById('tableDataUmum');
|
||
const paginationEl = document.getElementById('paginationControls');
|
||
const summaryEl = document.getElementById('tableSummary');
|
||
const pageSizeSelect = document.getElementById('tablePageSize');
|
||
const unitSelect = document.getElementById('tableUnit');
|
||
const kategoriSelect = document.getElementById('tableKategori');
|
||
const searchInput = document.getElementById('tableSearch');
|
||
const searchBtn = document.getElementById('btnTableSearch');
|
||
const downloadBtn = document.getElementById('btnDownloadMultiple');
|
||
const selectedCountEl = document.getElementById('selectedCount');
|
||
const checkAllEl = document.getElementById('checkAllRows');
|
||
const selectedIds = new Set();
|
||
|
||
document.addEventListener('change', function(e){
|
||
if(!e.target.classList.contains('toggle-expired')) return;
|
||
const targetId = e.target.getAttribute('data-target');
|
||
if(!targetId) return;
|
||
const fieldWrap = document.getElementById(targetId);
|
||
if(!fieldWrap) return;
|
||
if(e.target.checked){
|
||
fieldWrap.classList.remove('d-none');
|
||
}else{
|
||
fieldWrap.classList.add('d-none');
|
||
const input = fieldWrap.querySelector('input[type="date"]');
|
||
if(input) input.value = '';
|
||
}
|
||
});
|
||
|
||
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();
|
||
}
|
||
});
|
||
}
|
||
if (window.$ && $.fn.select2) {
|
||
if (unitSelect) {
|
||
$('#tableUnit').select2({
|
||
placeholder: 'Pilih Unit',
|
||
allowClear: true,
|
||
width: '100%',
|
||
closeOnSelect: false,
|
||
ajax: {
|
||
url: '/select-unit-kerja-option',
|
||
dataType: 'json',
|
||
delay: 250,
|
||
data: function (params) {
|
||
return { q: params.term };
|
||
},
|
||
processResults: function (data) {
|
||
return {
|
||
results: (data?.data || []).map(item => ({
|
||
id: item.id,
|
||
text: item.name
|
||
}))
|
||
};
|
||
},
|
||
cache: true
|
||
}
|
||
});
|
||
$('#tableUnit').on('change', function () {
|
||
tableState.unit = $(this).val() || [];
|
||
});
|
||
}
|
||
if (kategoriSelect) {
|
||
$('#tableKategori').select2({
|
||
placeholder: 'Pilih Kategori',
|
||
allowClear: true,
|
||
width: '100%',
|
||
closeOnSelect: false
|
||
});
|
||
$('#tableKategori').on('change', function () {
|
||
tableState.kategori = $(this).val() || [];
|
||
});
|
||
}
|
||
}
|
||
|
||
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 getExpiryStatus(dateStr){
|
||
if (!dateStr) return false;
|
||
const d = new Date(dateStr);
|
||
if (Number.isNaN(d.getTime())) return null;
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
d.setHours(0, 0, 0, 0);
|
||
if (d < today) return 'expired';
|
||
const diffDays = Math.ceil((d - today) / 86400000);
|
||
if (diffDays <= 7) return 'soon';
|
||
return null;
|
||
}
|
||
|
||
function buildRow(item){
|
||
const parts = (item.file || '').split('/');
|
||
const fileName = parts.pop() || '-';
|
||
const folderPath = parts.join('/') || '-';
|
||
const publicDoc = isPublic(item.permission_file);
|
||
const unitName = parts[0] || '';
|
||
const subName = parts[1] || '';
|
||
const kategoriName = parts[2] || '';
|
||
const expiryStatus = getExpiryStatus(item.tgl_expired);
|
||
let statusLabel = '';
|
||
let statusClass = '';
|
||
let badge
|
||
if (publicDoc) {
|
||
statusLabel = 'Umum';
|
||
statusClass = 'bg-success';
|
||
} else {
|
||
statusLabel = 'Internal Unit';
|
||
statusClass = 'bg-secondary';
|
||
}
|
||
const checked = selectedIds.has(String(item.file_directory_id)) ? 'checked' : '';
|
||
const rowClass = expiryStatus === 'expired' ? 'table-danger' : (expiryStatus === 'soon' ? 'table-warning' : '');
|
||
const expiryBadge = expiryStatus === 'expired'
|
||
? `<span class="badge bg-danger" style="font-size:10px;">Expired</span>`
|
||
: (expiryStatus === 'soon' ? `<span class="badge bg-warning text-dark" style="font-size:10px;">Akan Expired</span>` : '');
|
||
return `
|
||
<tr class="${rowClass}">
|
||
|
||
<td class="text-center">
|
||
<input type="checkbox"
|
||
class="form-check-input row-check"
|
||
data-id="${item.file_directory_id}"
|
||
${checked}>
|
||
</td>
|
||
<td class="text-nowrap">
|
||
<div class="d-inline-flex gap-1">
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary btn-sm"
|
||
onclick="infoDok(this)"
|
||
title="Detail Dokumen"
|
||
data-filename="${item.nama_dokumen || '-'}"
|
||
data-id="${item.file_directory_id}"
|
||
data-no_dokumen="${item.no_dokumen || '-'}"
|
||
data-tanggal_terbit="${item.tanggal_terbit || '-'}"
|
||
data-permission_file="${item.permission_file || '-'}"
|
||
data-pegawai_id_entry="${item.pegawai_id_entry || '-'}"
|
||
>
|
||
<i class="fa-solid fa-file-pdf"></i>
|
||
</button>
|
||
|
||
<a
|
||
href="/file-download/${item.file_directory_id}"
|
||
target="_blank"
|
||
class="btn btn-primary btn-sm"
|
||
title="Download Dokumen"
|
||
>
|
||
<i class="fa-solid fa-download"></i>
|
||
</a>
|
||
</div>
|
||
</td>
|
||
|
||
<td class="text-nowrap">${item.no_dokumen || '-'}</td>
|
||
<td class="file-cell">
|
||
<div style="display:flex; flex-direction:column; gap:4px;">
|
||
|
||
<!-- BARIS ATAS -->
|
||
<div style="display:flex; align-items:center; gap:6px;">
|
||
<a href="#"
|
||
class="file-link"
|
||
data-file="${item.file}"
|
||
data-fileName="${item.nama_dokumen || '-'}"
|
||
data-id="${item.file_directory_id}"
|
||
data-no_dokumen="${item.no_dokumen || '-'}"
|
||
data-tanggal_terbit="${item.tanggal_terbit || '-'}"
|
||
data-permission_file="${item.permission_file || '-'}"
|
||
data-pegawai_id_entry="${item.pegawai_id_entry || '-'}"
|
||
style="
|
||
color:#1f2937;
|
||
font-weight:600;
|
||
text-decoration:none;
|
||
line-height:1.3;
|
||
word-break:break-word;
|
||
"
|
||
>
|
||
${item.nama_dokumen || '-'}
|
||
</a>
|
||
${expiryBadge}
|
||
|
||
</div>
|
||
</div>
|
||
</td>
|
||
|
||
<td>
|
||
${kategoriName}
|
||
</td>
|
||
<td>
|
||
${unitName}
|
||
</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="7" 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);
|
||
syncCheckAllState();
|
||
updateSelectedCount();
|
||
}
|
||
|
||
function applyTableSearch(){
|
||
const value = searchInput ? searchInput.value : '';
|
||
tableState.search = (value || '').trim();
|
||
tableState.unit = unitSelect && window.$ ? ($('#tableUnit').val() || []) : (tableState.unit || []);
|
||
tableState.kategori = kategoriSelect && window.$ ? ($('#tableKategori').val() || []) : (tableState.kategori || []);
|
||
tableState.page = 1;
|
||
fetchData();
|
||
}
|
||
|
||
function fetchData(){
|
||
if(summaryEl) summaryEl.textContent = 'Memuat data...';
|
||
const params = new URLSearchParams({
|
||
page: tableState.page,
|
||
per_page: tableState.pageSize,
|
||
keyword: tableState.search
|
||
});
|
||
if (tableState.unit && tableState.unit.length > 0) {
|
||
tableState.unit.forEach(id => params.append('unit[]', id));
|
||
}
|
||
if (tableState.kategori && tableState.kategori.length > 0) {
|
||
tableState.kategori.forEach(kat => params.append('kategori[]', kat));
|
||
}
|
||
fetch(`/datatable-umum?${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';
|
||
})
|
||
}
|
||
|
||
if (searchBtn) {
|
||
searchBtn.addEventListener('click', applyTableSearch);
|
||
}
|
||
if (searchInput) {
|
||
searchInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
applyTableSearch();
|
||
}
|
||
});
|
||
}
|
||
|
||
function formatTanggal(dateString) {
|
||
const d = new Date(dateString);
|
||
|
||
return d.toLocaleDateString('id-ID', {
|
||
day: '2-digit',
|
||
month: 'short',
|
||
year: 'numeric'
|
||
});
|
||
}
|
||
fetchData()
|
||
|
||
function updateSelectedCount(){
|
||
if(!selectedCountEl) return;
|
||
selectedCountEl.textContent = `${selectedIds.size} dipilih`;
|
||
if(downloadBtn){
|
||
downloadBtn.disabled = selectedIds.size === 0;
|
||
}
|
||
}
|
||
|
||
function syncCheckAllState(){
|
||
if(!checkAllEl) return;
|
||
const pageIds = (tableState.data || []).map(item => String(item.file_directory_id));
|
||
if(pageIds.length === 0){
|
||
checkAllEl.checked = false;
|
||
checkAllEl.indeterminate = false;
|
||
return;
|
||
}
|
||
const selectedOnPage = pageIds.filter(id => selectedIds.has(id)).length;
|
||
checkAllEl.checked = selectedOnPage === pageIds.length;
|
||
checkAllEl.indeterminate = selectedOnPage > 0 && selectedOnPage < pageIds.length;
|
||
}
|
||
|
||
if(checkAllEl){
|
||
checkAllEl.addEventListener('change', function(){
|
||
const pageIds = (tableState.data || []).map(item => String(item.file_directory_id));
|
||
if(this.checked){
|
||
pageIds.forEach(id => selectedIds.add(id));
|
||
}else{
|
||
pageIds.forEach(id => selectedIds.delete(id));
|
||
}
|
||
renderTable();
|
||
});
|
||
}
|
||
|
||
if(tbody){
|
||
tbody.addEventListener('change', function(e){
|
||
const checkbox = e.target.closest('.row-check');
|
||
if(!checkbox) return;
|
||
const id = String(checkbox.getAttribute('data-id'));
|
||
if(checkbox.checked){
|
||
selectedIds.add(id);
|
||
}else{
|
||
selectedIds.delete(id);
|
||
}
|
||
syncCheckAllState();
|
||
updateSelectedCount();
|
||
});
|
||
}
|
||
|
||
if(downloadBtn){
|
||
downloadBtn.addEventListener('click', function(){
|
||
if(selectedIds.size === 0){
|
||
return;
|
||
}
|
||
const payload = { ids: Array.from(selectedIds) };
|
||
downloadBtn.disabled = true;
|
||
downloadBtn.textContent = 'Menyiapkan...';
|
||
fetch('/download-multiple', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
body: JSON.stringify(payload)
|
||
})
|
||
.then(async (res) => {
|
||
const contentType = res.headers.get('content-type') || '';
|
||
if(!res.ok || contentType.includes('application/json')){
|
||
const err = await res.json().catch(() => ({}));
|
||
throw new Error(err?.message || 'Gagal download file');
|
||
}
|
||
const blob = await res.blob();
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
const disposition = res.headers.get('content-disposition') || '';
|
||
const match = disposition.match(/filename="?([^"]+)"?/);
|
||
a.href = url;
|
||
a.download = match?.[1] || 'files.zip';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
window.URL.revokeObjectURL(url);
|
||
})
|
||
.catch(err => {
|
||
Swal.fire({ icon: 'error', title: 'Gagal', text: err.message || 'Gagal download file' });
|
||
})
|
||
.finally(() => {
|
||
downloadBtn.disabled = selectedIds.size === 0;
|
||
downloadBtn.textContent = 'Download Terpilih';
|
||
});
|
||
});
|
||
}
|
||
|
||
|
||
|
||
let colCount = 1;
|
||
$(document).ready(function() {
|
||
$('.unit_kerja').select2({
|
||
placeholder: '--- Pilih Unit Kerja ---',
|
||
allowClear: true,
|
||
width: '100%',
|
||
ajax: {
|
||
url : '/select-unit-kerja-mapping',
|
||
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-mapping/${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-4">
|
||
<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"></div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label fw-semibold">Nama Dokumen<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control"
|
||
name="data[${colCount}][nama_dokumen]"
|
||
placeholder="Contoh: 001/RS/IT/I/2026" required>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="form-label fw-semibold">Tanggal Terbit</label>
|
||
<input class="form-control"
|
||
type="date"
|
||
name="data[${colCount}][date_active]">
|
||
</div>
|
||
<div class="col-md-2 d-flex align-items-end">
|
||
<div class="form-check">
|
||
<input class="form-check-input toggle-expired"
|
||
type="checkbox"
|
||
id="hasExpired_${colCount}"
|
||
data-target="expiredField_${colCount}">
|
||
<label class="form-check-label" for="hasExpired_${colCount}">Ada Expired?</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 d-none" id="expiredField_${colCount}">
|
||
<label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
|
||
<input class="form-control" type="date" name="data[${colCount}][tgl_expired]">
|
||
</div>
|
||
<div class="col-md-5">
|
||
<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-mapping',
|
||
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: 0,
|
||
});
|
||
|
||
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')
|
||
let pegawai_id_entry = e.target.getAttribute('data-pegawai_id_entry')
|
||
|
||
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 ? 'Umum' : 'Internal Unit';
|
||
permEl.className = 'badge ' + (publicDoc ? 'bg-success' : 'bg-secondary');
|
||
}
|
||
const downloadBtn = document.getElementById('btn-download');
|
||
if (downloadBtn) {
|
||
downloadBtn.setAttribute('href', `/file-download/${idDirectory}`);
|
||
}
|
||
let previewBox = document.getElementById('file-preview');
|
||
previewBox.innerHTML = `<div id="pdfWrap" style="height:500px; overflow:auto; background:#f7f7f7; padding:8px;">
|
||
<div id="pdfPages"></div>
|
||
</div>
|
||
`;
|
||
openPreview(idDirectory);
|
||
const deleteWrapper = document.getElementById('deleteData');
|
||
|
||
if (Number(pegawai_id_entry) === Number(authPegawai)) {
|
||
deleteWrapper.classList.remove('d-none');
|
||
} else {
|
||
deleteWrapper.classList.add('d-none');
|
||
}
|
||
$("#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(`/full-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();
|
||
const modalInstance = bootstrap.Modal.getInstance(modalCreate);
|
||
modalInstance?.hide();
|
||
resetCreateForm();
|
||
fetchData()
|
||
submitBtn.prop('disabled', false).text('Simpan')
|
||
if(responseData.status_action === null || responseData.status_action === undefined){
|
||
Swal.fire({
|
||
icon: 'info',
|
||
title: 'Perlu Persetujuan',
|
||
text: 'Dokumen yang Anda upload butuh persetujuan dari atasan. Untuk melihatnya, kunjungi halaman Pengajuan File atau klik Tutup untuk tetap di sini.',
|
||
showCancelButton: true,
|
||
confirmButtonText: 'Ke Pengajuan File',
|
||
cancelButtonText: 'Tutup'
|
||
}).then((result) => {
|
||
if(result.isConfirmed){
|
||
window.location.href = '/pengajuan-file';
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
} 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')
|
||
}
|
||
});
|
||
});
|
||
|
||
function infoDok(e){
|
||
let fileUrl = $(e).data('file');
|
||
let noDokumen = $(e).data('no_dokumen')
|
||
let tanggalTerbit = $(e).data('tanggal_terbit')
|
||
let permissionFile = $(e).data('permission_file')
|
||
let fileName = $(e).data('fileName')
|
||
let pegawai_id_entry = $(e).data('pegawai_id_entry')
|
||
|
||
currentFile = fileUrl;
|
||
idDirectory = $(e).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 ? 'Umum' : 'Internal Unit';
|
||
permEl.className = 'badge ' + (publicDoc ? 'bg-success' : 'bg-secondary');
|
||
}
|
||
const downloadBtn = document.getElementById('btn-download');
|
||
if (downloadBtn) {
|
||
downloadBtn.setAttribute('href', `/file-download/${idDirectory}`);
|
||
}
|
||
let previewBox = document.getElementById('file-preview');
|
||
previewBox.innerHTML = `<div id="pdfWrap" style="height:500px; overflow:auto; background:#f7f7f7; padding:8px;">
|
||
<div id="pdfPages"></div>
|
||
</div>
|
||
`;
|
||
openPreview(idDirectory);
|
||
const deleteWrapper = document.getElementById('deleteData');
|
||
|
||
if (Number(pegawai_id_entry) === Number(authPegawai)) {
|
||
deleteWrapper.classList.remove('d-none');
|
||
} else {
|
||
deleteWrapper.classList.add('d-none');
|
||
}
|
||
$("#previewModal").modal('show')
|
||
}
|
||
</script>
|
||
@endsection
|