This commit is contained in:
root
@@ -1,12 +1,13 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
@@ -16,12 +17,12 @@
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#loading-spinner-overlay {
|
||||
position: fixed;
|
||||
@@ -29,8 +30,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
||||
z-index: 9999; /* High z-index to cover everything */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -41,15 +42,17 @@
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@php
|
||||
$attachmentCategoryLabels = $attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []);
|
||||
$attachmentCategories = $attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? array_keys($attachmentCategoryLabels));
|
||||
@endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
@include('backend.layouts.partials.messages')
|
||||
@@ -68,7 +71,8 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="date" class="form-control" name="tanggal" required value="{{ $form->tanggal }}">
|
||||
<input type="date" class="form-control" name="tanggal" required
|
||||
value="{{ old('tanggal', !empty($form->tanggal) ? date('Y-m-d', strtotime($form->tanggal)) : '') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tujuan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
@@ -80,22 +84,22 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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 }}">
|
||||
<input type="text" class="form-control" name="allowance" id="allowance" value="{{ $form->allowance }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<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 }}">
|
||||
<input type="text" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ $form->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 }}">
|
||||
<input type="text" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ $form->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 }}">
|
||||
<input type="text" class="form-control" name="hotel" id="hotel" value="{{ $form->hotel }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,7 +205,7 @@
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'existingAttachmentPreviewModal',
|
||||
@@ -217,7 +221,7 @@
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
<p class="mt-2">Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -226,317 +230,333 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
new AutoNumeric('#allowance', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#transport_dalkot', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#transport_ankot', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#hotel', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($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';
|
||||
}
|
||||
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
|
||||
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-control 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">
|
||||
Pratinjau
|
||||
</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="Pratinjau lampiran">`)
|
||||
.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 || 'Lampiran');
|
||||
$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');
|
||||
$(document).ready(function() {
|
||||
try {
|
||||
// ==========================================
|
||||
// 1. INISIALISASI AUTONUMERIC ASLI (KEMBALI NORMAL & ANTI MINUS)
|
||||
// ==========================================
|
||||
const autoNumericConfig = {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp. ',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0', // Mencegah nilai minus
|
||||
unformatOnSubmit: true // Mengirimkan angka bersih ke backend
|
||||
};
|
||||
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');
|
||||
const allowanceInput = new AutoNumeric('#allowance', autoNumericConfig);
|
||||
const dalkotInput = new AutoNumeric('#transport_dalkot', autoNumericConfig);
|
||||
const ankotInput = new AutoNumeric('#transport_ankot', autoNumericConfig);
|
||||
const hotelInput = new AutoNumeric('#hotel', autoNumericConfig);
|
||||
|
||||
$('#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
|
||||
}
|
||||
// ==========================================
|
||||
// 2. SOLUSI FIX SCROLLING: Blokir Paksa Menggunakan jQuery Native
|
||||
// ==========================================
|
||||
$('#allowance, #transport_dalkot, #transport_ankot, #hotel').on('wheel font-wheel', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).blur(); // Melepas fokus kursor saat roda scroll digerakkan
|
||||
});
|
||||
}
|
||||
|
||||
$('#add-new-attachment-row').on('click', function () {
|
||||
addAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.remove-attachment-row', function () {
|
||||
removeAttachmentRow(this);
|
||||
});
|
||||
// ==========================================
|
||||
// 3. LOGIKA MULTI UPLOAD ATTACHMENT
|
||||
// ==========================================
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
let newAttachmentsTableBody = $('#new-attachments-table tbody');
|
||||
let existingAttachmentsTableBody = $('#existing-attachments-table tbody');
|
||||
let emptyNewRowMarkup = `<tr class="new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>`;
|
||||
let emptyExistingRowMarkup = `<tr class="existing-attachments-empty text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></tr>`;
|
||||
|
||||
$(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') || 'Lampiran';
|
||||
|
||||
if (!previewUrl) {
|
||||
if (downloadUrl) {
|
||||
window.open(downloadUrl, '_blank');
|
||||
}
|
||||
return;
|
||||
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
if (csrfToken) {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': csrfToken
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openAttachmentModal('#existingAttachmentPreviewModal', category, previewType, previewUrl);
|
||||
});
|
||||
function categoryToLabel(value) {
|
||||
if (!value) return 'Pilih Kategori';
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
$(document).on('click', '.delete-attachment', function () {
|
||||
const button = $(this);
|
||||
const deleteUrl = button.data('delete-url');
|
||||
const $row = button.closest('tr');
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories
|
||||
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
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) {
|
||||
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('');
|
||||
}
|
||||
|
||||
window.addAttachmentRow = function() {
|
||||
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-control 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}" required>
|
||||
</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">
|
||||
Pratinjau
|
||||
</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="Pratinjau lampiran">`)
|
||||
.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 || 'Lampiran');
|
||||
$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;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
type: 'DELETE',
|
||||
success: function (response) {
|
||||
$row.remove();
|
||||
if (!existingAttachmentsTableBody.find('tr').not('.existing-attachments-empty').length) {
|
||||
existingAttachmentsTableBody.html(emptyExistingRowMarkup);
|
||||
}
|
||||
filenameHolder.text(file.name);
|
||||
const extension = file.name.split('.').pop().toLowerCase();
|
||||
|
||||
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');
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 4. INTERCEPTOR FORM SUBMIT & SWEETALERT (> 1 JUTA)
|
||||
// ==========================================
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const form = this;
|
||||
|
||||
const allowance = allowanceInput.getNumber() || 0;
|
||||
const transportDalkot = dalkotInput.getNumber() || 0;
|
||||
const transportAnkot = ankotInput.getNumber() || 0;
|
||||
const hotel = hotelInput.getNumber() || 0;
|
||||
|
||||
const totalExpense = allowance + transportDalkot + transportAnkot + hotel;
|
||||
|
||||
if (totalExpense > 1000000) {
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas Expense!',
|
||||
text: `Total pengajuan Anda adalah Rp ${new Intl.NumberFormat('id-ID').format(totalExpense)}. Jumlah ini melebihi batas standar Rp 1.000.000. Apakah yakin tetap ajukan?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, Tetap Ajukan!',
|
||||
cancelButtonText: 'No, Batalkan'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Event Listeners DOM
|
||||
$('#add-new-attachment-row').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
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') || 'Lampiran';
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("Local Script Error:", err);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
Reference in New Issue
Block a user