import React, { useState, useEffect } from 'react' import { usePrevious } from "react-use"; import { router } from '@inertiajs/react' import qs from 'qs' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import Pagination from "@/Components/Pagination"; import ModalConfirm from "@/Components/ModalConfirm"; import FormModal from './FormModal'; import DetailModal from './DetailModal'; import ImportModal from './ImportModal'; import { DatePickerRangeInput } from "@/Components/DatePickerInput"; import { useModalState } from "@/Hook"; import { Head } from '@inertiajs/react'; import { formatDate } from "@/Utils"; import { toast } from 'react-toastify'; export default function Dashboard(props) { const { _startDate, _endDate, _limit } = props const [startDate] = useState(_startDate) const [endDate] = useState(_endDate) const [filterDate, setFilterDate] = useState([_startDate, _endDate]) const { data: bookings, links } = props.booking; const [bookingsChecked, setBookingsChecked] = useState( bookings.map((booking) => { return { ...booking, isChecked: false, }; }) ); const [search, setSearch] = useState(""); const [limit, setLimit] = useState(_limit) const preValue = usePrevious(`${search}-${filterDate[0]}-${filterDate[1]}-${limit}`); const [booking, setBooking] = useState(null); const formModal = useModalState(false); const handleToggleForm = (booking = null) => { setBooking(booking); formModal.toggle(); }; const confirmModal = useModalState(false); const handleDelete = (booking) => { confirmModal.setData(booking); confirmModal.toggle(); }; const detailModal = useModalState(false); const handleDetail = (booking = null) => { setBooking(booking); detailModal.toggle(); }; const bookingModal = useModalState(false); const handleImport = () => { bookingModal.toggle(); }; const onDelete = () => { const booking = confirmModal.data; if (booking != null) { router.delete( route("monitoring-booking.destroy", booking), { onSuccess: () => toast.success("item deleted"), } ); } }; const handleCheckedCheckbox = (e) => { setBookingsChecked( bookingsChecked.map((booking) => { if (booking.id === e.target.defaultValue * 1) { return { ...booking, isChecked: !booking.isChecked, }; } else { return booking; } }) ); }; const handleExport = () => { const params = bookingsChecked .map((booking) => { if (booking.isChecked) { return booking.id; } }) .filter((isChecked) => { return isChecked !== undefined; }); fetch(route('monitoring-booking.export') +'?'+ qs.stringify({ids: params}, { encodeValuesOnly:true })) .then( res => res.blob() ) .then( blob => { var file = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.href = file; a.download = "bookings.xlsx"; document.body.appendChild(a); a.click(); a.remove(); }); }; const handleCheckAll = (e) => { setBookingsChecked((prevBookingsChecked) => { return prevBookingsChecked.map((booking) => { return { ...booking, isChecked: e.target.checked, }; }); }); }; const params = { q: search, startDate: filterDate[0], endDate: filterDate[1], limit, }; useEffect(() => { setBookingsChecked( bookings.map((booking) => { return { ...booking, isChecked: false, }; }) ); }, [bookings]); useEffect(() => { if (preValue) { router.get( route(route().current()), { q: search, startDate: filterDate[0], endDate: filterDate[1], limit }, { replace: true, preserveState: true, } ) } }, [search, filterDate, limit]) return (
handleToggleForm()}>Tambah
Import
handleExport()}>Export
Terakhir diperbarui: {props.last_updated ? formatDate(props.last_updated).format('DD/MM/Y hh:mm') : 'Belum ada pembaruan'}
setSearch(e.target.value)} />
{bookingsChecked.map((booking) => ( ))}
handleCheckAll(e)} /> Master AWB Flight Number Departure Destination Booked Packaging Used Status Opsi
handleCheckedCheckbox(e)} checked={booking.isChecked} value={booking.id} /> {booking.master_awb} {booking.flight_number} {formatDate(booking.departure).format('DD/MM/yyyy')} {booking.destination} {booking.booked} {booking.kemasan} {booking.used} {+booking.is_available === 0 ? 'Available' : 'Closed'}
); }