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 { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { slugify } from '@/lib/utils'; import type { Auth } from '@/types'; type CategoryOption = { id: number; name: string; }; type Category = { id: number; parent_id: number | null; name: string; slug: string; description: string | null; is_active: boolean; children_count: number; created_at: string; parent: CategoryOption | null; }; type PageProps = { auth: Auth; categories: PaginatedData; categoryOptions: CategoryOption[]; filters: TableFilters; }; type CategoryForm = { parent_id: number | null; name: string; slug: string; description: string; is_active: boolean; }; const emptyForm: CategoryForm = { parent_id: null, name: '', slug: '', description: '', is_active: true, }; export default function CategoriesIndex({ categories, categoryOptions, 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 availableParents = categoryOptions.filter( (category) => category.id !== editing?.id, ); const openCreate = () => { setEditing(null); form.setData(emptyForm); form.clearErrors(); setOpen(true); }; const openEdit = (category: Category) => { setEditing(category); form.setData({ parent_id: category.parent_id, name: category.name, slug: category.slug, description: category.description ?? '', is_active: category.is_active, }); form.clearErrors(); setOpen(true); }; const submit = (event: FormEvent) => { event.preventDefault(); if (editing) { form.put(`/categories/${editing.id}`, { preserveScroll: true, onSuccess: () => setOpen(false), }); return; } form.post('/categories', { preserveScroll: true, onSuccess: () => setOpen(false), }); }; const destroy = (category: Category) => { if (!window.confirm(`Delete ${category.name}?`)) { return; } router.delete(`/categories/${category.id}`, { preserveScroll: true }); }; return ( <>
{can('categories.create') && ( )}
Category Status Created {categories.data.map((category) => ( ))}
Parent Children Actions
{category.name}
{category.slug}
{category.parent?.name ?? 'Root'} {category.children_count} {category.is_active ? 'Active' : 'Inactive'} {new Date( category.created_at, ).toLocaleDateString()}
{can('categories.update') && ( )} {can('categories.delete') && ( )}
{editing ? 'Edit category' : 'New category'}
{ const name = event.target.value; form.setData('name', name); form.setData('slug', slugify(name)); }} />
form.setData( 'description', event.target.value, ) } />
); } CategoriesIndex.layout = { breadcrumbs: [ { title: 'Categories', href: '/categories', }, ], };