root
557 lines
31 KiB
PHP
557 lines
31 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title')
|
|
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>
|
|
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>Edit Expense Vehicle Running Cost</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
#loading-spinner-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.spinner-wrapper {
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
@php
|
|
$attachmentCategoryLabels = $attachmentCategoryLabels ?? ($vehicleAttachmentCategories ?? []);
|
|
$attachmentCategories = $attachmentCategories ?? ($vehicleAttachmentCategoryKeys ?? 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.vehicle.update', $form->id) }}" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
@include('backend.layouts.partials.messages')
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
|
{{-- Konversi Cerdas Format Input Tipe 'date' --}}
|
|
<input type="date" class="form-control" name="tanggal" required
|
|
value="{{ old('tanggal', $form->tanggal ? \Carbon\Carbon::parse($form->tanggal)->format('Y-m-d') : '') }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tipe Pengeluaran <span class="font-italic font-weight-normal">(required)</span></label>
|
|
<select class="form-control" name="type" id="expense_type" required>
|
|
<option value="gasoline" {{ old('type', $form->type) == 'gasoline' ? 'selected' : '' }}>Gasoline</option>
|
|
<option value="parking_toll" {{ old('type', $form->type) == 'parking_toll' ? 'selected' : '' }}>Parking / Toll</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3 gasoline-fields">
|
|
<label class="form-label">Liter Bensin <span class="font-italic font-weight-normal">(required)</span></label>
|
|
<input type="number" step="0.01" class="form-control" name="liter" id="liter" value="{{ old('liter', $form->liter) }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Total Harga <span class="font-italic font-weight-normal">(required)</span></label>
|
|
<input type="text" class="form-control" name="total" id="total" required value="{{ old('total', $form->total) }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="mb-3 gasoline-fields">
|
|
<label class="form-label">Km (Odometer) <span class="font-italic font-weight-normal">(required)</span></label>
|
|
<input type="number" class="form-control" name="jarak" id="jarak" value="{{ old('jarak', $form->jarak) }}">
|
|
</div>
|
|
<div class="mb-3 gasoline-fields">
|
|
<label class="form-label">Tipe Bensin <span class="font-italic font-weight-normal">(required)</span></label>
|
|
<select class="form-control" name="tipe_bensin" id="tipe_bensin">
|
|
<option value="" disabled selected>Pilih Tipe</option>
|
|
<option value="pertamax" {{ old('tipe_bensin', $form->tipe_bensin) == 'pertamax' ? 'selected' : '' }}>Pertamax</option>
|
|
<option value="pertalite" {{ old('tipe_bensin', $form->tipe_bensin) == 'pertalite' ? 'selected' : '' }}>Pertalite</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 gasoline-fields">
|
|
<label class="form-label">Nomor Polisi <span class="font-italic font-weight-normal">(required)</span></label>
|
|
<input type="text" class="form-control" name="nopol" id="nopol" value="{{ old('nopol', $form->nopol) }}">
|
|
</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', $form->keterangan) }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- BAGIAN LAMPIRAN TERSIMPAN DATABASE --}}
|
|
<div class="col-lg-12">
|
|
<div class="mb-4">
|
|
<label class="form-label mb-0">Lampiran Tersimpan</label>
|
|
<p class="text-muted small mt-1 mb-2">Pratinjau, unduh, atau hapus lampiran yang telah diunggah sebelumnya.</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%">Kategori Lampiran</th>
|
|
<th style="width: 30%">Nama File</th>
|
|
<th style="width: 15%" class="text-center">Pratinjau</th>
|
|
<th style="width: 15%" class="text-center">Unduh</th>
|
|
<th style="width: 10%" class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse ($attachments as $attachment)
|
|
@php
|
|
$categoryValue = $attachment['file_category'] ?? null;
|
|
$categoryLabel = $categoryValue
|
|
? ($attachmentCategoryLabels[$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 }}">
|
|
Pratinjau
|
|
</button>
|
|
</td>
|
|
<td class="text-center">
|
|
<a href="{{ $attachment['download_url'] }}"
|
|
target="_blank"
|
|
class="btn btn-sm btn-outline-primary">
|
|
Unduh
|
|
</a>
|
|
</td>
|
|
<td class="text-center">
|
|
<button type="button"
|
|
class="btn btn-sm btn-outline-danger delete-attachment"
|
|
data-delete-url="{{ route('forms.vehicle.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-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="vehicle-add-attachment-row">
|
|
<i class="fas fa-plus mr-1"></i> Add attachment
|
|
</button>
|
|
</div>
|
|
<p class="text-muted small mt-1 mb-2">
|
|
Maksimal 10 MB per file. Semua tipe file diperbolehkan kecuali <code>.exe</code>, <code>.bat</code>, <code>.sh</code>, <code>.cmd</code>, <code>.dll</code>, dan <code>.msi</code>.
|
|
</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered align-middle" id="vehicle-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="vehicle-attachments-empty text-center text-muted">
|
|
<td colspan="4">Belum ada lampiran.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary ml-2">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
|
|
@include('backend.components.attachment-preview-modal', [
|
|
'modalId' => 'existingAttachmentPreviewModal',
|
|
'title' => 'Pratinjau Lampiran',
|
|
])
|
|
|
|
@include('backend.components.attachment-preview-modal', [
|
|
'modalId' => 'vehicleNewAttachmentPreviewModal',
|
|
'title' => 'Preview Lampiran',
|
|
])
|
|
|
|
<div id="loading-spinner-overlay" class="d-none">
|
|
<div class="spinner-wrapper">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
<p class="mt-2">Submitting, please wait...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Setup Global Token CSRF Khusus untuk Delete File via AJAX
|
|
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
|
if (csrfToken) {
|
|
$.ajaxSetup({
|
|
headers: { 'X-CSRF-TOKEN': csrfToken }
|
|
});
|
|
}
|
|
|
|
// 1. Inisialisasi Aman AutoNumeric (Sesuai Standar Up Country)
|
|
const autoNumericConfig = {
|
|
digitGroupSeparator: '.',
|
|
decimalCharacter: ',',
|
|
currencySymbol: 'Rp. ',
|
|
decimalPlaces: 0,
|
|
minimumValue: '0',
|
|
unformatOnSubmit: true
|
|
};
|
|
const totalInput = new AutoNumeric('#total', autoNumericConfig);
|
|
|
|
// 2. Cegah Scroll Wheel
|
|
$('#total, #liter, #jarak').on('wheel font-wheel', function(e) {
|
|
e.preventDefault();
|
|
$(this).blur();
|
|
});
|
|
|
|
// 3. Toggle Logika Field Bensin
|
|
const expenseTypeSelect = document.getElementById('expense_type');
|
|
const gasolineFields = document.querySelectorAll('.gasoline-fields');
|
|
const literInput = document.getElementById('liter');
|
|
const jarakInput = document.getElementById('jarak');
|
|
const tipeBensinSelect = document.getElementById('tipe_bensin');
|
|
const nopolInput = document.getElementById('nopol');
|
|
|
|
function toggleGasolineFields() {
|
|
if (expenseTypeSelect.value === 'gasoline') {
|
|
gasolineFields.forEach(field => field.style.display = 'block');
|
|
literInput.setAttribute('required', 'required');
|
|
jarakInput.setAttribute('required', 'required');
|
|
tipeBensinSelect.setAttribute('required', 'required');
|
|
nopolInput.setAttribute('required', 'required');
|
|
} else {
|
|
gasolineFields.forEach(field => field.style.display = 'none');
|
|
literInput.value = '';
|
|
jarakInput.value = '';
|
|
tipeBensinSelect.value = '';
|
|
nopolInput.value = '';
|
|
literInput.removeAttribute('required');
|
|
jarakInput.removeAttribute('required');
|
|
tipeBensinSelect.removeAttribute('required');
|
|
nopolInput.removeAttribute('required');
|
|
}
|
|
}
|
|
|
|
toggleGasolineFields();
|
|
expenseTypeSelect.addEventListener('change', toggleGasolineFields);
|
|
|
|
// 4. Integrasi Interseptor Form Submit & SweetAlert
|
|
const spinnerOverlay = $('#loading-spinner-overlay');
|
|
|
|
$('#expense-form').on('submit', function (e) {
|
|
e.preventDefault();
|
|
const form = this;
|
|
const totalExpense = totalInput.getNumber() || 0;
|
|
|
|
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 Simpan!',
|
|
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();
|
|
}
|
|
});
|
|
|
|
// 5. Lampiran Engine AJAX (Existing Table Delete)
|
|
$(document).on('click', '.delete-attachment', function () {
|
|
const button = $(this);
|
|
const deleteUrl = button.data('delete-url');
|
|
const $row = button.closest('tr');
|
|
const existingAttachmentsTableBody = $('#existing-attachments-table tbody');
|
|
const emptyExistingRowMarkup = '<tr class="existing-attachments-empty text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></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');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
$(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', {
|
|
title: category, type: previewType, source: previewUrl
|
|
});
|
|
});
|
|
|
|
// 6. Lampiran Engine Tambahan Baru
|
|
const attachmentCategories = @json($attachmentCategories ?? ($vehicleAttachmentCategories ?? []));
|
|
const blockedExtensions = ['exe', 'bat', 'sh', 'cmd', 'dll', 'msi'];
|
|
const maxFileSizeBytes = 10 * 1024 * 1024;
|
|
const vehicleAttachmentEmptyRow = '<tr class="vehicle-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
|
|
let vehicleAttachmentIndex = 0;
|
|
|
|
function escapeHtml(value) {
|
|
return String(value || '')
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
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('.vehicle-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').removeData('downloadUrl');
|
|
setInlinePreview($row, null, null);
|
|
$row.find('.vehicle-preview-new-attachment').addClass('d-none');
|
|
$row.find('.vehicle-preview-filename').text('');
|
|
if (clearInput) $row.find('.vehicle-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);
|
|
}
|
|
$modal.modal('show');
|
|
}
|
|
|
|
function addVehicleAttachmentRow() {
|
|
const $tbody = $('#vehicle-attachments-table tbody');
|
|
if ($tbody.find('.vehicle-attachments-empty').length) $tbody.empty();
|
|
|
|
const index = vehicleAttachmentIndex++;
|
|
const rowHtml = `
|
|
<tr class="vehicle-attachment-row" data-index="${index}">
|
|
<td>
|
|
<select class="form-control vehicle-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="vehicle-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 vehicle-attachment-file" name="attachments[${index}][file_path]" required>
|
|
</div>
|
|
<div class="small text-muted mt-1 vehicle-preview-filename"></div>
|
|
</td>
|
|
<td class="text-center">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary vehicle-preview-new-attachment d-none">Preview</button>
|
|
</td>
|
|
<td class="text-center">
|
|
<button type="button" class="btn btn-sm btn-outline-danger vehicle-remove-attachment-row"><i class="fas fa-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
$tbody.append(rowHtml);
|
|
}
|
|
|
|
$('#vehicle-add-attachment-row').on('click', function () { addVehicleAttachmentRow(); });
|
|
|
|
$(document).on('click', '.vehicle-remove-attachment-row', function () {
|
|
const $row = $(this).closest('tr');
|
|
const $tbody = $('#vehicle-attachments-table tbody');
|
|
resetAttachmentRowData($row, true);
|
|
$row.remove();
|
|
if (!$tbody.find('.vehicle-attachment-row').length) $tbody.html(vehicleAttachmentEmptyRow);
|
|
});
|
|
|
|
$(document).on('change', '.vehicle-attachment-file', function () {
|
|
const $input = $(this);
|
|
const $row = $input.closest('tr');
|
|
const previewButton = $row.find('.vehicle-preview-new-attachment');
|
|
const filenameHolder = $row.find('.vehicle-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('downloadUrl', null);
|
|
|
|
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 {
|
|
$row.data('previewSource', null);
|
|
setInlinePreview($row, 'other', null);
|
|
}
|
|
previewButton.removeClass('d-none');
|
|
});
|
|
|
|
$(document).on('click', '.vehicle-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';
|
|
|
|
openAttachmentModal('#vehicleNewAttachmentPreviewModal', {
|
|
title: fileName,
|
|
type: previewType,
|
|
source: previewSource,
|
|
downloadUrl: null,
|
|
fileName: fileName
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|