Maj taxonomies

maj url photo
+ page 404
+ gestion programmation d'article

admin/src/components/BlogForm.tsx

@@ -1,12 +1,16 @@
 "use client";
 
-import { useTransition, useState } from 'react';
+import { useTransition, useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { createBlogPost, updateBlogPost } from '@/app/actions/blog';
-import { Loader2, ArrowLeft, Save } from 'lucide-react';
+import { Loader2, ArrowLeft, Save, Calendar, CheckCircle2, FileText, Archive } from 'lucide-react';
 import Link from 'next/link';
 import { toast } from 'react-hot-toast';
 import RichTextEditor from './RichTextEditor';
+import ImageUploader from './ImageUploader';
+import TagInput from './TagInput';
+import { ContentStatus } from '@prisma/client';
+import { getAllTags } from '@/app/actions/taxonomies';
 
 interface Props {
   initialData?: {
@@ -20,6 +24,8 @@ interface Props {
     tags?: string[];
     metaTitle?: string | null;
     metaDescription?: string | null;
+    publishedAt?: Date | string | null;
+    status?: ContentStatus;
   };
 }
 
@@ -27,29 +33,52 @@ export default function BlogForm({ initialData }: Props) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [content, setContent] = useState(initialData?.content || '');
+  const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+  const [tags, setTags] = useState<string[]>(initialData?.tags || []);
+  const [allExistingTags, setAllExistingTags] = useState<string[]>([]);
+  const [publishedAtValue, setPublishedAtValue] = useState(
+    initialData?.publishedAt 
+      ? new Date(initialData.publishedAt).toISOString().slice(0, 16) 
+      : new Date().toISOString().slice(0, 16)
+  );
+
+  const isPublished = new Date(publishedAtValue) <= new Date();
+
+  useEffect(() => {
+    getAllTags().then(setAllExistingTags);
+  }, []);
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
+    const publishedAtStr = formData.get('publishedAt') as string;
+    
     const data = {
       title: formData.get('title') as string,
       slug: formData.get('slug') as string,
       excerpt: formData.get('excerpt') as string,
       content: content,
       author: formData.get('author') as string,
-      imageUrl: formData.get('imageUrl') as string,
-      tags: (formData.get('tags') as string)?.split(',').map(t => t.trim()).filter(t => t !== ''),
+      imageUrl: imageUrl, // Use state value
+      tags: tags, // Use state value
       metaTitle: formData.get('metaTitle') as string,
       metaDescription: formData.get('metaDescription') as string,
+      publishedAt: publishedAtStr ? new Date(publishedAtStr) : undefined,
+      status: formData.get('status') as ContentStatus,
     };
 
+    if (!data.imageUrl) {
+      toast.error("Une image est requise");
+      return;
+    }
+
     startTransition(async () => {
       const result = initialData 
         ? await updateBlogPost(initialData.id, data)
         : await createBlogPost(data);
 
       if (result.success) {
-        toast.success(initialData ? "Article mis à jour" : "Article publié avec succès");
+        toast.success(initialData ? "Article mis à jour" : "Article créé avec succès");
         router.push('/blog');
         router.refresh();
       } else {
@@ -73,7 +102,21 @@ export default function BlogForm({ initialData }: Props) {
 
       <form onSubmit={handleSubmit} className="space-y-8">
         <div className="card space-y-6">
-          <h2 className="text-xl font-semibold text-white border-b border-slate-800 pb-4">Informations Générales</h2>
+          <div className="flex items-center justify-between border-b border-slate-800 pb-4">
+            <h2 className="text-xl font-semibold text-white">Informations Générales</h2>
+            <div className="flex items-center gap-3">
+               <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Statut :</label>
+               <select 
+                  name="status"
+                  defaultValue={initialData?.status || 'PUBLISHED'}
+                  className="bg-slate-900 border border-slate-700 text-white text-xs rounded-full px-4 py-1.5 focus:outline-none focus:border-brand-500 appearance-none cursor-pointer hover:bg-slate-800 transition-colors"
+               >
+                  <option value="DRAFT">Brouillon</option>
+                  <option value="PUBLISHED">Publié</option>
+                  <option value="ARCHIVED">Archivé</option>
+               </select>
+            </div>
+          </div>
           
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-2">
@@ -98,15 +141,30 @@ export default function BlogForm({ initialData }: Props) {
             </div>
           </div>
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-400">URL de l'image</label>
-            <input 
-              name="imageUrl" 
-              defaultValue={initialData?.imageUrl}
-              required 
-              className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
-              placeholder="https://images.unsplash.com/..."
-            />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <ImageUploader 
+                label="Image de couverture"
+                value={imageUrl}
+                onChange={setImageUrl}
+                name="imageUrl"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-slate-400">
+                Date de publication {isPublished ? '(Publiée)' : '(Programmation)'}
+              </label>
+              <div className="relative">
+                <Calendar className="absolute left-3 top-3 w-5 h-5 text-slate-500" />
+                <input 
+                  name="publishedAt" 
+                  type="datetime-local"
+                  value={publishedAtValue}
+                  onChange={(e) => setPublishedAtValue(e.target.value)}
+                  className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 pl-10 text-white focus:outline-none focus:border-indigo-500"
+                />
+              </div>
+            </div>
           </div>
 
           <div className="space-y-2">
@@ -147,12 +205,12 @@ export default function BlogForm({ initialData }: Props) {
               <p className="text-xs text-slate-500 italic">Laissez vide pour générer automatiquement à partir du titre.</p>
             </div>
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-400">Mots-clés (tags, séparés par des virgules)</label>
-              <input 
-                name="tags" 
-                defaultValue={initialData?.tags?.join(', ') || ''}
-                className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
-                placeholder="tech, afrique, innovation"
+              <TagInput 
+                value={tags}
+                onChange={setTags}
+                suggestions={allExistingTags}
+                label="Mots-clés (tags)"
+                placeholder="tech, innovation, afrique..."
               />
             </div>
           </div>
@@ -190,7 +248,7 @@ export default function BlogForm({ initialData }: Props) {
             ) : (
               <Save className="w-6 h-6" />
             )}
-            {initialData ? 'Enregistrer les modifications' : 'Publier l\'article'}
+            {initialData ? 'Enregistrer les modifications' : 'Créer l\'article'}
           </button>
         </div>
       </form>