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
@@ -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