Tambahkan fitur hapus data mata uang secara batch
- Menambahkan endpoint `deleteMultiple` pada CurrencyController untuk menghapus beberapa data secara bersamaan. - Memperbarui tampilan index mata uang untuk mendukung fungsi hapus batch, termasuk tombol "Delete Selected". - Menambahkan logika pada JavaScript untuk menangani penghapusan batch menggunakan AJAX. - Memperbarui visibilitas tombol hapus berdasarkan checkbox yang dipilih pada tabel.
This commit is contained in:
@@ -82,6 +82,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
public function deleteMultiple(Request $request)
|
||||
{
|
||||
$ids = $request->input('ids');
|
||||
Currency::whereIn('id', $ids)->delete();
|
||||
return response()->json(['message' => 'Currencies deleted successfully']);
|
||||
}
|
||||
|
||||
public function dataForDatatables(Request $request)
|
||||
{
|
||||
if (is_null($this->user) || !$this->user->can('currency.view')) {
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
<div class="h-[24px] border border-r-gray-200"></div>
|
||||
<a class="btn btn-sm btn-light" href="{{ route('basicdata.currency.export') }}"> Export to Excel </a>
|
||||
<a class="btn btn-sm btn-primary" href="{{ route('basicdata.currency.create') }}"> Tambah Mata Uang </a>
|
||||
<button class="btn btn-sm btn-danger hidden" id="deleteSelected" onclick="deleteSelectedRows()">Delete Selected</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,10 +98,51 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function deleteSelectedRows() {
|
||||
const selectedCheckboxes = document.querySelectorAll('input[data-datatable-row-check="true"]:checked');
|
||||
if (selectedCheckboxes.length === 0) {
|
||||
Swal.fire('Warning', 'Please select at least one row to delete.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: `You are about to delete ${selectedCheckboxes.length} selected row(s). This action cannot be undone!`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete them!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const ids = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);
|
||||
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax('{{ route("basicdata.currency.deleteMultiple") }}', {
|
||||
type: 'POST',
|
||||
data: { ids: ids }
|
||||
}).then((response) => {
|
||||
Swal.fire('Deleted!', 'Selected rows have been deleted.', 'success').then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
}).catch((error) => {
|
||||
console.error('Error:', error);
|
||||
Swal.fire('Error!', 'An error occurred while deleting the rows.', 'error');
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
const element = document.querySelector('#currency-table');
|
||||
const searchInput = document.getElementById('search');
|
||||
const deleteSelectedButton = document.getElementById('deleteSelected');
|
||||
|
||||
const apiUrl = element.getAttribute('data-api-url');
|
||||
const dataTableOptions = {
|
||||
@@ -147,8 +189,34 @@
|
||||
searchInput.addEventListener('input', function () {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
|
||||
});
|
||||
|
||||
function updateDeleteButtonVisibility() {
|
||||
const selectedCheckboxes = document.querySelectorAll('input[data-datatable-row-check="true"]:checked');
|
||||
if (selectedCheckboxes.length > 0) {
|
||||
deleteSelectedButton.classList.remove('hidden');
|
||||
} else {
|
||||
deleteSelectedButton.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Initial call to set button visibility
|
||||
updateDeleteButtonVisibility();
|
||||
|
||||
// Add event listener to the table for checkbox changes
|
||||
element.addEventListener('change', function(event) {
|
||||
if (event.target.matches('input[data-datatable-row-check="true"]')) {
|
||||
updateDeleteButtonVisibility();
|
||||
}
|
||||
});
|
||||
|
||||
// Add event listener for the "select all" checkbox
|
||||
const selectAllCheckbox = element.querySelector('input[data-datatable-check="true"]');
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.addEventListener('change', updateDeleteButtonVisibility);
|
||||
}
|
||||
|
||||
window.dataTable = dataTable;
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
Route::get('restore/{id}', [CurrencyController::class, 'restore'])->name('restore');
|
||||
Route::get('datatables', [CurrencyController::class, 'dataForDatatables'])->name('datatables');
|
||||
Route::get('export', [CurrencyController::class, 'export'])->name('export');
|
||||
Route::post('delete-multiple', [CurrencyController::class, 'deleteMultiple'])->name('deleteMultiple');
|
||||
});
|
||||
|
||||
Route::resource('mata-uang', CurrencyController::class, [
|
||||
|
||||
Reference in New Issue
Block a user