117 lines
4.6 KiB
JavaScript
117 lines
4.6 KiB
JavaScript
import { useState } from "react";
|
|
import { Head, router } from '@inertiajs/react';
|
|
import AppLayout from '@/Layouts/AppLayout.jsx';
|
|
|
|
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
|
|
import { Button } from '@/components/ui/button';
|
|
import Checkbox from "@/components/Checkbox";
|
|
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
|
|
import { useToast } from "@/hooks/use-toast.js";
|
|
|
|
export default function Histories({ auth, histories }) {
|
|
|
|
const { toast } = useToast();
|
|
const [ids, setIds] = useState([]);
|
|
|
|
const checkboxOnChangeHandler = (e) => {
|
|
if (e.target.checked) {
|
|
// Add to ids
|
|
setIds([...ids, e.target.dataset.hid]);
|
|
} else {
|
|
setIds(ids.filter(id => id !== e.target.dataset.hid));
|
|
}
|
|
}
|
|
|
|
const deleteButtonOnClickHandler = (e) => {
|
|
if (ids.length === 0) {
|
|
toast({
|
|
title: "Error",
|
|
description: `No items selected.`,
|
|
});
|
|
return;
|
|
}
|
|
router.visit(route('comics.destroyHistories'), {
|
|
data: { ids: ids },
|
|
method: "PATCH",
|
|
only: ['histories'],
|
|
onSuccess: data => {
|
|
toast({
|
|
title: "All set",
|
|
description: `The histories has been deleted.`,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<AppLayout auth={ auth } header={
|
|
<>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Histories</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</>
|
|
}>
|
|
<Head>
|
|
<title>Histories</title>
|
|
</Head>
|
|
<div className="p-3 pt-1 w-[90%] mx-auto">
|
|
<div className="flex justify-end">
|
|
<Button size="sm" onClick={ () => deleteButtonOnClickHandler() }>Delete Selected</Button>
|
|
</div>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Select</TableHead>
|
|
<TableHead>Comic</TableHead>
|
|
<TableHead>Chapter</TableHead>
|
|
<TableHead>Read at</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{ histories.data.map((h, i) => (
|
|
<TableRow key={ i }>
|
|
<TableCell>
|
|
<label>
|
|
<Checkbox data-hid={ h.hid } defaultChecked={ false }
|
|
name={ `checkbox-${ h.hid }` }
|
|
onChange={ (e) => checkboxOnChangeHandler(e) } />
|
|
</label>
|
|
</TableCell>
|
|
<TableCell>{ h.name }</TableCell>
|
|
<TableCell>{ h.comic.name }</TableCell>
|
|
<TableCell>{ h.created_at }</TableCell>
|
|
</TableRow>
|
|
)) }
|
|
</TableBody>
|
|
</Table>
|
|
<div>
|
|
<Pagination className="justify-end">
|
|
<PaginationContent>
|
|
{ histories.current_page > 1 && (
|
|
<PaginationItem>
|
|
<PaginationPrevious href={ histories.prev_page_url } only={['histories']} />
|
|
</PaginationItem>
|
|
) }
|
|
<PaginationItem>
|
|
<PaginationLink href="#">{ histories.current_page }</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
{ histories.current_page < histories.last_page && (
|
|
<PaginationItem>
|
|
<PaginationNext href={ histories.next_page_url } only={['histories']} />
|
|
</PaginationItem>
|
|
) }
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|