From e9c4a8922c591c92071609a695705096ffa44c7a Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Sat, 4 Jan 2025 10:44:57 +0700 Subject: [PATCH] feat: add content-management --- app/[locale]/(public)/all/filter/page.tsx | 517 ++++++++++++++++++ .../content-management/download/page.tsx | 386 ++++++++++++- .../content-management/galery/page.tsx | 154 ++++-- .../rewrite/detail/[id]/page.tsx | 306 +++++++++++ .../content-management/rewrite/page.tsx | 193 ++++++- .../content-management/users/page.tsx | 166 +++++- components/landing-page/coverage.tsx | 136 ++--- components/landing-page/division.tsx | 136 ++--- components/landing-page/navbar.tsx | 14 +- components/ui/dialog.tsx | 2 +- service/content/ai.ts | 2 + service/content/content.ts | 93 +--- service/landing/landing.ts | 14 + 13 files changed, 1846 insertions(+), 273 deletions(-) create mode 100644 app/[locale]/(public)/all/filter/page.tsx create mode 100644 app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx diff --git a/app/[locale]/(public)/all/filter/page.tsx b/app/[locale]/(public)/all/filter/page.tsx new file mode 100644 index 00000000..6400f1b1 --- /dev/null +++ b/app/[locale]/(public)/all/filter/page.tsx @@ -0,0 +1,517 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import { Card, CardContent } from "@/components/ui/card"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; +import { getUserLevelListByParent, listCategory, listData, listDataAll, listDataRegional } from "@/service/landing/landing"; +import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; +import LandingPagination from "@/components/landing-page/pagination"; +import { Reveal } from "@/components/landing-page/Reveal"; +import { Link, useRouter } from "@/i18n/routing"; +import { Input } from "@/components/ui/input"; +import ReactDatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +import { close, loading } from "@/config/swal"; + +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, +]; + +const FilterPage = () => { + const router = useRouter(); + const asPath = usePathname(); + const params = useParams(); + const searchParams = useSearchParams(); + const locale = params?.locale; + const [imageData, setImageData] = useState(); + const [totalData, setTotalData] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState([]); + const [columnVisibility, setColumnVisibility] = React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = useState(1); + const [totalContent, setTotalContent] = useState(); + const [change, setChange] = useState(false); + const sortBy = searchParams?.get("sortBy"); + const title = searchParams?.get("title"); + const categorie = searchParams?.get("category"); + const group = searchParams?.get("group"); + const tag: any = searchParams?.get("tag"); + const [contentImage, setContentImage] = useState([]); + const [, setGetTotalPage] = useState(); + let typingTimer: any; + const doneTypingInterval = 1500; + const [search, setSearch] = useState(); + const [categoryFilter, setCategoryFilter] = useState([]); + const [monthYearFilter, setMonthYearFilter] = useState(); + const [searchTitle, setSearchTitle] = useState(""); + const [sortByOpt, setSortByOpt] = useState(sortBy === "popular" ? "clickCount" : "createdAt"); + const isRegional = asPath?.includes("regional"); + const isSatker = asPath?.includes("satker"); + const [formatFilter, setFormatFilter] = useState([]); + const pages = page ? page - 1 : 0; + const [startDateString, setStartDateString] = useState(); + const [endDateString, setEndDateString] = useState(); + const [dateRange, setDateRange] = useState([null, null]); + const [calenderState, setCalenderState] = useState(false); + const [handleClose, setHandleClose] = useState(false); + const [categories, setCategories] = useState([]); + const [userLevels, setUserLevels] = useState([]); + const [contentAll, setContentAll] = useState([]); + + // const [startDate, endDate] = dateRange; + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + useEffect(() => { + async function initState() { + getCategories(); + // getSelectedCategory(); + if (isSatker) { + getUserLevels(); + } + } + + initState(); + }, []); + + useEffect(() => { + if (categorie) { + setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]); + console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]); + } + }, [categorie]); + + // useEffect(() => { + // fetchData(); + // }, [page, sortBy, sortByOpt, title]); + + useEffect(() => { + async function initState() { + if (isRegional) { + getDataRegional(); + } else { + getData(); + } + } + console.log(monthYearFilter, "monthFilter"); + initState(); + }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]); + + async function getCategories() { + const category = await listCategory("1"); + const resCategory = category?.data?.data?.content; + setCategories(resCategory); + } + + useEffect(() => { + function initState() { + if (dateRange[0] != null && dateRange[1] != null) { + setStartDateString(getOnlyDate(dateRange[0])); + setEndDateString(getOnlyDate(dateRange[1])); + setHandleClose(true); + console.log("date range", dateRange, getOnlyDate(dateRange[0])); + } + } + initState(); + }, [calenderState]); + + async function getData() { + if (asPath?.includes("/polda/") == true) { + if (asPath?.split("/")[2] !== "[polda_name]") { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + const filterGroup = group == undefined ? asPath.split("/")[2] : group; + loading(); + const response = await listDataAll( + "", + name, + filter, + "", + tag, + filterGroup, + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "", + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + ); + close(); + // setGetTotalPage(response.data?.data?.totalPages); + // setContentImage(response.data?.data?.content); + // setTotalContent(response.data?.data?.totalElements); + const data = response.data?.data; + const contentData = data?.content; + setImageData(contentData); + setTotalData(data?.totalElements); + setContentAll(response.data?.data?.content); + setTotalPage(data?.totalPages); + setTotalContent(response.data?.data?.totalElements); + } + } else { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + loading(); + const response = await listDataAll( + "", + name, + filter, + "", + "", + tag, + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "", + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + ); + close(); + // setGetTotalPage(response.data?.data?.totalPages); + // setContentImage(response.data?.data?.content); + // setTotalContent(response.data?.data?.totalElements); + const data = response.data?.data; + const contentData = data?.content; + setImageData(contentData); + setTotalData(data?.totalElements); + setContentAll(response.data?.data?.content); + setTotalPage(data?.totalPages); + setTotalContent(response.data?.data?.totalElements); + } + } + + const handleCategoryFilter = (e: boolean, id: string) => { + let filter = [...categoryFilter]; + + if (e) { + filter = [...categoryFilter, String(id)]; + } else { + filter.splice(categoryFilter.indexOf(id), 1); + } + console.log("checkbox filter", filter); + setCategoryFilter(filter); + router.push(`?category=${filter.join("&")}`); + }; + + const handleFormatFilter = (e: boolean, id: string) => { + let filter = [...formatFilter]; + + if (e) { + filter = [...formatFilter, id]; + } else { + filter.splice(formatFilter.indexOf(id), 1); + } + console.log("Format filter", filter); + setFormatFilter(filter); + }; + + const cleanCheckbox = () => { + setCategoryFilter([]); + setFormatFilter([]); + router.push(`?category=&title=`); + setDateRange([null, null]); + setMonthYearFilter(null); + setChange(!change); + }; + + async function getDataRegional() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + loading(); + const response = await listDataRegional( + "", + name, + filter, + format, + "", + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "", + 12, + pages, + sortByOpt + ); + close(); + + setGetTotalPage(response.data?.data?.totalPages); + setContentImage(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + + const table = useReactTable({ + data: imageData, + columns: columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + function getSelectedCategory() { + const filter = []; + + if (categorie) { + const categoryArr = categorie.split(","); + + for (const element of categoryArr) { + filter.push(Number(element)); + } + + setCategoryFilter(filter); + } + } + + const handleDeleteDate = () => { + setDateRange([null, null]); + setStartDateString(""); + setEndDateString(""); + setHandleClose(false); + }; + + const handleSorting = (e: any) => { + console.log(e.target.value); + if (e.target.value == "terbaru") { + setSortByOpt("createdAt"); + } else { + setSortByOpt("clickCount"); + } + + setChange(!change); + }; + + async function getUserLevels() { + const res = await getUserLevelListByParent(761); + const userLevelList = res?.data?.data; + + if (userLevelList !== null) { + let optionArr: any = []; + + userLevelList?.map((option: any) => { + let optionData = { + id: option.id, + label: option.name, + value: option.id, + }; + + optionArr.push(optionData); + }); + + setUserLevels(optionArr); + } + } + + const handleKeyUp = () => { + clearTimeout(typingTimer); + typingTimer = setTimeout(doneTyping, doneTypingInterval); + }; + + async function doneTyping() { + if (searchTitle == "" || searchTitle == undefined) { + router.push("?title="); + } else { + router.push(`?title=${searchTitle}`); + } + } + + const handleKeyDown = () => { + clearTimeout(typingTimer); + }; + + return ( +
+ {/* Header */} + +
+

+ {" "} + Konten {">"} Semua Konten +

+

|

+

{`Hasil Pencarian ${title} `}

+ {`Terdapat ${contentAll?.length} konten yang dapat diunduh`} +
+ + {/* Left */} +
+
+

+ + Filter +

+
+
+
+ + setSearchTitle(e.target.value)} + onKeyUp={handleKeyUp} + onKeyDown={handleKeyDown} + type="text" + id="search" + placeholder="Cari judul..." + className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" + /> +
+ +
+ + setMonthYearFilter(date)} + dateFormat="MM | yyyy" + placeholderText="Pilih Tahun dan Bulan" + showMonthYearPicker + /> +
+ +
+ +
+ { + setDateRange(update); + }} + placeholderText="Pilih Tanggal" + onCalendarClose={() => setCalenderState(!calenderState)} + /> +
{handleClose ? : ""}
+
+
+ +
+

