Merge pull request 'feat/news-&-media' (#4) from feat/news-&-media into dev
Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
@@ -0,0 +1,15 @@
|
|||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "NewsMedia" (
|
||||||
|
"id" SERIAL NOT NULL,
|
||||||
|
"headline" TEXT NOT NULL,
|
||||||
|
"content" TEXT,
|
||||||
|
"firstPara" TEXT,
|
||||||
|
"secondPara" TEXT,
|
||||||
|
"author" TEXT,
|
||||||
|
"date" TIMESTAMP(3),
|
||||||
|
"isActive" BOOLEAN NOT NULL DEFAULT true,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "NewsMedia_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
@@ -185,4 +185,20 @@ model EmailConfig {
|
|||||||
|
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
|
}
|
||||||
|
|
||||||
|
model NewsMedia {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
|
||||||
|
headline String
|
||||||
|
content String?
|
||||||
|
firstPara String?
|
||||||
|
secondPara String?
|
||||||
|
author String?
|
||||||
|
date DateTime?
|
||||||
|
|
||||||
|
isActive Boolean @default(true)
|
||||||
|
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
}
|
}
|
||||||
@@ -13,6 +13,7 @@ import appointmentRoutes from "./routes/appointment.routes.js";
|
|||||||
import inquiryRoutes from "./routes/inquiry.routes.js";
|
import inquiryRoutes from "./routes/inquiry.routes.js";
|
||||||
import academicsResearchRoutes from "./routes/academicsResearch.routes.js";
|
import academicsResearchRoutes from "./routes/academicsResearch.routes.js";
|
||||||
import emailConfigRoutes from "./routes/emailConfig.routes.js";
|
import emailConfigRoutes from "./routes/emailConfig.routes.js";
|
||||||
|
import newsMediaRoutes from "./routes/newsMedia.routes.js";
|
||||||
|
|
||||||
dotenv.config();
|
dotenv.config();
|
||||||
|
|
||||||
@@ -49,6 +50,7 @@ app.use("/api/appointments", appointmentRoutes);
|
|||||||
app.use("/api/inquiry", inquiryRoutes);
|
app.use("/api/inquiry", inquiryRoutes);
|
||||||
app.use("/api/academics", academicsResearchRoutes);
|
app.use("/api/academics", academicsResearchRoutes);
|
||||||
app.use("/api/email", emailConfigRoutes);
|
app.use("/api/email", emailConfigRoutes);
|
||||||
|
app.use("/api/newsMedia", newsMediaRoutes);
|
||||||
|
|
||||||
const PORT = process.env.PORT || 3000;
|
const PORT = process.env.PORT || 3000;
|
||||||
app.listen(PORT, () => {
|
app.listen(PORT, () => {
|
||||||
|
|||||||
@@ -0,0 +1,202 @@
|
|||||||
|
import prisma from "../prisma/client.js";
|
||||||
|
|
||||||
|
// GET ALL NEWS
|
||||||
|
|
||||||
|
export const getAllNews = async (req, res) => {
|
||||||
|
try {
|
||||||
|
const page = parseInt(req.query.page);
|
||||||
|
const limit = parseInt(req.query.limit);
|
||||||
|
|
||||||
|
if (!page && !limit) {
|
||||||
|
const news = await prisma.newsMedia.findMany({
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = news.map((n) => ({
|
||||||
|
Id: n.id.toString(),
|
||||||
|
Headline: n.headline,
|
||||||
|
Content: n.content,
|
||||||
|
FirstPara: n.firstPara,
|
||||||
|
SecondPara: n.secondPara,
|
||||||
|
Date: n.date,
|
||||||
|
Author: n.author,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
data: response,
|
||||||
|
meta: null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentPage = page || 1;
|
||||||
|
const currentLimit = limit || 10;
|
||||||
|
|
||||||
|
const skip = (currentPage - 1) * currentLimit;
|
||||||
|
|
||||||
|
const [news, total] = await Promise.all([
|
||||||
|
prisma.newsMedia.findMany({
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
skip,
|
||||||
|
take: currentLimit,
|
||||||
|
}),
|
||||||
|
prisma.newsMedia.count(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const response = news.map((n) => ({
|
||||||
|
Id: n.id.toString(),
|
||||||
|
Headline: n.headline,
|
||||||
|
Content: n.content,
|
||||||
|
FirstPara: n.firstPara,
|
||||||
|
SecondPara: n.secondPara,
|
||||||
|
Date: n.date,
|
||||||
|
Author: n.author,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
data: response,
|
||||||
|
meta: {
|
||||||
|
total,
|
||||||
|
page: currentPage,
|
||||||
|
limit: currentLimit,
|
||||||
|
totalPages: Math.ceil(total / currentLimit),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: "Failed to fetch news",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// GET NEWS BY ID
|
||||||
|
|
||||||
|
export const getNewsById = async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
const n = await prisma.newsMedia.findUnique({
|
||||||
|
where: { id: Number(id) },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!n) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
message: "News not found",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = {
|
||||||
|
Id: n.id.toString(),
|
||||||
|
Headline: n.headline,
|
||||||
|
Content: n.content,
|
||||||
|
FirstPara: n.firstPara,
|
||||||
|
SecondPara: n.secondPara,
|
||||||
|
Date: n.date,
|
||||||
|
Author: n.author,
|
||||||
|
};
|
||||||
|
|
||||||
|
return res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
data: response,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: "Failed to fetch news",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// CREATE NEWS
|
||||||
|
|
||||||
|
export const createNews = async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { headline, content, firstPara, secondPara, date, author } = req.body;
|
||||||
|
|
||||||
|
if (!headline) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: "Headline is required",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const news = await prisma.newsMedia.create({
|
||||||
|
data: {
|
||||||
|
headline,
|
||||||
|
content,
|
||||||
|
firstPara,
|
||||||
|
secondPara,
|
||||||
|
date: date ? new Date(date) : null,
|
||||||
|
author,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(201).json({
|
||||||
|
success: true,
|
||||||
|
message: "News created successfully",
|
||||||
|
data: news,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: "Failed to create news",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// UPDATE NEWS
|
||||||
|
|
||||||
|
export const updateNews = async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
const news = await prisma.newsMedia.update({
|
||||||
|
where: { id: Number(id) },
|
||||||
|
data: {
|
||||||
|
...req.body,
|
||||||
|
date: req.body.date ? new Date(req.body.date) : undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
message: "News updated successfully",
|
||||||
|
data: news,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: "Failed to update news",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// DELETE NEWS
|
||||||
|
|
||||||
|
export const deleteNews = async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
await prisma.newsMedia.delete({
|
||||||
|
where: { id: Number(id) },
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
message: "News deleted successfully",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: "Failed to delete news",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import express from "express";
|
||||||
|
import {
|
||||||
|
createNews,
|
||||||
|
getAllNews,
|
||||||
|
getNewsById,
|
||||||
|
updateNews,
|
||||||
|
deleteNews,
|
||||||
|
} from "../controllers/newsMedia.controller.js";
|
||||||
|
|
||||||
|
import jwtAuthMiddleware from "../middleware/auth.js";
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
// PUBLIC ROUTES
|
||||||
|
router.get("/getAll", getAllNews);
|
||||||
|
router.get("/:id", getNewsById);
|
||||||
|
|
||||||
|
// PROTECTED ROUTES
|
||||||
|
router.post("/", jwtAuthMiddleware, createNews);
|
||||||
|
router.patch("/:id", jwtAuthMiddleware, updateNews);
|
||||||
|
router.delete("/:id", jwtAuthMiddleware, deleteNews);
|
||||||
|
|
||||||
|
export default router;
|
||||||
@@ -19,6 +19,7 @@ import CareerPage from "./pages/Career";
|
|||||||
import CandidatePage from "./pages/candidates";
|
import CandidatePage from "./pages/candidates";
|
||||||
import InquiryPage from "./pages/inquiry";
|
import InquiryPage from "./pages/inquiry";
|
||||||
import AcademicsPage from "./pages/Academics";
|
import AcademicsPage from "./pages/Academics";
|
||||||
|
import NewsPage from "./pages/newsMedia";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
@@ -42,6 +43,7 @@ export default function App() {
|
|||||||
<Route path="/candidate" element={<CandidatePage />} />
|
<Route path="/candidate" element={<CandidatePage />} />
|
||||||
<Route path="/inquiry" element={<InquiryPage />} />
|
<Route path="/inquiry" element={<InquiryPage />} />
|
||||||
<Route path="/academics" element={<AcademicsPage />} />
|
<Route path="/academics" element={<AcademicsPage />} />
|
||||||
|
<Route path="/news" element={<NewsPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import apiClient from "@/api/client";
|
||||||
|
|
||||||
|
export const getNewsApi = async (page = 1, limit = 10) => {
|
||||||
|
const res = await apiClient.get(
|
||||||
|
`/newsMedia/getAll?page=${page}&limit=${limit}`,
|
||||||
|
);
|
||||||
|
return res.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createNewsApi = async (data: any) => {
|
||||||
|
const res = await apiClient.post("/newsMedia", data);
|
||||||
|
return res.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateNewsApi = async (id: number, data: any) => {
|
||||||
|
const res = await apiClient.patch(`/newsMedia/${id}`, data);
|
||||||
|
return res.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteNewsApi = async (id: number) => {
|
||||||
|
const res = await apiClient.delete(`/newsMedia/${id}`);
|
||||||
|
return res.data;
|
||||||
|
};
|
||||||
@@ -35,6 +35,10 @@ export default function Sidebar() {
|
|||||||
name: "Academics & Research",
|
name: "Academics & Research",
|
||||||
path: "/academics",
|
path: "/academics",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "News & Media",
|
||||||
|
path: "/news",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Email",
|
name: "Email",
|
||||||
path: "/email",
|
path: "/email",
|
||||||
|
|||||||
@@ -0,0 +1,400 @@
|
|||||||
|
import { useState, useEffect, useCallback } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
getNewsApi,
|
||||||
|
createNewsApi,
|
||||||
|
updateNewsApi,
|
||||||
|
deleteNewsApi,
|
||||||
|
} from "@/api/newsMedia";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogFooter,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Loader2,
|
||||||
|
Plus,
|
||||||
|
Pencil,
|
||||||
|
Trash,
|
||||||
|
RefreshCw,
|
||||||
|
Eye,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
export default function NewsPage() {
|
||||||
|
const [news, setNews] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
|
||||||
|
const [openModal, setOpenModal] = useState(false);
|
||||||
|
const [editing, setEditing] = useState<any>(null);
|
||||||
|
|
||||||
|
const [viewOpen, setViewOpen] = useState(false);
|
||||||
|
const [viewData, setViewData] = useState<any>(null);
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||||
|
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
headline: "",
|
||||||
|
content: "",
|
||||||
|
firstPara: "",
|
||||||
|
secondPara: "",
|
||||||
|
date: "",
|
||||||
|
author: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchAll = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await getNewsApi();
|
||||||
|
setNews(res?.data || []);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAll();
|
||||||
|
}, [fetchAll]);
|
||||||
|
|
||||||
|
const filteredNews = news.filter((item) =>
|
||||||
|
item.Headline?.toLowerCase().includes(searchText.toLowerCase()),
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredNews.length / itemsPerPage);
|
||||||
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||||
|
const paginatedData = filteredNews.slice(
|
||||||
|
startIndex,
|
||||||
|
startIndex + itemsPerPage,
|
||||||
|
);
|
||||||
|
|
||||||
|
function handleChange(e: any) {
|
||||||
|
setForm({ ...form, [e.target.name]: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAdd() {
|
||||||
|
setEditing(null);
|
||||||
|
setForm({
|
||||||
|
headline: "",
|
||||||
|
content: "",
|
||||||
|
firstPara: "",
|
||||||
|
secondPara: "",
|
||||||
|
date: "",
|
||||||
|
author: "",
|
||||||
|
});
|
||||||
|
setOpenModal(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(item: any) {
|
||||||
|
setEditing(item);
|
||||||
|
|
||||||
|
setForm({
|
||||||
|
headline: item.Headline || "",
|
||||||
|
content: item.Content || "",
|
||||||
|
firstPara: item.FirstPara || "",
|
||||||
|
secondPara: item.SecondPara || "",
|
||||||
|
date: item.Date ? item.Date.split("T")[0] : "",
|
||||||
|
author: item.Author || "",
|
||||||
|
});
|
||||||
|
|
||||||
|
setOpenModal(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openView(item: any) {
|
||||||
|
setViewData(item);
|
||||||
|
setViewOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
try {
|
||||||
|
if (editing) {
|
||||||
|
await updateNewsApi(editing.Id, form);
|
||||||
|
} else {
|
||||||
|
await createNewsApi(form);
|
||||||
|
}
|
||||||
|
setOpenModal(false);
|
||||||
|
fetchAll();
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(id: number) {
|
||||||
|
if (!confirm("Delete news?")) return;
|
||||||
|
await deleteNewsApi(id);
|
||||||
|
fetchAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
<div className="flex justify-between items-center flex-wrap gap-3">
|
||||||
|
<h1 className="text-2xl font-bold">News Media</h1>
|
||||||
|
|
||||||
|
<div className="flex gap-2 flex-wrap items-center">
|
||||||
|
<Input
|
||||||
|
placeholder="Search headline..."
|
||||||
|
value={searchText}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSearchText(e.target.value);
|
||||||
|
setCurrentPage(1);
|
||||||
|
}}
|
||||||
|
className="w-[250px]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={itemsPerPage}
|
||||||
|
onChange={(e) => {
|
||||||
|
setItemsPerPage(Number(e.target.value));
|
||||||
|
setCurrentPage(1);
|
||||||
|
}}
|
||||||
|
className="border px-2 py-1 rounded">
|
||||||
|
<option value={5}>5 / page</option>
|
||||||
|
<option value={10}>10 / page</option>
|
||||||
|
<option value={20}>20 / page</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button onClick={openAdd}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Add News
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>News List</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<Table className="min-w-[900px] table-fixed">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-[60px]">ID</TableHead>
|
||||||
|
<TableHead className="w-[220px]">Headline</TableHead>
|
||||||
|
<TableHead className="w-[120px]">Author</TableHead>
|
||||||
|
<TableHead className="w-[120px]">Date</TableHead>
|
||||||
|
<TableHead className="w-[260px]">Content</TableHead>
|
||||||
|
<TableHead className="w-[150px]">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
|
||||||
|
<TableBody>
|
||||||
|
{loading ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={6} className="text-center">
|
||||||
|
<Loader2 className="animate-spin mx-auto" />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : paginatedData.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={6} className="text-center">
|
||||||
|
No news found
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
paginatedData.map((item) => (
|
||||||
|
<TableRow key={item.Id}>
|
||||||
|
<TableCell>{item.Id}</TableCell>
|
||||||
|
|
||||||
|
<TableCell className="break-words whitespace-normal">
|
||||||
|
{item.Headline}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>{item.Author}</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
{item.Date
|
||||||
|
? new Date(item.Date).toLocaleDateString()
|
||||||
|
: "-"}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell className="break-words whitespace-normal">
|
||||||
|
{item.Content}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => openView(item)}>
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => openEdit(item)}>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={() => handleDelete(Number(item.Id))}>
|
||||||
|
<Trash className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* PAGINATION */}
|
||||||
|
<div className="flex justify-between items-center mt-4">
|
||||||
|
<p className="text-sm">
|
||||||
|
Page {currentPage} of {totalPages}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
onClick={() => setCurrentPage((p) => p - 1)}>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
onClick={() => setCurrentPage((p) => p + 1)}>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* CREATE / EDIT MODAL */}
|
||||||
|
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||||||
|
<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{editing ? "Edit News" : "Add News"}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Input
|
||||||
|
name="headline"
|
||||||
|
placeholder="Headline"
|
||||||
|
value={form.headline}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
name="author"
|
||||||
|
placeholder="Author"
|
||||||
|
value={form.author}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
name="date"
|
||||||
|
value={form.date}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
name="firstPara"
|
||||||
|
placeholder="First Paragraph"
|
||||||
|
value={form.firstPara}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="border rounded p-2 w-full min-h-[100px]"
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
name="secondPara"
|
||||||
|
placeholder="Second Paragraph"
|
||||||
|
value={form.secondPara}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="border rounded p-2 w-full min-h-[100px]"
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
name="content"
|
||||||
|
placeholder="Content"
|
||||||
|
value={form.content}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="border rounded p-2 w-full min-h-[150px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setOpenModal(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSubmit}>
|
||||||
|
{editing ? "Update" : "Create"}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* VIEW MODAL */}
|
||||||
|
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||||
|
<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto p-6">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>News Details</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{viewData && (
|
||||||
|
<div className="space-y-4 text-sm">
|
||||||
|
<b>Headline:</b>
|
||||||
|
<p>{viewData.Headline}</p>
|
||||||
|
|
||||||
|
<b>Author:</b>
|
||||||
|
<p>{viewData.Author}</p>
|
||||||
|
|
||||||
|
<b>Date:</b>
|
||||||
|
<p>
|
||||||
|
{viewData.Date
|
||||||
|
? new Date(viewData.Date).toLocaleDateString()
|
||||||
|
: "-"}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<b>First Para:</b>
|
||||||
|
<p className="whitespace-pre-line">{viewData.FirstPara}</p>
|
||||||
|
|
||||||
|
<b>Second Para:</b>
|
||||||
|
<p className="whitespace-pre-line">{viewData.SecondPara}</p>
|
||||||
|
|
||||||
|
<b>Content:</b>
|
||||||
|
<p className="whitespace-pre-line">{viewData.Content}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button onClick={() => setViewOpen(false)}>Close</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user