From ace0fc2200f8f6d690a14bf8c09e24cbf7dcf735 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Tue, 17 Dec 2024 00:53:59 +0700 Subject: [PATCH] feat:curated-content and ui curated-content --- .../giat-routine/audio-visual.tsx | 78 ---- .../curated-content/giat-routine/audio.tsx | 89 ----- .../giat-routine/audio/audio.tsx | 128 +++++++ .../giat-routine/document/teks.tsx | 115 ++++++ .../curated-content/giat-routine/image.tsx | 79 ---- .../giat-routine/image/detail/[id]/page.tsx | 359 ++++++++++++++++++ .../giat-routine/image/image.tsx | 122 ++++++ .../curated-content/giat-routine/teks.tsx | 103 ----- .../giat-routine/video/audio-visual.tsx | 89 +++++ .../shared/curated-content/page.tsx | 10 +- 10 files changed, 818 insertions(+), 354 deletions(-) delete mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/audio-visual.tsx delete mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/audio.tsx create mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx create mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx delete mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/image.tsx create mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx create mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx delete mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/teks.tsx create mode 100644 app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio-visual.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/audio-visual.tsx deleted file mode 100644 index b6936baa..00000000 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio-visual.tsx +++ /dev/null @@ -1,78 +0,0 @@ -"use client"; -import { Link } from "@/components/navigation"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, -} from "@/components/ui/carousel"; -import { getListContent } from "@/service/landing/landing"; -import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals"; -import { Icon } from "@iconify/react/dist/iconify.js"; -import { useParams, usePathname, useRouter } from "next/navigation"; -import React, { Component, useEffect, useState } from "react"; - -const VideoSliderPage = () => { - const [newContent, setNewContent] = useState(); - const [selectedTab, setSelectedTab] = useState("video"); - const router = useRouter(); - const pathname = usePathname(); - const params = useParams(); - const locale = params?.locale; - const type = "popular"; - useEffect(() => { - initFetch(); - }); - const initFetch = async () => { - const request = { - sortBy: type == "popular" ? "clickCount" : "createdAt", - contentTypeId: "2", - }; - const response = await getListContent(request); - console.log("category", response); - setNewContent(response?.data?.data?.content); - }; - return ( -
- - - {newContent?.map((video: any) => ( - - - -
-

- {video?.title} -

-

- {formatDateToIndonesian(new Date(video?.createdAt))}{" "} - {video?.timezone ? video?.timezone : "WIB"} |{" "} - {" "} - {video.clickCount}{" "} -

-
- - - ))} - - - - -
- ); -}; - -export default VideoSliderPage; diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/audio.tsx deleted file mode 100644 index a95e3750..00000000 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio.tsx +++ /dev/null @@ -1,89 +0,0 @@ -"use client"; -import { Link } from "@/components/navigation"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, -} from "@/components/ui/carousel"; -import { getListContent } from "@/service/landing/landing"; -import { - formatDateToIndonesian, - generateLocalizedPath, - textEllipsis, -} from "@/utils/globals"; -import { Icon } from "@iconify/react/dist/iconify.js"; -import { useParams, usePathname, useRouter } from "next/navigation"; -import React, { Component, useEffect, useState } from "react"; - -const AudioSliderPage = () => { - const [newContent, setNewContent] = useState(); - const [selectedTab, setSelectedTab] = useState("video"); - const router = useRouter(); - const pathname = usePathname(); - const params = useParams(); - const locale = params?.locale; - const type = "popular"; - useEffect(() => { - initFetch(); - }); - const initFetch = async () => { - const request = { - sortBy: type == "popular" ? "clickCount" : "createdAt", - contentTypeId: "4", - }; - const response = await getListContent(request); - console.log("category", response); - setNewContent(response?.data?.data?.content); - }; - return ( -
- - - {newContent?.map((audio: any) => ( - - - - ))} - - - - -
- ); -}; - -export default AudioSliderPage; diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx new file mode 100644 index 00000000..501bfd72 --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx @@ -0,0 +1,128 @@ +"use client"; +import { Link } from "@/components/navigation"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { getListContent } from "@/service/landing/landing"; +import { + formatDateToIndonesian, + generateLocalizedPath, + textEllipsis, +} from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { useParams, usePathname, useRouter } from "next/navigation"; +import React, { Component, useEffect, useState } from "react"; + +const AudioSliderPage = () => { + const [audioData, setAudioData] = useState(); + const [displayAudio, setDisplayAudio] = useState([]); + const [page, setPage] = useState(1); + + useEffect(() => { + initFetch(); + }, []); + + useEffect(() => { + if (audioData?.length > 0) { + shuffleAndSetVideos(); + const interval = setInterval(shuffleAndSetVideos, 5000); + return () => clearInterval(interval); // Cleanup interval on unmount + } + }, [audioData]); + + const initFetch = async () => { + const response = await getListContent({ + page: page - 1, + size: 12, + sortBy: "createdAt", + contentTypeId: "4", + }); + console.log(response); + setAudioData(response?.data?.data?.content); + }; + + const shuffleAndSetVideos = () => { + const shuffled = shuffleArray([...audioData]); + setDisplayAudio(shuffled.slice(0, 3)); + }; + + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + + return ( + + ); +}; + +export default AudioSliderPage; 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 new file mode 100644 index 00000000..8c3a988c --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx @@ -0,0 +1,115 @@ +"use client"; +import { Link } from "@/components/navigation"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { getListContent } from "@/service/landing/landing"; +import { + formatDateToIndonesian, + generateLocalizedPath, + textEllipsis, +} from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { useParams, usePathname, useRouter } from "next/navigation"; +import React, { Component, useEffect, useState } from "react"; + +const TeksSliderPage = () => { + const [documentData, setDocumentData] = useState(); + const [displayDocument, setDisplayDocument] = useState([]); + const [page, setPage] = useState(1); + + useEffect(() => { + initFetch(); + }, []); + + useEffect(() => { + if (documentData?.length > 0) { + shuffleAndSetVideos(); + const interval = setInterval(shuffleAndSetVideos, 5000); + return () => clearInterval(interval); // Cleanup interval on unmount + } + }, [documentData]); + + const initFetch = async () => { + const response = await getListContent({ + page: page - 1, + size: 12, + sortBy: "createdAt", + contentTypeId: "3", + }); + console.log(response); + setDocumentData(response?.data?.data?.content); + }; + const shuffleAndSetVideos = () => { + const shuffled = shuffleArray([...documentData]); + setDisplayDocument(shuffled.slice(0, 2)); + }; + + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + + return ( + + ); +}; + +export default TeksSliderPage; diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image.tsx deleted file mode 100644 index 54e823fd..00000000 --- a/app/[locale]/(protected)/shared/curated-content/giat-routine/image.tsx +++ /dev/null @@ -1,79 +0,0 @@ -"use client"; -import { Link } from "@/components/navigation"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, -} from "@/components/ui/carousel"; -import { getListContent } from "@/service/landing/landing"; -import { - formatDateToIndonesian, - generateLocalizedPath, - textEllipsis, -} from "@/utils/globals"; -import { Icon } from "@iconify/react/dist/iconify.js"; -import { useParams, usePathname, useRouter } from "next/navigation"; -import React, { Component, useEffect, useState } from "react"; - -const ImageSliderPage = () => { - const [newContent, setNewContent] = useState(); - const [selectedTab, setSelectedTab] = useState("video"); - const router = useRouter(); - const pathname = usePathname(); - const params = useParams(); - const locale = params?.locale; - const type = "popular"; - useEffect(() => { - initFetch(); - }); - const initFetch = async () => { - const request = { - sortBy: type == "popular" ? "clickCount" : "createdAt", - contentTypeId: "3", - }; - const response = await getListContent(request); - console.log("category", response); - setNewContent(response?.data?.data?.content); - }; - return ( -
- - - {newContent?.map((image: any) => ( - - - -
-

- {image?.title} -

-

- {formatDateToIndonesian(new Date(image?.createdAt))}{" "} - {image?.timezone ? image?.timezone : "WIB"}|{" "} - {" "} - {image?.clickCount}{" "} -

-
- - - ))} - - - - -
- ); -}; - -export default ImageSliderPage; 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 new file mode 100644 index 00000000..de23584b --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx @@ -0,0 +1,359 @@ +"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, CardContent } 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 { 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 { createTask } from "@/config/api"; +import { + createMedia, + getTagsBySubCategoryId, + listEnableCategory, +} from "@/service/content/content"; +import { postBlog } from "@/service/blog/blog"; +import { Textarea } from "@/components/ui/textarea"; +import { InboxIcon } from "lucide-react"; + +const taskSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + slug: z.string().min(1, { message: "Judul diperlukan" }), + meta: z.string().min(1, { message: "Judul diperlukan" }), + description: z + .string() + .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), + // tags: z.string().min(1, { message: "Judul diperlukan" }), +}); + +type Category = { + id: string; + name: string; +}; + +const initialCategories: Category[] = [ + { + id: "1", + name: "Giat Polri", + }, + { + id: "2", + name: "Giat Pimpinan", + }, + { + id: "3", + name: "Liputan Kegiatan", + }, + { + id: "4", + name: "Seputar Prestasi", + }, +]; + +export default function DetailImage() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const editor = useRef(null); + type TaskSchema = z.infer; + + const [selectedFiles, setSelectedFiles] = useState([]); + const taskId = Cookies.get("taskId"); + const scheduleId = Cookies.get("scheduleId"); + const scheduleType = Cookies.get("scheduleType"); + + const [categories] = useState(initialCategories); // State untuk kategori + const [selectedTarget, setSelectedTarget] = useState(""); + const [selectedCategory, setSelectedCategory] = useState(); + const [tags, setTags] = useState([]); + const [isDraft, setIsDraft] = useState(false); + + const [unitSelection, setUnitSelection] = useState({ + allUnit: false, + mabes: false, + polda: false, + polres: false, + }); + + let fileTypeId = "1"; + + const { + control, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(taskSchema), + }); + + const handleRemoveTag = (index: any) => { + setTags((prevTags) => prevTags.filter((_, i) => i !== index)); + }; + + const handleImageChange = (event: ChangeEvent) => { + if (event.target.files) { + const files = Array.from(event.target.files); + setSelectedFiles((prevImages: any) => [...prevImages, ...files]); + console.log("DATAFILE::", selectedFiles); + } + }; + + const handleRemoveImage = (index: number) => { + setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index)); + }; + + const save = async (data: TaskSchema) => { + const requestData = { + ...data, + title: data.title, + description: data.description, + categoryId: selectedTarget, + slug: data.slug, + metadata: data.meta, + // tags: data.tags, + isDraft, + }; + + const response = await postBlog(requestData); + console.log("Form Data Submitted:", requestData); + console.log("response", response); + + MySwal.fire({ + title: "Sukses", + text: "Data berhasil disimpan.", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then(() => { + router.push("/en/contributor/blog"); + }); + }; + + const onSubmit = (data: TaskSchema) => { + MySwal.fire({ + title: "Simpan Data", + text: "Apakah Anda yakin ingin menyimpan data ini?", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); + }; + + return ( +
+
+ +
+

Kurasi Detail

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

+ {errors.title.message} +

+ )} +
+
+
+ + +
+
+
+
+ + ( +