diff --git a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx index 4984ce42..0141d66d 100644 --- a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx @@ -12,6 +12,7 @@ import { import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { format } from "date-fns"; +import { Link } from "@/components/navigation"; const columns: ColumnDef[] = [ { @@ -99,25 +100,32 @@ const columns: ColumnDef[] = [ ); }, }, - { - accessorKey: "isDone", + accessorKey: "statusName", header: "Status", cell: ({ row }) => { - const isDone = row.getValue("isDone"); + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + return ( -
- -
+ + {status} {/* Tetap tampilkan nilai asli */} + ); }, }, @@ -139,12 +147,18 @@ const columns: ColumnDef[] = [ - + View - + + + + + Edit + + Delete diff --git a/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx b/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx new file mode 100644 index 00000000..c3d08051 --- /dev/null +++ b/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx @@ -0,0 +1,16 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormImageDetail from "@/components/form/content/image-detail-form"; +import FormAudioDetail from "@/components/form/content/audio-detail-form"; + +const AudioDetailPage = async () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default AudioDetailPage; diff --git a/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx b/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx new file mode 100644 index 00000000..c0690cb7 --- /dev/null +++ b/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx @@ -0,0 +1,17 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormImageDetail from "@/components/form/content/image-detail-form"; +import FormImageUpdate from "@/components/form/content/image-update-form"; +import FormAudioUpdate from "@/components/form/content/audio-update-form"; + +const AudioUpdatePage = async () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default AudioUpdatePage; diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx index d6b0328c..acbada79 100644 --- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx @@ -100,7 +100,6 @@ const columns: ColumnDef[] = [ ); }, }, - { accessorKey: "statusName", header: "Status", diff --git a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx index 3e3af62b..bb3cfc77 100644 --- a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx @@ -102,23 +102,31 @@ const columns: ColumnDef[] = [ }, { - accessorKey: "isDone", + accessorKey: "statusName", header: "Status", cell: ({ row }) => { - const isDone = row.getValue("isDone"); + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + return ( -
- -
+ + {status} {/* Tetap tampilkan nilai asli */} + ); }, }, diff --git a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx index b58dd079..9a92144a 100644 --- a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx @@ -102,23 +102,31 @@ const columns: ColumnDef[] = [ }, { - accessorKey: "isDone", + accessorKey: "statusName", header: "Status", cell: ({ row }) => { - const isDone = row.getValue("isDone"); + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + return ( -
- -
+ + {status} {/* Tetap tampilkan nilai asli */} + ); }, }, diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx new file mode 100644 index 00000000..4ba57d19 --- /dev/null +++ b/components/form/content/audio-detail-form.tsx @@ -0,0 +1,752 @@ +"use client"; +import React, { ChangeEvent, useEffect, useRef, useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Card } from "@/components/ui/card"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useParams, useRouter } from "next/navigation"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import JoditEditor from "jodit-react"; +import { register } from "module"; +import { Switch } from "@/components/ui/switch"; +import Cookies from "js-cookie"; +import { + createMedia, + getTagsBySubCategoryId, + listEnableCategory, + rejectFiles, + submitApproval, +} from "@/service/content/content"; +import { detailMedia } from "@/service/curated-content/curated-content"; +import { Badge } from "@/components/ui/badge"; +import { MailIcon } from "lucide-react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/free-mode"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import "swiper/css/thumbs"; +import "swiper/css"; +import "swiper/css/navigation"; +import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; +import { + DialogHeader, + DialogFooter, + Dialog, + DialogContent, + DialogTitle, +} from "@/components/ui/dialog"; +import { Textarea } from "@/components/ui/textarea"; +import { loading } from "@/config/swal"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { error } from "@/lib/swal"; + +const imageSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + description: z + .string() + .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), + creatorName: z.string().min(1, { message: "Creator diperlukan" }), + // tags: z.string().min(1, { message: "Judul diperlukan" }), +}); + +type Category = { + id: string; + name: string; +}; + +type FileType = { + id: number; + url: string; + thumbnailFileUrl: string; + fileName: string; +}; + +type Detail = { + id: string; + title: string; + description: string; + slug: string; + category: { + id: number; + name: string; + }; + categoryName: string; + creatorName: string; + thumbnailLink: string; + tags: string; + statusName: string; + isPublish: boolean; + needApprovalFromLevel: number; + files: FileType[]; + uploadedById: number; +}; + +export default function FormAudioDetail() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + const roleId = getCookiesDecrypt("urie"); + + const [modalOpen, setModalOpen] = useState(false); + const { id } = useParams() as { id: string }; + console.log(id); + const editor = useRef(null); + type ImageSchema = z.infer; + + const [selectedFiles, setSelectedFiles] = useState([]); + const taskId = Cookies.get("taskId"); + const scheduleId = Cookies.get("scheduleId"); + const scheduleType = Cookies.get("scheduleType"); + const [status, setStatus] = useState(""); + const [categories, setCategories] = useState([]); + const [selectedCategory, setSelectedCategory] = useState(); + const [tags, setTags] = useState([]); + const [detail, setDetail] = useState(); + const [refresh, setRefresh] = useState(false); + const [selectedPublishers, setSelectedPublishers] = useState([]); + const [description, setDescription] = useState(""); + const [main, setMain] = useState([]); + const [detailThumb, setDetailThumb] = useState([]); + const [thumbsSwiper, setThumbsSwiper] = useState(null); + + const [selectedTarget, setSelectedTarget] = useState(""); + const [files, setFiles] = useState([]); + const [rejectedFiles, setRejectedFiles] = useState([]); + const [isMabesApprover, setIsMabesApprover] = useState(false); + + let fileTypeId = "4"; + + const { + control, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(imageSchema), + }); + + // const handleKeyDown = (e: any) => { + // const newTag = e.target.value.trim(); // Ambil nilai input + // if (e.key === "Enter" && newTag) { + // e.preventDefault(); // Hentikan submit form + // if (!tags.includes(newTag)) { + // setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru + // setValue("tags", ""); // Kosongkan input + // } + // } + // }; + + useEffect(() => { + if ( + userLevelId != undefined && + roleId != undefined && + userLevelId == "216" && + roleId == "3" + ) { + setIsMabesApprover(true); + } + }, [userLevelId, roleId]); + + const handleCheckboxChange = (id: number) => { + setSelectedPublishers((prev) => + prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id] + ); + }; + + useEffect(() => { + async function initState() { + getCategories(); + } + + initState(); + }, []); + + const getCategories = async () => { + try { + const category = await listEnableCategory(fileTypeId); + const resCategory: Category[] = category.data.data.content; + + setCategories(resCategory); + console.log("data category", resCategory); + + if (scheduleId && scheduleType === "3") { + const findCategory = resCategory.find((o) => + o.name.toLowerCase().includes("pers rilis") + ); + + if (findCategory) { + // setValue("categoryId", findCategory.id); + setSelectedCategory(findCategory.id); // Set the selected category + const response = await getTagsBySubCategoryId(findCategory.id); + setTags(response?.data.data); + } + } + } catch (error) { + console.error("Failed to fetch categories:", error); + } + }; + + useEffect(() => { + async function initState() { + if (id) { + const response = await detailMedia(id); + const details = response.data?.data; + console.log("detail", details); + setFiles(details?.files); + setDetail(details); + setMain({ + type: details?.fileType.name, + url: details?.files[0]?.url, + names: details?.files[0]?.fileName, + format: details?.files[0]?.format, + }); + + if (details.publishedForObject) { + const publisherIds = details.publishedForObject.map( + (obj: any) => obj.id + ); + setSelectedPublishers(publisherIds); + } + + const matchingCategory = categories.find( + (category) => category.id === details.categoryId + ); + + if (matchingCategory) { + setSelectedTarget(matchingCategory.name); + } + + setSelectedTarget(details.categoryId); // Untuk dropdown + + const filesData = details.files || []; + const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) => + file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg" + ); + setDetailThumb(fileUrls); + } + } + initState(); + }, [refresh, setValue]); + + const actionApproval = (e: string) => { + setStatus(e); + setModalOpen(true); + setDescription(""); + }; + + const submit = async () => { + if ( + (description?.length > 1 && Number(status) == 3) || + Number(status) == 2 || + Number(status) == 4 + ) { + MySwal.fire({ + title: "Simpan Approval", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(); + } + }); + } + }; + + async function save() { + const data = { + mediaUploadId: id, + statusId: status, + message: description, + files: [], + // files: isMabesApprover ? getPlacement() : [], + }; + + loading(); + const response = await submitApproval(data); + + if (response?.error) { + error(response.message); + return false; + } + + const dataReject = { + listFiles: rejectedFiles, + }; + + const resReject = await rejectFiles(dataReject); + + if (resReject?.error) { + error(resReject.message); + return false; + } + + close(); + + return false; + } + + function handleDeleteFileApproval(id: number) { + const selectedFiles = files.filter((file) => file.id != id); + setFiles(selectedFiles); + const rejects = rejectedFiles; + rejects.push(id); + setRejectedFiles(rejects); + } + const handleMain = ( + type: string, + url: string, + names: string, + format: string + ) => { + console.log("Test 3 :", type, url, names, format); + setMain({ + type, + url, + names, + format, + }); + return false; + }; + + const submitApprovalSuccesss = () => { + MySwal.fire({ + title: "Sukses", + text: "Data berhasil disimpan.", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then(() => { + router.push("/in/contributor/content/image"); + }); + }; + + return ( +
+ {detail !== undefined ? ( +
+ +
+

Form Konten Foto

+
+ {/* Input Title */} +
+ + ( + + )} + /> + {errors.title?.message && ( +

+ {errors.title.message} +

+ )} +
+
+
+ + +
+
+ +
+ + ( + + )} + /> + {errors.description?.message && ( +

+ {errors.description.message} +

+ )} +
+ + +
+ + {detailThumb?.map((data: any) => ( + + {` + + ))} + +
+ + {detailThumb?.map((data: any) => ( + + {` + + ))} + +
+
+
+
+ +
+ +
+
+ + ( + + )} + /> + {errors.creatorName?.message && ( +

+ {errors.creatorName.message} +

+ )} +
+
+ +
+
+ +
+ {detail?.tags + ?.split(",") + .map((tag: string, index: number) => ( + + {tag.trim()} + + ))} +
+
+
+
+
+ +
+ handleCheckboxChange(5)} + /> + +
+
+ handleCheckboxChange(6)} + /> + +
+
+ handleCheckboxChange(7)} + /> + +
+
+ handleCheckboxChange(8)} + /> + +
+
+
+
+ +

Kotak Saran (0)

+
+
+

Keterangan:

+

{detail?.statusName}

+
+ {/* {detail?.isPublish == false ? ( +
+ +
+ ) : ( + "" + )} */} + {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? ( + Number(detail?.uploadedById) == Number(userId) ? ( + "" + ) : ( +
+ + + +
+ ) + ) : ( + "" + )} + + + + + Berikan Komentar + + {status == "2" + ? files?.map((file) => ( +
+ +
+
+ {file.fileName} + + + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+
+
+ )) + : ""} +
+