diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index 8cd92fad..b39e4df4 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -1,15 +1,19 @@ "use client"; import React, { useEffect, useState } from "react"; -import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; +import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Icon } from "@iconify/react/dist/iconify.js"; -import { getListContent } from "@/service/landing/landing"; -import { formatDateToIndonesian } from "@/utils/globals"; -import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; -import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; +import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; +import { getListContent, getUserLevelListByParent, listCategory, listData, 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 } from "@/i18n/routing"; +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[] = [ { @@ -19,35 +23,13 @@ const columns: ColumnDef[] = [ }, ]; -const categories = [ - { id: 1, title: "HUT HUMAS KE - 73" }, - { id: 2, title: "OPERASI ZEBRA 2024" }, - { id: 3, title: "PON XXI" }, - { id: 4, title: "OPS LILIN NATARU 2024" }, - { id: 5, title: "HUT HUMAS KE - 72" }, - { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, - { id: 6, title: "OPS KETUPAT 2024" }, - { id: 6, title: "OPS PATUH 2024" }, - { id: 6, title: "HARI JUANG POLRI" }, - { id: 6, title: "HUT RI KE-79" }, - { id: 6, title: "HARI BHAYANGKARA KE-78" }, -]; - -const formatAudio = [ - { id: 1, title: "DOC" }, - { id: 2, title: "DOCX" }, - { id: 3, title: "PDF" }, - { id: 4, title: "PPT" }, - { id: 5, title: "PPTX" }, -]; - -const DocumentPage = () => { +const FilterPage = () => { const router = useRouter(); - const pathname = usePathname(); + const asPath = usePathname(); const params = useParams(); const searchParams = useSearchParams(); const locale = params?.locale; - const [imageData, setImageData] = useState(); + const [documentData, setDocumentData] = useState(); const [totalData, setTotalData] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1); const [sorting, setSorting] = React.useState([]); @@ -56,9 +38,36 @@ const DocumentPage = () => { const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 6, + 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 [, setGetTotalPage] = useState(); + let typingTimer: any; + const doneTypingInterval = 1500; + const [contentDocument, setContentDocument] = 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 [startDate, endDate] = dateRange; React.useEffect(() => { const pageFromUrl = searchParams?.get("page"); @@ -67,8 +76,191 @@ const DocumentPage = () => { } }, [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 { + getDataAll(); + } + } + console.log(monthYearFilter, "monthFilter"); + initState(); + }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]); + + async function getCategories() { + const category = await listCategory("3"); + 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 getDataAll() { + 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 listData( + "3", + name, + filter, + 12, + pages, + sortByOpt, + format, + "", + filterGroup, + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", + 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; + setDocumentData(contentData); + setTotalData(data?.totalElements); + 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 listData( + "3", + name, + filter, + 12, + pages, + sortByOpt, + format, + "", + "", + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", + 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; + setDocumentData(contentData); + setTotalData(data?.totalElements); + 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( + "3", + 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); + setContentDocument(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + const table = useReactTable({ - data: imageData, + data: documentData, columns: columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -88,10 +280,9 @@ const DocumentPage = () => { }, }); - const [documentData, setDocumentData] = useState(); useEffect(() => { initFetch(); - }, []); + }, [page]); const initFetch = async () => { const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" }); console.log(response); @@ -102,81 +293,199 @@ const DocumentPage = () => { setTotalData(data?.totalElements); setTotalPage(data?.totalPages); }; + + 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 */} +

{" "} Teks {">"} Semua Teks

|

-

Terdapat 32499 artikel berisi Teks yang dapat diunduh

+

{`Terdapat ${totalContent} artikel berisi Teks yang dapat diunduh`}

+ {/* Left */}
- {/* Sidebar Kiri */} -
-

+
+

Filter

-
+
- {/* Pencarian */}
- + 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" + />
- {/* Tahun & Bulan */} +
- - + + setMonthYearFilter(date)} + dateFormat="MM | yyyy" + placeholderText="Pilih Tahun dan Bulan" + showMonthYearPicker + />
- {/* Tanggal */} +
- - + +
+ { + setDateRange(update); + }} + placeholderText="Pilih Tanggal" + onCalendarClose={() => setCalenderState(!calenderState)} + /> +
{handleClose ? : ""}
+
- {/* Kategori */} +

Kategori

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

Format Foto

+

Format Teks

    - {formatAudio.map((format) => ( -
  • - -
    • - ))} +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
@@ -184,20 +493,16 @@ const DocumentPage = () => {
{/* Konten Kanan */} - -
- + +
-

Urutkan berdasarkan

- handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"> - +
- - {/* Card */} -
{documentData?.map((document: any) => ( @@ -226,11 +531,11 @@ const DocumentPage = () => { ))}
- -
+
+

); }; -export default DocumentPage; +export default FilterPage; diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx index 77f95ffb..eca5cb0d 100644 --- a/app/[locale]/(public)/image/filter/page.tsx +++ b/app/[locale]/(public)/image/filter/page.tsx @@ -5,7 +5,7 @@ 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 { getListContent, listCategory, listData, listDataRegional } from "@/service/landing/landing"; +import { getUserLevelListByParent, listCategory, listData, 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"; @@ -15,13 +15,6 @@ import ReactDatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { close, loading } from "@/config/swal"; -interface FilterData { - searchTitle: string; - selectedYearMonth: string; - selectedDate: string; - selectedCategories: string[]; -} - const columns: ColumnDef[] = [ { accessorKey: "no", @@ -30,25 +23,6 @@ const columns: ColumnDef[] = [ }, ]; -const categories = [ - { id: 1, title: "HUT HUMAS KE - 73" }, - { id: 2, title: "OPERASI ZEBRA 2024" }, - { id: 3, title: "PON XXI" }, - { id: 4, title: "OPS LILIN NATARU 2024" }, - { id: 5, title: "HUT HUMAS KE - 72" }, - { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, - { id: 7, title: "OPS KETUPAT 2024" }, - { id: 8, title: "OPS PATUH 2024" }, - { id: 9, title: "HARI JUANG POLRI" }, - { id: 10, title: "HUT RI KE-79" }, - { id: 11, title: "HARI BHAYANGKARA KE-78" }, -]; -const formatPicture = [ - { id: 1, title: "PNG" }, - { id: 2, title: "JPEG" }, - { id: 3, title: "JPG" }, -]; - const FilterPage = () => { const router = useRouter(); const asPath = usePathname(); @@ -71,26 +45,28 @@ const FilterPage = () => { const [change, setChange] = useState(false); const sortBy = searchParams?.get("sortBy"); const title = searchParams?.get("title"); - const category = searchParams?.get("category"); + const categorie = searchParams?.get("category"); const group = searchParams?.get("group"); const [contentImage, setContentImage] = useState([]); const [, setGetTotalPage] = useState(); let typingTimer: any; const doneTypingInterval = 1500; const [search, setSearch] = useState(); - const [categoryFilter, setCategoryFilter] = 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 [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 [startDate, endDate] = dateRange; @@ -101,6 +77,25 @@ const FilterPage = () => { } }, [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]); @@ -115,7 +110,13 @@ const FilterPage = () => { } console.log(monthYearFilter, "monthFilter"); initState(); - }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString]); + }, [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() { @@ -129,22 +130,10 @@ const FilterPage = () => { initState(); }, [calenderState]); - // const fetchData = async () => { - // const response = await getListContent({ page: page - 1, size: 6, sortBy: sortByOpt, contentTypeId: "1", title: title ? title : "" }); - // console.log(response); - - // const data = response.data?.data; - // const contentData = data?.content; - // setImageData(contentData); - // setTotalData(data?.totalElements); - // setTotalPage(data?.totalPages); - // setTotalContent(response.data?.data?.totalElements); - // }; - async function getDataAll() { if (asPath?.includes("/polda/") == true) { if (asPath?.split("/")[2] !== "[polda_name]") { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -177,7 +166,7 @@ const FilterPage = () => { setTotalContent(response.data?.data?.totalElements); } } else { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || ""; + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -210,8 +199,42 @@ const FilterPage = () => { } } + 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(",") : category || ""; + const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -258,6 +281,20 @@ const FilterPage = () => { }, }); + 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(""); @@ -276,39 +313,27 @@ const FilterPage = () => { setChange(!change); }; - // async function getCategories() { - // const category = await listCategory("1"); - // const resCategory = category?.data?.data?.content; - // setCategories(resCategory); - // } + async function getUserLevels() { + const res = await getUserLevelListByParent(761); + const userLevelList = res?.data?.data; - // function getSelectedCategory() { - // const filter = []; + if (userLevelList !== null) { + let optionArr: any = []; - // if (category) { - // const categoryArr = category.split(","); + userLevelList?.map((option: any) => { + let optionData = { + id: option.id, + label: option.name, + value: option.id, + }; - // for (const element of categoryArr) { - // filter.push(Number(element)); - // } + optionArr.push(optionData); + }); - // setCategoryFilter(filter); - // } - // } + setUserLevels(optionArr); + } + } - // function getSelectedCategory() { - // const filter = []; - - // if (category) { - // const categoryArr = category.split(","); - - // for (const element of categoryArr) { - // filter.push(Number(element)); - // } - - // setCategoryFilter(); - // } - // } const handleKeyUp = () => { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); @@ -366,7 +391,6 @@ const FilterPage = () => {
- {/* */} {
- {/* */}
{
    {categories.map((category: any) => (
  • -
    • ))} @@ -415,19 +438,29 @@ const FilterPage = () => {

    Format Foto

      - {formatPicture.map((format) => ( -
    • - -
      • - ))} +
    • + +
      • +
    • + +
      • +
    • + +
    diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx index b51174a2..de017d24 100644 --- a/app/[locale]/(public)/video/filter/page.tsx +++ b/app/[locale]/(public)/video/filter/page.tsx @@ -3,13 +3,17 @@ 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 { getListContent } from "@/service/landing/landing"; -import { formatDateToIndonesian } from "@/utils/globals"; -import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; -import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; +import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; +import { getListContent, getUserLevelListByParent, listCategory, listData, 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 } from "@/i18n/routing"; +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[] = [ { @@ -19,34 +23,13 @@ const columns: ColumnDef[] = [ }, ]; -const categories = [ - { id: 1, title: "HUT HUMAS KE - 73" }, - { id: 2, title: "OPERASI ZEBRA 2024" }, - { id: 3, title: "PON XXI" }, - { id: 4, title: "OPS LILIN NATARU 2024" }, - { id: 5, title: "HUT HUMAS KE - 72" }, - { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, - { id: 6, title: "OPS KETUPAT 2024" }, - { id: 6, title: "OPS PATUH 2024" }, - { id: 6, title: "HARI JUANG POLRI" }, - { id: 6, title: "HUT RI KE-79" }, - { id: 6, title: "HARI BHAYANGKARA KE-78" }, -]; -const formatPicture = [ - { id: 1, title: "MK4" }, - { id: 2, title: "MOV" }, - { id: 3, title: "MP4" }, - { id: 3, title: "AVI" }, - { id: 3, title: "WMV" }, -]; - const FilterPage = () => { const router = useRouter(); - const pathname = usePathname(); + const asPath = usePathname(); const params = useParams(); const searchParams = useSearchParams(); const locale = params?.locale; - const [imageData, setImageData] = useState(); + const [videoData, setVideoData] = useState(); const [totalData, setTotalData] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1); const [sorting, setSorting] = React.useState([]); @@ -55,9 +38,36 @@ const FilterPage = () => { const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 6, + 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 [, setGetTotalPage] = useState(); + let typingTimer: any; + const doneTypingInterval = 1500; + const [contentVideo, setContentVideo] = 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 [startDate, endDate] = dateRange; React.useEffect(() => { const pageFromUrl = searchParams?.get("page"); @@ -66,8 +76,191 @@ const FilterPage = () => { } }, [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 { + getDataAll(); + } + } + console.log(monthYearFilter, "monthFilter"); + initState(); + }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]); + + async function getCategories() { + const category = await listCategory("2"); + 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 getDataAll() { + 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 listData( + "2", + name, + filter, + 12, + pages, + sortByOpt, + format, + "", + filterGroup, + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", + 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; + setVideoData(contentData); + setTotalData(data?.totalElements); + 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 listData( + "2", + name, + filter, + 12, + pages, + sortByOpt, + format, + "", + "", + startDateString, + endDateString, + monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", + 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; + setVideoData(contentData); + setTotalData(data?.totalElements); + 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( + "2", + 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); + setContentVideo(response.data?.data?.content); + setTotalContent(response.data?.data?.totalElements); + } + const table = useReactTable({ - data: imageData, + data: videoData, columns: columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -87,7 +280,6 @@ const FilterPage = () => { }, }); - const [videoData, setVideoData] = useState(); useEffect(() => { initFetch(); }, [page]); @@ -102,97 +294,212 @@ const FilterPage = () => { setTotalPage(data?.totalPages); }; - + 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 */} +

    {" "} Audio Visual {">"} Semua Audio Visual

    |

    -

    Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh

    +

    {`Terdapat ${totalContent} artikel berisi Audio Visual yang dapat diunduh`}

    + {/* Left */}
    -
    - -

    - - Filter -

    -
    -
    -
    - - -
    +
    +

    + + 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 + /> +
    -
    - - -
    - -
    -

    Kategori

    -
      - {categories.map((category) => ( -
    • - -
      • - ))} -
    -
    - {/* Garis */} -
    - {/* Garis */} -
    -

    Format Video

    -
      - {formatPicture.map((format) => ( -
    • - -
      • - ))} -
    -
    -
    -
    - - Reset Filter - +
    + +
    + { + setDateRange(update); + }} + placeholderText="Pilih Tanggal" + onCalendarClose={() => setCalenderState(!calenderState)} + /> +
    {handleClose ? : ""}
    - + +
    +

    Kategori

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

    Format Foto

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

    Urutkan berdasarkan

    - handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"> - +
    @@ -201,7 +508,7 @@ const FilterPage = () => { - +
    {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| {video?.clickCount}{" "} @@ -212,15 +519,15 @@ const FilterPage = () => { /> {" "}
    -
    {video?.title}
    +
    {video?.title}
         ))}
    -     -
    +
    +
    ); diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index 280c3f4c..88cdbf64 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -1,10 +1,11 @@ +"use-client"; + import React, { useEffect, useState } from "react"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import { useParams, usePathname, useRouter } from "next/navigation"; import { Icon } from "@iconify/react/dist/iconify.js"; -import { formatDateToIndonesian, textEllipsis } from "@/utils/globals"; -import { generateLocalizedPath } from "@/utils/globals"; +import { formatDateToIndonesian } from "@/utils/globals"; import { getListContent } from "@/service/landing/landing"; import { Link } from "@/i18n/routing"; import { Reveal } from "./Reveal"; diff --git a/service/landing/landing.ts b/service/landing/landing.ts index 21c14d65..9bb95d37 100644 --- a/service/landing/landing.ts +++ b/service/landing/landing.ts @@ -10,7 +10,9 @@ export async function getCategoryData() { export async function getListContent(props: any) { return await httpGetInterceptor( - `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=` + `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${ + props.title ? props.title : "" + }&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=` ); } @@ -57,3 +59,7 @@ export async function listDataRegional(type: string, search: string, category: s `media/public/regional-list?enablePage=1&size=${size}&page=${page}&sort=desc&sortBy=${sortBy}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}` ); } + +export async function getUserLevelListByParent(id: any) { + return await httpGetInterceptor(`users/user-levels/list?userLevelId=${id}`); +}