0.1.3

2025-01-18 19:05:23 -05:00
parent 3f282d6ecd
commit 14938f63df
23 changed files with 652 additions and 177 deletions
--- a/resources/js/Pages/Comic/HistoriesByComic.jsx
+++ b/resources/js/Pages/Comic/HistoriesByComic.jsx
@@ -0,0 +1,92 @@
+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>
+    );
+}