From f32cec56224558cc0c421ce942de864f2901fb39 Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Sat, 4 Jan 2025 18:52:02 +0700 Subject: [PATCH] feat:all/filter page, search landing, bookmark, download --- app/[locale]/(public)/all/filter/page.tsx | 324 +++++--- app/[locale]/(public)/all/layout.tsx | 14 + app/[locale]/(public)/audio/filter/page.tsx | 744 ++++++++++++++---- app/[locale]/(public)/image/layout.tsx | 8 - .../(public)/video/detail/[slug]/page.tsx | 304 ++++++- app/[locale]/(public)/video/filter/page.tsx | 283 +++++-- app/[locale]/page.tsx | 4 +- .../filter-all/audio-filter-card.tsx | 188 +++++ .../filter-all/document-filter-card.tsx | 202 +++++ .../filter-all/image-filter-card.tsx | 174 ++++ .../filter-all/video-filter-card.tsx | 175 ++++ components/landing-page/hero.tsx | 56 +- components/landing-page/new-content.tsx | 200 ++++- components/landing-page/search-section.tsx | 111 +-- service/landing/landing.ts | 104 ++- 15 files changed, 2427 insertions(+), 464 deletions(-) create mode 100644 app/[locale]/(public)/all/layout.tsx create mode 100644 components/landing-page/filter-all/audio-filter-card.tsx create mode 100644 components/landing-page/filter-all/document-filter-card.tsx create mode 100644 components/landing-page/filter-all/image-filter-card.tsx create mode 100644 components/landing-page/filter-all/video-filter-card.tsx diff --git a/app/[locale]/(public)/all/filter/page.tsx b/app/[locale]/(public)/all/filter/page.tsx index 6400f1b1..0c3e4c3a 100644 --- a/app/[locale]/(public)/all/filter/page.tsx +++ b/app/[locale]/(public)/all/filter/page.tsx @@ -1,29 +1,41 @@ "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 { 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 { + 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 { 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"; +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"; -const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, -]; - -const FilterPage = () => { +export default function FilterPage() { const router = useRouter(); const asPath = usePathname(); const params = useParams(); @@ -33,8 +45,11 @@ const FilterPage = () => { 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 [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, @@ -56,7 +71,9 @@ const FilterPage = () => { const [categoryFilter, setCategoryFilter] = useState([]); const [monthYearFilter, setMonthYearFilter] = useState(); const [searchTitle, setSearchTitle] = useState(""); - const [sortByOpt, setSortByOpt] = useState(sortBy === "popular" ? "clickCount" : "createdAt"); + const [sortByOpt, setSortByOpt] = useState( + sortBy === "popular" ? "clickCount" : "createdAt" + ); const isRegional = asPath?.includes("regional"); const isSatker = asPath?.includes("satker"); const [formatFilter, setFormatFilter] = useState([]); @@ -93,8 +110,14 @@ const FilterPage = () => { useEffect(() => { if (categorie) { - setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]); - console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]); + setCategoryFilter( + categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] + ); + console.log( + "Kategori", + categorie, + categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] + ); } }, [categorie]); @@ -112,7 +135,17 @@ const FilterPage = () => { } console.log(monthYearFilter, "monthFilter"); initState(); - }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]); + }, [ + change, + monthYearFilter, + sortBy, + sortByOpt, + title, + startDateString, + endDateString, + categorie, + formatFilter, + ]); async function getCategories() { const category = await listCategory("1"); @@ -135,7 +168,10 @@ const FilterPage = () => { async function getData() { if (asPath?.includes("/polda/") == true) { if (asPath?.split("/")[2] !== "[polda_name]") { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -150,8 +186,14 @@ const FilterPage = () => { filterGroup, startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter) + ?.split("/")[0] + ?.replace("0", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" ); close(); // setGetTotalPage(response.data?.data?.totalPages); @@ -166,7 +208,10 @@ const FilterPage = () => { setTotalContent(response.data?.data?.totalElements); } } else { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -180,8 +225,14 @@ const FilterPage = () => { tag, startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter) + ?.split("/")[0] + ?.replace("0", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" ); close(); // setGetTotalPage(response.data?.data?.totalPages); @@ -232,7 +283,10 @@ const FilterPage = () => { }; async function getDataRegional() { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -245,8 +299,12 @@ const FilterPage = () => { "", startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "", 12, pages, sortByOpt @@ -258,27 +316,6 @@ const FilterPage = () => { 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 = []; @@ -365,7 +402,7 @@ const FilterPage = () => { {/* Left */}
-
+

Filter @@ -373,7 +410,10 @@ const FilterPage = () => {
-
- + {
- +
{ placeholderText="Pilih Tanggal" onCalendarClose={() => setCalenderState(!calenderState)} /> -
{handleClose ? : ""}
+
+ {handleClose ? ( + + ) : ( + "" + )} +
-

Kategori

+

+ Kategori +

    {categories.map((category: any) => (
  • -
    • ))} @@ -435,31 +505,78 @@ const FilterPage = () => {
    {/* Garis */}
    -

    Format Foto

    +

    + Format Konten +

    • +
      • +
    • +
    @@ -468,50 +585,51 @@ const FilterPage = () => { {/* Konten Kanan */} -
    +

    Urutkan berdasarkan

    - handleSorting(e)} + className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" + >
    - - {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)/all/layout.tsx b/app/[locale]/(public)/all/layout.tsx new file mode 100644 index 00000000..e2ca7e0b --- /dev/null +++ b/app/[locale]/(public)/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} +