300 lines
8.8 KiB
TypeScript
300 lines
8.8 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import ReactQuill from "react-quill";
|
|
import "react-quill/dist/quill.snow.css";
|
|
import DOMPurify from "dompurify";
|
|
|
|
const apiBase = import.meta.env.VITE_API_URL;
|
|
|
|
type NewsItem = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
image_url: string;
|
|
team: string;
|
|
created_at: string;
|
|
};
|
|
|
|
const NewsManager = () => {
|
|
const [news, setNews] = useState<NewsItem[]>([]);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editMode, setEditMode] = useState(false);
|
|
const [currentId, setCurrentId] = useState<number | null>(null);
|
|
const [newTitle, setNewTitle] = useState("");
|
|
const [newDescription, setNewDescription] = useState("");
|
|
const [newImageUrl, setNewImageUrl] = useState("");
|
|
const [newTeam, setNewTeam] = useState("");
|
|
const [uploading, setUploading] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [deleteId, setDeleteId] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
loadNews();
|
|
}, []);
|
|
|
|
const loadNews = async () => {
|
|
try {
|
|
const res = await fetch(`${apiBase}/api/news`);
|
|
const data = await res.json();
|
|
setNews(data);
|
|
} catch (err) {
|
|
console.error("Fehler beim Laden der News:", err);
|
|
}
|
|
};
|
|
|
|
const handleCreateOrUpdateNews = async () => {
|
|
const method = editMode ? "PUT" : "POST";
|
|
const url = editMode
|
|
? `${apiBase}/api/news/${currentId}`
|
|
: `${apiBase}/api/news`;
|
|
|
|
try {
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
title: newTitle,
|
|
description: DOMPurify.sanitize(newDescription),
|
|
image_url: newImageUrl,
|
|
team: newTeam,
|
|
}),
|
|
});
|
|
|
|
if (res.ok) {
|
|
await loadNews();
|
|
setShowForm(false);
|
|
setEditMode(false);
|
|
resetForm();
|
|
} else {
|
|
console.error("Fehler beim Speichern der News");
|
|
}
|
|
} catch (err) {
|
|
console.error("Fehler beim Speichern der News:", err);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (item: NewsItem) => {
|
|
setNewTitle(item.title);
|
|
setNewDescription(item.description);
|
|
setNewImageUrl(item.image_url);
|
|
setNewTeam(item.team);
|
|
setCurrentId(item.id);
|
|
setEditMode(true);
|
|
setShowForm(true);
|
|
};
|
|
|
|
const confirmDelete = (id: number) => {
|
|
setDeleteId(id);
|
|
setShowDeleteModal(true);
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteId) return;
|
|
|
|
try {
|
|
const res = await fetch(`${apiBase}/api/news/${deleteId}`, {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (res.ok) {
|
|
await loadNews();
|
|
} else {
|
|
console.error("Fehler beim Löschen der News");
|
|
}
|
|
} catch (err) {
|
|
console.error("Fehler beim Löschen der News:", err);
|
|
} finally {
|
|
setShowDeleteModal(false);
|
|
setDeleteId(null);
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setNewTitle("");
|
|
setNewDescription("");
|
|
setNewImageUrl("");
|
|
setNewTeam("");
|
|
setCurrentId(null);
|
|
};
|
|
|
|
const handleImageUpload = async (file: File) => {
|
|
const formData = new FormData();
|
|
formData.append("image", file);
|
|
setUploading(true);
|
|
|
|
try {
|
|
const res = await fetch(`${apiBase}/api/upload-news-image`, {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Fehler beim Bild-Upload");
|
|
|
|
const data = await res.json();
|
|
setNewImageUrl(data.imageUrl);
|
|
} catch (err) {
|
|
console.error("Bild-Upload fehlgeschlagen:", err);
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto py-12 px-4">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-3xl font-bold text-frog-600">News verwalten</h1>
|
|
<Button
|
|
className="bg-frog-500 hover:bg-frog-600 text-white"
|
|
onClick={() => {
|
|
resetForm();
|
|
setEditMode(false);
|
|
setShowForm(!showForm);
|
|
}}
|
|
>
|
|
{showForm ? "Abbrechen" : "+ Neue News"}
|
|
</Button>
|
|
</div>
|
|
|
|
{showForm && (
|
|
<div className="mb-8 border p-4 rounded-md bg-gray-50">
|
|
<h2 className="text-xl font-bold text-frog-600 mb-4">
|
|
{editMode ? "News bearbeiten" : "Neue News anlegen"}
|
|
</h2>
|
|
<div className="space-y-4">
|
|
<Input
|
|
placeholder="Titel"
|
|
value={newTitle}
|
|
onChange={(e) => setNewTitle(e.target.value)}
|
|
/>
|
|
<ReactQuill
|
|
theme="snow"
|
|
value={newDescription}
|
|
onChange={setNewDescription}
|
|
className="bg-white rounded-md"
|
|
modules={{
|
|
toolbar: [
|
|
[{ header: [1, 2, false] }],
|
|
["bold", "italic", "underline", "strike"],
|
|
[{ list: "ordered" }, { list: "bullet" }],
|
|
["link"],
|
|
["clean"],
|
|
],
|
|
}}
|
|
formats={[
|
|
"header",
|
|
"bold",
|
|
"italic",
|
|
"underline",
|
|
"strike",
|
|
"list",
|
|
"bullet",
|
|
"link",
|
|
]}
|
|
/>
|
|
|
|
{/* Upload */}
|
|
<Input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) handleImageUpload(file);
|
|
}}
|
|
/>
|
|
{uploading && <p className="text-sm text-gray-400">Bild wird hochgeladen...</p>}
|
|
{newImageUrl && (
|
|
<img
|
|
src={`${apiBase}${newImageUrl}`}
|
|
alt="Vorschau"
|
|
className="mt-2 max-h-40 rounded-md shadow-md"
|
|
/>
|
|
)}
|
|
|
|
<Input
|
|
placeholder="Team"
|
|
value={newTeam}
|
|
onChange={(e) => setNewTeam(e.target.value)}
|
|
/>
|
|
|
|
<Button
|
|
onClick={handleCreateOrUpdateNews}
|
|
className="bg-frog-500 hover:bg-frog-600 text-white w-full"
|
|
>
|
|
{editMode ? "Änderungen speichern" : "Speichern"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showDeleteModal && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
|
|
<h2 className="text-xl font-bold text-frog-600 mb-4 text-center">
|
|
News wirklich löschen?
|
|
</h2>
|
|
<div className="flex justify-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
className="border-gray-300 text-gray-600 hover:bg-gray-100"
|
|
onClick={() => setShowDeleteModal(false)}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button variant="destructive" onClick={handleDelete}>
|
|
Ja, löschen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{news.map((item) => (
|
|
<Card key={item.id} className="overflow-hidden">
|
|
<CardHeader>
|
|
<CardTitle>{item.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{item.image_url && (
|
|
<img
|
|
src={`${apiBase}${item.image_url}`}
|
|
alt={item.title}
|
|
className="w-full rounded-md mb-3 max-h-40 object-cover"
|
|
/>
|
|
)}
|
|
<div
|
|
className="text-gray-600 mb-2 line-clamp-3 prose max-w-none"
|
|
dangerouslySetInnerHTML={{
|
|
__html: DOMPurify.sanitize(item.description),
|
|
}}
|
|
/>
|
|
<p className="text-xs text-gray-400">
|
|
Erstellt am{" "}
|
|
{new Date(item.created_at).toLocaleDateString("de-DE")}
|
|
</p>
|
|
<div className="flex gap-2 mt-4">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-frog-500 text-frog-600 hover:bg-frog-50"
|
|
onClick={() => handleEdit(item)}
|
|
>
|
|
Bearbeiten
|
|
</Button>
|
|
<Button size="sm" variant="destructive" onClick={() => confirmDelete(item.id)}>
|
|
Löschen
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewsManager;
|