diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx new file mode 100644 index 00000000..84120329 --- /dev/null +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx @@ -0,0 +1,743 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; +import { + getPublicCategoryData, + getUserLevelListByParent, + listCategory, + listData, + listDataAll, + listDataRegional, +} from "@/service/landing/landing"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, +} from "@tanstack/react-table"; +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"; +import FilterImageComponent from "@/components/landing-page/filter-all/image-filter-card"; +import FilterVideoComponent from "@/components/landing-page/filter-all/video-filter-card"; +import FilterDocumentComponent from "@/components/landing-page/filter-all/document-filter-card"; +import FilterAudioComponent from "@/components/landing-page/filter-all/audio-filter-card"; +import { useTranslations } from "next-intl"; + +export default function 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 t = useTranslations("FilterPage"); + const [isFilterOpen, setIsFilterOpen] = useState(true); + + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; + + useEffect(() => { + const title = searchParams?.get("title") || ""; + const category = searchParams?.get("category") || ""; + const sortBy = searchParams?.get("sortBy") || "latest"; + + setSearchTitle(title); + setCategoryFilter(category ? category.split("&") : []); + setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt"); + + }, [searchParams]); + + useEffect(() => { + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 + ? poldaName + : satkerName && satkerName.length > 1 + ? "satker-" + satkerName + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, + "", + isInt, + pageNumber + ); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); + }; + + 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, + monthYearFilter, + 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(response?.data?.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(response?.data?.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); + } + + 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 ( +
+
+

{t("content", { defaultValue: "Content" })}

+ {">"} +

+ + {t("allContent", { defaultValue: "All Content" })} + +

+

|

+

{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( + "downloadableContent", + { defaultValue: "Downloadable ContentS" } + )}`}

+
+ + {/* Left */} +
+
+ +
+ + {isFilterOpen && ( +
+

+ + Filter +

+
+
+
+ + setSearchTitle(e.target.value)} + onKeyUp={handleKeyUp} + onKeyDown={handleKeyDown} + type="text" + id="search" + placeholder={t("searchTitle", { + defaultValue: "Search Title", + })} + 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={t("selectYear", { + defaultValue: "Select Year", + })} + showMonthYearPicker + /> +
+ +
+ +
+ { + setDateRange(update); + }} + placeholderText={t("selectDate", { + defaultValue: "Select Date", + })} + onCalendarClose={() => setCalenderState(!calenderState)} + /> +
+ {handleClose ? ( + + ) : ( + "" + )} +
+
+
+ +
+

+ {t("categories", { defaultValue: "Categories" })} +

+
    + {categories.map((category: any) => ( +
  • + +
    • + ))} +
    + + + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + +
    +
+
+ {/* Garis */} +
+ {/* Garis */} +
+

+ Format +

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

+ {t("sortBy", { defaultValue: "Sort By" })} +

+ +
+
+ + + + +
+
+
+
+
+ ); +} diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx new file mode 100644 index 00000000..e2ca7e0b --- /dev/null +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx @@ -0,0 +1,14 @@ +import Footer from "@/components/landing-page/footer"; +import Navbar from "@/components/landing-page/navbar"; + +const layout = async ({ children }: { children: React.ReactNode }) => { + return ( + <> + + {children} +