fix: change url jenkins in gitlab.ci
This commit is contained in:
parent
c0ce2c3310
commit
5acd31dbfc
|
|
@ -26,4 +26,4 @@ auto-deploy:
|
|||
services:
|
||||
- docker:dind
|
||||
script:
|
||||
- curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-new-netidhub-public/build?token=autodeploynetidhub
|
||||
- curl --user admin:$JENKINS_PWD http://103.31.38.120:8080/job/auto-deploy-new-netidhub-public/build?token=autodeploynetidhub
|
||||
|
|
|
|||
|
|
@ -1,3 +1,309 @@
|
|||
// "use client";
|
||||
|
||||
// import { useEffect, useState } from "react";
|
||||
// import { Input } from "@/components/ui/input";
|
||||
// import { Textarea } from "@/components/ui/textarea";
|
||||
// import { Button } from "@/components/ui/button";
|
||||
// import { Label } from "@/components/ui/label";
|
||||
// import { Switch } from "@/components/ui/switch";
|
||||
// import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
// import { useRouter } from "next/navigation";
|
||||
// import Swal from "sweetalert2";
|
||||
// import withReactContent from "sweetalert2-react-content";
|
||||
// import { createSchedule } from "@/service/landing/landing";
|
||||
// import Cookies from "js-cookie";
|
||||
|
||||
// const MySwal = withReactContent(Swal);
|
||||
|
||||
// export default function CreateSchedulePage() {
|
||||
// const router = useRouter();
|
||||
|
||||
// const [formData, setFormData] = useState({
|
||||
// createdById: 0,
|
||||
// typeId: 1,
|
||||
// clientName: "",
|
||||
// clientSlug: "",
|
||||
// description: "",
|
||||
// endDate: "",
|
||||
// endTime: "",
|
||||
// isLiveStreaming: false,
|
||||
// location: "",
|
||||
// speakers: "",
|
||||
// startDate: "",
|
||||
// startTime: "",
|
||||
// title: "",
|
||||
// liveStreamingUrl: "",
|
||||
// posterImagePath: "",
|
||||
// });
|
||||
|
||||
// const [loading, setLoading] = useState(false);
|
||||
|
||||
// // 🔹 Ambil data user dari cookie login
|
||||
// useEffect(() => {
|
||||
// try {
|
||||
// const userInfo = Cookies.get("uinfo");
|
||||
// if (userInfo) {
|
||||
// const parsed = JSON.parse(userInfo);
|
||||
|
||||
// const workflowName =
|
||||
// parsed?.approvalWorkflowInfo?.defaultWorkflowName || "";
|
||||
// const cleanName = workflowName.replace(/WORKFLOW/gi, "").trim();
|
||||
|
||||
// const slug =
|
||||
// cleanName?.toLowerCase()?.replace(/\s+/g, "-") || "general";
|
||||
|
||||
// setFormData((prev) => ({
|
||||
// ...prev,
|
||||
// createdById: parsed?.id || 0,
|
||||
// typeId: parsed?.userLevelId || 1,
|
||||
// clientName: cleanName,
|
||||
// clientSlug: slug,
|
||||
// }));
|
||||
|
||||
// console.log("✅ Auto-filled user info:", {
|
||||
// createdById: parsed?.id,
|
||||
// typeId: parsed?.userLevelId,
|
||||
// clientName: cleanName,
|
||||
// clientSlug: slug,
|
||||
// });
|
||||
// }
|
||||
// } catch (err) {
|
||||
// console.warn("⚠️ Gagal parse cookie user info:", err);
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
// const handleChange = (
|
||||
// e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
// ) => {
|
||||
// const { name, value } = e.target;
|
||||
// setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
// };
|
||||
|
||||
// const handleToggle = (checked: boolean) => {
|
||||
// setFormData((prev) => ({ ...prev, isLiveStreaming: checked }));
|
||||
// };
|
||||
|
||||
// const handleSubmit = async (e: React.FormEvent) => {
|
||||
// e.preventDefault();
|
||||
// setLoading(true);
|
||||
|
||||
// try {
|
||||
// // 🔸 Format tanggal + kirim semua field
|
||||
// const payload = {
|
||||
// createdById: Number(formData.createdById) || 1,
|
||||
// typeId: Number(formData.typeId) || 1,
|
||||
// title: formData.title,
|
||||
// description: formData.description,
|
||||
// location: formData.location,
|
||||
// speakers: formData.speakers,
|
||||
// startDate: `${formData.startDate}T${formData.startTime}:00Z`,
|
||||
// endDate: `${formData.endDate}T${formData.endTime}:00Z`,
|
||||
// startTime: formData.startTime,
|
||||
// endTime: formData.endTime,
|
||||
// isLiveStreaming: formData.isLiveStreaming,
|
||||
// liveStreamingUrl: formData.liveStreamingUrl,
|
||||
// posterImagePath: formData.posterImagePath,
|
||||
// clientName: formData.clientName,
|
||||
// clientSlug: formData.clientSlug,
|
||||
// };
|
||||
|
||||
// console.log("📦 Payload dikirim ke backend:", payload);
|
||||
|
||||
// const res = await createSchedule(payload);
|
||||
|
||||
// if (!res?.error) {
|
||||
// MySwal.fire({
|
||||
// icon: "success",
|
||||
// title: "Berhasil!",
|
||||
// text: "Schedule berhasil dibuat.",
|
||||
// timer: 2000,
|
||||
// showConfirmButton: false,
|
||||
// });
|
||||
// setTimeout(() => router.push("/admin/schedule"), 2000);
|
||||
// } else {
|
||||
// MySwal.fire({
|
||||
// icon: "error",
|
||||
// title: "Gagal!",
|
||||
// text: res?.message || "Gagal membuat schedule.",
|
||||
// });
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("❌ Error:", error);
|
||||
// MySwal.fire({
|
||||
// icon: "error",
|
||||
// title: "Error",
|
||||
// text: "Terjadi kesalahan pada sistem.",
|
||||
// });
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="max-w-4xl mx-auto mt-10">
|
||||
// <Card className="shadow-lg border border-gray-200 dark:border-gray-800">
|
||||
// <CardHeader>
|
||||
// <CardTitle className="text-xl font-semibold">
|
||||
// Buat Jadwal Baru
|
||||
// </CardTitle>
|
||||
// </CardHeader>
|
||||
|
||||
// <CardContent>
|
||||
// <form onSubmit={handleSubmit} className="space-y-6">
|
||||
// {/* 🔹 Info otomatis dari cookie */}
|
||||
// <div className="text-sm text-gray-600 bg-gray-50 p-3 rounded-md">
|
||||
// <p>
|
||||
// <b>Client:</b> {formData.clientName || "-"} (
|
||||
// {formData.clientSlug || "-"})
|
||||
// </p>
|
||||
// <p>
|
||||
// <b>createdById:</b> {formData.createdById} | <b>typeId:</b>{" "}
|
||||
// {formData.typeId}
|
||||
// </p>
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <Label htmlFor="title">Judul Acara</Label>
|
||||
// <Input
|
||||
// id="title"
|
||||
// name="title"
|
||||
// value={formData.title}
|
||||
// onChange={handleChange}
|
||||
// placeholder="Masukkan judul acara"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <Label htmlFor="description">Deskripsi</Label>
|
||||
// <Textarea
|
||||
// id="description"
|
||||
// name="description"
|
||||
// value={formData.description}
|
||||
// onChange={handleChange}
|
||||
// placeholder="Masukkan deskripsi acara"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <div className="grid grid-cols-2 gap-4">
|
||||
// <div>
|
||||
// <Label htmlFor="startDate">Tanggal Mulai</Label>
|
||||
// <Input
|
||||
// type="date"
|
||||
// id="startDate"
|
||||
// name="startDate"
|
||||
// value={formData.startDate}
|
||||
// onChange={handleChange}
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// <div>
|
||||
// <Label htmlFor="endDate">Tanggal Selesai</Label>
|
||||
// <Input
|
||||
// type="date"
|
||||
// id="endDate"
|
||||
// name="endDate"
|
||||
// value={formData.endDate}
|
||||
// onChange={handleChange}
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// <div>
|
||||
// <Label htmlFor="startTime">Jam Mulai</Label>
|
||||
// <Input
|
||||
// type="time"
|
||||
// id="startTime"
|
||||
// name="startTime"
|
||||
// value={formData.startTime}
|
||||
// onChange={handleChange}
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// <div>
|
||||
// <Label htmlFor="endTime">Jam Selesai</Label>
|
||||
// <Input
|
||||
// type="time"
|
||||
// id="endTime"
|
||||
// name="endTime"
|
||||
// value={formData.endTime}
|
||||
// onChange={handleChange}
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <Label htmlFor="location">Lokasi</Label>
|
||||
// <Input
|
||||
// id="location"
|
||||
// name="location"
|
||||
// value={formData.location}
|
||||
// onChange={handleChange}
|
||||
// placeholder="Masukkan lokasi acara"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <Label htmlFor="speakers">Pembicara</Label>
|
||||
// <Input
|
||||
// id="speakers"
|
||||
// name="speakers"
|
||||
// value={formData.speakers}
|
||||
// onChange={handleChange}
|
||||
// placeholder="Nama pembicara"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <div className="flex items-center justify-between">
|
||||
// <Label htmlFor="isLiveStreaming">Live Streaming?</Label>
|
||||
// <Switch
|
||||
// id="isLiveStreaming"
|
||||
// checked={formData.isLiveStreaming}
|
||||
// onCheckedChange={handleToggle}
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// {formData.isLiveStreaming && (
|
||||
// <div>
|
||||
// <Label htmlFor="liveStreamingUrl">Link Live Streaming</Label>
|
||||
// <Input
|
||||
// id="liveStreamingUrl"
|
||||
// name="liveStreamingUrl"
|
||||
// value={formData.liveStreamingUrl}
|
||||
// onChange={handleChange}
|
||||
// placeholder="https://youtube.com/..."
|
||||
// />
|
||||
// </div>
|
||||
// )}
|
||||
|
||||
// <div>
|
||||
// <Label htmlFor="posterImagePath">Poster (opsional)</Label>
|
||||
// <Input
|
||||
// id="posterImagePath"
|
||||
// name="posterImagePath"
|
||||
// value={formData.posterImagePath}
|
||||
// onChange={handleChange}
|
||||
// placeholder="/uploads/poster/namafile.png"
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <Button
|
||||
// type="submit"
|
||||
// className="w-full h-11 font-semibold"
|
||||
// disabled={loading}
|
||||
// >
|
||||
// {loading ? "Menyimpan..." : "Simpan Jadwal"}
|
||||
// </Button>
|
||||
// </form>
|
||||
// </CardContent>
|
||||
// </Card>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ export default function EditSchedulePage() {
|
|||
timer: 2000,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
setTimeout(() => router.push("/admin/schedules"), 2000);
|
||||
setTimeout(() => router.push("/admin/schedule"), 2000);
|
||||
} else {
|
||||
MySwal.fire({
|
||||
icon: "error",
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export default function ScheduleListPage() {
|
|||
<CalendarDays className="w-6 h-6 text-blue-600" />
|
||||
Daftar Jadwal
|
||||
</h1>
|
||||
<Button onClick={() => router.push("/admin/schedules/create")}>
|
||||
<Button onClick={() => router.push("/admin/schedule/create")}>
|
||||
<Plus className="mr-2 h-4 w-4" /> Tambah Jadwal
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import DetailCommentVideo from "@/components/main/comment-detail-video";
|
||||
import DetailCommentText from "@/components/main/comment-detail-text";
|
||||
|
||||
export default async function DetailCommentInfo() {
|
||||
return <DetailCommentVideo />;
|
||||
return <DetailCommentText />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,12 +205,53 @@ export default function Navbar() {
|
|||
</button>
|
||||
|
||||
{showProfileMenu && (
|
||||
<div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow z-50">
|
||||
<div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow z-50 ">
|
||||
<Link
|
||||
href="/admin/dashboard"
|
||||
className="flex flex-row items-center text-left px-4 py-2 hover:bg-gray-100 text-gray-700"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M14 21a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zM4 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm5-2V5H5v6zM4 21a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1zm1-2h4v-2H5zm10 0h4v-6h-4zM13 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1zm2 1v2h4V5z"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-gray-700"
|
||||
className="w-full flex flex-row text-left px-4 py-2 hover:bg-gray-100 text-gray-700 cursor-pointer"
|
||||
>
|
||||
{t("logout")}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path
|
||||
strokeLinejoin="round"
|
||||
d="M13.477 21.245H8.34a4.92 4.92 0 0 1-5.136-4.623V7.378A4.92 4.92 0 0 1 8.34 2.755h5.136"
|
||||
/>
|
||||
<path strokeMiterlimit="10" d="M20.795 12H7.442" />
|
||||
<path
|
||||
strokeLinejoin="round"
|
||||
d="m16.083 17.136l4.404-4.404a1.04 1.04 0 0 0 0-1.464l-4.404-4.404"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
{t("logout")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -329,7 +370,9 @@ export default function Navbar() {
|
|||
{t("subscribeTitle")}
|
||||
</h2>
|
||||
<Input type="email" placeholder={t("subscribePlaceholder")} />
|
||||
<Button className="bg-[#C6A455] mt-2">{t("subscribeButton")}</Button>
|
||||
<Button className="bg-[#C6A455] mt-2">
|
||||
{t("subscribeButton")}
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,37 +21,47 @@ import {
|
|||
} from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { getAllSchedules } from "@/service/landing/landing";
|
||||
import { getPublicClients } from "@/service/client/public-clients";
|
||||
|
||||
export default function Schedule() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
|
||||
const [endDate, setEndDate] = useState<Date | undefined>(new Date());
|
||||
const [selectedCategory, setSelectedCategory] = useState("SEMUA");
|
||||
const [selectedSlug, setSelectedSlug] = useState<string | undefined>(
|
||||
undefined
|
||||
);
|
||||
const [scheduleData, setScheduleData] = useState<any[]>([]);
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const categories = [
|
||||
"SEMUA",
|
||||
"POLRI",
|
||||
"MAHKAMAH AGUNG",
|
||||
"DPR",
|
||||
"MPR",
|
||||
"KEJAKSAAN AGUNG",
|
||||
"KPK",
|
||||
"PUPR",
|
||||
"BSKDN",
|
||||
"BUMN",
|
||||
"KPU",
|
||||
];
|
||||
// 🔹 Fetch daftar client
|
||||
useEffect(() => {
|
||||
async function fetchClients() {
|
||||
try {
|
||||
const res = await getPublicClients();
|
||||
if (res?.data?.success && res.data.data) {
|
||||
setClients(res.data.data);
|
||||
} else {
|
||||
setClients([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching clients:", error);
|
||||
setClients([]);
|
||||
}
|
||||
}
|
||||
fetchClients();
|
||||
}, []);
|
||||
|
||||
// 🔹 Fetch jadwal dari API (termasuk clientSlug)
|
||||
const fetchSchedules = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const params = {
|
||||
title: search || undefined,
|
||||
startDate: startDate ? format(startDate, "yyyy-MM-dd") : undefined,
|
||||
endDate: endDate ? format(endDate, "yyyy-MM-dd") : undefined,
|
||||
clientSlug: selectedSlug, // 🔥 Tambahkan clientSlug untuk filter
|
||||
page: 1,
|
||||
limit: 50,
|
||||
sortBy: "startDate",
|
||||
|
|
@ -68,7 +78,6 @@ export default function Schedule() {
|
|||
: Array.isArray(res.data?.records)
|
||||
? res.data.records
|
||||
: [];
|
||||
|
||||
setScheduleData(apiData);
|
||||
} else {
|
||||
console.error("Gagal memuat jadwal:", res.message);
|
||||
|
|
@ -82,21 +91,10 @@ export default function Schedule() {
|
|||
}
|
||||
};
|
||||
|
||||
// 🔹 Re-fetch setiap kali filter berubah
|
||||
useEffect(() => {
|
||||
fetchSchedules();
|
||||
}, [startDate, endDate, search]);
|
||||
|
||||
const filteredData = Array.isArray(scheduleData)
|
||||
? scheduleData.filter((item) => {
|
||||
const matchesCategory =
|
||||
selectedCategory === "SEMUA" ||
|
||||
item.type?.toUpperCase() === selectedCategory;
|
||||
const matchesSearch = item.title
|
||||
?.toLowerCase()
|
||||
.includes(search.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
})
|
||||
: [];
|
||||
}, [startDate, endDate, search, selectedSlug]);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-[1350px] mx-auto">
|
||||
|
|
@ -156,38 +154,54 @@ export default function Schedule() {
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Publikasi */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium">Publikasi</label>
|
||||
<Select>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="Semua" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="semua">K/L</SelectItem>
|
||||
<SelectItem value="dipublikasikan">BUMN</SelectItem>
|
||||
<SelectItem value="belum">PEMERINTAH DAERAH</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Chips */}
|
||||
{/* 🔹 Dynamic Category dari API */}
|
||||
<div className="flex w-full gap-5 overflow-x-auto pb-2 border-b border-[#C6A455] mb-6">
|
||||
{categories.map((cat) => (
|
||||
<Button
|
||||
key="SEMUA"
|
||||
variant={selectedCategory === "SEMUA" ? "default" : "outline"}
|
||||
className={cn(
|
||||
"rounded-sm whitespace-nowrap",
|
||||
selectedCategory === "SEMUA" && "bg-[#C6A455] text-white"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedCategory("SEMUA");
|
||||
setSelectedSlug(undefined); // reset filter
|
||||
}}
|
||||
>
|
||||
SEMUA
|
||||
</Button>
|
||||
|
||||
{clients.map((client) => (
|
||||
<Button
|
||||
key={cat}
|
||||
variant={selectedCategory === cat ? "default" : "outline"}
|
||||
key={client.slug || client.name}
|
||||
variant={
|
||||
selectedCategory === client.name.toUpperCase()
|
||||
? "default"
|
||||
: "outline"
|
||||
}
|
||||
className={cn(
|
||||
"rounded-sm whitespace-nowrap",
|
||||
selectedCategory === cat && "bg-[#C6A455] text-white"
|
||||
"rounded-sm whitespace-nowrap flex items-center gap-2",
|
||||
selectedCategory === client.name.toUpperCase() &&
|
||||
"bg-[#C6A455] text-white"
|
||||
)}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
onClick={() => {
|
||||
setSelectedCategory(client.name.toUpperCase());
|
||||
setSelectedSlug(client.slug); // 🔥 Set slug untuk filter API
|
||||
}}
|
||||
>
|
||||
{cat}
|
||||
{client.logoUrl && (
|
||||
<img
|
||||
src={client.logoUrl}
|
||||
alt={client.name}
|
||||
className="w-5 h-5 rounded"
|
||||
/>
|
||||
)}
|
||||
{client.name}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
<Button variant="ghost">
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</Button>
|
||||
|
|
@ -202,41 +216,51 @@ export default function Schedule() {
|
|||
<div className="text-center text-muted-foreground py-10">
|
||||
Memuat data jadwal...
|
||||
</div>
|
||||
) : filteredData.length === 0 ? (
|
||||
) : scheduleData.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-10">
|
||||
Tidak ada jadwal ditemukan.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{filteredData.map((item, index) => (
|
||||
<div className="flex flex-col gap-3 justify-between">
|
||||
{scheduleData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between items-start border-b pb-2"
|
||||
>
|
||||
<div className="w-1/6 text-sm text-muted-foreground">
|
||||
{item.startDate
|
||||
? format(new Date(item.startDate), "dd MMM yyyy")
|
||||
: "-"}
|
||||
<div className="w-2/5">
|
||||
{item.startDate ? (
|
||||
<>
|
||||
{format(new Date(item.startDate), "dd MMM yyyy")}
|
||||
{item.endDate &&
|
||||
item.endDate !== item.startDate &&
|
||||
` — ${format(new Date(item.endDate), "dd MMM yyyy")}`}
|
||||
</>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</div>
|
||||
<div className="w-2/5 text-xs text-gray-400 mt-0.5">
|
||||
{item.startTime && item.endTime ? (
|
||||
<>
|
||||
{item.startTime.slice(0, 5)} – {item.endTime.slice(0, 5)}
|
||||
</>
|
||||
) : item.startTime ? (
|
||||
item.startTime.slice(0, 5)
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Client */}
|
||||
<div className="w-1/5">
|
||||
<Badge
|
||||
className={cn("text-white", {
|
||||
"bg-red-600": item.type === "POLRI",
|
||||
"bg-yellow-500": item.type === "DPR",
|
||||
"bg-green-600": item.type === "KEJAKSAAN AGUNG",
|
||||
"bg-blue-700": item.type === "BUMN",
|
||||
"bg-amber-500": item.type === "MPR",
|
||||
"bg-pink-500": item.type === "KPU",
|
||||
"bg-red-700": item.type === "KPK",
|
||||
})}
|
||||
>
|
||||
{item.type || "-"}
|
||||
<Badge className="bg-[#C6A455] text-white">
|
||||
{item.clientName || "-"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="w-2/5 text-sm">{item.title}</div>
|
||||
<div className="w-1/3 text-sm text-muted-foreground">
|
||||
{item.location}
|
||||
</div>
|
||||
|
||||
{/* Judul & Lokasi */}
|
||||
<div className="w-2/5">{item.title}</div>
|
||||
<div className="w-1/3 text-muted-foreground">{item.location}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,409 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { MessageCircle, Share2, Trash2 } from "lucide-react";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import {
|
||||
getArticleDetail,
|
||||
createArticleComment,
|
||||
getArticleComments,
|
||||
deleteArticleComment,
|
||||
} from "@/service/content/content";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
// 🎨 Avatar color helper
|
||||
function getAvatarColor(name: string) {
|
||||
const colors = [
|
||||
"#F87171",
|
||||
"#FB923C",
|
||||
"#FACC15",
|
||||
"#4ADE80",
|
||||
"#60A5FA",
|
||||
"#A78BFA",
|
||||
"#F472B6",
|
||||
];
|
||||
const index = name.charCodeAt(0) % colors.length;
|
||||
return colors[index];
|
||||
}
|
||||
|
||||
export default function DetailCommentText() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [currentUserId, setCurrentUserId] = useState<number | null>(null);
|
||||
const [textArticle, setTextArticle] = useState<any>(null);
|
||||
const [comments, setComments] = useState<any[]>([]);
|
||||
const [newComment, setNewComment] = useState("");
|
||||
const [replyParentId, setReplyParentId] = useState<number | null>(null);
|
||||
const [replyMessage, setReplyMessage] = useState("");
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const MySwal = withReactContent(Swal);
|
||||
const id = Number(params?.id);
|
||||
|
||||
// 🚀 Initial load
|
||||
useEffect(() => {
|
||||
checkLoginStatus();
|
||||
if (id) {
|
||||
fetchTextDetail(id);
|
||||
fetchComments(id);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
// 🔐 Cek login user dari cookies
|
||||
const checkLoginStatus = () => {
|
||||
const userId = getCookiesDecrypt("urie");
|
||||
if (userId) {
|
||||
setIsLoggedIn(true);
|
||||
setCurrentUserId(Number(userId));
|
||||
} else {
|
||||
setIsLoggedIn(false);
|
||||
setCurrentUserId(null);
|
||||
}
|
||||
};
|
||||
|
||||
// 📄 Ambil detail artikel text
|
||||
const fetchTextDetail = async (textId: number) => {
|
||||
try {
|
||||
const res = await getArticleDetail(textId);
|
||||
if (res?.data?.data) setTextArticle(res.data.data);
|
||||
} catch (error) {
|
||||
console.error("Gagal memuat detail artikel:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 💬 Ambil komentar dari API
|
||||
const fetchComments = async (textId: number) => {
|
||||
try {
|
||||
const res = await getArticleComments(textId);
|
||||
if (res?.data?.data) {
|
||||
const all = res.data.data.map((c: any) => ({
|
||||
...c,
|
||||
parentId: c.parentId ?? 0,
|
||||
}));
|
||||
const structured = buildCommentTree(all);
|
||||
setComments(structured);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal memuat komentar:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 🪄 Susun komentar menjadi struktur nested (tree)
|
||||
const buildCommentTree: any = (comments: any[], parentId = 0) =>
|
||||
comments
|
||||
.filter((c) => c.parentId === parentId)
|
||||
.map((c) => ({
|
||||
...c,
|
||||
replies: buildCommentTree(comments, c.id),
|
||||
}));
|
||||
|
||||
// ✏️ Kirim komentar baru
|
||||
const handlePostComment = async () => {
|
||||
if (!newComment.trim()) {
|
||||
MySwal.fire("Oops!", "Komentar tidak boleh kosong.", "warning");
|
||||
return;
|
||||
}
|
||||
await sendComment({
|
||||
articleId: id,
|
||||
message: newComment,
|
||||
isPublic: true,
|
||||
parentId: 0,
|
||||
});
|
||||
setNewComment("");
|
||||
};
|
||||
|
||||
// 💬 Kirim balasan komentar
|
||||
const handleReplySubmit = async (parentId: number) => {
|
||||
if (!replyMessage.trim()) {
|
||||
MySwal.fire("Oops!", "Balasan tidak boleh kosong.", "warning");
|
||||
return;
|
||||
}
|
||||
await sendComment({
|
||||
articleId: id,
|
||||
message: replyMessage,
|
||||
isPublic: true,
|
||||
parentId,
|
||||
});
|
||||
setReplyMessage("");
|
||||
setReplyParentId(null);
|
||||
};
|
||||
|
||||
// 🚀 Fungsi umum untuk kirim komentar / balasan
|
||||
const sendComment = async (payload: any) => {
|
||||
MySwal.fire({
|
||||
title: "Mengirim komentar...",
|
||||
didOpen: () => MySwal.showLoading(),
|
||||
allowOutsideClick: false,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await createArticleComment(payload);
|
||||
if (res?.data?.success || !res?.error) {
|
||||
MySwal.fire({
|
||||
icon: "success",
|
||||
title: "Komentar terkirim!",
|
||||
timer: 1000,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
fetchComments(id);
|
||||
} else {
|
||||
MySwal.fire(
|
||||
"Gagal",
|
||||
res.message || "Tidak dapat mengirim komentar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
MySwal.fire("Error", "Terjadi kesalahan saat mengirim komentar.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
// 🗑️ Hapus komentar
|
||||
const handleDeleteComment = async (commentId: number) => {
|
||||
const confirm = await MySwal.fire({
|
||||
title: "Hapus komentar ini?",
|
||||
text: "Tindakan ini tidak dapat dibatalkan!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
cancelButtonColor: "#6b7280",
|
||||
confirmButtonText: "Ya, hapus",
|
||||
cancelButtonText: "Batal",
|
||||
});
|
||||
|
||||
if (!confirm.isConfirmed) return;
|
||||
|
||||
MySwal.fire({
|
||||
title: "Menghapus komentar...",
|
||||
didOpen: () => MySwal.showLoading(),
|
||||
allowOutsideClick: false,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await deleteArticleComment(commentId);
|
||||
if (res?.data?.success || !res?.error) {
|
||||
MySwal.fire({
|
||||
icon: "success",
|
||||
title: "Komentar dihapus!",
|
||||
timer: 1000,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
fetchComments(id);
|
||||
} else {
|
||||
MySwal.fire(
|
||||
"Gagal",
|
||||
res.message || "Tidak dapat menghapus komentar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal menghapus komentar:", error);
|
||||
MySwal.fire("Error", "Terjadi kesalahan saat menghapus komentar.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto p-4 space-y-6">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="text-sm text-gray-500 hover:underline cursor-pointer"
|
||||
>
|
||||
← Kembali ke Artikel Teks
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<p className="font-semibold text-sm uppercase text-gray-600 mb-1">
|
||||
Comments on:
|
||||
</p>
|
||||
<h1 className="text-lg font-bold">
|
||||
{textArticle?.title || "Memuat judul artikel..."}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* ✏️ Form komentar */}
|
||||
<div className="rounded-md p-3 space-y-3 bg-gray-50 border border-gray-200 shadow-sm">
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Textarea
|
||||
placeholder="Tulis komentar kamu di sini..."
|
||||
className="min-h-[80px] border border-[#C6A455]"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button size="sm" onClick={handlePostComment}>
|
||||
Kirim Komentar
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Textarea
|
||||
disabled
|
||||
placeholder="Tulis komentar kamu di sini..."
|
||||
className="min-h-[80px] opacity-70"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => router.push("/auth")}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Sign in and Join the Conversation
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 💬 Daftar komentar */}
|
||||
<div className="space-y-6">
|
||||
{comments.length > 0 ? (
|
||||
comments.map((comment) => (
|
||||
<CommentTree
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
level={0}
|
||||
replyParentId={replyParentId}
|
||||
setReplyParentId={setReplyParentId}
|
||||
replyMessage={replyMessage}
|
||||
setReplyMessage={setReplyMessage}
|
||||
onReplySubmit={handleReplySubmit}
|
||||
onDelete={handleDeleteComment}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
Belum ada komentar.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧱 Komponen rekursif untuk komentar & balasan
|
||||
function CommentTree({
|
||||
comment,
|
||||
level,
|
||||
replyParentId,
|
||||
setReplyParentId,
|
||||
replyMessage,
|
||||
setReplyMessage,
|
||||
onReplySubmit,
|
||||
onDelete,
|
||||
currentUserId,
|
||||
}: any) {
|
||||
const color = getAvatarColor(comment.commentFromName || "Anonim");
|
||||
|
||||
const canDelete =
|
||||
currentUserId &&
|
||||
(comment.commentFromId == currentUserId ||
|
||||
comment.userId == currentUserId ||
|
||||
comment.createdBy == currentUserId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`space-y-3 ${
|
||||
level > 0 ? "ml-6 border-l-2 border-gray-200 pl-4" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="p-2 rounded-lg transition hover:bg-gray-50 bg-white">
|
||||
<div className="flex items-start gap-2">
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{comment.commentFromName?.[0]?.toUpperCase() || "U"}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-sm">
|
||||
{comment.commentFromName}{" "}
|
||||
<span className="text-gray-500 text-xs font-normal">
|
||||
{new Date(comment.createdAt).toLocaleString("id-ID")}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-gray-800 text-sm leading-snug mt-1">
|
||||
{comment.message}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-600">
|
||||
<button
|
||||
onClick={() =>
|
||||
setReplyParentId(
|
||||
replyParentId === comment.id ? null : comment.id
|
||||
)
|
||||
}
|
||||
className="hover:underline flex items-center gap-1"
|
||||
>
|
||||
<MessageCircle className="w-3 h-3" /> Reply
|
||||
</button>
|
||||
<button className="hover:underline flex items-center gap-1">
|
||||
<Share2 className="w-3 h-3" /> Share
|
||||
</button>
|
||||
|
||||
{canDelete && (
|
||||
<button
|
||||
onClick={() => onDelete(comment.id)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs bg-red-100 text-red-600 rounded-md hover:bg-red-200"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" /> Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{replyParentId === comment.id && (
|
||||
<div className="mt-3 ml-10 space-y-2">
|
||||
<Textarea
|
||||
placeholder={`Balas komentar ${comment.commentFromName}`}
|
||||
className="min-h-[60px] border border-[#C6A455]"
|
||||
value={replyMessage}
|
||||
onChange={(e) => setReplyMessage(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setReplyParentId(null)}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onReplySubmit(comment.id)}
|
||||
>
|
||||
Kirim Balasan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{comment.replies && comment.replies.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{comment.replies.map((reply: any) => (
|
||||
<CommentTree
|
||||
key={reply.id}
|
||||
comment={reply}
|
||||
level={level + 1}
|
||||
replyParentId={replyParentId}
|
||||
setReplyParentId={setReplyParentId}
|
||||
replyMessage={replyMessage}
|
||||
setReplyMessage={setReplyMessage}
|
||||
onReplySubmit={onReplySubmit}
|
||||
onDelete={onDelete}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,29 +1,218 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { MessageCircle, Share2, Trash2 } from "lucide-react";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import {
|
||||
ChevronDown,
|
||||
Flag,
|
||||
MessageCircle,
|
||||
Share2,
|
||||
ThumbsUp,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
getArticleDetail,
|
||||
createArticleComment,
|
||||
getArticleComments,
|
||||
deleteArticleComment,
|
||||
} from "@/service/content/content";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
function getAvatarColor(name: string) {
|
||||
const colors = [
|
||||
"#F87171",
|
||||
"#FB923C",
|
||||
"#FACC15",
|
||||
"#4ADE80",
|
||||
"#60A5FA",
|
||||
"#A78BFA",
|
||||
"#F472B6",
|
||||
];
|
||||
const index = name.charCodeAt(0) % colors.length;
|
||||
return colors[index];
|
||||
}
|
||||
|
||||
export default function DetailCommentVideo() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [currentUserId, setCurrentUserId] = useState<number | null>(null);
|
||||
const [video, setVideo] = useState<any>(null);
|
||||
const [comments, setComments] = useState<any[]>([]);
|
||||
const [newComment, setNewComment] = useState("");
|
||||
const [replyParentId, setReplyParentId] = useState<number | null>(null);
|
||||
const [replyMessage, setReplyMessage] = useState("");
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const MySwal = withReactContent(Swal);
|
||||
const id = Number(params?.id);
|
||||
|
||||
useEffect(() => {
|
||||
checkLoginStatus();
|
||||
if (id) {
|
||||
fetchVideoDetail(id);
|
||||
fetchComments(id);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const checkLoginStatus = () => {
|
||||
const userId = getCookiesDecrypt("urie");
|
||||
if (userId) {
|
||||
setIsLoggedIn(true);
|
||||
setCurrentUserId(Number(userId));
|
||||
} else {
|
||||
setIsLoggedIn(false);
|
||||
setCurrentUserId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchVideoDetail = async (videoId: number) => {
|
||||
try {
|
||||
const res = await getArticleDetail(videoId);
|
||||
if (res?.data?.data) setVideo(res.data.data);
|
||||
} catch (error) {
|
||||
console.error("Gagal memuat video:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchComments = async (videoId: number) => {
|
||||
try {
|
||||
const res = await getArticleComments(videoId);
|
||||
if (res?.data?.data) {
|
||||
const all = res.data.data.map((c: any) => ({
|
||||
...c,
|
||||
parentId: c.parentId ?? 0,
|
||||
}));
|
||||
const structured = buildCommentTree(all);
|
||||
setComments(structured);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal memuat komentar:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const buildCommentTree: any = (comments: any[], parentId = 0) =>
|
||||
comments
|
||||
.filter((c) => c.parentId === parentId)
|
||||
.map((c) => ({
|
||||
...c,
|
||||
replies: buildCommentTree(comments, c.id),
|
||||
}));
|
||||
|
||||
const handlePostComment = async () => {
|
||||
if (!newComment.trim()) {
|
||||
MySwal.fire("Oops!", "Komentar tidak boleh kosong.", "warning");
|
||||
return;
|
||||
}
|
||||
await sendComment({
|
||||
articleId: id,
|
||||
message: newComment,
|
||||
isPublic: true,
|
||||
parentId: 0,
|
||||
});
|
||||
setNewComment("");
|
||||
};
|
||||
|
||||
const handleReplySubmit = async (parentId: number) => {
|
||||
if (!replyMessage.trim()) {
|
||||
MySwal.fire("Oops!", "Balasan tidak boleh kosong.", "warning");
|
||||
return;
|
||||
}
|
||||
await sendComment({
|
||||
articleId: id,
|
||||
message: replyMessage,
|
||||
isPublic: true,
|
||||
parentId,
|
||||
});
|
||||
setReplyMessage("");
|
||||
setReplyParentId(null);
|
||||
};
|
||||
|
||||
const sendComment = async (payload: any) => {
|
||||
MySwal.fire({
|
||||
title: "Mengirim komentar...",
|
||||
didOpen: () => MySwal.showLoading(),
|
||||
allowOutsideClick: false,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await createArticleComment(payload);
|
||||
if (res?.data?.success || !res?.error) {
|
||||
MySwal.fire({
|
||||
icon: "success",
|
||||
title: "Komentar terkirim!",
|
||||
timer: 1000,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
fetchComments(id);
|
||||
} else {
|
||||
MySwal.fire(
|
||||
"Gagal",
|
||||
res.message || "Tidak dapat mengirim komentar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
MySwal.fire(
|
||||
"Error",
|
||||
"Terjadi kesalahan saat mengirim komentar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteComment = async (commentId: number) => {
|
||||
const confirm = await MySwal.fire({
|
||||
title: "Hapus komentar ini?",
|
||||
text: "Tindakan ini tidak dapat dibatalkan!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
cancelButtonColor: "#6b7280",
|
||||
confirmButtonText: "Ya, hapus",
|
||||
cancelButtonText: "Batal",
|
||||
});
|
||||
|
||||
if (!confirm.isConfirmed) return;
|
||||
|
||||
MySwal.fire({
|
||||
title: "Menghapus komentar...",
|
||||
didOpen: () => MySwal.showLoading(),
|
||||
allowOutsideClick: false,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await deleteArticleComment(commentId);
|
||||
if (res?.data?.success || !res?.error) {
|
||||
MySwal.fire({
|
||||
icon: "success",
|
||||
title: "Komentar dihapus!",
|
||||
timer: 1000,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
fetchComments(id);
|
||||
} else {
|
||||
MySwal.fire(
|
||||
"Gagal",
|
||||
res.message || "Tidak dapat menghapus komentar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal menghapus komentar:", error);
|
||||
MySwal.fire(
|
||||
"Error",
|
||||
"Terjadi kesalahan saat menghapus komentar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto p-4 space-y-6">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="text-sm text-gray-500 hover:underline"
|
||||
className="text-sm text-gray-500 hover:underline cursor-pointer"
|
||||
>
|
||||
← Kembali ke Article
|
||||
← Kembali ke Video
|
||||
</button>
|
||||
|
||||
<div>
|
||||
|
|
@ -31,143 +220,360 @@ export default function DetailCommentVideo() {
|
|||
Comments on:
|
||||
</p>
|
||||
<h1 className="text-lg font-bold">
|
||||
Kolaborasi dengan Ponpes Darunnajah, Pererat Sinergi Keamanan Hingga
|
||||
Pembinaan Generasi Muda
|
||||
{video?.title || "Memuat judul video..."}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Comment Form */}
|
||||
<div className=" rounded-md p-3 space-y-3">
|
||||
<div className="rounded-md p-3 space-y-3 bg-gray-50 border border-gray-200 shadow-sm">
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Textarea
|
||||
placeholder="Post a comment"
|
||||
placeholder="Tulis komentar kamu di sini..."
|
||||
className="min-h-[80px] border border-[#C6A455]"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button size="sm">Post</Button>
|
||||
<Button size="sm" onClick={handlePostComment}>
|
||||
Kirim Komentar
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Textarea
|
||||
disabled
|
||||
placeholder="Post a comment"
|
||||
placeholder="Tulis komentar kamu di sini..."
|
||||
className="min-h-[80px] opacity-70"
|
||||
/>
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Button
|
||||
onClick={() => router.push("/auth")}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Sign in and Join the Conversation
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sort & Comment Count */}
|
||||
<div className="flex items-center justify-between border-b pb-2">
|
||||
<p className="font-semibold">
|
||||
All Comments{" "}
|
||||
<span className="text-sm font-medium text-gray-500">4</span>
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-sm text-gray-600">
|
||||
Sort by
|
||||
<button className="flex items-center gap-1 border border-[#C6A455] px-2 py-1 rounded text-gray-700 hover:bg-gray-100">
|
||||
Newest <ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments List */}
|
||||
{/* Daftar komentar */}
|
||||
<div className="space-y-6">
|
||||
<CommentItem
|
||||
name="Mabes Ferr"
|
||||
content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
|
||||
time="2 hours ago"
|
||||
/>
|
||||
|
||||
<CommentItem
|
||||
name="Mabes Jerr"
|
||||
content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
|
||||
time="2 hours ago"
|
||||
replies={[
|
||||
{
|
||||
name: "Mabes Herr",
|
||||
time: "2 hours ago",
|
||||
inReplyTo: "Mabes Jerr",
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{comments.length > 0 ? (
|
||||
comments.map((comment) => (
|
||||
<CommentTree
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
level={0}
|
||||
replyParentId={replyParentId}
|
||||
setReplyParentId={setReplyParentId}
|
||||
replyMessage={replyMessage}
|
||||
setReplyMessage={setReplyMessage}
|
||||
onReplySubmit={handleReplySubmit}
|
||||
onDelete={handleDeleteComment}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
Belum ada komentar.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type Comment = {
|
||||
name: string;
|
||||
time: string;
|
||||
content: string;
|
||||
inReplyTo?: string;
|
||||
};
|
||||
function CommentTree({
|
||||
comment,
|
||||
level,
|
||||
replyParentId,
|
||||
setReplyParentId,
|
||||
replyMessage,
|
||||
setReplyMessage,
|
||||
onReplySubmit,
|
||||
onDelete,
|
||||
currentUserId,
|
||||
}: any) {
|
||||
const color = getAvatarColor(comment.commentFromName || "Anonim");
|
||||
|
||||
const canDelete =
|
||||
currentUserId &&
|
||||
(comment.commentFromId == currentUserId ||
|
||||
comment.userId == currentUserId ||
|
||||
comment.createdBy == currentUserId);
|
||||
|
||||
function CommentItem({
|
||||
name,
|
||||
time,
|
||||
content,
|
||||
replies,
|
||||
}: Comment & { replies?: Comment[] }) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="font-semibold">
|
||||
{name}{" "}
|
||||
<span className="text-gray-500 text-sm font-normal">{time}</span>
|
||||
</p>
|
||||
<p className="text-gray-800 text-sm">{content}</p>
|
||||
<div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
|
||||
<ThumbsUp className="w-4 h-4 cursor-pointer" />
|
||||
<button className="hover:underline flex items-center gap-1">
|
||||
<MessageCircle className="w-4 h-4" /> Reply
|
||||
</button>
|
||||
<button className="hover:underline flex items-center gap-1">
|
||||
<Share2 className="w-4 h-4" /> Share
|
||||
</button>
|
||||
<button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
|
||||
<Flag className="w-3 h-3" /> Report
|
||||
</button>
|
||||
<div
|
||||
className={`space-y-3 ${
|
||||
level > 0 ? "ml-6 border-l-2 border-gray-200 pl-4" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="p-2 rounded-lg transition hover:bg-gray-50 bg-white">
|
||||
<div className="flex items-start gap-2">
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{comment.commentFromName?.[0]?.toUpperCase() || "U"}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-sm">
|
||||
{comment.commentFromName}{" "}
|
||||
<span className="text-gray-500 text-xs font-normal">
|
||||
{new Date(comment.createdAt).toLocaleString("id-ID")}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-gray-800 text-sm leading-snug mt-1">
|
||||
{comment.message}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-600">
|
||||
<button
|
||||
onClick={() =>
|
||||
setReplyParentId(
|
||||
replyParentId === comment.id ? null : comment.id
|
||||
)
|
||||
}
|
||||
className="hover:underline flex items-center gap-1"
|
||||
>
|
||||
<MessageCircle className="w-3 h-3" /> Reply
|
||||
</button>
|
||||
<button className="hover:underline flex items-center gap-1">
|
||||
<Share2 className="w-3 h-3" /> Share
|
||||
</button>
|
||||
|
||||
{canDelete && (
|
||||
<button
|
||||
onClick={() => onDelete(comment.id)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs bg-red-100 text-red-600 rounded-md hover:bg-red-200"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" /> Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{replyParentId === comment.id && (
|
||||
<div className="mt-3 ml-10 space-y-2">
|
||||
<Textarea
|
||||
placeholder={`Balas komentar ${comment.commentFromName}`}
|
||||
className="min-h-[60px] border border-[#C6A455]"
|
||||
value={replyMessage}
|
||||
onChange={(e) => setReplyMessage(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setReplyParentId(null)}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onReplySubmit(comment.id)}
|
||||
>
|
||||
Kirim Balasan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{replies && replies.length > 0 && (
|
||||
<div className="ml-6 border-l pl-4 space-y-3">
|
||||
{replies.map((reply, idx) => (
|
||||
<div key={idx}>
|
||||
<p className="font-semibold">
|
||||
{reply.name}{" "}
|
||||
<span className="text-gray-500 text-sm font-normal">
|
||||
{reply.time}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
In Reply To {reply.inReplyTo}
|
||||
</p>
|
||||
<p className="text-gray-800 text-sm">{reply.content}</p>
|
||||
<div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
|
||||
<ThumbsUp className="w-4 h-4 cursor-pointer" />
|
||||
<button className="hover:underline flex items-center gap-1">
|
||||
<MessageCircle className="w-4 h-4" /> Reply
|
||||
</button>
|
||||
<button className="hover:underline flex items-center gap-1">
|
||||
<Share2 className="w-4 h-4" /> Share
|
||||
</button>
|
||||
<button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
|
||||
<Flag className="w-3 h-3" /> Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{comment.replies && comment.replies.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{comment.replies.map((reply: any) => (
|
||||
<CommentTree
|
||||
key={reply.id}
|
||||
comment={reply}
|
||||
level={level + 1}
|
||||
replyParentId={replyParentId}
|
||||
setReplyParentId={setReplyParentId}
|
||||
replyMessage={replyMessage}
|
||||
setReplyMessage={setReplyMessage}
|
||||
onReplySubmit={onReplySubmit}
|
||||
onDelete={onDelete}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// "use client";
|
||||
|
||||
// import { useState } from "react";
|
||||
// import { Button } from "@/components/ui/button";
|
||||
// import { Input } from "@/components/ui/input";
|
||||
// import { Textarea } from "@/components/ui/textarea";
|
||||
// import {
|
||||
// ChevronDown,
|
||||
// Flag,
|
||||
// MessageCircle,
|
||||
// Share2,
|
||||
// ThumbsUp,
|
||||
// } from "lucide-react";
|
||||
// import { useRouter } from "next/navigation";
|
||||
|
||||
// export default function DetailCommentVideo() {
|
||||
// const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
// const router = useRouter();
|
||||
|
||||
// return (
|
||||
// <div className="max-w-5xl mx-auto p-4 space-y-6">
|
||||
// <button
|
||||
// onClick={() => router.back()}
|
||||
// className="text-sm text-gray-500 hover:underline"
|
||||
// >
|
||||
// ← Kembali ke Article
|
||||
// </button>
|
||||
|
||||
// <div>
|
||||
// <p className="font-semibold text-sm uppercase text-gray-600 mb-1">
|
||||
// Comments on:
|
||||
// </p>
|
||||
// <h1 className="text-lg font-bold">
|
||||
// Kolaborasi dengan Ponpes Darunnajah, Pererat Sinergi Keamanan Hingga
|
||||
// Pembinaan Generasi Muda
|
||||
// </h1>
|
||||
// </div>
|
||||
|
||||
// {/* Comment Form */}
|
||||
// <div className=" rounded-md p-3 space-y-3">
|
||||
// {isLoggedIn ? (
|
||||
// <>
|
||||
// <Textarea
|
||||
// placeholder="Post a comment"
|
||||
// className="min-h-[80px] border border-[#C6A455]"
|
||||
// />
|
||||
// <div className="flex justify-end">
|
||||
// <Button size="sm">Post</Button>
|
||||
// </div>
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// <Textarea
|
||||
// disabled
|
||||
// placeholder="Post a comment"
|
||||
// className="min-h-[80px] opacity-70"
|
||||
// />
|
||||
// <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
|
||||
// Sign in and Join the Conversation
|
||||
// </Button>
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
// {/* Sort & Comment Count */}
|
||||
// <div className="flex items-center justify-between border-b pb-2">
|
||||
// <p className="font-semibold">
|
||||
// All Comments{" "}
|
||||
// <span className="text-sm font-medium text-gray-500">4</span>
|
||||
// </p>
|
||||
// <div className="flex items-center gap-1 text-sm text-gray-600">
|
||||
// Sort by
|
||||
// <button className="flex items-center gap-1 border border-[#C6A455] px-2 py-1 rounded text-gray-700 hover:bg-gray-100">
|
||||
// Newest <ChevronDown className="w-4 h-4" />
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* Comments List */}
|
||||
// <div className="space-y-6">
|
||||
// <CommentItem
|
||||
// name="Mabes Ferr"
|
||||
// content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
|
||||
// time="2 hours ago"
|
||||
// />
|
||||
|
||||
// <CommentItem
|
||||
// name="Mabes Jerr"
|
||||
// content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
|
||||
// time="2 hours ago"
|
||||
// replies={[
|
||||
// {
|
||||
// name: "Mabes Herr",
|
||||
// time: "2 hours ago",
|
||||
// inReplyTo: "Mabes Jerr",
|
||||
// content:
|
||||
// "Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend.",
|
||||
// },
|
||||
// ]}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// type Comment = {
|
||||
// name: string;
|
||||
// time: string;
|
||||
// content: string;
|
||||
// inReplyTo?: string;
|
||||
// };
|
||||
|
||||
// function CommentItem({
|
||||
// name,
|
||||
// time,
|
||||
// content,
|
||||
// replies,
|
||||
// }: Comment & { replies?: Comment[] }) {
|
||||
// return (
|
||||
// <div className="space-y-3">
|
||||
// <div>
|
||||
// <p className="font-semibold">
|
||||
// {name}{" "}
|
||||
// <span className="text-gray-500 text-sm font-normal">{time}</span>
|
||||
// </p>
|
||||
// <p className="text-gray-800 text-sm">{content}</p>
|
||||
// <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
|
||||
// <ThumbsUp className="w-4 h-4 cursor-pointer" />
|
||||
// <button className="hover:underline flex items-center gap-1">
|
||||
// <MessageCircle className="w-4 h-4" /> Reply
|
||||
// </button>
|
||||
// <button className="hover:underline flex items-center gap-1">
|
||||
// <Share2 className="w-4 h-4" /> Share
|
||||
// </button>
|
||||
// <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
|
||||
// <Flag className="w-3 h-3" /> Report
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {replies && replies.length > 0 && (
|
||||
// <div className="ml-6 border-l pl-4 space-y-3">
|
||||
// {replies.map((reply, idx) => (
|
||||
// <div key={idx}>
|
||||
// <p className="font-semibold">
|
||||
// {reply.name}{" "}
|
||||
// <span className="text-gray-500 text-sm font-normal">
|
||||
// {reply.time}
|
||||
// </span>
|
||||
// </p>
|
||||
// <p className="text-xs text-gray-500">
|
||||
// In Reply To {reply.inReplyTo}
|
||||
// </p>
|
||||
// <p className="text-gray-800 text-sm">{reply.content}</p>
|
||||
// <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
|
||||
// <ThumbsUp className="w-4 h-4 cursor-pointer" />
|
||||
// <button className="hover:underline flex items-center gap-1">
|
||||
// <MessageCircle className="w-4 h-4" /> Reply
|
||||
// </button>
|
||||
// <button className="hover:underline flex items-center gap-1">
|
||||
// <Share2 className="w-4 h-4" /> Share
|
||||
// </button>
|
||||
// <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
|
||||
// <Flag className="w-3 h-3" /> Report
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -274,7 +274,7 @@ export default function DocumentDetail({ id }: { id: number }) {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Link href={`/content/video/comment/${id}`}>
|
||||
<Link href={`/content/text/comment/${id}`}>
|
||||
<Button
|
||||
variant="default"
|
||||
size="lg"
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
|||
icon: "uil:schedule",
|
||||
submenus: [
|
||||
{
|
||||
href: "/contributor/schedule",
|
||||
href: "/admin/schedule",
|
||||
label: t("schedule"),
|
||||
active: pathname.includes("/schedule"),
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@ export async function httpGetInterceptor(pathUrl: any) {
|
|||
}
|
||||
}
|
||||
|
||||
// 🔹 Tambahkan return default biar tidak undefined
|
||||
return {
|
||||
error: true,
|
||||
message: response?.data?.message || response?.data || "Unknown error",
|
||||
|
|
|
|||
|
|
@ -281,20 +281,16 @@ export async function getAllSchedules(params?: {
|
|||
sortBy?: string;
|
||||
totalPage?: number;
|
||||
}) {
|
||||
// base endpoint dari swagger
|
||||
let url = "schedules?";
|
||||
|
||||
// tambahkan semua query parameter yang memiliki nilai
|
||||
Object.entries(params || {}).forEach(([key, value]) => {
|
||||
if (value !== undefined && value !== null && value !== "") {
|
||||
url += `${key}=${encodeURIComponent(String(value))}&`;
|
||||
}
|
||||
});
|
||||
|
||||
// hapus '&' terakhir jika ada
|
||||
url = url.endsWith("&") ? url.slice(0, -1) : url;
|
||||
|
||||
// gunakan interceptor kamu untuk GET
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue