diff --git a/app/[locale]/(admin)/admin/content/audio/page.tsx b/app/[locale]/(admin)/admin/content/audio/page.tsx index 1478e60..aecd847 100644 --- a/app/[locale]/(admin)/admin/content/audio/page.tsx +++ b/app/[locale]/(admin)/admin/content/audio/page.tsx @@ -9,7 +9,7 @@ import Link from "next/link"; const ReactTableAudioPage = () => { return (
- {/* */} +
diff --git a/app/[locale]/(admin)/admin/content/image/components/table-image.tsx b/app/[locale]/(admin)/admin/content/image/components/table-image.tsx index 4f4f4ed..36908b3 100644 --- a/app/[locale]/(admin)/admin/content/image/components/table-image.tsx +++ b/app/[locale]/(admin)/admin/content/image/components/table-image.tsx @@ -107,7 +107,6 @@ const TableImage = () => { const [filterByCreator, setFilterByCreator] = React.useState(""); const [filterBySource, setFilterBySource] = React.useState(""); const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState(""); - const roleId = getCookiesDecrypt("urie"); const columns = useTableColumns(); const table = useReactTable({ diff --git a/app/[locale]/(admin)/admin/content/image/page.tsx b/app/[locale]/(admin)/admin/content/image/page.tsx index 6c4c765..ce208c3 100644 --- a/app/[locale]/(admin)/admin/content/image/page.tsx +++ b/app/[locale]/(admin)/admin/content/image/page.tsx @@ -9,7 +9,7 @@ import Link from "next/link"; const ReactTableImagePage = () => { return (
- {/* */} +
diff --git a/app/[locale]/(admin)/admin/content/document/components/columns.tsx b/app/[locale]/(admin)/admin/content/text/components/columns.tsx similarity index 98% rename from app/[locale]/(admin)/admin/content/document/components/columns.tsx rename to app/[locale]/(admin)/admin/content/text/components/columns.tsx index 9761a67..6f6aaf8 100644 --- a/app/[locale]/(admin)/admin/content/document/components/columns.tsx +++ b/app/[locale]/(admin)/admin/content/text/components/columns.tsx @@ -259,7 +259,7 @@ const useTableColumns = () => { - + View @@ -268,7 +268,7 @@ const useTableColumns = () => { {(Number(row.original.uploadedById) === Number(userId) || isMabesApprover) && ( diff --git a/app/[locale]/(admin)/admin/content/document/components/document-tabs.tsx b/app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/document/components/document-tabs.tsx rename to app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx diff --git a/app/[locale]/(admin)/admin/content/document/components/pending-approval-columns.tsx b/app/[locale]/(admin)/admin/content/text/components/pending-approval-columns.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/document/components/pending-approval-columns.tsx rename to app/[locale]/(admin)/admin/content/text/components/pending-approval-columns.tsx diff --git a/app/[locale]/(admin)/admin/content/document/components/pending-approval-table.tsx b/app/[locale]/(admin)/admin/content/text/components/pending-approval-table.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/document/components/pending-approval-table.tsx rename to app/[locale]/(admin)/admin/content/text/components/pending-approval-table.tsx diff --git a/app/[locale]/(admin)/admin/content/document/components/table-teks.tsx b/app/[locale]/(admin)/admin/content/text/components/table-teks.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/document/components/table-teks.tsx rename to app/[locale]/(admin)/admin/content/text/components/table-teks.tsx diff --git a/app/[locale]/(admin)/admin/content/document/create/page.tsx b/app/[locale]/(admin)/admin/content/text/create/page.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/document/create/page.tsx rename to app/[locale]/(admin)/admin/content/text/create/page.tsx diff --git a/app/[locale]/(admin)/admin/content/document/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/document/detail/[id]/page.tsx rename to app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx diff --git a/app/[locale]/(admin)/admin/content/audio-visual/layout.tsx b/app/[locale]/(admin)/admin/content/text/layout.tsx similarity index 100% rename from app/[locale]/(admin)/admin/content/audio-visual/layout.tsx rename to app/[locale]/(admin)/admin/content/text/layout.tsx diff --git a/app/[locale]/(admin)/admin/content/document/page.tsx b/app/[locale]/(admin)/admin/content/text/page.tsx similarity index 96% rename from app/[locale]/(admin)/admin/content/document/page.tsx rename to app/[locale]/(admin)/admin/content/text/page.tsx index 57a75bd..da50a1f 100644 --- a/app/[locale]/(admin)/admin/content/document/page.tsx +++ b/app/[locale]/(admin)/admin/content/text/page.tsx @@ -26,7 +26,7 @@ const ReactTableDocumentPage = () => {
- +
- + + + + Detail Tenant + {/* Approval Workflows Tab */} + + +

@@ -718,90 +729,92 @@ function TenantSettingsContentTable() {
- - User Levels Hierarchy + + User Levels Hierarchy
{isHierarchyExpanded ? ( ) : ( )} - - + + - -
- {userLevels - .filter((ul) => !ul.parentLevelId) // Root levels - .sort((a, b) => a.levelNumber - b.levelNumber) - .map((rootLevel) => ( -
- {/* Root Level */} -
-
- {rootLevel.levelNumber} -
-
-
{rootLevel.name}
-
- {rootLevel.aliasName} •{" "} - {rootLevel.group || "No group"} -
-
-
- {rootLevel.isActive && ( - - Active - - )} - {rootLevel.isApprovalActive && ( - - Approval Active - - )} -
-
- - {/* Child Levels */} - {userLevels - .filter((ul) => ul.parentLevelId === rootLevel.id) - .sort((a, b) => a.levelNumber - b.levelNumber) - .map((childLevel) => ( -
-
- {childLevel.levelNumber} + +
+ {userLevels + .filter((ul) => !ul.parentLevelId) // Root levels + .sort((a, b) => a.levelNumber - b.levelNumber) + .map((rootLevel) => ( +
+ {/* Root Level */} +
+
+ {rootLevel.levelNumber}
-
- {childLevel.name} +
+ {rootLevel.name}
-
- {childLevel.aliasName} •{" "} - {childLevel.group || "No group"} +
+ {rootLevel.aliasName} •{" "} + {rootLevel.group || "No group"}
-
- {childLevel.isActive && ( - +
+ {rootLevel.isActive && ( + Active )} - {childLevel.isApprovalActive && ( - - Approval + {rootLevel.isApprovalActive && ( + + Approval Active )}
- ))} -
- ))} -
- + + {/* Child Levels */} + {userLevels + .filter((ul) => ul.parentLevelId === rootLevel.id) + .sort((a, b) => a.levelNumber - b.levelNumber) + .map((childLevel) => ( +
+
+ {childLevel.levelNumber} +
+
+
+ {childLevel.name} +
+
+ {childLevel.aliasName} •{" "} + {childLevel.group || "No group"} +
+
+
+ {childLevel.isActive && ( + + Active + + )} + {childLevel.isApprovalActive && ( + + Approval + + )} +
+
+ ))} +
+ ))} +
+ diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 2e7cd5f..2547d24 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -8,7 +8,7 @@ export default function Home() { return (
- + {/* */}
diff --git a/components/form/content/audio-visual/video-detail-form.tsx b/components/form/content/audio-visual/video-detail-form.tsx index c0cdc18..d117b7a 100644 --- a/components/form/content/audio-visual/video-detail-form.tsx +++ b/components/form/content/audio-visual/video-detail-form.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { ChangeEvent, useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useForm, Controller } from "react-hook-form"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; @@ -18,32 +18,21 @@ import { SelectValue, } from "@/components/ui/select"; import { Checkbox } from "@/components/ui/checkbox"; -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; - -import { register } from "module"; -import { Switch } from "@/components/ui/switch"; import Cookies from "js-cookie"; import { - createMedia, + getArticleDetail, getTagsBySubCategoryId, listEnableCategory, - rejectFiles, + publishMedia, submitApproval, } from "@/service/content/content"; -import { - detailMedia, - getDataApprovalByMediaUpload, -} from "@/service/curated-content/curated-content"; +import { getDataApprovalByMediaUpload } 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, @@ -53,7 +42,7 @@ import { DialogTitle, } from "@/components/ui/dialog"; import { Textarea } from "@/components/ui/textarea"; -import { loading } from "@/config/swal"; +import { close, loading, successCallback } from "@/config/swal"; import { getCookiesDecrypt } from "@/lib/utils"; import { Icon } from "@iconify/react/dist/iconify.js"; import { error } from "@/lib/swal"; @@ -62,13 +51,14 @@ import SuggestionModal from "@/components/modal/suggestions-modal"; import { formatDateToIndonesian } from "@/utils/globals"; import ApprovalHistoryModal from "@/components/modal/approval-history-modal"; -const imageSchema = z.object({ +const videoSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), - description: z - .string() - .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), + description: z.string().min(2, { message: "Deskripsi diperlukan" }), creatorName: z.string().min(1, { message: "Creator diperlukan" }), - // tags: z.string().min(1, { message: "Judul diperlukan" }), +}); + +const ViewEditor = dynamic(() => import("@/components/editor/view-editor"), { + ssr: false, }); type Category = { @@ -78,193 +68,173 @@ type Category = { type FileType = { id: number; - url: string; - thumbnailFileUrl: string; fileName: string; + fileUrl?: string; + fileThumbnail?: string; + format?: string; }; type Detail = { - id: string; + id: number; title: string; description: string; + htmlDescription: string; slug: string; - category: { + categoryId: number; + categoryName: string; + typeId: number; + tags: string; + thumbnailUrl: string; + pageUrl: string | null; + createdById: number; + createdByName: string; + shareCount: number; + viewCount: number; + commentCount: number; + aiArticleId: number | null; + oldId: number; + statusId: number; + isBanner: boolean; + isPublish: boolean; + publishedAt: string | null; + isActive: boolean; + createdAt: string; + updatedAt: string; + files: FileType[] | null; + categories: { + id: number; + title: string; + description: string; + thumbnailUrl: string; + slug: string | null; + tags: string[]; + thumbnailPath: string | null; + parentId: number; + oldCategoryId: number | null; + createdById: number; + statusId: number; + isPublish: boolean; + publishedAt: string | null; + isEnabled: boolean | null; + isActive: boolean; + createdAt: string; + updatedAt: string; + }[]; + // Legacy fields for backward compatibility + category?: { id: number; name: string; }; - categoryName: string; - creatorName: string; - thumbnailLink: string; - url: string; - tags: string; - statusName: string; - isPublish: boolean; - needApprovalFromLevel: number; - files: FileType[]; - uploadedById: number; + creatorName?: string; + thumbnailLink?: string; + statusName?: string; + needApprovalFromLevel?: number; + uploadedById?: number; }; -const ViewEditor = dynamic( - () => { - return import("@/components/editor/view-editor"); - }, - { ssr: false } -); - export default function FormVideoDetail() { const MySwal = withReactContent(Swal); const router = useRouter(); + const { id } = useParams() as { id: string }; const userId = getCookiesDecrypt("uie"); const userLevelId = getCookiesDecrypt("ulie"); + const userLevelName = Cookies.get("state"); 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 [detail, setDetail] = useState(null); 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 [detailVideo, setDetailVideo] = useState([]); - const [thumbsSwiper, setThumbsSwiper] = useState(null); - const [filePlacements, setFilePlacements] = useState([]); - const [selectedTarget, setSelectedTarget] = useState(""); const [files, setFiles] = useState([]); - const [rejectedFiles, setRejectedFiles] = useState([]); - const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); + const [thumbsSwiper, setThumbsSwiper] = useState(null); const [approval, setApproval] = useState(); - - let fileTypeId = "2"; + const [selectedPublishers, setSelectedPublishers] = useState([]); + const [modalOpen, setModalOpen] = useState(false); + const [status, setStatus] = useState(""); + const [description, setDescription] = useState(""); + const [filePlacements, setFilePlacements] = useState([]); + const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); + const [refresh, setRefresh] = useState(false); + const [detailVideos, setDetailVideos] = useState([]); const { control, - handleSubmit, - setValue, formState: { errors }, - } = useForm({ - resolver: zodResolver(imageSchema), + } = useForm({ + resolver: zodResolver(videoSchema), }); - // 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 - // } - // } - // }; + const getStatusName = (statusId: number): string => { + const statusMap: { [key: number]: string } = { + 1: "Menunggu Review", + 2: "Diterima", + 3: "Minta Update", + 4: "Ditolak", + }; + return statusMap[statusId] || "Unknown"; + }; useEffect(() => { - if ( - userLevelId != undefined && - roleId != undefined && - userLevelId == "216" && - roleId == "3" - ) { + if (userLevelId == "216" && roleId == "3") { setIsUserMabesApprover(true); } }, [userLevelId, roleId]); + useEffect(() => { + async function fetchCategories() { + const categoryRes = await listEnableCategory("2"); // video type + setCategories(categoryRes?.data || []); + } + fetchCategories(); + }, []); + + useEffect(() => { + async function fetchDetail() { + if (!id) return; + try { + const response = await getArticleDetail(Number(id)); + const details = response?.data?.data; + + const mappedDetail: Detail = { + ...details, + categoryName: + details?.categories?.[0]?.title || details?.categoryName, + htmlDescription: details?.htmlDescription, + statusName: getStatusName(details?.statusId), + uploadedById: details?.createdById, + files: details?.files || [], + categories: details?.categories || [], + }; + + const mappedFiles = + details?.files?.map((f: any) => ({ + id: f.id, + fileName: f.fileName, + fileUrl: f.fileUrl, + fileThumbnail: f.fileThumbnail, + format: f.format || "mp4", + })) || []; + + setDetail(mappedDetail); + setFiles(mappedFiles); + setDetailVideos(mappedFiles.map((f: any) => f.fileUrl || "")); + const approvals = await getDataApprovalByMediaUpload(mappedDetail.id); + setApproval(approvals?.data?.data); + } catch (err) { + console.error("Error fetching video detail:", err); + } + } + fetchDetail(); + }, [id, refresh]); + 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); - 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); - } - - // Set the selected target to the category ID from details - setSelectedTarget(String(details.category.id)); - - const filesData = details?.files || []; - const fileUrls = filesData.map((files: { url: string }) => - files.url ? files.url : "default-image.jpg" - ); - setDetailVideo(fileUrls); - - const approvals = await getDataApprovalByMediaUpload(details?.id); - setApproval(approvals?.data?.data); - } - } - initState(); - }, [refresh, setValue]); - const actionApproval = (e: string) => { const temp = []; - for (const element of detail.files) { - temp.push([]); - } + for (const element of files) temp.push([]); setFilePlacements(temp); setStatus(e); - setFiles(detail.files); - setDescription(""); setModalOpen(true); }; @@ -275,621 +245,1150 @@ export default function FormVideoDetail() { Number(status) == 2 || Number(status) == 4 ) { - save(); - - // MySwal.fire({ - // title: "Simpan Approval", - // text: "", - // icon: "warning", - // showCancelButton: true, - // cancelButtonColor: "#d33", - // confirmButtonColor: "#3085d6", - // confirmButtonText: "Simpan", - // }).then((result) => { - // if (result.isConfirmed) { - // } - // }); + await save(); } }; - async function save() { + const save = async () => { const data = { action: status == "2" ? "approve" : status == "3" ? "revision" : "reject", message: description, }; - setModalOpen(false); loading(); const response = await submitApproval(id, data); - - if (response?.error) { - error(response.message); - return false; - } - + if (response?.error) return error(response.message); close(); - submitApprovalSuccesss(); - - return false; - } - - const getPlacement = () => { - console.log("getPlaa", filePlacements); - const temp = []; - for (let i = 0; i < filePlacements?.length; i++) { - if (filePlacements[i].length !== 0) { - const now = filePlacements[i].filter((a) => a !== "all"); - const data = { mediaFileId: files[i].id, placements: now.join(",") }; - temp.push(data); - } - } - return temp; - }; - - const setupPlacement = ( - index: number, - placement: string, - checked: boolean - ) => { - let temp = [...filePlacements]; - if (checked) { - if (placement === "all") { - temp[index] = ["all", "mabes", "polda", "international"]; - } else { - const now = temp[index]; - now.push(placement); - if (now.length === 3 && !now.includes("all")) { - now.push("all"); - } - temp[index] = now; - } - } else { - if (placement === "all") { - temp[index] = []; - } else { - const now = temp[index].filter((a) => a !== placement); - console.log("now", now); - temp[index] = now; - if (now.length === 3 && now.includes("all")) { - const newData = now.filter((b) => b !== "all"); - temp[index] = newData; - } - } - } - setFilePlacements(temp); - }; - - 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((result) => { - if (result.isConfirmed) { - router.push("/admin/content/video"); - } - }); + }).then(() => router.push("/admin/content/video")); }; + const publishToMabes = async () => { + const res = await publishMedia(id); + successCallback(); + }; + + if (!detail) { + return ( +
+ Memuat detail video... +
+ ); + } + return (
- {detail !== undefined ? ( -
- -
-

Form Video

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

- {errors.title.message} -

- )} -
-
-
- - -
-
+
+ {/* LEFT SIDE */} + +
+

Form Video

-
- - ( - - )} + {/* Title */} +
+ + ( + - {errors.description?.message && ( -

- {errors.description.message} -

- )} -
-
- -
- - {files?.map((data: any) => ( - - - ))} - -
- + {/* {errors.title?.message && ( +

{errors.title.message}

+ )} */} +
+ + {/* Category */} +
+ + +
+ {/*
+ + +
*/} + + {/* Description */} +
+ + +
+ + {/* Video Files */} +
+ + + {files.map((file) => ( + + + ))} + + + {files.map((file) => ( + + + ))} + +
+
+ + + {/* RIGHT SIDE */} +
+ +
+ + +
+ +
+ + + Thumbnail + +
+ +
+ +
+ {detail.tags?.split(",").map((tag: string, index: number) => ( + + {tag.trim()} + + ))}
- -
- -
-
- - ( - - )} + +
+ + {[5, 6].map((target) => ( +
+ handleCheckboxChange(target)} + className="border" /> - {errors.creatorName?.message && ( -

- {errors.creatorName.message} -

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

Information:

-

{detail?.statusName}

-

Komentar

-

{approval?.message}

-

- {" "} - {approval?.approvalBy?.fullname} |{" "} - {formatDateToIndonesian(approval?.approvalDate)} -

- -
- {/* {detail?.isPublish == false ? ( -
- -
- ) : ( - "" - )} */} + ))} +
- - - - Leave Comment - - {status == "2" - ? files?.map((file, index) => ( -
- {/* */} - - - - - - -
- - {isUserMabesApprover && ( -
-
- - setupPlacement(index, "all", Boolean(e)) - } - /> - -
-
- - setupPlacement(index, "mabes", Boolean(e)) - } - /> - -
-
- - setupPlacement(index, "polda", Boolean(e)) - } - /> - -
+ {/* */} -
- - setupPlacement( - index, - "international", - Boolean(e) - ) - } - /> - -
-
- )} -
-
- )) - : ""} -
-