diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx index 38846cd2..161444fc 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx @@ -3,10 +3,31 @@ 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 { + formatDateToIndonesian, + getOnlyDate, + getOnlyMonthAndYear, + secondToTimes, +} from "@/utils/globals"; import { useParams, usePathname, useSearchParams } from "next/navigation"; -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 { + 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, useRouter } from "@/i18n/routing"; @@ -14,8 +35,15 @@ 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 { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; import { useTranslations } from "next-intl"; +import { Skeleton } from "@/components/ui/skeleton"; const columns: ColumnDef[] = [ { @@ -35,8 +63,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, @@ -57,7 +88,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([]); @@ -73,8 +106,17 @@ const FilterPage = () => { let prefixPath = poldaName ? `/polda/${poldaName}` : "/"; const t = useTranslations("FilterPage"); + const [isLoading, setIsLoading] = useState(true); + // const [startDate, endDate] = dateRange; + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); React.useEffect(() => { const pageFromUrl = searchParams?.get("page"); if (pageFromUrl) { @@ -96,8 +138,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]); @@ -115,7 +163,19 @@ const FilterPage = () => { } console.log(monthYearFilter, "monthFilter"); initState(); - }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]); + }, [ + change, + asPath, + monthYearFilter, + page, + sortBy, + sortByOpt, + title, + startDateString, + endDateString, + categorie, + formatFilter, + ]); async function getCategories() { const category = await listCategory("4"); @@ -137,7 +197,10 @@ const FilterPage = () => { async function getDataAll() { if (poldaName && String(poldaName)?.length > 1) { - 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(","); @@ -155,8 +218,12 @@ const FilterPage = () => { filterGroup, startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" ); close(); const data = response?.data?.data; @@ -166,7 +233,10 @@ const FilterPage = () => { setTotalPage(data?.totalPages); 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(","); @@ -183,8 +253,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] + : "" ); close(); const data = response?.data?.data; @@ -231,7 +305,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(","); @@ -244,8 +321,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 @@ -352,7 +433,7 @@ const FilterPage = () => {
{/* Header */} -
+

{" "} Audio {">"} {t("allAudio")} @@ -362,8 +443,8 @@ const FilterPage = () => {

{/* Left */} -
-
+
+

Filter @@ -371,7 +452,10 @@ const FilterPage = () => {
-
- + {
- +
{ placeholderText={t("searchDate")} onCalendarClose={() => setCalenderState(!calenderState)} /> -
{handleClose ? : ""}
+
+ {handleClose ? ( + + ) : ( + "" + )} +
-

{t("categories")}

+

+ {t("categories")} +

    - {categories.map((category: any) => ( + {categories?.map((category: any) => (
  • -
    • ))} @@ -433,85 +547,185 @@ const FilterPage = () => {
    {/* Garis */}
    -

    Format

    +

    + Format +

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

{t("sortBy")}

- handleSorting(e)} + className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" + >
- {audioData?.length > 0 ? ( -
- {audioData?.map((image: any) => ( - - - {audioData?.map((audio: any) => ( - -
- -
- + {isLoading ? ( + <> +
+ + + + + + +
+ + ) : ( + <> + {audioData?.length > 0 ? ( +
+ {audioData?.map((audio: any) => ( +
+ +
+
+
+
- -
-
- {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | {audio?.clickCount}{" "} +
+
+
+ {formatDateToIndonesian( + new Date(audio?.createdAt) + )}{" "} + {audio?.timezone ? audio?.timezone : "WIB"} +
+
+ |  + +  {audio?.clickCount}{" "} +
+
+ +
+ {audio?.title}
-
{audio?.title}
- +
+ +
+ wave + + + +

+ {" "} + {audio?.duration + ? secondToTimes(Number(audio?.duration)) + : "00:00:00"} +

+ +
- - ))} - - - - - ))} -
- ) : ( -

- empty -

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

+ empty +

+ )} + )} - -
- + + +
); diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx deleted file mode 100644 index 96086704..00000000 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import LayoutProvider from "@/providers/layout.provider"; -import LayoutContentProvider from "@/providers/content.provider"; -import DashCodeSidebar from "@/components/partials/sidebar"; -import DashCodeFooter from "@/components/partials/footer"; -import ThemeCustomize from "@/components/partials/customizer"; -import DashCodeHeader from "@/components/partials/header"; - -import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; -import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara"; -import { useParams } from "next/navigation"; -import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara"; -import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara"; - -const layout = ({ children }: { children: React.ReactNode }) => { - const params = useParams(); - const poldaName: any = params?.polda_name; - return poldaName === "kaltara" ? ( - <> - - {children} - - - - ) : ( - <> - - {children} -