93 lines
3.6 KiB
JavaScript
93 lines
3.6 KiB
JavaScript
import { useState } from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import AppLayout from '@/Layouts/AppLayout.jsx';
|
|
|
|
import { DateTime } from "luxon";
|
|
|
|
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
|
|
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button.jsx";
|
|
|
|
export default function Histories({ auth, histories }) {
|
|
|
|
const deleteButtonOnClickHandler = () => {
|
|
router.visit(route('comics.patchHistories'), {
|
|
data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
|
|
method: "PATCH",
|
|
only: ['histories'],
|
|
onSuccess: data => {
|
|
toast({
|
|
title: "All set",
|
|
description: `The histories has been deleted.`,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
const removeDuplicatedButtonOnClickHandler = () => {
|
|
router.visit(route('comics.destroyHistories'), {
|
|
data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
|
|
method: "DELETE",
|
|
only: ['histories'],
|
|
onSuccess: data => {
|
|
toast({
|
|
title: "All set",
|
|
description: `The duplicated records has been deleted.`,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<AppLayout auth={ auth } header={
|
|
<>
|
|
<BreadcrumbSeparator className="hidden lg:block" />
|
|
<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 gap-2">
|
|
<Button size="sm" asChild>
|
|
<Link href="?group=">
|
|
Group by Chapter
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Comic</TableHead>
|
|
<TableHead>Chapter</TableHead>
|
|
<TableHead>Read at</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{ histories.map((comic, i) =>
|
|
comic.histories.map((record, j) => (
|
|
<TableRow key={ j }>
|
|
{ (j === 0) ? <TableCell className="w-[40%]" rowspan={ comic.histories.length }>
|
|
<Link href={ route('comics.chapters', comic.comic.comic_pathword) }>
|
|
{ comic.comic.comic_name }
|
|
</Link>
|
|
</TableCell> : null }
|
|
<TableCell>
|
|
<Link href={ route('comics.read', [comic.comic.comic_pathword, record.chapter_uuid]) }>
|
|
{ record.chapter_name }
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>{ record.read_at }</TableCell>
|
|
</TableRow>
|
|
) )
|
|
) }
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|