261 lines
9.6 KiB
TypeScript
261 lines
9.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import { toast } from 'sonner';
|
|
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
import { api } from '../lib/api';
|
|
import type { ApiResponse } from '../lib/api';
|
|
import type { Blog } from '../types';
|
|
import { useAuthStore } from '../stores/authStore';
|
|
import PageHeader from '../components/ui/PageHeader';
|
|
import SearchableSelect from '../components/ui/SearchableSelect';
|
|
|
|
const schema = z.object({
|
|
title: z.string().min(3, 'عنوان الزامی است'),
|
|
summary: z.string().optional(),
|
|
body: z.string().min(10, 'محتوا الزامی است'),
|
|
tags: z.string().optional(),
|
|
status: z.enum(['draft', 'published']),
|
|
image_url: z.string().optional(),
|
|
});
|
|
type FormData = z.infer<typeof schema>;
|
|
|
|
async function uploadBlogImage(file: File): Promise<string> {
|
|
const token = useAuthStore.getState().token;
|
|
const fd = new FormData();
|
|
fd.append('file', file);
|
|
const res = await fetch('/file/upload/clinic_pro/blog/field_image', {
|
|
method: 'POST',
|
|
headers: { ...(token ? { Authorization: `Bearer ${token}` } : {}) },
|
|
body: fd,
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (res.status === 401) {
|
|
useAuthStore.getState().logout();
|
|
window.location.replace('/admin/login');
|
|
throw new Error('نشست منقضی شده است');
|
|
}
|
|
if (!res.ok) throw new Error(json?.errors?.[0]?.message ?? 'خطا در آپلود تصویر');
|
|
return json.data.image_url as string;
|
|
}
|
|
|
|
export default function BlogFormPage() {
|
|
const { uuid } = useParams<{ uuid: string }>();
|
|
const navigate = useNavigate();
|
|
const qc = useQueryClient();
|
|
const isEdit = !!uuid;
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['blog', uuid],
|
|
queryFn: () => api.get<ApiResponse<{ data: Blog }>>(`/api/v1/blog/${uuid}`),
|
|
enabled: isEdit,
|
|
});
|
|
|
|
// detail endpoint is double-nested: success(['data' => $blog->toArray()])
|
|
const blog = data?.data?.data;
|
|
|
|
const { register, handleSubmit, control, watch, setValue, formState: { errors, isSubmitting } } = useForm<FormData>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { status: 'draft' },
|
|
values: blog
|
|
? {
|
|
title: blog.title,
|
|
summary: blog.summary ?? '',
|
|
body: blog.body,
|
|
tags: blog.tags?.join(', ') ?? '',
|
|
status: blog.status,
|
|
image_url: blog.image_url ?? '',
|
|
}
|
|
: undefined,
|
|
});
|
|
|
|
const imageUrl = watch('image_url');
|
|
|
|
const buildPayload = (d: FormData) => ({
|
|
title: d.title,
|
|
body: d.body,
|
|
summary: d.summary,
|
|
status: d.status,
|
|
image_url: d.image_url ?? '',
|
|
tags: d.tags ? d.tags.split(',').map((t) => t.trim()).filter(Boolean) : [],
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (d: FormData) => api.post<ApiResponse<Blog>>('/api/v1/blog', buildPayload(d)),
|
|
onSuccess: () => {
|
|
toast.success('مقاله ذخیره شد');
|
|
qc.invalidateQueries({ queryKey: ['blogs'] });
|
|
navigate('/admin/blogs');
|
|
},
|
|
onError: (err: Error) => toast.error(err.message),
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: (d: FormData) => api.patch<ApiResponse<Blog>>(`/api/v1/blog/${uuid}`, buildPayload(d)),
|
|
onSuccess: () => {
|
|
toast.success('مقاله بروزرسانی شد');
|
|
qc.invalidateQueries({ queryKey: ['blogs'] });
|
|
qc.invalidateQueries({ queryKey: ['blog', uuid] });
|
|
navigate('/admin/blogs');
|
|
},
|
|
onError: (err: Error) => toast.error(err.message),
|
|
});
|
|
|
|
const onSubmit = (d: FormData) => {
|
|
if (isEdit) updateMutation.mutate(d);
|
|
else createMutation.mutate(d);
|
|
};
|
|
|
|
const onImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
setUploading(true);
|
|
try {
|
|
const url = await uploadBlogImage(file);
|
|
setValue('image_url', url, { shouldValidate: true });
|
|
toast.success('تصویر آپلود شد');
|
|
} catch (err) {
|
|
toast.error((err as Error).message);
|
|
} finally {
|
|
setUploading(false);
|
|
e.target.value = '';
|
|
}
|
|
};
|
|
|
|
if (isEdit && isLoading) {
|
|
return (
|
|
<div className="cp-card p-6 space-y-3">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<div key={i} className="h-10 rounded-lg skeleton" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title={isEdit ? 'ویرایش مقاله' : 'نوشتن مقاله جدید'}
|
|
breadcrumbs={[
|
|
{ label: 'داشبورد', to: '/admin/dashboard' },
|
|
{ label: 'بلاگ', to: '/admin/blogs' },
|
|
{ label: isEdit ? 'ویرایش' : 'جدید' },
|
|
]}
|
|
/>
|
|
|
|
<div className="cp-card p-6">
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-5">
|
|
<div>
|
|
<label className="">عنوان مقاله *</label>
|
|
<input {...register('title')} placeholder="عنوان جذاب بنویسید..."
|
|
className="cp-input h-11" />
|
|
{errors.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="">خلاصه</label>
|
|
<textarea {...register('summary')} rows={2} placeholder="خلاصه کوتاه مقاله..."
|
|
className="input resize-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="">محتوا *</label>
|
|
<Controller
|
|
control={control}
|
|
name="body"
|
|
render={({ field }) => (
|
|
<div dir="rtl" className="ck-rtl">
|
|
<CKEditor
|
|
editor={ClassicEditor as never}
|
|
data={field.value ?? ''}
|
|
onChange={(_evt: unknown, editor: { getData: () => string }) =>
|
|
field.onChange(editor.getData())
|
|
}
|
|
config={{
|
|
licenseKey: 'GPL',
|
|
language: 'fa',
|
|
toolbar: [
|
|
'heading', '|',
|
|
'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|',
|
|
'blockQuote', 'insertTable', '|',
|
|
'undo', 'redo',
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
/>
|
|
{errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
<div>
|
|
<label className="">تصویر شاخص</label>
|
|
{imageUrl ? (
|
|
<div className="relative">
|
|
<img src={imageUrl} alt="cover"
|
|
style={{ width: '100%', height: 160, objectFit: 'cover', borderRadius: 8 }} />
|
|
<button type="button" onClick={() => setValue('image_url', '', { shouldValidate: true })}
|
|
className="cp-btn-secondary w-full justify-center py-2 mt-2">
|
|
حذف تصویر
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<label className="cp-btn-secondary w-full justify-center py-2.5 cursor-pointer"
|
|
style={{ display: 'flex' }}>
|
|
{uploading ? 'در حال آپلود...' : 'انتخاب تصویر'}
|
|
<input type="file" accept="image/*" hidden disabled={uploading} onChange={onImageSelect} />
|
|
</label>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="">وضعیت انتشار</label>
|
|
<Controller
|
|
control={control}
|
|
name="status"
|
|
render={({ field }) => (
|
|
<SearchableSelect
|
|
options={[
|
|
{ value: 'draft', label: 'پیشنویس' },
|
|
{ value: 'published', label: 'منتشر شده' },
|
|
]}
|
|
value={field.value ?? null}
|
|
onChange={(v) => field.onChange(v ?? 'draft')}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="">تگها (با ویرگول جدا کنید)</label>
|
|
<input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3"
|
|
className="cp-input h-11" />
|
|
</div>
|
|
|
|
<div className="pt-4 space-y-3">
|
|
<button type="submit" disabled={isSubmitting}
|
|
className="cp-btn-primary w-full justify-center py-2.5">
|
|
{isSubmitting ? 'در حال ذخیره...' : isEdit ? 'بروزرسانی' : 'ذخیره'}
|
|
</button>
|
|
<button type="button" onClick={() => navigate('/admin/blogs')}
|
|
className="cp-btn-secondary w-full justify-center py-2.5">
|
|
لغو
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|