diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx index 7d83383b..7388800c 100644 --- a/app/[locale]/(public)/audio/filter/page.tsx +++ b/app/[locale]/(public)/audio/filter/page.tsx @@ -3,30 +3,10 @@ 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 } 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"; @@ -34,13 +14,8 @@ 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"; const columns: ColumnDef[] = [ { @@ -60,11 +35,8 @@ 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, @@ -85,9 +57,7 @@ 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([]); @@ -99,6 +69,7 @@ const FilterPage = () => { const [handleClose, setHandleClose] = useState(false); const [categories, setCategories] = useState([]); const [userLevels, setUserLevels] = useState([]); + const t = useTranslations("FilterPage"); // const [startDate, endDate] = dateRange; @@ -123,14 +94,8 @@ 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]); @@ -148,22 +113,10 @@ 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("1"); + const category = await listCategory("4"); const resCategory = category?.data?.data?.content; setCategories(resCategory); } @@ -183,17 +136,14 @@ const FilterPage = () => { async function getDataAll() { 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(","); const filterGroup = group == undefined ? asPath.split("/")[2] : group; loading(); const response = await listData( - "1", + "4", name, filter, 12, @@ -204,14 +154,8 @@ 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(); // setGetTotalPage(response?.data?.data?.totalPages); @@ -225,16 +169,13 @@ 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(","); loading(); const response = await listData( - "1", + "4", name, filter, 12, @@ -245,12 +186,8 @@ 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(); // setGetTotalPage(response?.data?.data?.totalPages); @@ -300,10 +237,7 @@ 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(","); @@ -316,12 +250,8 @@ 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 @@ -431,10 +361,10 @@ const FilterPage = () => {

{" "} - Audio {">"} Semua Audio + Audio {">"} {t("allAudio")}

|

-

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

+

{`${t("thereIs")} ${totalContent} ${t("downloadableAudio")}`}

{/* Left */} @@ -447,11 +377,8 @@ const FilterPage = () => {
-
- + setMonthYearFilter(date)} dateFormat="MM | yyyy" - placeholderText="Pilih Tahun dan Bulan" + placeholderText={t("selectYear")} showMonthYearPicker />
- +
{ setDateRange(update); }} - placeholderText="Pilih Tanggal" + placeholderText={t("searchDate")} onCalendarClose={() => setCalenderState(!calenderState)} /> -
- {handleClose ? ( - - ) : ( - "" - )} -
+
{handleClose ? : ""}
-

- Kategori -

+

{t("categories")}

    {categories.map((category: any) => (
  • -
    • ))} @@ -542,48 +439,25 @@ const FilterPage = () => {
    {/* Garis */}
    -

    - Format Audio -

    +

    Format

    @@ -594,14 +468,10 @@ const FilterPage = () => {
    -

    Urutkan berdasarkan

    - handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"> + +
    @@ -611,23 +481,11 @@ const FilterPage = () => { {audioData?.map((audio: any) => ( - +
    - +
    - + {
    - {formatDateToIndonesian( - new Date(audio?.createdAt) - )}{" "} - {audio?.timezone ? audio?.timezone : "WIB"} |{" "} - {" "} - {audio?.clickCount}{" "} -
    -
    - {audio?.title} + {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | {audio?.clickCount}{" "}
    +
    {audio?.title}
    @@ -664,19 +511,11 @@ const FilterPage = () => {
    ) : (

    - empty + empty

    )} - +
diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index 974b5598..edd10c88 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -14,6 +14,7 @@ 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 { useTranslations } from "next-intl"; const columns: ColumnDef[] = [ { @@ -48,6 +49,7 @@ const FilterPage = () => { const categorie = searchParams?.get("category"); const group = searchParams?.get("group"); const [, setGetTotalPage] = useState(); + const t = useTranslations("FilterPage"); let typingTimer: any; const doneTypingInterval = 1500; const [contentDocument, setContentDocument] = useState([]); @@ -371,15 +373,15 @@ const FilterPage = () => {

{" "} - Teks {">"} Semua Teks + {t("text")} {">"} {t("allText")}

|

-

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

+

{`${t("thereIs")} ${totalContent} ${t("downloadableText")}`}

{/* Left */}
-
+

Filter @@ -388,7 +390,7 @@ const FilterPage = () => {
{ onKeyDown={handleKeyDown} type="text" id="search" - placeholder="Cari judul..." + placeholder={t("searchTitle")} 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" + placeholderText={t("selectYear")} showMonthYearPicker />
- +
{ setDateRange(update); }} - placeholderText="Pilih Tanggal" + placeholderText={t("selectDate")} onCalendarClose={() => setCalenderState(!calenderState)} />
{handleClose ? : ""}
@@ -433,7 +435,7 @@ const FilterPage = () => {
-

Kategori

+

{t("categories")}

    {categories.map((category: any) => (
  • @@ -449,7 +451,7 @@ const FilterPage = () => {
    {/* Garis */}
    -

    Format Teks

    +

    Format