update form others
This commit is contained in:
Fiqh Pratama
@@ -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, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user