import { Head, router, useForm, usePage } from '@inertiajs/react'; import { Pencil, Plus, Trash2 } from 'lucide-react'; import type { FormEvent } from 'react'; import { useState } from 'react'; import { PaginationControls, SortableHeader, } from '@/components/data-table-controls'; import type { PaginatedData, TableFilters, } from '@/components/data-table-controls'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { slugify } from '@/lib/utils'; import type { Auth } from '@/types'; type PostCategory = { id: number; name: string; slug: string; posts_count: number; created_at: string; }; type PageProps = { auth: Auth; postCategories: PaginatedData; filters: TableFilters; }; type PostCategoryForm = { name: string; slug: string; }; const emptyForm: PostCategoryForm = { name: '', slug: '', }; export default function PostCategoriesIndex({ postCategories, filters, }: PageProps) { const { auth } = usePage().props; const [open, setOpen] = useState(false); const [editing, setEditing] = useState(null); const form = useForm(emptyForm); const can = (permission: string) => auth.permissions.includes(permission); const openCreate = () => { setEditing(null); form.setData(emptyForm); form.clearErrors(); setOpen(true); }; const openEdit = (category: PostCategory) => { setEditing(category); form.setData({ name: category.name, slug: category.slug, }); form.clearErrors(); setOpen(true); }; const submit = (event: FormEvent) => { event.preventDefault(); if (editing) { form.put(`/post-categories/${editing.id}`, { preserveScroll: true, onSuccess: () => setOpen(false), }); return; } form.post('/post-categories', { preserveScroll: true, onSuccess: () => setOpen(false), }); }; const destroy = (category: PostCategory) => { if (!window.confirm(`Delete ${category.name}?`)) { return; } router.delete(`/post-categories/${category.id}`, { preserveScroll: true, }); }; return ( <>

{can('post-categories.create') && ( )}

Category Posts Created {postCategories.data.map((category) => ( ))}

Actions
{category.name} {category.slug}	{category.posts_count}	{new Date( category.created_at, ).toLocaleDateString()}	{can('post-categories.update') && ( )} {can('post-categories.delete') && ( )}

); } PostCategoriesIndex.layout = { breadcrumbs: [ { title: 'Post Categories', href: '/post-categories', }, ], };