itdept/expense
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stage file upload an

Browse Source
This commit is contained in:
Fiqh Pratama
2025-10-13 14:55:46 +07:00
parent dd5dbcab8f
commit 76d4aa9b90
9 changed files with 1081 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/backend/components/attachment-preview-modal.blade.php
+20
View File
@@ -0,0 +1,20 @@
@props([
'modalId',
'title' => 'Attachment Preview',
])
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ $title }} - <span class="attachment-preview-modal-title"></span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="img-fluid d-none attachment-preview-image" alt="Attachment preview">
<object class="w-100 d-none attachment-preview-object" style="min-height: 480px;" type="application/pdf"></object>
<div class="text-center text-muted attachment-preview-placeholder">Tidak ada file untuk ditampilkan.</div>
</div>
</div>
</div>
</div>
resources/views/backend/pages/forms/upcountry/create.blade.php
+269 -39
View File
@@ -1,4 +1,4 @@
@extends('layouts.app')
@extends('layouts.app')
@section('title')
Dashboard
@@ -74,10 +74,6 @@
<label class="form-label">Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="allowance" id="allowance" value="{{ old('allowance') }}">
</div>
<div class="mb-3">
<label class="form-label">Bukti Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_allowance" value="{{ old('bukti_allowance') }}">
</div>
</div>
<div class="col-lg-6">
@@ -85,25 +81,44 @@
<label class="form-label">Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ old('transport_dalkot') }}">
</div>
<div class="mb-3">
<label class="form-label">Bukti Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_transport_dalkot" value="{{ old('bukti_transport_dalkot') }}">
</div>
<div class="mb-3">
<label class="form-label">Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ old('transport_ankot') }}">
</div>
<div class="mb-3">
<label class="form-label">Bukti Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_transport_ankot" value="{{ old('bukti_transport_ankot') }}">
</div>
<div class="mb-3">
<label class="form-label">Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="hotel" id="hotel" value="{{ old('hotel') }}">
</div>
</div>
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Bukti Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_hotel" value="{{ old('bukti_hotel') }}">
<div class="d-flex align-items-center justify-content-between">
<label class="form-label mb-0">Attachments</label>
<button type="button" class="btn btn-outline-primary btn-sm" id="add-attachment-row">
<i class="fas fa-plus me-1"></i> Add Attachment
</button>
</div>
<p class="text-muted small mt-1 mb-2">
Allowed files: JPG, JPEG, PNG, PDF. Max size 5 MB per file.
</p>
<div class="table-responsive">
<table class="table table-bordered align-middle" id="attachments-table">
<thead class="table-light">
<tr>
<th style="width: 30%">File Category</th>
<th style="width: 45%">Attachment</th>
<th style="width: 15%" class="text-center">Preview</th>
<th style="width: 10%" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="attachments-empty text-center text-muted">
<td colspan="4">Belum ada lampiran ditambahkan.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@@ -118,6 +133,22 @@
</div>
</form>
<div class="modal fade" id="newAttachmentPreviewModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Attachment Preview - <span id="newAttachmentPreviewTitle"></span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="newAttachmentPreviewImage" class="img-fluid d-none" alt="Attachment preview">
<iframe id="newAttachmentPreviewPdf" class="w-100 d-none" style="min-height: 480px;" frameborder="0"></iframe>
<div id="newAttachmentPreviewPlaceholder" class="text-center text-muted">Tidak ada file untuk ditampilkan.</div>
</div>
</div>
</div>
</div>
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
@@ -132,41 +163,240 @@
<script>
new AutoNumeric('#allowance', {
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
});
new AutoNumeric('#transport_dalkot', {
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
});
new AutoNumeric('#transport_ankot', {
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
});
new AutoNumeric('#hotel', {
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 attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategories ?? []));
const fileAccept = '.jpg,.jpeg,.png,.pdf';
let attachmentIndex = 0;
function categoryToLabel(value) {
if (!value) {
return 'Pilih Kategori';
}
return value
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase());
}
function buildCategoryOptions() {
return attachmentCategories
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
.join('');
}
function resetInlinePreview($row) {
$row
.find('.attachment-inline-preview')
.removeClass('bg-light')
.html('<i class="fas fa-file-upload text-muted"></i>');
}
function clearRowData($row) {
const existingUrl = $row.data('objectUrl');
if (existingUrl) {
URL.revokeObjectURL(existingUrl);
}
$row.removeData('objectUrl');
$row.removeData('previewType');
$row.removeData('previewSource');
resetInlinePreview($row);
$row.find('.preview-new-attachment').addClass('d-none');
$row.find('.preview-filename').text('');
}
function addAttachmentRow() {
const attachmentTableBody = $('#attachments-table tbody');
const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;
if (attachmentTableBody.find('.attachments-empty').length) {
attachmentTableBody.empty();
}
const index = attachmentIndex++;
const row = $(`
<tr class="attachment-row" data-index="${index}">
<td>
<select class="form-select attachment-category" name="attachments[${index}][file_category]" required>
<option value="">${categoryToLabel('')}</option>
${buildCategoryOptions()}
</select>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
<i class="fas fa-file-upload text-muted"></i>
</div>
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}">
</div>
<div class="small text-muted mt-1 preview-filename"></div>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none" data-modal="#newAttachmentPreviewModal">
Preview
</button>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
`);
attachmentTableBody.append(row);
}
function removeAttachmentRow(button) {
const $row = $(button).closest('tr');
const attachmentTableBody = $('#attachments-table tbody');
const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;
clearRowData($row);
$row.remove();
if (!attachmentTableBody.find('.attachment-row').length) {
attachmentTableBody.append(emptyRowMarkup);
}
}
function setInlinePreview($row, type, source) {
const previewBox = $row.find('.attachment-inline-preview');
if (type === 'image' && source) {
previewBox
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Preview image">`)
.addClass('bg-light');
} else if (type === 'pdf') {
previewBox
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>')
.addClass('bg-light');
} else {
resetInlinePreview($row);
}
}
function openAttachmentModal(modalSelector, title, type, source) {
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(title || 'Attachment');
$image.addClass('d-none').attr('src', '');
$object.addClass('d-none').attr('data', '').attr('src', '');
$placeholder.removeClass('d-none');
if (type === 'image' && source) {
$image.attr('src', source).removeClass('d-none');
$placeholder.addClass('d-none');
} else if (type === 'pdf' && source) {
$object.attr('data', source).attr('src', source).removeClass('d-none');
$placeholder.addClass('d-none');
}
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
} else {
$modal.modal('show');
}
}
function previewFile(input) {
const $input = $(input);
const $row = $input.closest('tr');
const previewButton = $row.find('.preview-new-attachment');
const filenameHolder = $row.find('.preview-filename');
clearRowData($row);
const file = input.files && input.files[0];
if (!file) {
return;
}
filenameHolder.text(file.name);
const extension = file.name.split('.').pop().toLowerCase();
if (['jpg', 'jpeg', 'png'].includes(extension)) {
const reader = new FileReader();
reader.onload = function (event) {
const source = event.target.result;
$row.data('previewType', 'image');
$row.data('previewSource', source);
setInlinePreview($row, 'image', source);
previewButton.removeClass('d-none');
};
reader.readAsDataURL(file);
} else {
const objectUrl = URL.createObjectURL(file);
$row.data('previewType', 'pdf');
$row.data('previewSource', objectUrl);
$row.data('objectUrl', objectUrl);
setInlinePreview($row, 'pdf');
previewButton.removeClass('d-none');
}
}
$(function () {
const spinnerOverlay = $('#loading-spinner-overlay');
$('#expense-form').on('submit', function () {
spinnerOverlay.removeClass('d-none').addClass('d-flex');
});
$('#add-attachment-row').on('click', function () {
addAttachmentRow();
});
$(document).on('click', '.remove-attachment-row', function () {
removeAttachmentRow(this);
});
$(document).on('change', '.attachment-file', function () {
previewFile(this);
});
$(document).on('click', '.preview-new-attachment', function () {
const $row = $(this).closest('tr');
const previewType = $row.data('previewType');
const previewSource = $row.data('previewSource');
const category = categoryToLabel($row.find('.attachment-category').val());
const modalSelector = $(this).data('modal') || '#newAttachmentPreviewModal';
openAttachmentModal(modalSelector, category, previewType, previewSource);
});
});
</script>
@endsection
resources/views/backend/pages/forms/upcountry/edit.blade.php
+397 -38
View File
@@ -6,6 +6,7 @@
@section('admin-content')
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
@@ -75,10 +76,6 @@
<label class="form-label">Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="allowance" id="allowance" value="{{ $form->allowance }}">
</div>
<div class="mb-3">
<label class="form-label">Bukti Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_allowance" value="{{ old('bukti_allowance') }}">
</div>
</div>
<div class="col-lg-6">
@@ -86,25 +83,104 @@
<label class="form-label">Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ $form->transport_dalkot }}">
</div>
<div class="mb-3">
<label class="form-label">Bukti Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_transport_dalkot" value="{{ old('bukti_transport_dalkot') }}">
</div>
<div class="mb-3">
<label class="form-label">Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ $form->transport_ankot }}">
</div>
<div class="mb-3">
<label class="form-label">Bukti Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_transport_ankot" value="{{ old('bukti_transport_ankot') }}">
</div>
<div class="mb-3">
<label class="form-label">Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="string" class="form-control" name="hotel" id="hotel" value="{{ $form->hotel }}">
</div>
</div>
<div class="col-lg-12">
<div class="mb-4">
<label class="form-label mb-0">Existing Attachments</label>
<p class="text-muted small mt-1 mb-2">Preview, download, or delete attachments that were previously uploaded.</p>
<div class="table-responsive">
<table class="table table-bordered align-middle" id="existing-attachments-table">
<thead class="table-light">
<tr>
<th style="width: 30%">File Category</th>
<th style="width: 30%">Filename</th>
<th style="width: 15%" class="text-center">Preview</th>
<th style="width: 15%" class="text-center">Download</th>
<th style="width: 10%" class="text-center">Action</th>
</tr>
</thead>
<tbody>
@forelse ($attachments as $attachment)
@php
$categoryValue = $attachment['file_category'] ?? null;
$categoryLabel = $categoryValue ? ucwords(str_replace('_', ' ', $categoryValue)) : '-';
@endphp
<tr data-attachment-id="{{ $attachment['id'] }}">
<td>{{ $categoryLabel }}</td>
<td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
<td class="text-center">
<button type="button"
class="btn btn-sm btn-outline-secondary preview-existing-attachment"
data-preview-url="{{ $attachment['preview_url'] }}"
data-download-url="{{ $attachment['download_url'] }}"
data-preview-type="{{ $attachment['preview_type'] }}"
data-category="{{ $categoryLabel }}">
Preview
</button>
</td>
<td class="text-center">
<a href="{{ $attachment['download_url'] }}"
target="_blank"
class="btn btn-sm btn-outline-primary">
Download
</a>
</td>
<td class="text-center">
<button type="button"
class="btn btn-sm btn-outline-danger delete-attachment"
data-delete-url="{{ route('forms.up-country.attachments.destroy', [$form->id, $attachment['id']]) }}">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
@empty
<tr class="existing-attachments-empty text-center text-muted">
<td colspan="5">Belum ada lampiran tersimpan.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Bukti Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
<input type="file" class="form-control" name="bukti_hotel" value="{{ old('bukti_hotel') }}">
<div class="d-flex align-items-center justify-content-between">
<label class="form-label mb-0">Add New Attachments</label>
<button type="button" class="btn btn-outline-primary btn-sm" id="add-new-attachment-row">
<i class="fas fa-plus me-1"></i> Add Attachment
</button>
</div>
<p class="text-muted small mt-1 mb-2">
Allowed files: JPG, JPEG, PNG, PDF. Max size 5 MB per file.
</p>
<div class="table-responsive">
<table class="table table-bordered align-middle" id="new-attachments-table">
<thead class="table-light">
<tr>
<th style="width: 30%">File Category</th>
<th style="width: 45%">Attachment</th>
<th style="width: 15%" class="text-center">Preview</th>
<th style="width: 10%" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="new-attachments-empty text-center text-muted">
<td colspan="4">Belum ada lampiran baru.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@@ -119,6 +195,16 @@
</div>
</form>
@include('backend.components.attachment-preview-modal', [
'modalId' => 'existingAttachmentPreviewModal',
'title' => 'Attachment Preview',
])
@include('backend.components.attachment-preview-modal', [
'modalId' => 'newAttachmentPreviewModal',
'title' => 'Attachment Preview',
])
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
@@ -133,41 +219,314 @@
<script>
new AutoNumeric('#allowance', {
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
});
new AutoNumeric('#transport_dalkot', {
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
});
new AutoNumeric('#transport_ankot', {
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
});
new AutoNumeric('#hotel', {
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 attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategories ?? []));
const fileAccept = '.jpg,.jpeg,.png,.pdf';
let attachmentIndex = 0;
let newAttachmentsTableBody;
let existingAttachmentsTableBody;
let emptyNewRowMarkup = '';
let emptyExistingRowMarkup = '';
function categoryToLabel(value) {
if (!value) {
return 'Pilih Kategori';
}
return value
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase());
}
function buildCategoryOptions() {
return attachmentCategories
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
.join('');
}
function resetInlinePreview($row) {
$row
.find('.attachment-inline-preview')
.removeClass('bg-light')
.html('<i class="fas fa-file-upload text-muted"></i>');
}
function clearRowData($row) {
const existingUrl = $row.data('objectUrl');
if (existingUrl) {
URL.revokeObjectURL(existingUrl);
}
$row.removeData('objectUrl');
$row.removeData('previewType');
$row.removeData('previewSource');
resetInlinePreview($row);
$row.find('.preview-new-attachment').addClass('d-none');
$row.find('.preview-filename').text('');
}
function addAttachmentRow() {
if (!newAttachmentsTableBody) {
return;
}
if (newAttachmentsTableBody.find('.new-attachments-empty').length) {
newAttachmentsTableBody.empty();
}
const index = attachmentIndex++;
const row = $(`
<tr class="attachment-row" data-index="${index}">
<td>
<select class="form-select attachment-category" name="attachments[${index}][file_category]" required>
<option value="">${categoryToLabel('')}</option>
${buildCategoryOptions()}
</select>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
<i class="fas fa-file-upload text-muted"></i>
</div>
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}">
</div>
<div class="small text-muted mt-1 preview-filename"></div>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none">
Preview
</button>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
`);
newAttachmentsTableBody.append(row);
}
function removeAttachmentRow(button) {
if (!newAttachmentsTableBody) {
return;
}
const $row = $(button).closest('tr');
clearRowData($row);
$row.remove();
if (!newAttachmentsTableBody.find('.attachment-row').length) {
newAttachmentsTableBody.html(emptyNewRowMarkup);
}
}
function setInlinePreview($row, type, source) {
const previewBox = $row.find('.attachment-inline-preview');
if (type === 'image' && source) {
previewBox
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Preview image">`)
.addClass('bg-light');
} else if (type === 'pdf') {
previewBox
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>')
.addClass('bg-light');
} else {
resetInlinePreview($row);
}
}
function openAttachmentModal(modalSelector, title, type, source) {
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(title || 'Attachment');
$image.addClass('d-none').attr('src', '');
$object.addClass('d-none').attr('data', '').attr('src', '');
$placeholder.removeClass('d-none');
if (type === 'image' && source) {
$image.attr('src', source).removeClass('d-none');
$placeholder.addClass('d-none');
} else if (type === 'pdf' && source) {
$object.attr('data', source).attr('src', source).removeClass('d-none');
$placeholder.addClass('d-none');
}
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
} else {
$modal.modal('show');
}
}
function previewFile(input) {
const $input = $(input);
const $row = $input.closest('tr');
const previewButton = $row.find('.preview-new-attachment');
const filenameHolder = $row.find('.preview-filename');
clearRowData($row);
const file = input.files && input.files[0];
if (!file) {
return;
}
filenameHolder.text(file.name);
const extension = file.name.split('.').pop().toLowerCase();
if (['jpg', 'jpeg', 'png'].includes(extension)) {
const reader = new FileReader();
reader.onload = function (event) {
const source = event.target.result;
$row.data('previewType', 'image');
$row.data('previewSource', source);
setInlinePreview($row, 'image', source);
previewButton.removeClass('d-none');
};
reader.readAsDataURL(file);
} else {
const objectUrl = URL.createObjectURL(file);
$row.data('previewType', 'pdf');
$row.data('previewSource', objectUrl);
$row.data('objectUrl', objectUrl);
setInlinePreview($row, 'pdf');
previewButton.removeClass('d-none');
}
}
$(function () {
const spinnerOverlay = $('#loading-spinner-overlay');
$('#expense-form').on('submit', function () {
spinnerOverlay.removeClass('d-none').addClass('d-flex');
});
newAttachmentsTableBody = $('#new-attachments-table tbody');
existingAttachmentsTableBody = $('#existing-attachments-table tbody');
emptyNewRowMarkup = `<tr class="new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>`;
emptyExistingRowMarkup = `<tr class="existing-attachments-empty text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></tr>`;
const csrfToken = $('meta[name="csrf-token"]').attr('content');
if (csrfToken) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': csrfToken
}
});
}
$('#add-new-attachment-row').on('click', function () {
addAttachmentRow();
});
$(document).on('click', '.remove-attachment-row', function () {
removeAttachmentRow(this);
});
$(document).on('change', '.attachment-file', function () {
previewFile(this);
});
$(document).on('click', '.preview-new-attachment', function () {
const $row = $(this).closest('tr');
const previewType = $row.data('previewType');
const previewSource = $row.data('previewSource');
const category = categoryToLabel($row.find('.attachment-category').val());
openAttachmentModal('#newAttachmentPreviewModal', category, previewType, previewSource);
});
$(document).on('click', '.preview-existing-attachment', function () {
const button = $(this);
const previewType = button.data('preview-type');
const previewUrl = button.data('preview-url');
const downloadUrl = button.data('download-url');
const category = button.data('category') || 'Attachment';
if (!previewUrl) {
if (downloadUrl) {
window.open(downloadUrl, '_blank');
}
return;
}
openAttachmentModal('#existingAttachmentPreviewModal', category, previewType, previewUrl);
});
$(document).on('click', '.delete-attachment', function () {
const button = $(this);
const deleteUrl = button.data('delete-url');
const $row = button.closest('tr');
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();
if (!existingAttachmentsTableBody.find('tr').not('.existing-attachments-empty').length) {
existingAttachmentsTableBody.html(emptyExistingRowMarkup);
}
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');
}
});
});
});
});
</script>
@endsection
resources/views/backend/pages/forms/upcountry/view.blade.php
+101 -17
View File
@@ -82,28 +82,63 @@
<input type="text" class="form-control" name="status" value="{{ $form->status }}" readonly>
</div>
<div class="mb-3">
<label class="form-label">Bukti Allowance</label><br>
<a href="{{ $form->bukti_allowance }}" target="_blank">Lihat Bukti</a>
</div>
<div class="mb-3">
<label class="form-label">Bukti Transport Dalam Kota</label><br>
<a href="{{ $form->bukti_transport_dalkot }}" target="_blank">Lihat Bukti</a>
</div>
<div class="mb-3">
<label class="form-label">Bukti Transport Antar Kota</label><br>
<a href="{{ $form->bukti_transport_ankot }}" target="_blank">Lihat Bukti</a>
</div>
<div class="mb-3">
<label class="form-label">Bukti Hotel</label><br>
<a href="{{ $form->bukti_hotel }}" target="_blank">Lihat Bukti</a>
</div>
<div class="mb-3">
<label class="form-label">UC Plan</label><br>
<a href="{{ $form->uc_plan }}" target="_blank">Lihat Bukti</a>
</div>
</div>
<div class="col-12">
<div class="mb-4">
<label class="form-label">Lampiran</label>
<div class="table-responsive">
<table class="table table-bordered align-middle">
<thead class="table-light">
<tr>
<th style="width: 30%">Kategori</th>
<th style="width: 40%">Nama File</th>
<th style="width: 15%" class="text-center">Preview</th>
<th style="width: 15%" class="text-center">Download</th>
</tr>
</thead>
<tbody>
@forelse ($attachments as $attachment)
@php
$categoryValue = $attachment['file_category'] ?? null;
$categoryLabel = $categoryValue ? ucwords(str_replace('_', ' ', $categoryValue)) : '-';
@endphp
<tr>
<td>{{ $categoryLabel }}</td>
<td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
<td class="text-center">
<button type="button"
class="btn btn-sm btn-outline-secondary preview-attachment"
data-preview-url="{{ $attachment['preview_url'] }}"
data-download-url="{{ $attachment['download_url'] }}"
data-preview-type="{{ $attachment['preview_type'] }}"
data-category="{{ $categoryLabel }}">
Preview
</button>
</td>
<td class="text-center">
<a href="{{ $attachment['download_url'] }}"
target="_blank"
class="btn btn-sm btn-outline-primary">
Download
</a>
</td>
</tr>
@empty
<tr class="text-center text-muted">
<td colspan="4">Tidak ada lampiran.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12">
<a href="{{ route('forms.up-country') }}" class="btn btn-secondary">Kembali</a>
@if (auth()->user()->can('approval.approve') && $form->status == 'On Progress')
@@ -133,6 +168,11 @@
</div>
</section>
<section>
@include('backend.components.attachment-preview-modal', [
'modalId' => 'viewAttachmentPreviewModal',
'title' => 'Attachment Preview',
])
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="approveModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
@@ -408,6 +448,49 @@
</script>
<script>
function openAttachmentModal(modalSelector, title, type, source) {
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(title || 'Attachment');
$image.addClass('d-none').attr('src', '');
$object.addClass('d-none').attr('data', '').attr('src', '');
$placeholder.removeClass('d-none');
if (type === 'image' && source) {
$image.attr('src', source).removeClass('d-none');
$placeholder.addClass('d-none');
} else if (type === 'pdf' && source) {
$object.attr('data', source).attr('src', source).removeClass('d-none');
$placeholder.addClass('d-none');
}
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
} else {
$modal.modal('show');
}
}
$(document).on('click', '.preview-attachment', function () {
const button = $(this);
const previewType = button.data('preview-type');
const previewUrl = button.data('preview-url');
const downloadUrl = button.data('download-url');
const category = button.data('category') || 'Attachment';
if (!previewUrl) {
if (downloadUrl) {
window.open(downloadUrl, '_blank');
}
return;
}
openAttachmentModal('#viewAttachmentPreviewModal', category, previewType, previewUrl);
});
$(document).on('click', '.open-reject-modal', function () {
const rejectUrl = $(this).data('action');
$('#rejectForm').attr('action', rejectUrl);
@@ -563,3 +646,4 @@
});
</script>
@endsection
resources/views/layouts/partials/styles.blade.php
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fiqhpratama/upsense-cdn@main/adminlte-blue/app/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fiqhpratama/upsense-cdn@main/adminlte-blue/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fiqhpratama/upsense-cdn@main/adminlte-blue/plugins/daterangepicker/daterangepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
{{-- datatables --}}
<link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.1.8/b-3.2.0/b-colvis-3.2.0/b-html5-3.2.0/b-print-3.2.0/r-3.0.3/sb-1.8.1/sp-2.3.3/datatables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">