feat: implement full CRUD functionality for projects with image upload support and admin dashboard management
This commit is contained in:
Yolando
210
src/features/projects/project-form.tsx
Normal file
210
src/features/projects/project-form.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createProjectAction, updateProjectAction } from "./actions";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { Loader2, Upload, PlusCircle, ArrowLeft, Save } from "lucide-react";
|
||||
|
||||
export function ProjectForm({ initialData, projectId }: { initialData?: any; projectId?: string }) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [preview, setPreview] = useState<string | null>(initialData?.imageUrl || null);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const url = projectId ? `/api/admin/projects/${projectId}` : "/api/admin/projects";
|
||||
const method = projectId ? "PUT" : "POST";
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok || !result.success) {
|
||||
setError(result.message || "An error occurred");
|
||||
setLoading(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
router.refresh();
|
||||
router.push("/admin/dashboard/projects");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("An unexpected error occurred during submission.");
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6 lg:p-10 rounded-3xl bg-card border border-border overflow-hidden relative shadow-sm">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-accent to-purple-500" />
|
||||
|
||||
<div className="mb-8 flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="p-2 rounded-full hover:bg-muted text-muted-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
{projectId ? "Edit Project" : "Create New Project"}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{projectId ? "Update your portfolio case study" : "Add a new case study to your portfolio"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{error && (
|
||||
<div className="p-4 rounded-xl bg-error/10 border border-error/20 text-error text-sm font-medium">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">Project Title</label>
|
||||
<input
|
||||
name="title"
|
||||
required
|
||||
defaultValue={initialData?.title}
|
||||
placeholder="Core Banking API"
|
||||
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">URL Slug</label>
|
||||
<input
|
||||
name="slug"
|
||||
required
|
||||
defaultValue={initialData?.slug}
|
||||
placeholder="core-banking-api"
|
||||
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">Category</label>
|
||||
<select
|
||||
name="category"
|
||||
required
|
||||
defaultValue={initialData?.category || "Enterprise Backend"}
|
||||
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono cursor-pointer"
|
||||
>
|
||||
<option value="Enterprise Backend">Enterprise Backend</option>
|
||||
<option value="Frontend Development">Frontend Development</option>
|
||||
<option value="Mobile Development">Mobile Development</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">Description</label>
|
||||
<textarea
|
||||
name="description"
|
||||
required
|
||||
defaultValue={initialData?.description}
|
||||
rows={4}
|
||||
placeholder="High-performance API Gateway handling 500K+ daily transactions..."
|
||||
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono resize-y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">Live URL (Optional)</label>
|
||||
<input
|
||||
name="liveUrl"
|
||||
type="url"
|
||||
defaultValue={initialData?.liveUrl || ""}
|
||||
placeholder="https://example.com"
|
||||
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">Repository URL (Optional)</label>
|
||||
<input
|
||||
name="repoUrl"
|
||||
type="url"
|
||||
defaultValue={initialData?.repoUrl || ""}
|
||||
placeholder="https://github.com/..."
|
||||
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold">Cover Image</label>
|
||||
<label className="flex flex-col items-center justify-center w-full h-40 rounded-xl border-2 border-dashed border-border hover:border-accent/50 bg-muted/10 hover:bg-muted/30 cursor-pointer transition-colors relative overflow-hidden">
|
||||
{preview ? (
|
||||
<img src={preview} alt="Preview" className="w-full h-full object-cover opacity-80" />
|
||||
) : (
|
||||
<div className="flex flex-col items-center text-muted-foreground">
|
||||
<Upload size={24} className="mb-2" />
|
||||
<span className="text-sm font-medium">Click to upload image</span>
|
||||
<span className="text-xs mt-1 opacity-75">PNG, JPG, WEBP recommended</span>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
name="image"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) setPreview(URL.createObjectURL(file));
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isPublished"
|
||||
id="isPublished"
|
||||
className="w-5 h-5 rounded border-border text-accent focus:ring-accent/50"
|
||||
defaultChecked={initialData ? initialData.isPublished : true}
|
||||
/>
|
||||
<label htmlFor="isPublished" className="text-sm font-medium cursor-pointer">
|
||||
Publish immediately (visible to visitors)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-border/50 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex items-center gap-2 px-8 py-3 rounded-xl bg-foreground text-background font-semibold text-sm hover:opacity-90 transition-all disabled:opacity-50 disabled:scale-100 hover:scale-[1.02] shadow-md"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : projectId ? (
|
||||
<>
|
||||
<Save size={18} />
|
||||
Update Project
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusCircle size={18} />
|
||||
Save Project
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user