Kategori

+
    + {categories.map((category: any) => ( +
  • + +
    • + ))} +
+
+ {/* Garis */} +
+ {/* Garis */} +
+

Format Foto

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ +
+
+ + {/* Konten Kanan */} + +
+
+

Urutkan berdasarkan

+ +
+ + {imageData?.length > 0 ? ( +
+ {imageData?.map((image: any) => ( + + + + +
+ {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| + {image?.clickCount}{" "} + + + {" "} +
+
{image?.title}
+ + + + ))} +
+ ) : ( +

+ empty +

+ )} + + +
+ +
+
+ ); +}; + +export default FilterPage; diff --git a/app/[locale]/(public)/content-management/download/page.tsx b/app/[locale]/(public)/content-management/download/page.tsx index cc28936a..85c96e9f 100644 --- a/app/[locale]/(public)/content-management/download/page.tsx +++ b/app/[locale]/(public)/content-management/download/page.tsx @@ -1,17 +1,395 @@ +"use client"; + +import { close, error, loading, successCallback } from "@/config/swal"; +import { checkWishlistStatus, deleteWishlist, getInfoProfile, mediaWishlist, saveWishlist } from "@/service/landing/landing"; +import React, { useEffect, useState } from "react"; +import { Link, useRouter } from "@/i18n/routing"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { useSearchParams } from "next/navigation"; +import { Card, CardContent } from "@/components/ui/card"; import HeaderManagement from "@/components/landing-page/header-management"; import SidebarManagement from "@/components/landing-page/sidebar-management"; -import React from "react"; +import withReactContent from "sweetalert2-react-content"; +import { getCookiesDecrypt } from "@/lib/utils"; +import Swal from "sweetalert2"; +import { useToast } from "@/components/ui/use-toast"; + +const Galery = (props: any) => { + const [profile, setProfile] = useState(); + const [selectedTab, setSelectedTab] = useState("video"); + const router = useRouter(); + const MySwal = withReactContent(Swal); + const searchParams = useSearchParams(); + // const { id } = router.query; + const page: any = searchParams?.get("page"); + const title = searchParams?.get("title"); + const category = searchParams?.get("category"); + const pages = page ? page - 1 : 0; + const { isInstitute, instituteId } = props; + const userId = getCookiesDecrypt("uie"); + const userRoleId = getCookiesDecrypt("urie"); + + const [totalContent, setTotalContent] = useState(); + const [categoryFilter] = useState([]); + const [formatFilter] = useState([]); + const [sortBy] = useState(); + const [change] = useState(false); + const [contentVideo, setContentVideo] = useState([]); + const [contentImage, setContentImage] = useState([]); + const [contentDocument, setContentDocument] = useState([]); + const [contentAudio, setContentAudio] = useState([]); + const [, setGetTotalPage] = useState([]); + const [refresh, setRefresh] = useState(false); + const [, setCopySuccess] = useState(""); + const [, setWishlistId] = useState(); + + useEffect(() => { + getDataVideo(); + }, [page, category, title]); + + async function getDataVideo() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + const response = await mediaWishlist("2", isInstitute ? instituteId : "", name, filter, "9", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentVideo(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + async function initState() { + loading(); + const response = await getInfoProfile(); + + // console.log(response?.data.data); + setProfile(response?.data?.data); + close(); + } + + initState(); + }, []); + + useEffect(() => { + getDataVideo(); + }, [change, refresh]); + + useEffect(() => { + getDataDocument(); + }, [page, category, title]); + + async function getDataDocument() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await mediaWishlist("3", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentDocument(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + getDataDocument(); + }, [change, refresh]); + + useEffect(() => { + getDataAudio(); + }, [page, category, title]); + + useEffect(() => { + getDataAudio(); + }, [change, refresh]); + + async function getDataAudio() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await mediaWishlist("4", isInstitute ? instituteId : "", name, filter, "6", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentAudio(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + getDataAudio(); + }, [change]); + + useEffect(() => { + getDataImage(); + }, [page, category, title, refresh]); + + async function getDataImage() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await mediaWishlist("1", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentImage(response.data?.data?.content); + // console.log("response", response); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + async function initState() { + getDataImage(); + } + + initState(); + }, [page, refresh]); + + async function checkWishlist(uploadId: any) { + if (userId) { + const res = await checkWishlistStatus(uploadId); + console.log(res.data?.data); + // const isAlreadyOnWishlist = res.data?.data == "-1" ? false : true; + // if (isAlreadyOnWishlist == true) { + // warning("Konten sudah Ada", `#`); + // } + setWishlistId(res.data?.data); // setIsSaved(isAlreadyOnWishlist); + // console.log("isSave", isAlreadyOnWishlist); + } + } + + const handleSaveWishlist = async (uploadId: any) => { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + console.log("data", uploadId); + const data = { + mediaUploadId: uploadId, + }; + + loading(); + checkWishlist(uploadId); + + const res = await saveWishlist(data); + if (res.error) { + error(res.message); + console.log("simpan data", res); + return false; + } + + successCallback("Konten Berhasil Disimpan"); + } + }; + + async function deleteProcess(id: any) { + loading(); + const resDelete = await deleteWishlist(id); + + if (resDelete.error) { + error(resDelete.message); + return false; + } + + setRefresh((prevRefresh) => !prevRefresh); + close(); + } + + const handleDelete = (id: any) => { + MySwal.fire({ + title: "Hapus Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Hapus", + }).then((result) => { + if (result.isConfirmed) { + deleteProcess(id); + } + }); + }; + + const copyToClip = async (url: any) => { + await navigator.clipboard.writeText(`https://mediahub.polri.go.id/video/detail/${url}`); + setCopySuccess("Copied"); + // toast.success("Link Berhasil Di Copy"); + }; + + const [hasMounted, setHasMounted] = useState(false); + + // Hooks + useEffect(() => { + setHasMounted(true); + }, []); + + // Render + if (!hasMounted) return null; -const page = () => { return ( <>
-
Download
+
+
+

Galeri Saya

+
+
+
+ + + + Audio Visual + +
|
+ + Audio + +
|
+ + Foto + +
|
+ + Teks + + + +
+
+ {selectedTab == "video" ? ( + contentVideo?.length > 0 ? ( +
+ {contentVideo?.map((video: any) => ( + + + + +
{video?.mediaUpload?.title}
+ + + + ))} +
+ ) : ( +

+ empty +

+ ) + ) : selectedTab == "audio" ? ( + contentAudio?.length > 0 ? ( +
+ {contentAudio?.map((audio: any) => ( + +
+ + + +
+
+
{audio?.mediaUpload?.title}
+
+
+
+ +
+
+ # +
{audio?.mediaUpload?.duration}
+ + + +
+
+ + ))} +
+ ) : ( +

+ empty +

+ ) + ) : selectedTab == "image" ? ( + contentImage?.length > 0 ? ( +
+ {contentImage?.map((image: any) => ( + + + + +
{image?.mediaUpload?.title}
+ + + + ))} +
+ ) : ( +

+ empty +

+ ) + ) : contentDocument.length > 0 ? ( +
+ {contentDocument?.map((document: any) => ( + +
+ + + +
+ +
+
{document?.mediaUpload?.title}
+
+ + + + Download Dokumen +
+
+ + ))} +
+ ) : ( +

+ empty +

+ )} +
+
+
); }; -export default page; +export default Galery; diff --git a/app/[locale]/(public)/content-management/galery/page.tsx b/app/[locale]/(public)/content-management/galery/page.tsx index 04a538f8..41acf359 100644 --- a/app/[locale]/(public)/content-management/galery/page.tsx +++ b/app/[locale]/(public)/content-management/galery/page.tsx @@ -4,10 +4,8 @@ import { close, error, loading, successCallback } from "@/config/swal"; import { checkWishlistStatus, deleteWishlist, getInfoProfile, mediaWishlist, saveWishlist } from "@/service/landing/landing"; import React, { useEffect, useState } from "react"; import { Link, useRouter } from "@/i18n/routing"; -import { Icon } from "@iconify/react/dist/iconify.js"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { formatDateToIndonesian } from "@/utils/globals"; -import { useParams, useSearchParams } from "next/navigation"; +import { useSearchParams } from "next/navigation"; import { Card, CardContent } from "@/components/ui/card"; import HeaderManagement from "@/components/landing-page/header-management"; import SidebarManagement from "@/components/landing-page/sidebar-management"; @@ -37,22 +35,23 @@ const Galery = (props: any) => { const [sortBy] = useState(); const [change] = useState(false); const [contentVideo, setContentVideo] = useState([]); + const [contentImage, setContentImage] = useState([]); + const [contentDocument, setContentDocument] = useState([]); + const [contentAudio, setContentAudio] = useState([]); const [, setGetTotalPage] = useState([]); const [refresh, setRefresh] = useState(false); const [, setCopySuccess] = useState(""); - const { toast } = useToast(); const [, setWishlistId] = useState(); useEffect(() => { - getData(); + getDataVideo(); }, [page, category, title]); - async function getData() { + async function getDataVideo() { const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); - const response = await mediaWishlist("2", isInstitute ? instituteId : "", name, filter, "9", pages, sortBy, format); setGetTotalPage(response.data?.data?.totalPages); @@ -74,9 +73,81 @@ const Galery = (props: any) => { }, []); useEffect(() => { - getData(); + getDataVideo(); }, [change, refresh]); + useEffect(() => { + getDataDocument(); + }, [page, category, title]); + + async function getDataDocument() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await mediaWishlist("3", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentDocument(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + getDataDocument(); + }, [change, refresh]); + + useEffect(() => { + getDataAudio(); + }, [page, category, title]); + + useEffect(() => { + getDataAudio(); + }, [change, refresh]); + + async function getDataAudio() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await mediaWishlist("4", isInstitute ? instituteId : "", name, filter, "6", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentAudio(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + getDataAudio(); + }, [change]); + + useEffect(() => { + getDataImage(); + }, [page, category, title, refresh]); + + async function getDataImage() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await mediaWishlist("1", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format); + + setGetTotalPage(response.data?.data?.totalPages); + setContentImage(response.data?.data?.content); + // console.log("response", response); + setTotalContent(response.data?.data?.totalElements); + } + + useEffect(() => { + async function initState() { + getDataImage(); + } + + initState(); + }, [page, refresh]); + async function checkWishlist(uploadId: any) { if (userId) { const res = await checkWishlistStatus(uploadId); @@ -207,20 +278,10 @@ const Galery = (props: any) => {
{contentVideo?.map((video: any) => ( - - - -
- {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| - {video?.clickCount}{" "} - - - {" "} -
-
{video?.title}
+ + + +
{video?.mediaUpload?.title}
 @@ -232,15 +293,15 @@ const Galery = (props: any) => {

) ) : selectedTab == "audio" ? ( - profile?.length > 0 ? ( + contentAudio?.length > 0 ? (
- {profile?.map((audio: any) => ( + {contentAudio?.map((audio: any) => ( -
+
{ />
-
-
- {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | 518 -
-
{audio?.title}
+
{audio?.mediaUpload?.title}
@@ -261,7 +318,7 @@ const Galery = (props: any) => {
# -
{audio?.duration}
+
{audio?.mediaUpload?.duration}
{

) ) : selectedTab == "image" ? ( - profile?.length > 0 ? ( + contentImage?.length > 0 ? (
- {profile?.map((image: any) => ( + {contentImage?.map((image: any) => ( - - - -
- {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| - {image?.clickCount}{" "} - - - {" "} -
-
{image?.title}
+ + + +
{image?.mediaUpload?.title}
 @@ -307,10 +354,10 @@ const Galery = (props: any) => { empty

) - ) : profile.length > 0 ? ( + ) : contentDocument.length > 0 ? (
- {profile?.map((document: any) => ( - + {contentDocument?.map((document: any) => ( +
{
-
- {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518 -
-
{document?.title}
+
{document?.mediaUpload?.title}
diff --git a/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx b/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx new file mode 100644 index 00000000..81a6b5d8 --- /dev/null +++ b/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx @@ -0,0 +1,306 @@ +"use client"; + +import { close, error, loading } from "@/config/swal"; +import { useRouter } from "@/i18n/routing"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { getContentRewrite, getInfoProfile } from "@/service/landing/landing"; +import { useSearchParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import * as Yup from "yup"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { useForm } from "react-hook-form"; +import { generateDataArticle } from "@/service/content/ai"; +import HeaderManagement from "@/components/landing-page/header-management"; +import SidebarManagement from "@/components/landing-page/sidebar-management"; +import { saveContentRewrite } from "@/service/content/content"; +import JoditEditor from "jodit-react"; + +const page = (props: any) => { + const { states } = props; + const [profile, setProfile] = useState(); + const MySwal = withReactContent(Swal); + const searchParams = useSearchParams(); + const router = useRouter(); + const [, setLoadingState] = useState(false); + const id: any = searchParams?.get("title"); + const [content, setContent] = useState([]); + const [isFromSPIT, setIsFromSPIT] = useState(false); + const [listSuggestion, setListSuggestion] = useState(); + const [main, setMain] = useState(); + const userId = getCookiesDecrypt("uie"); + const userRoleId = getCookiesDecrypt("urie"); + const [articleIds, setArticleIds] = useState([]); + const [isGeneratedArticle, setIsGeneratedArticle] = useState(false); + const [selectedArticleId, setSelectedArticleId] = useState(null); + const [articleBody, setArticleBody] = useState(""); + const [selectedAdvConfig, setSelectedAdvConfig] = useState(""); + const [selectedWritingStyle, setSelectedWritingStyle] = useState(""); + const [selectedContextType, setSelectedContextType] = useState(""); + const [selectedLanguage, setSelectedLanguage] = useState(""); + const [selectedTitle, setSelectedTitle] = useState(""); + const [selectedMainKeyword, setSelectedMainKeyword] = useState(""); + const [selectedSEO, setSelectedSEO] = useState(""); + const [selectedSize, setSelectedSize] = useState(""); + const [detailArticle, setDetailArticle] = useState(null); + const userLevelId = getCookiesDecrypt("ulie"); + const roleId = getCookiesDecrypt("urie"); + + // useEffect(() => { + // let userLevelId: number | undefined; + + // if (userLevelId != undefined && userLevelId == 216) { + // setIsMabesApprover(true); + // } + // }, [userLevelId]); + + useEffect(() => { + async function initState() { + loading(); + const response = await getInfoProfile(); + + // console.log(response?.data.data); + setProfile(response?.data?.data); + close(); + } + + async function getInitData() { + const response = await getContentRewrite(id); + const data = response?.data?.data; + setContent(data); + + const cleanArticleBody = data?.articleBody?.replace(/]*>/g, ""); + setArticleBody(cleanArticleBody || ""); + } + + initState(); + getInitData(); + }, []); + + let componentMounted = true; + + const validationSchema = Yup.object().shape({ + title: Yup.string().required("Judul tidak boleh kosong"), + }); + + const formOptions = { + resolver: yupResolver(validationSchema), + }; + + const { + register, + handleSubmit, + reset, + formState: { errors }, + setValue, + } = useForm(formOptions); + + const handleGenerateArtikel = async () => { + loading(); + const request: any = { + advConfig: selectedAdvConfig, + style: selectedWritingStyle, + website: "None", + connectToWeb: true, + lang: selectedLanguage, + pointOfView: "None", + title: content?.title, + imageSource: "Web", + mainKeyword: content?.title, + additionalKeywords: content?.htmlDescription, + targetCountry: null, + articleSize: selectedSize, + projectId: 2, + createdBy: roleId, + clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ", + }; + + const res = await generateDataArticle(request); + close(); + + if (res.error) { + console.error(res.message); + return false; + } + + const newArticleId = res?.data?.data?.id; + setIsGeneratedArticle(true); + + setArticleIds((prevIds: any) => { + if (prevIds.length < 5) { + return [...prevIds, newArticleId]; + } else { + const updatedIds = [...prevIds]; + updatedIds[4] = newArticleId; + return updatedIds; + } + }); + + // Cookies.set("nulisAIArticleIdTemp", articleIds); + }; + const save = async (data: any) => { + const request = { + id: 1, + articleId: id.split("-")?.[0], + title: data.title, + articleBody: detailArticle?.articleBody, + metaTitle: detailArticle?.metaTitle, + metaDescription: detailArticle?.metaDescription, + mainKeyword: detailArticle?.mainKeyword, + additionalKeyword: detailArticle?.additionalKeyword, + articleSize: detailArticle?.articleSize, + style: detailArticle?.style, + website: detailArticle?.website, + imageUrl: detailArticle?.imageUrl, + }; + loading(); + const res = await saveContentRewrite(request); + if (res?.error) { + error(res?.message); + return false; + } + successSubmit(); + }; + + function successSubmit() { + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + close(); + } + }); + } + + function onSubmit(data: any) { + MySwal.fire({ + title: "Simpan Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); + } + + return ( + <> + +
+ +
+
+
Detail Content Rewrite
+
+
+ {/* {content && ( */} + <> +
+
+

Judul

+
+ setSelectedTitle(e.target.value)} + /> +
+
+
+
+

Main Keyword

+
+
+ +
+
+
+
+ +
+ + + // setSelectedMainKeyword(e.target.value) + // } + placeholder="Masukan Additional Keyword disini!" + defaultValue={content?.additionalKeyword} + /> +
+
+ +
+
+
+ +
+ + // setSelectedMainKeyword(e.target.value) + // } + placeholder="Masukan Meta Title disini!" + defaultValue={content?.metaTitle} + /> +
+
+
+ +
+ + // setSelectedMainKeyword(e.target.value) + // } + placeholder="Masukan Meta Description disini!" + defaultValue={content?.metaDescription} + /> +
+
+ +
+
+ +
+ {/* setArticleBody(event.editor?.getData())} /> */} + {/* */} + {articleBody === null || articleBody === "" ?
Deskripsi tidak boleh kosong
: ""} +
+ + {/* )} */} +
+
+
+
+
+ + ); +}; + +export default page; diff --git a/app/[locale]/(public)/content-management/rewrite/page.tsx b/app/[locale]/(public)/content-management/rewrite/page.tsx index a566b2fe..3443a381 100644 --- a/app/[locale]/(public)/content-management/rewrite/page.tsx +++ b/app/[locale]/(public)/content-management/rewrite/page.tsx @@ -1,16 +1,191 @@ -import HeaderManagement from '@/components/landing-page/header-management' -import SidebarManagement from '@/components/landing-page/sidebar-management' -import React from 'react' +"use client"; + +import HeaderManagement from "@/components/landing-page/header-management"; +import SidebarManagement from "@/components/landing-page/sidebar-management"; +import { close, error, loading, successCallback } from "@/config/swal"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { checkWishlistStatus, deleteWishlist, getContentRewritePagination, getInfoProfile, saveWishlist } from "@/service/landing/landing"; +import { useRouter, useSearchParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { Card, CardContent } from "@/components/ui/card"; +import { Link } from "@/i18n/routing"; + +const page = (props: any) => { + const [, setProfile] = useState(); + const router = useRouter(); + const searchParams = useSearchParams(); + const MySwal = withReactContent(Swal); + const page: any = searchParams?.get("page"); + const title = searchParams?.get("title"); + const category = searchParams?.get("category"); + const pages = page ? page - 1 : 0; + + const { isInstitute, instituteId } = props; + const userId = getCookiesDecrypt("uie"); + const userRoleId = getCookiesDecrypt("urie"); + + const [, setGetTotalPage] = useState(); + const [totalContent, setTotalContent] = useState(); + const [contentImage, setContentImage] = useState([]); + + const [categoryFilter] = useState([]); + const [formatFilter] = useState([]); + const [sortBy] = useState(); + + const [refresh, setRefresh] = useState(false); + const [, setCopySuccess] = useState(""); + + const [, setWishlistId] = useState(); + + useEffect(() => { + async function initState() { + loading(); + const response = await getInfoProfile(); + console.log(response?.data.data); + setProfile(response?.data?.data); + close(); + } + + initState(); + }, []); + + useEffect(() => { + getData(); + }, [page, category, title, refresh]); + + async function getData() { + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + + const response = await getContentRewritePagination(pages); + + setGetTotalPage(response.data?.data?.totalPages); + setContentImage(response.data?.data?.content); + // console.log("response", response); + setTotalContent(response.data?.data?.totalElements); + console.log("KONTEN", response.data?.data?.content); + } + + useEffect(() => { + async function initState() { + getData(); + } + + initState(); + }, [page, refresh]); + + function addDefaultSrc(ev: any) { + ev.target.src = "/assets/img/image404.png"; + } + + async function deleteProcess(id: any) { + loading(); + const resDelete = await deleteWishlist(id); + + if (resDelete.error) { + error(resDelete.message); + return false; + } + + setRefresh((prevRefresh) => !prevRefresh); + close(); + } + + const handleDelete = (id: any) => { + MySwal.fire({ + title: "Hapus Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Hapus", + }).then((result) => { + if (result.isConfirmed) { + deleteProcess(id); + } + }); + }; + + const copyToClip = async (url: any) => { + await navigator.clipboard.writeText(`https://mediahub.polri.go.id/image/detail/${url}`); + setCopySuccess("Copied"); + // toast.success("Link Berhasil Di Copy"); + }; + + async function checkWishlist(uploadId: any) { + if (userId) { + const res = await checkWishlistStatus(uploadId); + console.log(res.data?.data); + // const isAlreadyOnWishlist = res.data?.data == "-1" ? false : true; + // if (isAlreadyOnWishlist == true) { + // warning("Konten sudah Ada", `#`); + // } + setWishlistId(res.data?.data); // setIsSaved(isAlreadyOnWishlist); + // console.log("isSave", isAlreadyOnWishlist); + } + } + + const handleSaveWishlist = async (uploadId: any) => { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + console.log("data", uploadId); + const data = { + mediaUploadId: uploadId, + }; + + loading(); + checkWishlist(uploadId); + + const res = await saveWishlist(data); + if (res.error) { + error(res.message); + console.log("simpan data", res); + return false; + } + + successCallback("Konten Berhasil Disimpan"); + } + }; -const page = () => { return ( -<> + <>
-
Rewrite
+
+
+

Galeri Content Rewrite

+
+
+ {contentImage?.length > 0 ? ( +
+ {contentImage?.map((image: any) => ( + + + + +
{image?.title}
+ + + + ))} +
+ ) : ( +

+ empty +

+ )} +
+
- ) -} + + ); +}; -export default page \ No newline at end of file +export default page; diff --git a/app/[locale]/(public)/content-management/users/page.tsx b/app/[locale]/(public)/content-management/users/page.tsx index cc28936a..7ae41b9d 100644 --- a/app/[locale]/(public)/content-management/users/page.tsx +++ b/app/[locale]/(public)/content-management/users/page.tsx @@ -1,14 +1,176 @@ +"use client"; + import HeaderManagement from "@/components/landing-page/header-management"; import SidebarManagement from "@/components/landing-page/sidebar-management"; -import React from "react"; +import { close, error, loading } from "@/config/swal"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { getInfoProfile, getUsersTeams } from "@/service/landing/landing"; +import React, { useEffect, useState } from "react"; +import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import withReactContent from "sweetalert2-react-content"; +import Swal from "sweetalert2"; +import { saveUserReports } from "@/service/content/content"; +import { Button } from "@/components/ui/button"; const page = () => { + const [user, setUser] = useState(); + const [profile, setProfile] = useState(); + const instituteId = getCookiesDecrypt("uinse"); + const [userSelected, setUserSelected] = useState(); + const [reportMessage, setReportMessage] = useState(); + const MySwal = withReactContent(Swal); + + // const launchModal = (user: any) => { + // setUserSelected(user); + // $("#modalDetailProfile").modal("show"); + // }; + async function onSubmit() { + MySwal.fire({ + title: "Simpan Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(); + } + }); + } + + async function save() { + loading(); + const data = { + userId: user?.id, + message: reportMessage, + }; + + const response = await saveUserReports(data); + + if (response?.error) { + error(response?.message); + return false; + } + + close(); + + successSubmit(); + } + + function successSubmit() { + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + ("hide"); + // $("#modalReportProfile").modal("hide"); + } + }); + } + + useEffect(() => { + async function getTeams() { + if (instituteId != undefined) { + loading(); + const response = await getUsersTeams(instituteId); + setUser(response?.data?.data); + close(); + } + } + + async function getProfile() { + loading(); + const response = await getInfoProfile(); + setProfile(response?.data?.data); + close(); + } + + getTeams(); + getProfile(); + }, []); + return ( <>
-
Download
+
+
+

Tim {profile?.institute?.name}

+

{user?.length} Anggota

+
+
+ {user?.map((row: any) => ( +
+ + +
+ + + + +

{row?.fullname}

+

{row?.username || "username"}

+
+ + +
+
+

{row?.fullname}

+
+
+
+
{row?.email}
+
{row?.phoneNumber}
+
{row?.address}
+
+
+
+ + + + + +
+
+

{row?.fullname}

+
+
+
+

Alasan Report Akun

+