update by CODEX
This commit is contained in:
@@ -41,6 +41,10 @@
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@php
|
||||
$attachmentCategoryLabels = $meetingAttachmentCategories ?? [];
|
||||
$attachmentCategories = $meetingAttachmentCategoryKeys ?? array_keys($attachmentCategoryLabels);
|
||||
@endphp
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
@@ -76,7 +80,7 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Lampiran</h5>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="meeting-add-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Attachment
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Lampiran
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
@@ -85,13 +89,13 @@
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
<th>File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Pratinjau</th>
|
||||
<th style="width: 80px;" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="meeting-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
<td colspan="4" class="text-center text-muted">Belum ada lampiran.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -111,7 +115,7 @@
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -81,12 +81,15 @@
|
||||
<tr>
|
||||
<th style="width: 25%;">Kategori</th>
|
||||
<th>Nama File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Download</th>
|
||||
<th style="width: 100px;" class="text-center">Delete</th>
|
||||
<th style="width: 120px;" class="text-center">Pratinjau</th>
|
||||
<th style="width: 120px;" class="text-center">Unduh</th>
|
||||
<th style="width: 100px;" class="text-center">Hapus</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@php
|
||||
$attachmentCategoryLabels = $meetingAttachmentCategories ?? [];
|
||||
@endphp
|
||||
@forelse ($attachments as $attachment)
|
||||
<tr class="meeting-attachment-row">
|
||||
<td>{{ $attachment['category_label'] ?? '-' }}</td>
|
||||
@@ -98,13 +101,13 @@
|
||||
data-preview-source="{{ $attachment['preview_url'] ?? '' }}"
|
||||
data-download-url="{{ $attachment['download_url'] ?? '' }}"
|
||||
data-filename="{{ $attachment['filename'] }}">
|
||||
Preview
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['download_url']))
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener">
|
||||
Download
|
||||
Unduh
|
||||
</a>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@@ -123,8 +126,8 @@
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="meeting-empty-row">
|
||||
<td colspan="5" class="text-center text-muted">Belum ada attachment.</td>
|
||||
<tr class="meeting-empty-row">
|
||||
<td colspan="5" class="text-center text-muted">Belum ada lampiran.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
@@ -137,7 +140,7 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Tambah Lampiran Baru</h5>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="meeting-add-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Attachment
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Lampiran
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
@@ -146,13 +149,13 @@
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
<th>File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Pratinjau</th>
|
||||
<th style="width: 80px;" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="meeting-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
<td colspan="4" class="text-center text-muted">Belum ada lampiran.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -172,7 +175,7 @@
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,21 +2,21 @@
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mb-0" id="meetingAttachmentPreviewModalLabel">Preview Lampiran</h5>
|
||||
<h5 class="modal-title mb-0" id="meetingAttachmentPreviewModalLabel">Pratinjau Lampiran</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="meeting-preview-image d-none text-center">
|
||||
<img src="" alt="Preview Lampiran" class="img-fluid">
|
||||
<img src="" alt="Pratinjau Lampiran" class="img-fluid">
|
||||
</div>
|
||||
<div class="meeting-preview-pdf d-none">
|
||||
<object data="" type="application/pdf" width="100%" height="500px"></object>
|
||||
</div>
|
||||
<div class="meeting-preview-fallback d-none text-center">
|
||||
<p class="mb-2">Preview tidak tersedia untuk file ini.</p>
|
||||
<button type="button" class="btn btn-primary meeting-preview-download-direct">Download</button>
|
||||
<button type="button" class="btn btn-primary meeting-preview-download-direct">Unduh</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,14 +49,53 @@
|
||||
|
||||
function ensureEmptyRowState($tbody) {
|
||||
if ($tbody.find('.meeting-attachment-row').length === 0) {
|
||||
const columnCount = $tbody.closest('table').find('thead th').length || 4;
|
||||
$tbody.html(
|
||||
'<tr class="meeting-empty-row">' +
|
||||
'<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>' +
|
||||
'<td colspan="' + columnCount + '" class="text-center text-muted">Belum ada lampiran.</td>' +
|
||||
'</tr>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function resetInlinePreview($row) {
|
||||
const $previewBox = $row.find('.meeting-attachment-inline-preview');
|
||||
if ($previewBox.length) {
|
||||
$previewBox
|
||||
.removeClass('bg-light')
|
||||
.html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const $previewBox = $row.find('.meeting-attachment-inline-preview');
|
||||
if (!$previewBox.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
resetInlinePreview($row);
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$previewBox
|
||||
.addClass('bg-light')
|
||||
.html('<img src="' + source + '" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau lampiran">');
|
||||
return;
|
||||
}
|
||||
|
||||
if (type === 'pdf') {
|
||||
$previewBox
|
||||
.addClass('bg-light')
|
||||
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
|
||||
return;
|
||||
}
|
||||
|
||||
if (type && source) {
|
||||
$previewBox
|
||||
.addClass('bg-light')
|
||||
.html('<i class="fas fa-file text-secondary fa-lg"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function cleanupPreviewButton($button) {
|
||||
const objectUrl = $button.data('objectUrl');
|
||||
if (objectUrl) {
|
||||
@@ -68,6 +107,7 @@
|
||||
.data('downloadUrl', null)
|
||||
.data('objectUrl', null)
|
||||
.data('filename', null);
|
||||
resetInlinePreview($button.closest('tr'));
|
||||
}
|
||||
|
||||
function resetAttachmentRow($row) {
|
||||
@@ -77,6 +117,7 @@
|
||||
$row.find('.meeting-selected-filename').text('');
|
||||
const $fileInput = $row.find('.meeting-new-attachment-file');
|
||||
$fileInput.val('');
|
||||
resetInlinePreview($row);
|
||||
}
|
||||
|
||||
function getFileExtension(filename) {
|
||||
@@ -220,12 +261,19 @@
|
||||
'</select>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<input type="file" class="form-control meeting-new-attachment-file" name="attachments[' + index + '][file_path]">' +
|
||||
'<small class="form-text text-muted meeting-selected-filename"></small>' +
|
||||
'<div class="d-flex align-items-center" style="gap: 0.75rem;">' +
|
||||
'<div class="meeting-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>' +
|
||||
'<div class="flex-grow-1">' +
|
||||
'<input type="file" class="form-control meeting-new-attachment-file" name="attachments[' + index + '][file_path]">' +
|
||||
'<small class="form-text text-muted meeting-selected-filename"></small>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'<td class="text-center">' +
|
||||
'<button type="button" class="btn btn-sm btn-outline-secondary meeting-preview-trigger d-none">' +
|
||||
'Preview' +
|
||||
'Pratinjau' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'<td class="text-center">' +
|
||||
@@ -296,14 +344,15 @@
|
||||
|
||||
const extension = getFileExtension(filename);
|
||||
const previewType = getPreviewType(extension);
|
||||
|
||||
$previewButton.data('previewType', previewType);
|
||||
$previewButton.data('filename', filename);
|
||||
|
||||
if (previewType === 'image') {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
$previewButton.data('previewSource', event.target.result);
|
||||
const result = event.target.result;
|
||||
$previewButton.data('previewSource', result);
|
||||
setInlinePreview($row, 'image', result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else if (previewType === 'pdf') {
|
||||
@@ -311,10 +360,12 @@
|
||||
$previewButton.data('previewSource', objectUrl);
|
||||
$previewButton.data('downloadUrl', objectUrl);
|
||||
$previewButton.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, 'pdf', objectUrl);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$previewButton.data('downloadUrl', objectUrl);
|
||||
$previewButton.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, previewType, objectUrl);
|
||||
}
|
||||
|
||||
$previewButton.removeClass('d-none');
|
||||
@@ -349,12 +400,12 @@
|
||||
_token: $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function (response) {
|
||||
showAlert(response.message || 'Attachment berhasil dihapus.', 'success');
|
||||
showAlert(response.message || 'Lampiran berhasil dihapus.', 'success');
|
||||
$row.remove();
|
||||
ensureEmptyRowState($('#meeting-existing-attachments-table tbody'));
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal menghapus attachment.';
|
||||
const message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal menghapus lampiran.';
|
||||
showAlert(message);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -68,8 +68,8 @@
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
<th>Nama File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Download</th>
|
||||
<th style="width: 120px;" class="text-center">Pratinjau</th>
|
||||
<th style="width: 120px;" class="text-center">Unduh</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -84,12 +84,12 @@
|
||||
data-preview-source="{{ $attachment['preview_url'] ?? '' }}"
|
||||
data-download-url="{{ $attachment['download_url'] ?? '' }}"
|
||||
data-filename="{{ $attachment['filename'] }}">
|
||||
Preview
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['download_url']))
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener">Download</a>
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener">Unduh</a>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@endif
|
||||
@@ -97,7 +97,7 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="meeting-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
<td colspan="4" class="text-center text-muted">Belum ada lampiran.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
|
||||
@@ -40,6 +40,10 @@
|
||||
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">
|
||||
@@ -54,7 +58,9 @@
|
||||
<select class="form-control form-control-md" name="rayon_id" required>
|
||||
<option value="">Pilih Rayon</option>
|
||||
@foreach ($rayons as $rayon)
|
||||
<option value="{{ $rayon->id }}">{{ $rayon->name }}</option>
|
||||
<option value="{{ $rayon->id }}">
|
||||
{{ $rayon->name }}{{ $rayon->cabang ? ' - ' . $rayon->cabang->name : '' }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@@ -94,22 +100,22 @@
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<label class="form-label mb-0">Attachments</label>
|
||||
<label class="form-label mb-0">Lampiran</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="add-attachment-row">
|
||||
<i class="fas fa-plus me-1"></i> Add Attachment
|
||||
<i class="fas fa-plus me-1"></i> Tambah Lampiran
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-muted small mt-1 mb-2">
|
||||
Allowed files: JPG, JPEG, PNG, PDF. Max size 5 MB per file.
|
||||
Format file yang diperbolehkan: JPG, JPEG, PNG, atau PDF. Ukuran maksimum 5 MB per file.
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle" id="attachments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%">File Category</th>
|
||||
<th style="width: 45%">Attachment</th>
|
||||
<th style="width: 15%" class="text-center">Preview</th>
|
||||
<th style="width: 10%" class="text-center">Action</th>
|
||||
<th style="width: 30%">Kategori Lampiran</th>
|
||||
<th style="width: 45%">Lampiran</th>
|
||||
<th style="width: 15%" class="text-center">Pratinjau</th>
|
||||
<th style="width: 10%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -137,11 +143,11 @@
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Attachment Preview - <span id="newAttachmentPreviewTitle"></span></h5>
|
||||
<h5 class="modal-title">Pratinjau Lampiran - <span id="newAttachmentPreviewTitle" class="attachment-preview-modal-title"></span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<img id="newAttachmentPreviewImage" class="img-fluid d-none" alt="Attachment preview">
|
||||
<img id="newAttachmentPreviewImage" class="img-fluid d-none" alt="Pratinjau lampiran">
|
||||
<iframe id="newAttachmentPreviewPdf" class="w-100 d-none" style="min-height: 480px;" frameborder="0"></iframe>
|
||||
<div id="newAttachmentPreviewPlaceholder" class="text-center text-muted">Tidak ada file untuk ditampilkan.</div>
|
||||
</div>
|
||||
@@ -153,7 +159,7 @@
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,22 +200,27 @@
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategories ?? []));
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
|
||||
return value
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
|
||||
return value
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories
|
||||
return attachmentCategories
|
||||
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
|
||||
.join('');
|
||||
}
|
||||
@@ -257,14 +268,14 @@
|
||||
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none" data-modal="#newAttachmentPreviewModal">
|
||||
Preview
|
||||
</button>
|
||||
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none" data-modal="#newAttachmentPreviewModal">
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
|
||||
@@ -295,7 +306,7 @@
|
||||
|
||||
if (type === 'image' && source) {
|
||||
previewBox
|
||||
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Preview image">`)
|
||||
.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
|
||||
@@ -312,7 +323,7 @@
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(title || 'Attachment');
|
||||
$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');
|
||||
@@ -399,4 +410,3 @@
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -41,6 +41,10 @@
|
||||
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">
|
||||
@@ -56,7 +60,9 @@
|
||||
<select class="form-control form-control-md" name="rayon_id" required>
|
||||
<option value="">Pilih Rayon</option>
|
||||
@foreach ($rayons as $rayon)
|
||||
<option value="{{ $rayon->id }}" {{ $form->rayon_id == $rayon->id ? 'selected' : '' }}>{{ $rayon->name }}</option>
|
||||
<option value="{{ $rayon->id }}" {{ $form->rayon_id == $rayon->id ? 'selected' : '' }}>
|
||||
{{ $rayon->name }}{{ $rayon->cabang ? ' - ' . $rayon->cabang->name : '' }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@@ -95,24 +101,26 @@
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-4">
|
||||
<label class="form-label mb-0">Existing Attachments</label>
|
||||
<p class="text-muted small mt-1 mb-2">Preview, download, or delete attachments that were previously uploaded.</p>
|
||||
<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%">File Category</th>
|
||||
<th style="width: 30%">Filename</th>
|
||||
<th style="width: 15%" class="text-center">Preview</th>
|
||||
<th style="width: 15%" class="text-center">Download</th>
|
||||
<th style="width: 10%" class="text-center">Action</th>
|
||||
<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 ? ucwords(str_replace('_', ' ', $categoryValue)) : '-';
|
||||
$categoryLabel = $categoryValue
|
||||
? ($attachmentCategoryLabels[$categoryValue] ?? ucwords(str_replace('_', ' ', $categoryValue)))
|
||||
: '-';
|
||||
@endphp
|
||||
<tr data-attachment-id="{{ $attachment['id'] }}">
|
||||
<td>{{ $categoryLabel }}</td>
|
||||
@@ -124,14 +132,14 @@
|
||||
data-download-url="{{ $attachment['download_url'] }}"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-category="{{ $categoryLabel }}">
|
||||
Preview
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="{{ $attachment['download_url'] }}"
|
||||
target="_blank"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
Download
|
||||
Unduh
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@@ -156,22 +164,22 @@
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<label class="form-label mb-0">Add New Attachments</label>
|
||||
<label class="form-label mb-0">Tambah Lampiran Baru</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="add-new-attachment-row">
|
||||
<i class="fas fa-plus me-1"></i> Add Attachment
|
||||
<i class="fas fa-plus me-1"></i> Tambah Lampiran
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-muted small mt-1 mb-2">
|
||||
Allowed files: JPG, JPEG, PNG, PDF. Max size 5 MB per file.
|
||||
Format file yang diperbolehkan: JPG, JPEG, PNG, atau PDF. Ukuran maksimum 5 MB per file.
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle" id="new-attachments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%">File Category</th>
|
||||
<th style="width: 45%">Attachment</th>
|
||||
<th style="width: 15%" class="text-center">Preview</th>
|
||||
<th style="width: 10%" class="text-center">Action</th>
|
||||
<th style="width: 30%">Kategori Lampiran</th>
|
||||
<th style="width: 45%">Lampiran</th>
|
||||
<th style="width: 15%" class="text-center">Pratinjau</th>
|
||||
<th style="width: 10%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -197,19 +205,19 @@
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'existingAttachmentPreviewModal',
|
||||
'title' => 'Attachment Preview',
|
||||
'title' => 'Pratinjau Lampiran',
|
||||
])
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'newAttachmentPreviewModal',
|
||||
'title' => 'Attachment Preview',
|
||||
'title' => 'Pratinjau Lampiran',
|
||||
])
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,7 +258,8 @@
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategories ?? []));
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
let newAttachmentsTableBody;
|
||||
@@ -263,6 +272,10 @@
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
|
||||
return value
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
@@ -324,7 +337,7 @@
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none">
|
||||
Preview
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@@ -357,7 +370,7 @@
|
||||
|
||||
if (type === 'image' && source) {
|
||||
previewBox
|
||||
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Preview image">`)
|
||||
.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
|
||||
@@ -374,7 +387,7 @@
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(title || 'Attachment');
|
||||
$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');
|
||||
@@ -477,7 +490,7 @@
|
||||
const previewType = button.data('preview-type');
|
||||
const previewUrl = button.data('preview-url');
|
||||
const downloadUrl = button.data('download-url');
|
||||
const category = button.data('category') || 'Attachment';
|
||||
const category = button.data('category') || 'Lampiran';
|
||||
|
||||
if (!previewUrl) {
|
||||
if (downloadUrl) {
|
||||
@@ -527,6 +540,3 @@
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control" required>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
@@ -29,16 +29,20 @@
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control" required>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
<!-- Cabang options will be dynamically populated -->
|
||||
@foreach ($cabang as $itemCabang)
|
||||
<option value="{{ $itemCabang->code }}" {{ request()->cabang == $itemCabang->code ? 'selected' : '' }}>
|
||||
{{ $itemCabang->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="month">Pilih Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control" required>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
<option value="january" {{ request()->month == 'january' ? 'selected' : '' }}>Januari</option>
|
||||
<option value="february" {{ request()->month == 'february' ? 'selected' : '' }}>Februari</option>
|
||||
@@ -59,7 +63,7 @@
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="year">Pilih Periode Tahun</label>
|
||||
<select name="year" id="year" class="form-control" required>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ request()->year == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@@ -120,27 +124,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
||||
|
||||
Reference in New Issue
Block a user