import { Head, useForm } from '@inertiajs/react'; import { AdminLayout } from '@/layouts/admin-layout'; import { BlogArticleFormView, transformArticleForm } from './create'; import type { BlogArticleForm, BlogArticleMedia } from './create'; type Option = { id: number; name: string; }; type StatusOption = { value: 'draft' | 'published'; label: string; }; type ContentFontOption = { value: 'sans' | 'serif' | 'technical'; label: string; }; type BlogArticleData = { id: number; blog_category_id: number | null; user_id: number | null; title: string; slug: string; excerpt: string | null; body: string; status: 'draft' | 'published'; content_font: 'sans' | 'serif' | 'technical'; seo_title: string | null; meta_description: string | null; published_at: string | null; tag_ids: number[]; media: BlogArticleMedia[]; }; type BlogArticleEditProps = { article: BlogArticleData; categoryOptions: Option[]; tagOptions: Option[]; authorOptions: Option[]; statusOptions: StatusOption[]; contentFontOptions: ContentFontOption[]; }; export default function BlogArticleEdit({ article, categoryOptions, tagOptions, authorOptions, statusOptions, contentFontOptions, }: BlogArticleEditProps) { const form = useForm({ blog_category_id: article.blog_category_id ? String(article.blog_category_id) : '', user_id: article.user_id ? String(article.user_id) : '', title: article.title, slug: article.slug, excerpt: article.excerpt || '', body: article.body, status: article.status, content_font: article.content_font, seo_title: article.seo_title || '', meta_description: article.meta_description || '', published_at: article.published_at || '', tag_ids: article.tag_ids, new_media: [], remove_media_ids: [], }); const submit = (event: React.FormEvent) => { event.preventDefault(); form.transform(transformArticleForm); form.put(`/admin/blog-articles/${article.id}`, { forceFormData: true }); }; return ( ); }