update form others
This commit is contained in:
Fiqh Pratama
@@ -66,16 +66,12 @@
|
||||
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="date" class="form-control" name="tanggal" id="tanggal" required value="{{ $form->tanggal }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Total <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="string" class="form-control" name="total" id="total" required value="{{ $form->total }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bukti Total <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="file" class="form-control" name="bukti_total" value="{{ $form->bukti_total }}">
|
||||
<label class="form-label">Total <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="string" class="form-control" name="total" id="total" required value="{{ $form->total }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Keterangan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
@@ -83,10 +79,108 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Update</button>
|
||||
<div class="col-12">
|
||||
<div class="mb-4">
|
||||
<label class="form-label mb-0">Lampiran Saat Ini</label>
|
||||
<p class="text-muted small mt-1 mb-2">Gunakan tombol preview untuk melihat lampiran yang sudah diunggah.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle" id="other-existing-attachments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%">Kategori</th>
|
||||
<th style="width: 35%">Nama File</th>
|
||||
<th style="width: 15%" class="text-center">Preview</th>
|
||||
<th style="width: 20%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($attachments as $attachment)
|
||||
<tr class="other-existing-attachment-row" data-attachment-id="{{ $attachment['id'] }}">
|
||||
<td>{{ $attachment['file_category'] ? ucwords(str_replace('_', ' ', $attachment['file_category'])) : '-' }}</td>
|
||||
<td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-secondary other-preview-existing-attachment"
|
||||
data-preview-url="{{ $attachment['preview_url'] }}"
|
||||
data-download-url="{{ $attachment['download_url'] }}"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-file-name="{{ $attachment['filename'] ?? basename($attachment['file_path']) }}">
|
||||
Preview
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="{{ $attachment['download_url'] }}"
|
||||
target="_blank"
|
||||
class="btn btn-sm btn-outline-primary mr-1">
|
||||
Download
|
||||
</a>
|
||||
@if($attachment['can_delete'])
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-danger other-delete-attachment"
|
||||
data-delete-url="{{ route('forms.other.attachments.destroy', [$form->id, $attachment['id']]) }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="other-existing-attachments-empty text-center text-muted">
|
||||
<td colspan="4">Belum ada lampiran.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<label class="form-label mb-0">Tambah Lampiran Baru</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="other-add-new-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Lampiran
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-muted small mt-1 mb-2">
|
||||
Maksimal 10 MB per file. File berformat <code>.exe</code>, <code>.dll</code>, <code>.sh</code>, <code>.bat</code>, <code>.cmd</code>, atau <code>.msi</code> tidak diperbolehkan.
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle" id="other-new-attachments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%">Kategori</th>
|
||||
<th style="width: 45%">Lampiran</th>
|
||||
<th style="width: 15%" class="text-center">Preview</th>
|
||||
<th style="width: 10%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="other-new-attachments-empty text-center text-muted">
|
||||
<td colspan="4">Belum ada lampiran baru.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary ml-2">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'otherExistingAttachmentPreviewModal',
|
||||
'title' => 'Preview Lampiran',
|
||||
])
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'otherNewAttachmentPreviewModal',
|
||||
'title' => 'Preview Lampiran',
|
||||
])
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
@@ -99,19 +193,354 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.', // Pemisah ribuan
|
||||
decimalCharacter: ',', // Karakter desimal (tidak digunakan karena tanpa desimal)
|
||||
currencySymbol: 'Rp.', // Simbol mata uang
|
||||
decimalPlaces: 0, // Tidak ada angka desimal
|
||||
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function (e) {
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
spinnerOverlay.classList.remove('d-none'); // Show overlay
|
||||
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function () {
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($otherAttachmentCategories ?? []));
|
||||
const blockedExtensions = ['exe', 'dll', 'sh', 'bat', 'cmd', 'msi'];
|
||||
const maxFileSizeBytes = 10 * 1024 * 1024;
|
||||
const existingEmptyRow = '<tr class="other-existing-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
|
||||
const newEmptyRow = '<tr class="other-new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>';
|
||||
let otherNewAttachmentIndex = 0;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, function (char) {
|
||||
return char.toUpperCase();
|
||||
});
|
||||
}
|
||||
|
||||
function detectPreviewType(extension) {
|
||||
const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||
if (images.indexOf(extension) !== -1) {
|
||||
return 'image';
|
||||
}
|
||||
if (extension === 'pdf') {
|
||||
return 'pdf';
|
||||
}
|
||||
return 'other';
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories.map(function (category) {
|
||||
return '<option value="' + category + '">' + escapeHtml(categoryToLabel(category)) + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const $box = $row.find('.other-new-attachment-inline-preview');
|
||||
$box.removeClass('bg-light').html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$box.addClass('bg-light').html(
|
||||
'<img src="' + source + '" class="img-thumbnail" style="width:100%;height:100%;object-fit:cover;" alt="Preview">'
|
||||
);
|
||||
} else if (type === 'pdf') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
|
||||
} else if (type === 'other') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-alt text-secondary fa-lg"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function resetNewAttachmentRowData($row, clearInput = true) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
|
||||
$row.removeData('objectUrl')
|
||||
.removeData('previewType')
|
||||
.removeData('previewSource')
|
||||
.removeData('previewFileName');
|
||||
|
||||
setInlinePreview($row, null, null);
|
||||
$row.find('.other-preview-new-attachment').addClass('d-none');
|
||||
$row.find('.other-new-preview-filename').text('');
|
||||
|
||||
if (clearInput) {
|
||||
$row.find('.other-new-attachment-file').val('');
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, options) {
|
||||
const settings = Object.assign({
|
||||
title: 'Lampiran',
|
||||
type: 'other',
|
||||
source: null,
|
||||
downloadUrl: null,
|
||||
fileName: 'Lampiran'
|
||||
}, options || {});
|
||||
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');
|
||||
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');
|
||||
|
||||
if (settings.type === 'image' && settings.source) {
|
||||
$image.attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (settings.type === 'pdf' && settings.source) {
|
||||
$object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else {
|
||||
const safeName = escapeHtml(settings.fileName || 'Lampiran');
|
||||
let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
|
||||
if (settings.downloadUrl) {
|
||||
message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
|
||||
}
|
||||
$placeholder.html(message);
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function refreshExistingEmptyState() {
|
||||
const $tbody = $('#other-existing-attachments-table tbody');
|
||||
if (!$tbody.find('.other-existing-attachment-row').length) {
|
||||
$tbody.html(existingEmptyRow);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshNewEmptyState() {
|
||||
const $tbody = $('#other-new-attachments-table tbody');
|
||||
if (!$tbody.find('.other-new-attachment-row').length) {
|
||||
$tbody.html(newEmptyRow);
|
||||
}
|
||||
}
|
||||
|
||||
function addOtherNewAttachmentRow() {
|
||||
const $tbody = $('#other-new-attachments-table tbody');
|
||||
|
||||
if ($tbody.find('.other-new-attachments-empty').length) {
|
||||
$tbody.empty();
|
||||
}
|
||||
|
||||
const index = otherNewAttachmentIndex++;
|
||||
const rowHtml = `
|
||||
<tr class="other-new-attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control other-new-attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${escapeHtml(categoryToLabel(''))}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="other-new-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white mr-2" style="width:56px;height:56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control other-new-attachment-file" name="attachments[${index}][file_path]">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 other-new-preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary other-preview-new-attachment d-none">
|
||||
Preview
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger other-remove-new-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
$tbody.append(rowHtml);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('#other-add-new-attachment-row').on('click', function () {
|
||||
addOtherNewAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.other-remove-new-attachment-row', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const $tbody = $('#other-new-attachments-table tbody');
|
||||
resetNewAttachmentRowData($row, true);
|
||||
$row.remove();
|
||||
refreshNewEmptyState();
|
||||
});
|
||||
|
||||
$(document).on('change', '.other-new-attachment-file', function () {
|
||||
const $input = $(this);
|
||||
const $row = $input.closest('tr');
|
||||
const previewButton = $row.find('.other-preview-new-attachment');
|
||||
const filenameHolder = $row.find('.other-new-preview-filename');
|
||||
|
||||
resetNewAttachmentRowData($row, false);
|
||||
filenameHolder.text('');
|
||||
|
||||
const file = this.files && this.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > maxFileSizeBytes) {
|
||||
alert('Ukuran file melebihi 10 MB.');
|
||||
$input.val('');
|
||||
return;
|
||||
}
|
||||
|
||||
const extension = (file.name.split('.').pop() || '').toLowerCase();
|
||||
if (blockedExtensions.indexOf(extension) !== -1) {
|
||||
alert('Tipe file tidak diperbolehkan.');
|
||||
$input.val('');
|
||||
return;
|
||||
}
|
||||
|
||||
filenameHolder.text(escapeHtml(file.name));
|
||||
|
||||
const previewType = detectPreviewType(extension);
|
||||
$row.data('previewType', previewType);
|
||||
$row.data('previewFileName', file.name);
|
||||
$row.data('previewSource', null);
|
||||
$row.removeData('objectUrl');
|
||||
|
||||
if (previewType === 'image') {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
const source = event.target.result;
|
||||
$row.data('previewSource', source);
|
||||
setInlinePreview($row, previewType, source);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else if (previewType === 'pdf') {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$row.data('previewSource', objectUrl);
|
||||
$row.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, previewType, null);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$row.data('previewSource', objectUrl);
|
||||
$row.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, 'other', null);
|
||||
}
|
||||
|
||||
previewButton.removeClass('d-none');
|
||||
});
|
||||
|
||||
$(document).on('click', '.other-preview-new-attachment', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const previewType = $row.data('previewType') || 'other';
|
||||
const previewSource = $row.data('previewSource') || null;
|
||||
const fileName = $row.data('previewFileName') || 'Lampiran';
|
||||
|
||||
if (previewType === 'image' || previewType === 'pdf') {
|
||||
openAttachmentModal('#otherNewAttachmentPreviewModal', {
|
||||
title: fileName,
|
||||
type: previewType,
|
||||
source: previewSource,
|
||||
fileName: fileName
|
||||
});
|
||||
} else if (previewSource) {
|
||||
window.open(previewSource, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.other-preview-existing-attachment', function () {
|
||||
const $button = $(this);
|
||||
const previewType = $button.data('preview-type') || 'other';
|
||||
const previewUrl = $button.data('preview-url') || null;
|
||||
const downloadUrl = $button.data('download-url') || null;
|
||||
const fileName = $button.data('file-name') || 'Lampiran';
|
||||
|
||||
if (previewType === 'image' || previewType === 'pdf') {
|
||||
if (!previewUrl) {
|
||||
if (downloadUrl) {
|
||||
window.open(downloadUrl, '_blank');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
openAttachmentModal('#otherExistingAttachmentPreviewModal', {
|
||||
title: fileName,
|
||||
type: previewType,
|
||||
source: previewUrl,
|
||||
downloadUrl: downloadUrl,
|
||||
fileName: fileName
|
||||
});
|
||||
} else {
|
||||
if (downloadUrl) {
|
||||
window.open(downloadUrl, '_blank');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.other-delete-attachment', function () {
|
||||
const $button = $(this);
|
||||
const deleteUrl = $button.data('delete-url');
|
||||
const $row = $button.closest('tr');
|
||||
|
||||
if (!deleteUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus lampiran?',
|
||||
text: 'Lampiran yang dihapus tidak dapat dikembalikan.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, hapus',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (!result.isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
type: 'DELETE',
|
||||
success: function (response) {
|
||||
$row.remove();
|
||||
refreshExistingEmptyState();
|
||||
Swal.fire('Berhasil', response?.message || 'Lampiran berhasil dihapus.', 'success');
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = xhr?.responseJSON?.message || 'Gagal menghapus lampiran.';
|
||||
Swal.fire('Error', message, 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
refreshExistingEmptyState();
|
||||
refreshNewEmptyState();
|
||||
addOtherNewAttachmentRow();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user