From 35e96a7bee4fd3c191905c0e066e563854809809 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 23 Jan 2025 20:16:41 +0800 Subject: [PATCH] feat:update curated content,kontent --- .../giat-routine/audio/detail/[id]/page.tsx | 575 +++++++++++++----- .../document/detail/[id]/page.tsx | 575 +++++++++++++----- .../giat-routine/document/teks.tsx | 17 +- .../giat-routine/image/detail/[id]/page.tsx | 76 ++- .../giat-routine/video/detail/[id]/page.tsx | 520 +++++++++++----- .../shared/curated-content/page.tsx | 95 +-- components/form/content/audio-detail-form.tsx | 239 ++++++-- components/form/content/spit-convert-form.tsx | 15 +- components/form/content/teks-detail-form.tsx | 228 +++++-- components/form/task/task-detail-form.tsx | 2 + public/assets/docx-icon.jpg | Bin 0 -> 21111 bytes public/assets/music-icon.jpg | Bin 0 -> 3591 bytes public/assets/video-icon.webp | Bin 0 -> 16812 bytes 13 files changed, 1678 insertions(+), 664 deletions(-) create mode 100644 public/assets/docx-icon.jpg create mode 100644 public/assets/music-icon.jpg create mode 100644 public/assets/video-icon.webp diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx index d120f342..b6f8cee7 100644 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx @@ -21,8 +21,20 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import Cookies from "js-cookie"; import { postBlog } from "@/service/blog/blog"; import { Textarea } from "@/components/ui/textarea"; -import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon } from "lucide-react"; -import { detailMedia } from "@/service/curated-content/curated-content"; +import { + DotSquare, + InboxIcon, + Music, + PaperclipIcon, + SmileIcon, + TrashIcon, +} from "lucide-react"; +import { + deleteMediaCurationMessage, + detailMedia, + getMediaCurationMessage, + saveMediaCurationMessage, +} from "@/service/curated-content/curated-content"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/free-mode"; @@ -33,6 +45,15 @@ import "swiper/css"; import "swiper/css/navigation"; import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; import { Avatar, AvatarImage } from "@/components/ui/avatar"; +import WavesurferPlayer from "@wavesurfer/react"; +import WaveSurfer from "wavesurfer.js"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Badge } from "@/components/ui/badge"; +import { htmlToString } from "@/utils/globals"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { loading } from "@/lib/swal"; +import { formatDate } from "@fullcalendar/core/index.js"; const detailSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -69,6 +90,13 @@ export type curationDetail = { userGroupId: number; }; }; + publishedFor: string; // ID for selected radio button + publishedForObject: { + id: number; + name: string; + isInternal: boolean; + code: string; + }[]; tags: string; provinceId: string; is_active: string; @@ -119,10 +147,14 @@ export default function DetailAudio() { // files: [], // fileType: null, // }); + const userLevelNumber = getCookiesDecrypt("ulne"); + const userId = getCookiesDecrypt("uie"); const [detail, setDetail] = useState(); const [refresh] = useState(false); const [detailThumb, setDetailThumb] = useState([]); + const [detailAudio, setDetailAudio] = useState([]); const [thumbsSwiper, setThumbsSwiper] = useState(null); + const [selectedValue, setSelectedValue] = useState(""); const { control, @@ -136,11 +168,30 @@ export default function DetailAudio() { const [commentsData, setCommentsData] = useState(initialComments); const [replyText, setReplyText] = useState(""); const [replyingTo, setReplyingTo] = useState(null); + const [selectedFileId, setSelectedFileId] = useState(null); + const [listData, setListData] = useState([]); + const [message, setMessage] = useState(""); + + const [wavesurfer, setWavesurfer] = useState(); + const [isPlaying, setIsPlaying] = useState(false); const handleReply = (commentId: number) => { setReplyingTo(commentId); }; + const handleInputChange = (e: React.ChangeEvent) => { + setMessage(e.target.value); + }; + + const onReady = (ws: any) => { + setWavesurfer(ws); + setIsPlaying(false); + }; + + const onPlayPause = () => { + wavesurfer && wavesurfer.playPause(); + }; + const addReply = (commentId: number) => { if (replyText.trim()) { const newCommentData = commentsData.map((comment: any) => { @@ -166,23 +217,131 @@ export default function DetailAudio() { } }; + useEffect(() => { + async function initState() { + // loading(); + const response = await getMediaCurationMessage(selectedFileId); + console.log("data", response?.data?.data); + console.log("userLvl", userLevelNumber); + setListData(response?.data?.data); + close(); + } + + initState(); + }, [selectedFileId]); + + const postData = async () => { + if (message?.length > 1 && selectedFileId) { + try { + const data = { + mediaUploadFileId: selectedFileId, + message, + parentId: null, + }; + + const response = await saveMediaCurationMessage(data); + console.log("Komentar terkirim:", response); + + const responseGet = await getMediaCurationMessage(selectedFileId); + setListData(responseGet?.data?.data); + + setMessage(""); + } catch (error) { + console.error("Error posting comment:", error); + } + } else { + console.log("Pesan atau file ID tidak valid."); + } + }; + + const sendReplyData = async (parentId: number) => { + const inputElement = document.querySelector( + `#input-comment-${parentId}` + ) as HTMLTextAreaElement; + + if (inputElement?.value?.length > 1 && selectedFileId) { + loading(); + const data = { + mediaUploadFileId: selectedFileId, + message: inputElement.value, + parentId, + }; + + console.log("Sending reply:", data); + const response = await saveMediaCurationMessage(data); + console.log(response); + + const responseGet = await getMediaCurationMessage(selectedFileId); + console.log("Updated comments:", responseGet?.data?.data); + setListData(responseGet?.data?.data); + + inputElement.value = ""; + close(); + setReplyingTo(null); + } + }; + + async function deleteDataSuggestion(dataId: any) { + loading(); + const response = await deleteMediaCurationMessage(dataId); + console.log(response); + const responseGet = await getMediaCurationMessage(selectedFileId); + console.log(responseGet?.data?.data); + setListData(responseGet?.data?.data); + close(); + } + + const deleteData = (dataId: any) => { + deleteDataSuggestion(dataId); + console.log(dataId); + }; + useEffect(() => { async function initState() { if (id) { const response = await detailMedia(id); const details = response?.data?.data; - - setDetail(details); const filesData = details.files || []; - const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) => - file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg" + const fileUrls = filesData.map((file: any) => ({ + id: file.id, + secondaryUrl: file.secondaryUrl || "default-image.jpg", + placements: file.placements || "", + })); + setDetail(details); + setSelectedValue(details?.publishedFor || ""); + setSelectedFileId(details?.files[0]?.id); + setDetailAudio(fileUrls); + const fileUrlsThumbnail = filesData.map( + (file: { thumbnailFileUrl: string; placements: string }) => ({ + thumbnailFileUrl: file.thumbnailFileUrl + ? file.thumbnailFileUrl + : "default-image.jpg", + placements: file.placements || "", + }) ); - setDetailThumb(fileUrls); + + setDetailThumb(fileUrlsThumbnail); + // setDetailThumb(fileUrls); } } initState(); }, [id, refresh]); + const handleFileClick = async (fileId: any) => { + setSelectedFileId(fileId); + try { + const response = await getMediaCurationMessage(fileId); + console.log("Data komentar:", response?.data?.data); + setListData(response?.data?.data); + } catch (error) { + console.error("Error fetching comments:", error); + } + }; + + const handleValueChange = (value: string) => { + setSelectedValue(value); + }; + return (
{detail !== undefined ? ( @@ -242,7 +401,7 @@ export default function DetailAudio() { name="description" render={({ field }) => ( +
+ - -
- )}
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx index 187a3eab..146372e1 100644 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx @@ -21,8 +21,19 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import Cookies from "js-cookie"; import { postBlog } from "@/service/blog/blog"; import { Textarea } from "@/components/ui/textarea"; -import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon } from "lucide-react"; -import { detailMedia } from "@/service/curated-content/curated-content"; +import { + DotSquare, + InboxIcon, + PaperclipIcon, + SmileIcon, + TrashIcon, +} from "lucide-react"; +import { + deleteMediaCurationMessage, + detailMedia, + getMediaCurationMessage, + saveMediaCurationMessage, +} from "@/service/curated-content/curated-content"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/free-mode"; @@ -35,6 +46,11 @@ import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; import { Avatar, AvatarImage } from "@/components/ui/avatar"; import JoditEditor from "jodit-react"; import { Badge } from "@/components/ui/badge"; +import { Checkbox } from "@/components/ui/checkbox"; +import { htmlToString } from "@/utils/globals"; +import { loading } from "@/lib/swal"; +import { formatDate } from "@fullcalendar/core/index.js"; +import { getCookiesDecrypt } from "@/lib/utils"; const detailSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -51,6 +67,13 @@ type Category = { categoryName: string; }; +type PublishedForObject = { + id: number; + name: string; + isInternal: boolean; + code: string; +}; + export type curationDetail = { id: number; title: string; @@ -71,6 +94,13 @@ export type curationDetail = { userGroupId: number; }; }; + publishedFor: string; // ID for selected radio button + publishedForObject: { + id: number; + name: string; + isInternal: boolean; + code: string; + }[]; tags: string; provinceId: string; is_active: string; @@ -109,7 +139,8 @@ export default function DetailDocument() { console.log(id); const editor = useRef(null); type DetailSchema = z.infer; - + const userLevelNumber = getCookiesDecrypt("ulne"); + const userId = getCookiesDecrypt("uie"); const [selectedFiles, setSelectedFiles] = useState([]); const taskId = Cookies.get("taskId"); const scheduleId = Cookies.get("scheduleId"); @@ -125,6 +156,7 @@ export default function DetailDocument() { const [refresh] = useState(false); const [detailThumb, setDetailThumb] = useState([]); const [thumbsSwiper, setThumbsSwiper] = useState(null); + const [selectedValue, setSelectedValue] = useState(""); const { control, @@ -138,11 +170,18 @@ export default function DetailDocument() { const [commentsData, setCommentsData] = useState(initialComments); const [replyText, setReplyText] = useState(""); const [replyingTo, setReplyingTo] = useState(null); + const [selectedFileId, setSelectedFileId] = useState(null); + const [listData, setListData] = useState([]); + const [message, setMessage] = useState(""); const handleReply = (commentId: number) => { setReplyingTo(commentId); }; + const handleInputChange = (e: React.ChangeEvent) => { + setMessage(e.target.value); + }; + const addReply = (commentId: number) => { if (replyText.trim()) { const newCommentData = commentsData.map((comment: any) => { @@ -168,6 +207,85 @@ export default function DetailDocument() { } }; + useEffect(() => { + async function initState() { + // loading(); + const response = await getMediaCurationMessage(selectedFileId); + console.log("data", response?.data?.data); + console.log("userLvl", userLevelNumber); + setListData(response?.data?.data); + close(); + } + + initState(); + }, [selectedFileId]); + + const postData = async () => { + if (message?.length > 1 && selectedFileId) { + try { + const data = { + mediaUploadFileId: selectedFileId, + message, + parentId: null, + }; + + const response = await saveMediaCurationMessage(data); + console.log("Komentar terkirim:", response); + + const responseGet = await getMediaCurationMessage(selectedFileId); + setListData(responseGet?.data?.data); + + setMessage(""); + } catch (error) { + console.error("Error posting comment:", error); + } + } else { + console.log("Pesan atau file ID tidak valid."); + } + }; + + const sendReplyData = async (parentId: number) => { + const inputElement = document.querySelector( + `#input-comment-${parentId}` + ) as HTMLTextAreaElement; + + if (inputElement?.value?.length > 1 && selectedFileId) { + loading(); + const data = { + mediaUploadFileId: selectedFileId, + message: inputElement.value, + parentId, + }; + + console.log("Sending reply:", data); + const response = await saveMediaCurationMessage(data); + console.log(response); + + const responseGet = await getMediaCurationMessage(selectedFileId); + console.log("Updated comments:", responseGet?.data?.data); + setListData(responseGet?.data?.data); + + inputElement.value = ""; + close(); + setReplyingTo(null); + } + }; + + async function deleteDataSuggestion(dataId: any) { + loading(); + const response = await deleteMediaCurationMessage(dataId); + console.log(response); + const responseGet = await getMediaCurationMessage(selectedFileId); + console.log(responseGet?.data?.data); + setListData(responseGet?.data?.data); + close(); + } + + const deleteData = (dataId: any) => { + deleteDataSuggestion(dataId); + console.log(dataId); + }; + useEffect(() => { async function initState() { if (id) { @@ -175,16 +293,37 @@ export default function DetailDocument() { const details = response?.data?.data; setDetail(details); + setSelectedValue(details?.publishedFor || ""); + setSelectedFileId(details?.files[0]?.id); const filesData = details.files || []; - const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) => - file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg" - ); + const fileUrls = filesData.map((file: any) => ({ + id: file.id, + url: file.secondaryUrl || "default-image.jpg", + format: file.format, + fileName: file.fileName, + placements: file.placements || "", + })); setDetailThumb(fileUrls); } } initState(); }, [id, refresh]); + const handleFileClick = async (fileId: any) => { + setSelectedFileId(fileId); + try { + const response = await getMediaCurationMessage(fileId); + console.log("Data komentar:", response?.data?.data); + setListData(response?.data?.data); + } catch (error) { + console.error("Error fetching comments:", error); + } + }; + + const handleValueChange = (value: string) => { + setSelectedValue(value); + }; + return (
{detail !== undefined ? ( @@ -244,7 +383,7 @@ export default function DetailDocument() { name="description" render={({ field }) => ( +
+ - -
- )}
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx index 20e89711..ef7e77b7 100644 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx @@ -7,6 +7,7 @@ import { CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; +import { listCuratedContent } from "@/service/curated-content/curated-content"; import { getListContent } from "@/service/landing/landing"; import { formatDateToIndonesian, @@ -21,10 +22,12 @@ const TeksSliderPage = () => { const [documentData, setDocumentData] = useState(); const [displayDocument, setDisplayDocument] = useState([]); const [page, setPage] = useState(1); + const [limit, setLimit] = React.useState(10); + const [search, setSearch] = React.useState(""); useEffect(() => { initFetch(); - }, []); + }, [page, limit, search]); useEffect(() => { if (documentData?.length > 0) { @@ -35,14 +38,12 @@ const TeksSliderPage = () => { }, [documentData]); const initFetch = async () => { - const response = await getListContent({ - page: page - 1, - size: 12, - sortBy: "createdAt", - contentTypeId: "3", - }); + const response = await listCuratedContent(search, limit, page - 1, 3, "1"); console.log(response); - setDocumentData(response?.data?.data?.content); + + const data = response?.data?.data; + const contentData = data?.content; + setDocumentData(contentData); }; const shuffleAndSetVideos = () => { const shuffled = shuffleArray([...documentData]); diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx index 90858da6..d1d53dec 100644 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx @@ -53,6 +53,8 @@ import { } from "@/service/task"; import { getCookiesDecrypt } from "@/lib/utils"; import { close, loading } from "@/lib/swal"; +import { Checkbox } from "@/components/ui/checkbox"; +import { htmlToString } from "@/utils/globals"; const detailSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -107,6 +109,13 @@ export type curationDetail = { userGroupId: number; }; }; + publishedFor: string; // ID for selected radio button + publishedForObject: { + id: number; + name: string; + isInternal: boolean; + code: string; + }[]; tags: string; provinceId: string; is_active: string; @@ -173,6 +182,7 @@ export default function DetailImage() { const [commentsData, setCommentsData] = useState(initialComments); const [replyText, setReplyText] = useState(""); const [replyingTo, setReplyingTo] = useState(null); + const [selectedValue, setSelectedValue] = useState(""); const handleReply = (commentId: number) => { setReplyingTo(commentId); @@ -272,11 +282,13 @@ export default function DetailImage() { const details = response?.data?.data; setDetail(details); + setSelectedValue(details?.publishedFor || ""); setSelectedFileId(details?.files[0]?.id); const filesData = details.files || []; const fileUrls = filesData.map((file: any) => ({ id: file.id, thumbnailFileUrl: file.thumbnailFileUrl || "default-image.jpg", + placements: file.placements || "", })); setDetailThumb(fileUrls); } @@ -294,6 +306,9 @@ export default function DetailImage() { console.error("Error fetching comments:", error); } }; + const handleValueChange = (value: string) => { + setSelectedValue(value); + }; return (
@@ -354,7 +369,7 @@ export default function DetailImage() { name="description" render={({ field }) => ( -
-
- - - -
- -
- {commentsData.map((comment) => ( -
- - - -
- - {comment.username} - - - {comment.date} - -

{comment.text}

-
handleReply(comment.id)} - > - - Balas +
+ - -
- )}
diff --git a/app/[locale]/(protected)/shared/curated-content/page.tsx b/app/[locale]/(protected)/shared/curated-content/page.tsx index 661f7a88..6fe39f04 100644 --- a/app/[locale]/(protected)/shared/curated-content/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/page.tsx @@ -1,7 +1,7 @@ import SiteBreadcrumb from "@/components/site-breadcrumb"; import { Card, CardContent } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { Rows, Search, UploadIcon } from "lucide-react"; +import { ArrowRight, Rows, Search, UploadIcon } from "lucide-react"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -76,65 +76,76 @@ const CuratedContentPage = () => {
- +
+ + +
- - +
+ + +
- - +
+ + +
- +
+ + +
diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx index 865e600a..026e1efa 100644 --- a/components/form/content/audio-detail-form.tsx +++ b/components/form/content/audio-detail-form.tsx @@ -32,7 +32,7 @@ import { } from "@/service/content/content"; import { detailMedia } from "@/service/curated-content/curated-content"; import { Badge } from "@/components/ui/badge"; -import { MailIcon } from "lucide-react"; +import { MailIcon, Music } from "lucide-react"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/free-mode"; @@ -138,25 +138,23 @@ export default function FormAudioDetail() { const [selectedTarget, setSelectedTarget] = useState(""); const [files, setFiles] = useState([]); const [rejectedFiles, setRejectedFiles] = useState([]); - const [isMabesApprover, setIsMabesApprover] = useState(false); + const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); const [audioPlaying, setAudioPlaying] = useState(null); + const [filePlacements, setFilePlacements] = useState([]); const waveSurferRef = useRef(null); - const [wavesurfer, setWavesurfer] = useState(); - const [isPlaying, setIsPlaying] = useState(false) - + const [isPlaying, setIsPlaying] = useState(false); const onReady = (ws: any) => { - setWavesurfer(ws) + setWavesurfer(ws); setIsPlaying(false); - } + }; const onPlayPause = () => { wavesurfer && wavesurfer.playPause(); - } - + }; let fileTypeId = "4"; @@ -187,7 +185,7 @@ export default function FormAudioDetail() { userLevelId == "216" && roleId == "3" ) { - setIsMabesApprover(true); + setIsUserMabesApprover(true); } }, [userLevelId, roleId]); @@ -230,6 +228,14 @@ export default function FormAudioDetail() { } }; + const setupPlacementCheck = (length: number) => { + const temp = []; + for (let i = 0; i < length; i++) { + temp.push([]); + } + setFilePlacements(temp); + }; + useEffect(() => { async function initState() { if (id) { @@ -244,6 +250,7 @@ export default function FormAudioDetail() { names: details?.files[0]?.fileName, format: details?.files[0]?.format, }); + setupPlacementCheck(details?.files?.length); if (details.publishedForObject) { const publisherIds = details.publishedForObject.map( @@ -281,9 +288,16 @@ export default function FormAudioDetail() { }, [refresh, setValue]); const actionApproval = (e: string) => { + const temp = []; + for (const element of detail.files) { + temp.push([]); + } + setFilePlacements(temp); setStatus(e); - setModalOpen(true); + setFiles(detail.files); + setDescription(""); + setModalOpen(true); }; const submit = async () => { @@ -308,13 +322,26 @@ export default function FormAudioDetail() { } }; + 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, placement: now.join(",") }; + temp.push(data); + } + } + return temp; + }; + async function save() { const data = { mediaUploadId: id, statusId: status, message: description, - files: [], - // files: isMabesApprover ? getPlacement() : [], + // files: [], + files: isUserMabesApprover ? getPlacement() : [], }; loading(); @@ -337,6 +364,7 @@ export default function FormAudioDetail() { } close(); + submitApprovalSuccesss(); return false; } @@ -348,6 +376,40 @@ export default function FormAudioDetail() { rejects.push(id); setRejectedFiles(rejects); } + + 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); + }; + const handleMain = ( type: string, url: string, @@ -380,7 +442,7 @@ export default function FormAudioDetail() { confirmButtonColor: "#3085d6", confirmButtonText: "OK", }).then(() => { - router.push("/in/contributor/content/image"); + router.push("/in/contributor/content/audio"); }); }; @@ -469,7 +531,27 @@ export default function FormAudioDetail() { />
))} -

{isPlaying ? "Pause" : "Play"}

+
@@ -609,7 +691,7 @@ export default function FormAudioDetail() { Berikan Komentar {status == "2" - ? files?.map((file) => ( + ? 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) + ) + } + /> + +
-
+ )}
)) @@ -743,14 +868,16 @@ export default function FormAudioDetail() { diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx index f7898f04..1d1183ed 100644 --- a/components/form/content/spit-convert-form.tsx +++ b/components/form/content/spit-convert-form.tsx @@ -355,10 +355,8 @@ export default function FormConvertSPIT() { const handleCheckboxChange = (id: string): void => { if (id === "all") { if (publishedFor.includes("all")) { - // Uncheck all checkboxes setPublishedFor([]); } else { - // Select all checkboxes setPublishedFor( options .filter((opt: any) => opt.id !== "all") @@ -370,7 +368,6 @@ export default function FormConvertSPIT() { ? publishedFor.filter((item) => item !== id) : [...publishedFor, id]; - // Remove "all" if any checkbox is unchecked if (publishedFor.includes("all") && id !== "all") { setPublishedFor(updatedPublishedFor.filter((item) => item !== "all")); } else { @@ -416,10 +413,10 @@ export default function FormConvertSPIT() { description, htmlDescription: description, tags: "siap", - categoryId: 1, + categoryId: selectedCategoryId, publishedFor: publishedFor.join(","), creator: data.contentCreator, - files: isUserMabesApprover ? getPlacement() : [], // Include placement data + files: isUserMabesApprover ? getPlacement() : [], }; const response = await convertSPIT(requestData); @@ -698,7 +695,7 @@ export default function FormConvertSPIT() {
- +
( {` @@ -719,7 +716,7 @@ export default function FormConvertSPIT() {
( {` diff --git a/components/form/content/teks-detail-form.tsx b/components/form/content/teks-detail-form.tsx index 404f143d..b1e51bfe 100644 --- a/components/form/content/teks-detail-form.tsx +++ b/components/form/content/teks-detail-form.tsx @@ -138,6 +138,9 @@ export default function FormTeksDetail() { const [rejectedFiles, setRejectedFiles] = useState([]); const [isMabesApprover, setIsMabesApprover] = useState(false); + const [filePlacements, setFilePlacements] = useState([]); + const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); + let fileTypeId = "3"; const { @@ -167,7 +170,7 @@ export default function FormTeksDetail() { userLevelId == "216" && roleId == "3" ) { - setIsMabesApprover(true); + setIsUserMabesApprover(true); } }, [userLevelId, roleId]); @@ -210,6 +213,14 @@ export default function FormTeksDetail() { } }; + const setupPlacementCheck = (length: number) => { + const temp = []; + for (let i = 0; i < length; i++) { + temp.push([]); + } + setFilePlacements(temp); + }; + useEffect(() => { async function initState() { if (id) { @@ -255,9 +266,16 @@ export default function FormTeksDetail() { }, [refresh, setValue]); const actionApproval = (e: string) => { + const temp = []; + for (const element of detail.files) { + temp.push([]); + } + setFilePlacements(temp); setStatus(e); - setModalOpen(true); + setFiles(detail.files); + setDescription(""); + setModalOpen(true); }; const submit = async () => { @@ -266,29 +284,42 @@ export default function FormTeksDetail() { 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(); - } - }); + save(); + // MySwal.fire({ + // title: "Simpan Approval", + // text: "", + // icon: "warning", + // showCancelButton: true, + // cancelButtonColor: "#d33", + // confirmButtonColor: "#3085d6", + // confirmButtonText: "Simpan", + // }).then((result) => { + // if (result.isConfirmed) { + + // } + // }); } }; + 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, placement: now.join(",") }; + temp.push(data); + } + } + return temp; + }; + async function save() { const data = { mediaUploadId: id, statusId: status, message: description, - files: [], - // files: isMabesApprover ? getPlacement() : [], + files: isUserMabesApprover ? getPlacement() : [], }; loading(); @@ -311,10 +342,44 @@ export default function FormTeksDetail() { } close(); + submitApprovalSuccesss(); return false; } + 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); @@ -473,7 +538,7 @@ export default function FormTeksDetail() {
Berikan Komentar {status == "2" - ? files?.map((file) => ( + ? 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) + ) + } + /> + +
-
+ )}
)) @@ -778,14 +886,16 @@ export default function FormTeksDetail() { diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx index 8dfab668..ef6ffc10 100644 --- a/components/form/task/task-detail-form.tsx +++ b/components/form/task/task-detail-form.tsx @@ -1329,6 +1329,7 @@ export default function FormTaskDetail() {