final upload form
This commit is contained in:
Fiqh Pratama
@@ -82,17 +82,45 @@
|
||||
<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="{{ old('total') }}">
|
||||
</div>
|
||||
<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="{{ old('bukti_total') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Keterangan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<textarea class="form-control" name="keterangan" required>{{ old('keterangan') }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Submit</button>
|
||||
<div class="col-12">
|
||||
<hr class="my-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Lampiran</h5>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="entertainment-add-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Attachment
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped mb-0" id="entertainment-new-attachments-table" data-next-index="0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
<th>File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 80px;" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="entertainment-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-2">
|
||||
Maksimum 10 MB per file. Tidak diperbolehkan: {{ implode(', ', $entertainmentBlockedExtensions ?? []) }}.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-right mt-4">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -123,4 +151,7 @@
|
||||
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
|
||||
});
|
||||
</script>
|
||||
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-modal')
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-scripts')
|
||||
@endsection
|
||||
|
||||
@@ -83,17 +83,103 @@
|
||||
<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">Bukti Total <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="file" class="form-control" name="bukti_total" value="{{ old('bukti_total') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Keterangan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<textarea class="form-control" name="keterangan" required>{{ $form->keterangan }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Update</button>
|
||||
<div class="col-12">
|
||||
<hr class="my-4">
|
||||
<h5 class="mb-3">Lampiran Saat Ini</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped mb-0" id="entertainment-existing-attachments-table">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th style="width: 25%;">Kategori</th>
|
||||
<th>Nama File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Download</th>
|
||||
<th style="width: 100px;" class="text-center">Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($attachments as $attachment)
|
||||
<tr class="entertainment-attachment-row">
|
||||
<td>{{ $attachment['category_label'] ?? '-' }}</td>
|
||||
<td>{{ $attachment['filename'] }}</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-secondary entertainment-preview-trigger"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-preview-source="{{ $attachment['preview_url'] ?? '' }}"
|
||||
data-download-url="{{ $attachment['download_url'] ?? '' }}"
|
||||
data-filename="{{ $attachment['filename'] }}">
|
||||
Preview
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['download_url']))
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener">Download</a>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['can_delete']))
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-danger entertainment-delete-existing-attachment"
|
||||
data-delete-url="{{ route('forms.entertainment.attachments.destroy', [$form->id, $attachment['id']]) }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="entertainment-empty-row">
|
||||
<td colspan="5" class="text-center text-muted">Belum ada attachment.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<hr class="my-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Tambah Lampiran Baru</h5>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="entertainment-add-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Attachment
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped mb-0" id="entertainment-new-attachments-table" data-next-index="0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
<th>File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 80px;" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="entertainment-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-2">
|
||||
Maksimum 10 MB per file. Tidak diperbolehkan: {{ implode(', ', $entertainmentBlockedExtensions ?? []) }}.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-right mt-4">
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -124,4 +210,7 @@
|
||||
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
|
||||
});
|
||||
</script>
|
||||
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-modal')
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-scripts')
|
||||
@endsection
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="modal fade" id="entertainmentAttachmentPreviewModal" tabindex="-1" role="dialog" aria-labelledby="entertainmentAttachmentPreviewModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mb-0" id="entertainmentAttachmentPreviewModalLabel">Preview Lampiran</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="entertainment-preview-image d-none text-center">
|
||||
<img src="" alt="Preview Lampiran" class="img-fluid">
|
||||
</div>
|
||||
<div class="entertainment-preview-pdf d-none">
|
||||
<object data="" type="application/pdf" width="100%" height="500px"></object>
|
||||
</div>
|
||||
<div class="entertainment-preview-fallback d-none text-center">
|
||||
<p class="mb-2">Preview tidak tersedia untuk file ini.</p>
|
||||
<button type="button" class="btn btn-primary entertainment-preview-download-direct">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+394
@@ -0,0 +1,394 @@
|
||||
@php
|
||||
$entertainmentAttachmentScriptConfig = [
|
||||
'blockedExtensions' => array_map('strtolower', $entertainmentBlockedExtensions ?? []),
|
||||
'categoryOptions' => $entertainmentAttachmentCategories ?? [],
|
||||
];
|
||||
@endphp
|
||||
<script>
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
const config = @json($entertainmentAttachmentScriptConfig);
|
||||
const categoryOptions = config.categoryOptions || {};
|
||||
const blockedExtensions = (config.blockedExtensions || []).map(function (ext) {
|
||||
return (ext || '').toString().toLowerCase();
|
||||
});
|
||||
const maxFileSizeBytes = 10 * 1024 * 1024; // 10 MB
|
||||
|
||||
let attachmentIndex = Number($('#entertainment-new-attachments-table').data('next-index')) || 0;
|
||||
|
||||
const previewModal = $('#entertainmentAttachmentPreviewModal');
|
||||
const imageWrapper = previewModal.find('.entertainment-preview-image');
|
||||
const pdfWrapper = previewModal.find('.entertainment-preview-pdf');
|
||||
const fallbackWrapper = previewModal.find('.entertainment-preview-fallback');
|
||||
const pdfObject = pdfWrapper.find('object');
|
||||
const modalImage = imageWrapper.find('img');
|
||||
const fallbackDownloadBtn = fallbackWrapper.find('.entertainment-preview-download-direct');
|
||||
|
||||
function showAlert(message, icon) {
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
icon: icon || 'error',
|
||||
title: icon === 'success' ? 'Berhasil' : 'Perhatian',
|
||||
text: message,
|
||||
});
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCategoryOptions(selectedValue) {
|
||||
let optionsHtml = '<option value="" disabled' + (selectedValue ? '' : ' selected') + '>Pilih kategori</option>';
|
||||
Object.keys(categoryOptions).forEach(function (value) {
|
||||
const label = categoryOptions[value];
|
||||
const selected = value === selectedValue ? ' selected' : '';
|
||||
optionsHtml += '<option value="' + value + '"' + selected + '>' + label + '</option>';
|
||||
});
|
||||
return optionsHtml;
|
||||
}
|
||||
|
||||
function ensureEmptyRowState($tbody) {
|
||||
if ($tbody.find('.entertainment-attachment-row').length === 0) {
|
||||
$tbody.html(
|
||||
'<tr class="entertainment-empty-row">' +
|
||||
'<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>' +
|
||||
'</tr>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function cleanupPreviewButton($button) {
|
||||
const objectUrl = $button.data('objectUrl');
|
||||
if (objectUrl) {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}
|
||||
$button
|
||||
.data('previewType', null)
|
||||
.data('previewSource', null)
|
||||
.data('downloadUrl', null)
|
||||
.data('objectUrl', null)
|
||||
.data('filename', null);
|
||||
}
|
||||
|
||||
function resetAttachmentRow($row) {
|
||||
const $previewButton = $row.find('.entertainment-preview-trigger');
|
||||
cleanupPreviewButton($previewButton);
|
||||
$previewButton.addClass('d-none');
|
||||
$row.find('.entertainment-selected-filename').text('');
|
||||
$row.find('.entertainment-new-attachment-file').val('');
|
||||
}
|
||||
|
||||
function getFileExtension(filename) {
|
||||
const parts = filename.split('.');
|
||||
return parts.length > 1 ? parts.pop().toLowerCase() : '';
|
||||
}
|
||||
|
||||
function getPreviewType(extension) {
|
||||
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].indexOf(extension) !== -1) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (extension === 'pdf') {
|
||||
return 'pdf';
|
||||
}
|
||||
|
||||
return 'other';
|
||||
}
|
||||
|
||||
function validateFile(file) {
|
||||
if (!file) {
|
||||
return { valid: false, message: 'File tidak ditemukan.' };
|
||||
}
|
||||
|
||||
if (file.size > maxFileSizeBytes) {
|
||||
return { valid: false, message: 'Ukuran file melebihi 10 MB.' };
|
||||
}
|
||||
|
||||
const extension = getFileExtension(file.name);
|
||||
if (blockedExtensions.indexOf(extension) !== -1) {
|
||||
return { valid: false, message: 'Tipe file tidak diperbolehkan.' };
|
||||
}
|
||||
|
||||
return { valid: true, message: '' };
|
||||
}
|
||||
|
||||
function downloadFile(url, filename) {
|
||||
if (!url) {
|
||||
showAlert('File tidak tersedia untuk diunduh.');
|
||||
return;
|
||||
}
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
if (filename) {
|
||||
link.download = filename;
|
||||
}
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
function showPreviewModal() {
|
||||
if (!previewModal.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof previewModal.modal === 'function') {
|
||||
previewModal.modal('show');
|
||||
return true;
|
||||
}
|
||||
|
||||
if (window.bootstrap && typeof window.bootstrap.Modal === 'function') {
|
||||
let modalInstance = null;
|
||||
|
||||
if (typeof window.bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
modalInstance = window.bootstrap.Modal.getOrCreateInstance(previewModal[0]);
|
||||
} else {
|
||||
modalInstance = new window.bootstrap.Modal(previewModal[0]);
|
||||
}
|
||||
|
||||
if (modalInstance && typeof modalInstance.show === 'function') {
|
||||
modalInstance.show();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function openPreviewModal(config) {
|
||||
const filename = config.filename || 'Lampiran';
|
||||
modalImage.attr('src', '');
|
||||
pdfObject.attr('data', '');
|
||||
fallbackDownloadBtn.data('downloadUrl', null).data('filename', filename);
|
||||
|
||||
imageWrapper.addClass('d-none');
|
||||
pdfWrapper.addClass('d-none');
|
||||
fallbackWrapper.addClass('d-none');
|
||||
|
||||
if (config.type === 'image' && config.source) {
|
||||
modalImage.attr('src', config.source);
|
||||
imageWrapper.removeClass('d-none');
|
||||
} else if (config.type === 'pdf' && config.source) {
|
||||
pdfObject.attr('data', config.source);
|
||||
pdfWrapper.removeClass('d-none');
|
||||
} else {
|
||||
fallbackDownloadBtn.data('downloadUrl', config.downloadUrl || null);
|
||||
fallbackWrapper.removeClass('d-none');
|
||||
}
|
||||
|
||||
$('#entertainmentAttachmentPreviewModalLabel').text(filename);
|
||||
const isModalShown = showPreviewModal();
|
||||
|
||||
if (!isModalShown) {
|
||||
if (config.downloadUrl) {
|
||||
downloadFile(config.downloadUrl, filename);
|
||||
} else {
|
||||
showAlert('Preview tidak tersedia tanpa dukungan Bootstrap modal.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fallbackDownloadBtn.on('click', function () {
|
||||
const url = $(this).data('downloadUrl');
|
||||
const filename = $(this).data('filename');
|
||||
downloadFile(url, filename);
|
||||
});
|
||||
|
||||
window.addAttachmentRow = function () {
|
||||
const $table = $('#entertainment-new-attachments-table');
|
||||
if (!$table.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $tbody = $table.find('tbody');
|
||||
if ($tbody.find('.entertainment-empty-row').length) {
|
||||
$tbody.empty();
|
||||
}
|
||||
|
||||
const index = attachmentIndex++;
|
||||
const optionsHtml = renderCategoryOptions(null);
|
||||
|
||||
const rowHtml =
|
||||
'<tr class="entertainment-attachment-row" data-index="' + index + '">' +
|
||||
'<td>' +
|
||||
'<select class="form-control" name="attachments[' + index + '][file_category]">' +
|
||||
optionsHtml +
|
||||
'</select>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<input type="file" class="form-control entertainment-new-attachment-file" name="attachments[' + index + '][file_path]">' +
|
||||
'<small class="form-text text-muted entertainment-selected-filename"></small>' +
|
||||
'</td>' +
|
||||
'<td class="text-center">' +
|
||||
'<button type="button" class="btn btn-sm btn-outline-secondary entertainment-preview-trigger d-none">' +
|
||||
'Preview' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'<td class="text-center">' +
|
||||
'<button type="button" class="btn btn-sm btn-outline-danger entertainment-remove-attachment-row">' +
|
||||
'<i class="fas fa-trash"></i>' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
|
||||
$tbody.append(rowHtml);
|
||||
};
|
||||
|
||||
window.removeAttachmentRow = function (trigger) {
|
||||
const $row = $(trigger).closest('tr');
|
||||
const $tbody = $row.closest('tbody');
|
||||
resetAttachmentRow($row);
|
||||
$row.remove();
|
||||
ensureEmptyRowState($tbody);
|
||||
};
|
||||
|
||||
window.previewAttachment = function (trigger) {
|
||||
const $button = $(trigger);
|
||||
const type = $button.data('previewType');
|
||||
const source = $button.data('previewSource');
|
||||
const downloadUrl = $button.data('downloadUrl');
|
||||
const filename = $button.data('filename');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
openPreviewModal({ type: 'image', source: source, filename: filename });
|
||||
return;
|
||||
}
|
||||
|
||||
if (type === 'pdf' && source) {
|
||||
openPreviewModal({ type: 'pdf', source: source, filename: filename });
|
||||
return;
|
||||
}
|
||||
|
||||
if (downloadUrl) {
|
||||
downloadFile(downloadUrl, filename);
|
||||
return;
|
||||
}
|
||||
|
||||
showAlert('Preview tidak tersedia untuk lampiran ini.');
|
||||
};
|
||||
|
||||
$(document).on('change', '.entertainment-new-attachment-file', function () {
|
||||
const file = this.files && this.files[0];
|
||||
const $row = $(this).closest('tr');
|
||||
const $previewButton = $row.find('.entertainment-preview-trigger');
|
||||
|
||||
cleanupPreviewButton($previewButton);
|
||||
$previewButton.addClass('d-none');
|
||||
$row.find('.entertainment-selected-filename').text('');
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validation = validateFile(file);
|
||||
if (!validation.valid) {
|
||||
showAlert(validation.message);
|
||||
$(this).val('');
|
||||
return;
|
||||
}
|
||||
|
||||
const filename = file.name;
|
||||
$row.find('.entertainment-selected-filename').text(filename);
|
||||
|
||||
const extension = getFileExtension(filename);
|
||||
const previewType = getPreviewType(extension);
|
||||
|
||||
$previewButton.data('previewType', previewType);
|
||||
$previewButton.data('filename', filename);
|
||||
|
||||
if (previewType === 'image') {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
$previewButton.data('previewSource', event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else if (previewType === 'pdf') {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$previewButton.data('previewSource', objectUrl);
|
||||
$previewButton.data('downloadUrl', objectUrl);
|
||||
$previewButton.data('objectUrl', objectUrl);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$previewButton.data('downloadUrl', objectUrl);
|
||||
$previewButton.data('objectUrl', objectUrl);
|
||||
|
||||
// Non-media files should trigger download immediately on preview click.
|
||||
}
|
||||
|
||||
$previewButton.removeClass('d-none');
|
||||
});
|
||||
|
||||
$(document).on('click', '.entertainment-preview-trigger', function () {
|
||||
previewAttachment(this);
|
||||
});
|
||||
|
||||
$(document).on('click', '#entertainment-add-attachment-row', function () {
|
||||
addAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.entertainment-remove-attachment-row', function () {
|
||||
removeAttachmentRow(this);
|
||||
});
|
||||
|
||||
$(document).on('click', '.entertainment-delete-existing-attachment', function () {
|
||||
const $button = $(this);
|
||||
const deleteUrl = $button.data('deleteUrl');
|
||||
const $row = $button.closest('tr');
|
||||
|
||||
if (!deleteUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
const proceed = function () {
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
method: 'DELETE',
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function (response) {
|
||||
showAlert(response.message || 'Attachment berhasil dihapus.', 'success');
|
||||
$row.remove();
|
||||
ensureEmptyRowState($('#entertainment-existing-attachments-table tbody'));
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal menghapus attachment.';
|
||||
showAlert(message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
title: 'Hapus lampiran?',
|
||||
text: 'Lampiran akan dihapus secara permanen.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, hapus',
|
||||
cancelButtonText: 'Batal',
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
proceed();
|
||||
}
|
||||
});
|
||||
} else if (confirm('Hapus lampiran ini?')) {
|
||||
proceed();
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
const $newAttachmentsTable = $('#entertainment-new-attachments-table');
|
||||
if ($newAttachmentsTable.length) {
|
||||
const $tbody = $newAttachmentsTable.find('tbody');
|
||||
if (!$tbody.find('.entertainment-attachment-row').length) {
|
||||
addAttachmentRow();
|
||||
}
|
||||
}
|
||||
|
||||
ensureEmptyRowState($('#entertainment-existing-attachments-table tbody'));
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
@@ -66,16 +66,58 @@
|
||||
<label class="form-label">Total</label>
|
||||
<input type="string" class="form-control" name="total" id="total" readonly value="{{ $form->total }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bukti Total</label><br>
|
||||
<a href="{{ $form->bukti_total }}" target="_blank">Lihat Bukti</a>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Keterangan</label>
|
||||
<textarea class="form-control" name="keterangan" readonly>{{ $form->keterangan }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<hr class="my-4">
|
||||
<h5 class="mb-3">Lampiran</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped mb-0" id="entertainment-existing-attachments-table">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
<th>Nama File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Download</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($attachments ?? [] as $attachment)
|
||||
<tr class="entertainment-attachment-row">
|
||||
<td>{{ $attachment['category_label'] ?? '-' }}</td>
|
||||
<td>{{ $attachment['filename'] }}</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-secondary entertainment-preview-trigger"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-preview-source="{{ $attachment['preview_url'] ?? '' }}"
|
||||
data-download-url="{{ $attachment['download_url'] ?? '' }}"
|
||||
data-filename="{{ $attachment['filename'] }}">
|
||||
Preview
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['download_url']))
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener">Download</a>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="entertainment-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Status</label>
|
||||
@@ -433,4 +475,7 @@
|
||||
$('#total').val('0'); // Reset total to 0
|
||||
});
|
||||
</script>
|
||||
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-modal')
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-scripts')
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user