GGH/gg-backend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Bytescale image uploads

Browse Source
This commit is contained in:
Kailasdevdas
2026-04-14 17:33:21 +05:30
parent 0fddd7a656
commit c282b1825e
15 changed files with 498 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/newsMedia.tsx
+104 -31
View File
@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react";
import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
import {
getNewsApi,
@@ -39,6 +40,8 @@ import {
ChevronLeft,
ChevronRight,
Newspaper,
ImageIcon,
X,
} from "lucide-react";
export default function NewsPage() {
@@ -60,6 +63,7 @@ export default function NewsPage() {
const [form, setForm] = useState({
headline: "",
content: "",
imageUrls: [] as string[],
firstPara: "",
secondPara: "",
date: "",
@@ -96,11 +100,19 @@ export default function NewsPage() {
setForm({ ...form, [e.target.name]: e.target.value });
}
function removeImageUrl(index: number) {
setForm((prev) => ({
...prev,
imageUrls: prev.imageUrls.filter((_, i) => i !== index),
}));
}
function openAdd() {
setEditing(null);
setForm({
headline: "",
content: "",
imageUrls: [],
firstPara: "",
secondPara: "",
date: "",
@@ -114,6 +126,7 @@ export default function NewsPage() {
setForm({
headline: item.Headline || "",
content: item.Content || "",
imageUrls: item.Images ? item.Images.map((img: any) => img.image) : [],
firstPara: item.FirstPara || "",
secondPara: item.SecondPara || "",
date: item.Date ? item.Date.split("T")[0] : "",
@@ -205,6 +218,9 @@ export default function NewsPage() {
<TableHead className="w-[80px] bg-background font-bold">
ID
</TableHead>
<TableHead className="w-[100px] bg-background font-bold">
Cover
</TableHead>
<TableHead className="w-[280px] bg-background font-bold">
Headline
</TableHead>
@@ -226,14 +242,14 @@ export default function NewsPage() {
<TableBody>
{loading ? (
<TableRow>
<TableCell colSpan={6} className="text-center py-10">
<TableCell colSpan={7} className="text-center py-10">
<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
</TableCell>
</TableRow>
) : filteredNews.length === 0 ? (
<TableRow>
<TableCell
colSpan={6}
colSpan={7}
className="text-center text-muted-foreground py-10 text-base"
>
No news articles found
@@ -245,6 +261,19 @@ export default function NewsPage() {
<TableCell className="font-mono text-xs">
{item.Id}
</TableCell>
<TableCell>
{item.Images?.[0] ? (
<img
src={item.Images[0].image}
className="w-10 h-10 object-cover rounded border"
alt="cover"
/>
) : (
<div className="w-10 h-10 bg-muted flex items-center justify-center rounded">
<ImageIcon className="w-4 h-4 text-muted-foreground" />
</div>
)}
</TableCell>
<TableCell>
<div
className="font-semibold text-base line-clamp-2"
@@ -343,20 +372,20 @@ export default function NewsPage() {
</Card>
<Dialog open={openModal} onOpenChange={setOpenModal}>
<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
<DialogContent className="w-full !max-w-6xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl font-bold">
{editing ? "Edit News Article" : "Add New News Article"}
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
<div className="space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
<div className="lg:col-span-2 space-y-6">
<h3 className="font-bold text-base border-b pb-2 text-primary">
Article Information
</h3>
<div className="space-y-4">
<div className="space-y-1">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1 col-span-2">
<label className="text-sm font-semibold">Headline</label>
<Input
name="headline"
@@ -385,42 +414,75 @@ export default function NewsPage() {
/>
</div>
</div>
<div className="space-y-1 pt-2">
<div className="space-y-1">
<label className="text-sm font-semibold">Intro Paragraph</label>
<Textarea
name="firstPara"
value={form.firstPara}
onChange={handleChange}
className="min-h-[140px] text-base"
className="min-h-[100px] text-base"
/>
</div>
<div className="space-y-1">
<label className="text-sm font-semibold">
Full Story Content
</label>
<Textarea
name="content"
value={form.content}
onChange={handleChange}
className="min-h-[200px] text-base"
/>
</div>
</div>
<div className="space-y-6">
<h3 className="font-bold text-base border-b pb-2 text-primary">
Story Details
{/* Image Management Sidebar */}
<div className="space-y-6 border-l pl-6">
<h3 className="font-bold text-base border-b pb-2 text-primary flex items-center gap-2">
<ImageIcon className="w-4 h-4" /> Gallery Management
</h3>
<div className="space-y-4">
<div className="space-y-1">
<label className="text-sm font-semibold">
Second Paragraph
</label>
<Textarea
name="secondPara"
value={form.secondPara}
onChange={handleChange}
className="min-h-[140px] text-base"
/>
</div>
<div className="space-y-1">
<label className="text-sm font-semibold">Content</label>
<Textarea
name="content"
value={form.content}
onChange={handleChange}
className="min-h-[200px] text-base"
/>
<label className="text-sm font-semibold">Upload Images</label>
<BytescaleUploader
value=""
folderPath="/news"
onChange={(url) => {
if (url) {
setForm((prev) => ({
...prev,
imageUrls: [...prev.imageUrls, url],
}));
}
}}
/>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto pr-2 mt-4">
{form.imageUrls.map((url, index) => (
<div
key={index}
className="relative group border rounded-lg overflow-hidden h-24 bg-muted"
>
<img
src={url}
alt="upload"
className="w-full h-full object-cover"
/>
<button
type="button"
onClick={() => removeImageUrl(index)}
className="absolute top-1 right-1 bg-destructive text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
>
<X className="w-3 h-3" />
</button>
</div>
))}
</div>
{form.imageUrls.length === 0 && (
<p className="text-xs text-muted-foreground text-center py-10 border-2 border-dashed rounded-lg">
No images uploaded yet.
</p>
)}
</div>
</div>
</div>
@@ -470,6 +532,17 @@ export default function NewsPage() {
</div>
</div>
<div className="grid grid-cols-3 md:grid-cols-4 gap-2">
{viewData.Images?.map((img: any, i: number) => (
<img
key={i}
src={img.image}
className="w-full h-24 object-cover rounded-md border"
alt="gallery"
/>
))}
</div>
<div className="space-y-5 leading-relaxed text-base">
<div className="bg-muted/30 p-4 rounded-lg border-l-4 border-primary">
<p className="whitespace-pre-line">{viewData.FirstPara}</p>