import Tiptap from '@/components/editor/tiptap'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Switch } from '@/components/ui/switch'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { useEffect, useState } from 'react'; interface Category { id: number; name: string; } interface ServiceFormData { title: string; slug: string; description: string; image: File | null; status: string; category_id: string; } const slugify = (text: string) => { return text .toString() .normalize('NFD') .replace(/[\u0300-\u036f]/g, '') .toLowerCase() .trim() .replace(/\s+/g, '-') .replace(/[^\w-]+/g, '') .replace(/--+/g, '-'); }; export default function ServiceCreate({ auth, categories }: PageProps<{ categories: Category[] }>) { const { data, setData, post, processing, errors, reset } = useForm({ title: '', slug: '', description: '', image: null, status: '1', // Default to active category_id: '', }); const [imagePreviewUrl, setImagePreviewUrl] = useState(null); useEffect(() => { if (data.title) { setData('slug', slugify(data.title)); } }, [data.title]); const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] || null; setData('image', file); if (file) { const reader = new FileReader(); reader.onloadend = () => { setImagePreviewUrl(reader.result as string); }; reader.readAsDataURL(file); } else { setImagePreviewUrl(null); } }; const submit = (e: React.FormEvent) => { e.preventDefault(); post(route('admin.services.store'), { onSuccess: () => { reset(); setImagePreviewUrl(null); }, }); }; return ( Create Service}>
setData('title', e.target.value)} required />
setData('description', newContent)} />
{imagePreviewUrl && (
Image Preview
)}
setData('status', checked ? '1' : '0')} // Convert boolean to string '1'/'0' />
); }