update by CODEX

This commit is contained in:
Fiqh Pratama
2025-10-23 17:21:46 +07:00
parent 4e0ab80520
commit 6f9f0d34a3
12 changed files with 457 additions and 326 deletions
@@ -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">&times;</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>