Tambahkan fitur hapus beberapa data hari libur
- Menambahkan endpoint `deleteMultiple` di HolidayCalendarController untuk menghapus beberapa data hari libur sekaligus. - Menambahkan tombol "Delete Selected" di halaman index holiday calendar, yang terlihat hanya jika ada data yang dipilih. - Implementasi logika JavaScript untuk menangani pemilihan baris, visibilitas tombol, dan penghapusan data dengan AJAX. - Memperbarui file `web.php` untuk menambahkan rute POST baru `delete-multiple` guna mendukung fitur ini.
This commit is contained in:
@@ -88,6 +88,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function deleteMultiple(Request $request)
|
||||||
|
{
|
||||||
|
$ids = $request->input('ids');
|
||||||
|
HolidayCalendar::whereIn('id', $ids)->delete();
|
||||||
|
return response()->json(['message' => 'Holidays deleted successfully']);
|
||||||
|
}
|
||||||
|
|
||||||
public function dataForDatatables(Request $request)
|
public function dataForDatatables(Request $request)
|
||||||
{
|
{
|
||||||
if (is_null($this->user) || !$this->user->can('currency.view')) {
|
if (is_null($this->user) || !$this->user->can('currency.view')) {
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
<div class="h-[24px] border border-r-gray-200"></div>
|
<div class="h-[24px] border border-r-gray-200"></div>
|
||||||
<a class="btn btn-sm btn-light" href="{{ route('basicdata.holidaycalendar.export') }}"> Export to Excel </a>
|
<a class="btn btn-sm btn-light" href="{{ route('basicdata.holidaycalendar.export') }}"> Export to Excel </a>
|
||||||
<a class="btn btn-sm btn-primary" href="{{ route('basicdata.holidaycalendar.create') }}"> Tambah Hari Libur </a>
|
<a class="btn btn-sm btn-primary" href="{{ route('basicdata.holidaycalendar.create') }}"> Tambah Hari Libur </a>
|
||||||
|
<button class="btn btn-sm btn-danger hidden" id="deleteSelected" onclick="deleteSelectedRows()">Delete Selected</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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.holidaycalendar.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>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
const element = document.querySelector('#holiday-calendar-table');
|
const element = document.querySelector('#holiday-calendar-table');
|
||||||
const searchInput = document.getElementById('search');
|
const searchInput = document.getElementById('search');
|
||||||
|
const deleteSelectedButton = document.getElementById('deleteSelected');
|
||||||
|
|
||||||
const apiUrl = element.getAttribute('data-api-url');
|
const apiUrl = element.getAttribute('data-api-url');
|
||||||
const dataTableOptions = {
|
const dataTableOptions = {
|
||||||
@@ -154,5 +196,32 @@
|
|||||||
const searchValue = this.value.trim();
|
const searchValue = this.value.trim();
|
||||||
dataTable.search(searchValue, true);
|
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>
|
</script>
|
||||||
@endpush
|
@endpush
|
||||||
|
|||||||
@@ -66,6 +66,7 @@
|
|||||||
Route::delete('/{id}', [HolidayCalendarController::class, 'destroy'])->name('destroy');
|
Route::delete('/{id}', [HolidayCalendarController::class, 'destroy'])->name('destroy');
|
||||||
Route::get('/datatables', [HolidayCalendarController::class, 'dataForDatatables'])->name('datatables');
|
Route::get('/datatables', [HolidayCalendarController::class, 'dataForDatatables'])->name('datatables');
|
||||||
Route::get('/export', [HolidayCalendarController::class, 'export'])->name('export');
|
Route::get('/export', [HolidayCalendarController::class, 'export'])->name('export');
|
||||||
|
Route::post('delete-multiple', [HolidayCalendarController::class, 'deleteMultiple'])->name('deleteMultiple');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user