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 type { PageProps } from '@/types'; import { Head, router, useForm } from '@inertiajs/react'; import { useEffect, useState } from 'react'; interface Category { id: number; name: string; } interface Service { id: number; title: string; slug: string; description: string; image: string; status: boolean; category_id: number; post_by: number | null; edit_by: number | null; created_at: string; updated_at: string; } interface ServiceFormData { title: string; slug: string; description: string; image: File | null; status: boolean; 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 ServiceEdit({ auth, service, categories }: PageProps<{ service: Service; categories: Category[] }>) { const { data, setData, post, processing, errors, reset } = useForm({ title: service.title, slug: service.slug, description: service.description, image: null, // Image will be handled separately for updates status: service.status === '1', // Convert string '1'/'0' to boolean category_id: String(service.category_id), }); const imgUrl = service.image ? `/storage/${service.image}` : null; const [imagePreviewUrl, setImagePreviewUrl] = useState(imgUrl); 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(); const formData = new FormData(); Object.entries(data).forEach(([key, value]) => { if (key === 'image' && value === null) { // Don't append image if it's null (no new image selected) return; } // Explicitly handle status conversion if it's a boolean in data if (key === 'status') { formData.append(key, value ? '1' : '0'); // Assuming data.status is boolean } else if (value !== null && value !== undefined) { formData.append(key, value as string | Blob); } }); formData.append('_method', 'PUT'); // Use 'PUT' for consistency with ProjectEdit router.post(route('admin.services.update', service.id), formData, { onSuccess: () => { router.visit(route('admin.services.index')); }, onError: (errors) => { console.error('Form submission errors:', errors); }, }); }; return ( Edit Service}>
setData('title', e.target.value)} required />
setData('description', newContent)} />
{imagePreviewUrl && (
Image Preview
)}
setData('status', checked)} />
); }