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

update form others

Browse Source
This commit is contained in:
Fiqh Pratama
2025-10-13 16:42:05 +07:00
parent 602fc68836
commit e8acdd3303
5 changed files with 1275 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/backend/pages/forms/other/create.blade.php
+296 -40
View File
@@ -65,50 +65,61 @@
<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="{{ old('tanggal') }}">
</div>
<!-- Add field -->
<!-- <div class="mb-3">
<label class="form-label">Nama Penerima <span class="font-italic font-weight-normal">(required)</span></label>
<input type="text" class="form-control" name="name" required value="{{ old('name') }}">
</div>
<div class="mb-3">
<label class="form-label">NPWP / NIK <span class="font-italic font-weight-normal">(required)</span></label>
<input type="text" class="form-control" name="nik_or_npwp" id="nik_or_npwp" required value="{{ old('nik_or_npwp') }}">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Alamat <span class="font-italic font-weight-normal">(required)</span></label>
<input type="text" class="form-control" name="alamat" id="alamat" required value="{{ old('alamat') }}">
</div> -->
<div class="col-md-6">
<div class="col-lg-6">
<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="{{ old('total') }}">
</div>
</div>
<div class="col-md-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="{{ 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" id="keterangan" required>{{ old('keterangan') }}</textarea>
</div>
</div>
<!-- </div> -->
<button type="submit" class="btn btn-primary ml-2">Submit</button>
</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">Lampiran</label>
<button type="button" class="btn btn-outline-primary btn-sm" id="other-add-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. Tidak diperbolehkan mengunggah file berformat <code>.exe</code>, <code>.dll</code>, <code>.sh</code>, <code>.bat</code>, <code>.cmd</code>, atau <code>.msi</code>.
</p>
<div class="table-responsive">
<table class="table table-bordered align-middle" id="other-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-attachments-empty text-center text-muted">
<td colspan="4">Belum ada lampiran.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary ml-2">Submit</button>
</div>
</div>
</form>
@include('backend.components.attachment-preview-modal', [
'modalId' => 'otherAttachmentPreviewModal',
'title' => 'Preview Lampiran',
])
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
@@ -123,19 +134,264 @@
<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 otherAttachmentEmptyRow = '<tr class="other-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
let otherAttachmentIndex = 0;
function escapeHtml(value) {
return String(value || '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
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-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 resetAttachmentRowData($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-attachment').addClass('d-none');
$row.find('.other-preview-filename').text('');
if (clearInput) {
$row.find('.other-attachment-file').val('');
}
}
function openAttachmentModal(modalSelector, options) {
const settings = Object.assign({
title: 'Lampiran',
type: 'other',
source: 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');
}
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
} else {
$modal.modal('show');
}
}
function addOtherAttachmentRow() {
const $tbody = $('#other-attachments-table tbody');
if ($tbody.find('.other-attachments-empty').length) {
$tbody.empty();
}
const index = otherAttachmentIndex++;
const rowHtml = `
<tr class="other-attachment-row" data-index="${index}">
<td>
<select class="form-control other-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-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-attachment-file" name="attachments[${index}][file_path]">
</div>
<div class="small text-muted mt-1 other-preview-filename"></div>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-outline-secondary other-preview-attachment d-none">
Preview
</button>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-outline-danger other-remove-attachment-row">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
`;
$tbody.append(rowHtml);
}
$(function () {
$('#other-add-attachment-row').on('click', function () {
addOtherAttachmentRow();
});
$(document).on('click', '.other-remove-attachment-row', function () {
const $row = $(this).closest('tr');
const $tbody = $('#other-attachments-table tbody');
resetAttachmentRowData($row, true);
$row.remove();
if (!$tbody.find('.other-attachment-row').length) {
$tbody.html(otherAttachmentEmptyRow);
}
});
$(document).on('change', '.other-attachment-file', function () {
const $input = $(this);
const $row = $input.closest('tr');
const previewButton = $row.find('.other-preview-attachment');
const filenameHolder = $row.find('.other-preview-filename');
resetAttachmentRowData($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-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('#otherAttachmentPreviewModal', {
title: fileName,
type: previewType,
source: previewSource,
fileName: fileName
});
} else if (previewSource) {
window.open(previewSource, '_blank');
}
});
addOtherAttachmentRow();
});
</script>
@endsection
resources/views/backend/pages/forms/other/edit.blade.php
+446 -17
View File
@@ -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, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
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
resources/views/backend/pages/forms/other/view.blade.php
+228 -107
View File
@@ -56,16 +56,64 @@
<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" id="keterangan" readonly>{{ $form->keterangan }}</textarea>
</div>
</div>
<div class="col-12">
<div class="mb-4">
<label class="form-label mb-0">Lampiran</label>
<p class="text-muted small mt-1 mb-2">Gunakan tombol preview untuk melihat lampiran.</p>
<div class="table-responsive">
<table class="table table-bordered align-middle" id="other-view-attachments-table">
<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)
<tr class="other-view-attachment-row">
<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-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">
Download
</a>
</td>
</tr>
@empty
<tr class="other-view-attachments-empty text-center text-muted">
<td colspan="4">Tidak ada lampiran.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
@include('backend.components.attachment-preview-modal', [
'modalId' => 'otherViewAttachmentPreviewModal',
'title' => 'Preview Lampiran',
])
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Status</label>
@@ -261,15 +309,105 @@
@section('scripts')
<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
});
function escapeHtml(value) {
return String(value || '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
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 buildAttachmentLinks(attachments) {
if (!attachments || !attachments.length) {
return '-';
}
return attachments.map(function (item, index) {
const label = escapeHtml(item.filename || item.file_category || ('Lampiran ' + (index + 1)));
const downloadUrl = item.download_url || '#';
return '<div><a href="' + downloadUrl + '" target="_blank">' + label + '</a></div>';
}).join('');
}
$(document).on('click', '.other-preview-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('#otherViewAttachmentPreviewModal', {
title: fileName,
type: previewType,
source: previewUrl,
downloadUrl: downloadUrl,
fileName: fileName
});
} else {
if (downloadUrl) {
window.open(downloadUrl, '_blank');
}
}
});
</script>
<script>
$(document).on('click', '.open-reject-modal', function () {
const rejectUrl = $(this).data('action');
$('#rejectForm').attr('action', rejectUrl);
@@ -286,124 +424,107 @@
$('#rejectRemarks').val('');
});
// Handle Approve Button Click
$(document).on('click', '.open-approve-modal', function() {
const approveUrl = $(this).data('id');
$(document).on('click', '.open-approve-modal', function() {
const approveUrl = $(this).data('id');
// Show spinner and hide content initially
$('#loadingSpinner').show();
$('#modalContent').addClass('d-none');
$('#loadingSpinner').show();
$('#modalContent').addClass('d-none');
$('#approveForm').attr('action', approveUrl); // Set the form action
$('#loadingSpinner').addClass('d-flex');
$('#approveModal').modal('show'); // Show the modal
$('#approveForm').attr('action', approveUrl);
$('#loadingSpinner').addClass('d-flex');
$('#approveModal').modal('show');
// Get detail from /forms/vehicle/detail/{id}
$.get(approveUrl.replace(/approve2|final-approve/g, 'detail'), function (data) {
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
});
$.get(approveUrl.replace(/approve2|final-approve/g, 'detail'), function (data) {
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
});
$('#total_value').text(formatter.format(data.total));
$('#total_value').text(formatter.format(data.total));
// Detail data
$('#user').text(data.user.name);
$('#expense_number').text(data.expense_number);
$('#tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', {
year: 'numeric',
month: 'long',
day: 'numeric'
}));
$('#kategori').text(data.kategori.name);
$('#keterangan').text(data.keterangan);
$('#user').text(data.user.name);
$('#expense_number').text(data.expense_number);
$('#tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', {
year: 'numeric',
month: 'long',
day: 'numeric'
}));
$('#bukti_total').html(data.total ? '<a href="' + data.total + '" target="_blank">Download</a>' : '-');
$('#kategori').text(data.kategori.name);
$('#keterangan').text(data.keterangan);
// Hide spinner and show content
$('#loadingSpinner').hide();
$('#loadingSpinner').removeClass('d-flex');
$('#loadingSpinner').addClass('d-none');
$('#modalContent').removeClass('d-none');
$('#bukti_total').html(buildAttachmentLinks(data.attachments));
// Reset the total to zero
$('#total').val(0);
});
});
$('#loadingSpinner').hide();
$('#loadingSpinner').removeClass('d-flex');
$('#loadingSpinner').addClass('d-none');
$('#modalContent').removeClass('d-none');
// Handle Approve Button Click
$(document).on('click', '.final-approve-modal', function() {
const approveUrl = $(this).data('id');
$('#total').val(0);
});
});
// Show spinner and hide content initially
$('#finalLoadingSpinner').show();
$('#finalModalContent').addClass('d-none');
$(document).on('click', '.final-approve-modal', function() {
const approveUrl = $(this).data('id');
$('#finalApproveForm').attr('action', approveUrl); // Set the form action
$('#finalLoadingSpinner').addClass('d-flex');
$('#finalApproveModal').modal('show'); // Show the modal
$('#finalLoadingSpinner').show();
$('#finalModalContent').addClass('d-none');
// Get detail from /forms/vehicle/detail/{id}
$.get(approveUrl.replace('approve', 'detail'), function (data) {
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
});
$('#finalApproveForm').attr('action', approveUrl);
$('#finalLoadingSpinner').addClass('d-flex');
$('#finalApproveModal').modal('show');
$('#final_total_value').text(formatter.format(data.total));
$.get(approveUrl.replace('approve', 'detail'), function (data) {
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
});
// Assign data values to checkboxes
$('#final_total').data('value', data.total);
$('#final_total_value').text(formatter.format(data.total));
$('#final_total').data('value', data.total);
// Detail data
$('#final_user').text(data.user.name);
$('#final_expense_number').text(data.expense_number);
$('#final_tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', {
year: 'numeric',
month: 'long',
day: 'numeric'
}));
$('#final_user').text(data.user.name);
$('#final_expense_number').text(data.expense_number);
$('#final_tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', {
year: 'numeric',
month: 'long',
day: 'numeric'
}));
$('#final_kategori').text(data.kategori.name);
$('#final_keterangan').text(data.keterangan);
$('#final_kategori').text(data.kategori.name);
$('#final_keterangan').text(data.keterangan);
$('#final_bukti_total').html(data.bukti_total ? '<a href="' + data.bukti_total + '" target="_blank">Download</a>' : '-');
$('#final_bukti_total').html(buildAttachmentLinks(data.attachments));
// Hide spinner and show content
$('#finalLoadingSpinner').hide();
$('#finalLoadingSpinner').removeClass('d-flex');
$('#finalLoadingSpinner').addClass('d-none');
$('#finalModalContent').removeClass('d-none');
$('#finalLoadingSpinner').hide();
$('#finalLoadingSpinner').removeClass('d-flex');
$('#finalLoadingSpinner').addClass('d-none');
$('#finalModalContent').removeClass('d-none');
// Reset the total to zero
$('#total').val(0);
});
});
$('#total').val(0);
});
});
// Update total dynamically
$('.custom-control-input').on('change', function () {
let total = 0;
$('.custom-control-input:checked').each(function () {
total += parseFloat($(this).data('value') || 0);
});
$('.custom-control-input').on('change', function () {
let total = 0;
$('.custom-control-input:checked').each(function () {
total += parseFloat($(this).data('value') || 0);
});
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0,
});
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0,
});
$('#total').val(formatter.format(total));
});
$('#total').val(formatter.format(total));
});
// Uncheck all checkboxes when the modal is closed
$('#finalApproveModal').on('hidden.bs.modal', function () {
$('.custom-control-input').prop('checked', false); // Uncheck all checkboxes
$('#total').val('0'); // Reset total to 0
});
$('#finalApproveModal').on('hidden.bs.modal', function () {
$('.custom-control-input').prop('checked', false);
$('#total').val('0');
});
</script>
@endsection