Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into prod
This commit is contained in:
commit
d8aad6da43
|
|
@ -1,14 +0,0 @@
|
||||||
import Footer from "@/components/landing-page/footer";
|
|
||||||
import Navbar from "@/components/landing-page/navbar";
|
|
||||||
|
|
||||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Navbar />
|
|
||||||
{children}
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default layout;
|
|
||||||
|
|
@ -0,0 +1,753 @@
|
||||||
|
"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<any>();
|
||||||
|
const [totalData, setTotalData] = React.useState<number>(1);
|
||||||
|
const [totalPage, setTotalPage] = React.useState<number>(1);
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [columnVisibility, setColumnVisibility] =
|
||||||
|
React.useState<VisibilityState>({});
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({});
|
||||||
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||||
|
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<any>([]);
|
||||||
|
const [monthYearFilter, setMonthYearFilter] = useState<any>();
|
||||||
|
const [searchTitle, setSearchTitle] = useState<string>("");
|
||||||
|
const [sortByOpt, setSortByOpt] = useState<any>(
|
||||||
|
sortBy === "popular" ? "clickCount" : "createdAt"
|
||||||
|
);
|
||||||
|
const isRegional = asPath?.includes("regional");
|
||||||
|
const isSatker = asPath?.includes("satker");
|
||||||
|
const [formatFilter, setFormatFilter] = useState<any>([]);
|
||||||
|
const pages = page ? page - 1 : 0;
|
||||||
|
const [startDateString, setStartDateString] = useState<any>();
|
||||||
|
const [endDateString, setEndDateString] = useState<any>();
|
||||||
|
const [dateRange, setDateRange] = useState<any>([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 (
|
||||||
|
<div className="flex flex-col w-full max-w-screen overflow-x-hidden">
|
||||||
|
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
||||||
|
<p> {t("content", { defaultValue: "Content" })}</p>
|
||||||
|
{">"}
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allContent", { defaultValue: "All Content" })}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="font-bold">|</p>
|
||||||
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Left */}
|
||||||
|
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
|
||||||
|
<div className="lg:hidden flex justify-end mb-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsFilterOpen(!isFilterOpen)}
|
||||||
|
className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow"
|
||||||
|
>
|
||||||
|
{isFilterOpen ? "Hide Filter" : "Show Filter"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isFilterOpen && (
|
||||||
|
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
|
||||||
|
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
|
||||||
|
<Icon icon="stash:filter-light" fontSize={30} />
|
||||||
|
Filter
|
||||||
|
</h2>
|
||||||
|
<div className="border-t border-black my-4 dark:border-white"></div>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="search"
|
||||||
|
className="block text-sm font-medium text-gray-700 dark:text-white"
|
||||||
|
>
|
||||||
|
{t("search", { defaultValue: "Search" })}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
value={searchTitle}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-white">
|
||||||
|
{t("monthYear", { defaultValue: "Month Year" })}
|
||||||
|
</label>
|
||||||
|
<ReactDatePicker
|
||||||
|
selected={monthYearFilter}
|
||||||
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
|
dateFormat="MM | yyyy"
|
||||||
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
|
showMonthYearPicker
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-white">
|
||||||
|
{t("date", { defaultValue: "Date" })}
|
||||||
|
</label>
|
||||||
|
<div className="flex flex-row justify justify-between gap-2">
|
||||||
|
<ReactDatePicker
|
||||||
|
selectsRange
|
||||||
|
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
|
startDate={dateRange[0]}
|
||||||
|
endDate={dateRange[1]}
|
||||||
|
onChange={(update) => {
|
||||||
|
setDateRange(update);
|
||||||
|
}}
|
||||||
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
|
/>
|
||||||
|
<div className="flex items-center">
|
||||||
|
{handleClose ? (
|
||||||
|
<Icon
|
||||||
|
icon="carbon:close-filled"
|
||||||
|
onClick={handleDeleteDate}
|
||||||
|
width="20"
|
||||||
|
inline
|
||||||
|
color="#216ba5"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
|
||||||
|
{t("categories", { defaultValue: "Categories" })}
|
||||||
|
</h3>
|
||||||
|
<ul className="mt-2 space-y-2">
|
||||||
|
{categories.map((category: any) => (
|
||||||
|
<li key={category?.id}>
|
||||||
|
<label
|
||||||
|
className="inline-flex items-center"
|
||||||
|
htmlFor={`${category.id}`}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id={`${category.id}`}
|
||||||
|
value={category.id}
|
||||||
|
checked={categoryFilter.includes(String(category.id))}
|
||||||
|
onCheckedChange={(e) =>
|
||||||
|
handleCategoryFilter(Boolean(e), category.id)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-gray-700 dark:text-white">
|
||||||
|
{category?.name}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
<div className="mt-4 flex gap-2 justify-center items-center">
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setCategoryPage((prev) => Math.max(prev - 1, 1))
|
||||||
|
}
|
||||||
|
disabled={categoryPage === 1}
|
||||||
|
className="px-3 py-1 border rounded disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{Array.from({ length: categoryTotalPages }, (_, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => setCategoryPage(i + 1)}
|
||||||
|
className={`px-3 py-1 border rounded ${
|
||||||
|
categoryPage === i + 1
|
||||||
|
? "bg-[#bb3523] text-white"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{i + 1}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setCategoryPage((prev) =>
|
||||||
|
Math.min(prev + 1, categoryTotalPages)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={categoryPage === categoryTotalPages}
|
||||||
|
className="px-3 py-1 border rounded disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* Garis */}
|
||||||
|
<div className="border-t border-black my-4 dark:border-white"></div>
|
||||||
|
{/* Garis */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
|
||||||
|
Format
|
||||||
|
</h3>
|
||||||
|
<ul className="mt-2 space-y-2">
|
||||||
|
<li>
|
||||||
|
<label className="inline-flex items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="png"
|
||||||
|
value="png"
|
||||||
|
checked={formatFilter.includes("png")}
|
||||||
|
onCheckedChange={(e) =>
|
||||||
|
handleFormatFilter(Boolean(e), "png")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-gray-700 dark:text-white">
|
||||||
|
PNG
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label className="inline-flex items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="jpeg"
|
||||||
|
value="jpeg"
|
||||||
|
checked={formatFilter.includes("jpeg")}
|
||||||
|
onCheckedChange={(e) =>
|
||||||
|
handleFormatFilter(Boolean(e), "jpeg")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-gray-700 dark:text-white">
|
||||||
|
JPEG
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label className="inline-flex items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="jpg"
|
||||||
|
value="jpg"
|
||||||
|
checked={formatFilter.includes("jpg")}
|
||||||
|
onCheckedChange={(e) =>
|
||||||
|
handleFormatFilter(Boolean(e), "jpg")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-gray-700 dark:text-white">
|
||||||
|
JPG
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-black dark:border-white my-4"></div>
|
||||||
|
<div className="text-center">
|
||||||
|
<a
|
||||||
|
onClick={cleanCheckbox}
|
||||||
|
className="text-[#bb3523] cursor-pointer"
|
||||||
|
>
|
||||||
|
<b>Reset Filter</b>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Konten Kanan */}
|
||||||
|
<div className="w-full pl-4 pr-4 lg:pr-16 pb-4 overflow-x-hidden">
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex flex-col items-end mb-4">
|
||||||
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
|
<select
|
||||||
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
|
onChange={(e) => handleSorting(e)}
|
||||||
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
|
>
|
||||||
|
<option value="latest">
|
||||||
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4 w-full">
|
||||||
|
<FilterImageComponent
|
||||||
|
categoryFilter={categoryFilter}
|
||||||
|
sortByOpt={sortByOpt}
|
||||||
|
startDateString={startDateString}
|
||||||
|
endDateString={endDateString}
|
||||||
|
monthYearFilter={monthYearFilter}
|
||||||
|
/>
|
||||||
|
<FilterVideoComponent
|
||||||
|
categoryFilter={categoryFilter}
|
||||||
|
sortByOpt={sortByOpt}
|
||||||
|
startDateString={startDateString}
|
||||||
|
endDateString={endDateString}
|
||||||
|
monthYearFilter={monthYearFilter}
|
||||||
|
/>
|
||||||
|
<FilterDocumentComponent
|
||||||
|
categoryFilter={categoryFilter}
|
||||||
|
sortByOpt={sortByOpt}
|
||||||
|
startDateString={startDateString}
|
||||||
|
endDateString={endDateString}
|
||||||
|
monthYearFilter={monthYearFilter}
|
||||||
|
/>
|
||||||
|
<FilterAudioComponent
|
||||||
|
categoryFilter={categoryFilter}
|
||||||
|
sortByOpt={sortByOpt}
|
||||||
|
startDateString={startDateString}
|
||||||
|
endDateString={endDateString}
|
||||||
|
monthYearFilter={monthYearFilter}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -98,82 +98,50 @@ export default function FilterDocumentComponent(props: {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getDataAll() {
|
async function getDataAll() {
|
||||||
if (asPath?.includes("/polda/") == true) {
|
let filterGroup = "";
|
||||||
if (asPath?.split("/")[2] !== "[polda_name]") {
|
|
||||||
const filter =
|
|
||||||
categoryFilter?.length > 0
|
|
||||||
? categoryFilter?.sort().join(",")
|
|
||||||
: categorie || "";
|
|
||||||
|
|
||||||
const name = title == undefined ? "" : title;
|
if (asPath.includes("/polda/") && asPath.split("/")[2] !== "[polda_name]") {
|
||||||
const filterGroup = group == undefined ? asPath.split("/")[2] : group;
|
filterGroup = group ?? asPath.split("/")[2];
|
||||||
loading();
|
} else if (
|
||||||
const response = await listData(
|
asPath.includes("/satker/") &&
|
||||||
"3",
|
asPath.split("/")[2] !== "[satker_name]"
|
||||||
name,
|
) {
|
||||||
filter,
|
filterGroup = group ?? asPath.split("/")[2];
|
||||||
12,
|
|
||||||
0,
|
|
||||||
sortByOpt,
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
filterGroup,
|
|
||||||
startDateString,
|
|
||||||
endDateString,
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)
|
|
||||||
?.split("/")[0]
|
|
||||||
?.replace("", "")
|
|
||||||
: "",
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
close();
|
|
||||||
const data = response?.data?.data;
|
|
||||||
const contentData = data?.content;
|
|
||||||
setNewContent(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;
|
|
||||||
loading();
|
|
||||||
const response = await listData(
|
|
||||||
"3",
|
|
||||||
name,
|
|
||||||
filter,
|
|
||||||
12,
|
|
||||||
0,
|
|
||||||
sortByOpt,
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
startDateString,
|
|
||||||
endDateString,
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
|
|
||||||
: "",
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
close();
|
|
||||||
|
|
||||||
const data = response?.data?.data;
|
|
||||||
const contentData = data?.content;
|
|
||||||
|
|
||||||
setNewContent(contentData);
|
|
||||||
setTotalData(data?.totalElements);
|
|
||||||
setTotalPage(data?.totalPages);
|
|
||||||
setTotalContent(response?.data?.data?.totalElements);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filter =
|
||||||
|
categoryFilter?.length > 0
|
||||||
|
? categoryFilter?.sort().join(",")
|
||||||
|
: categorie || "";
|
||||||
|
|
||||||
|
const name = title == undefined ? "" : title;
|
||||||
|
loading();
|
||||||
|
const response = await listData(
|
||||||
|
"3",
|
||||||
|
name,
|
||||||
|
filter,
|
||||||
|
12,
|
||||||
|
0,
|
||||||
|
sortByOpt,
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
filterGroup,
|
||||||
|
startDateString,
|
||||||
|
endDateString,
|
||||||
|
monthYearFilter
|
||||||
|
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
|
||||||
|
: "",
|
||||||
|
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
|
||||||
|
);
|
||||||
|
close();
|
||||||
|
|
||||||
|
const data = response?.data?.data;
|
||||||
|
const contentData = data?.content;
|
||||||
|
|
||||||
|
setNewContent(contentData);
|
||||||
|
setTotalData(data?.totalElements);
|
||||||
|
setTotalPage(data?.totalPages);
|
||||||
|
setTotalContent(data?.totalElements);
|
||||||
}
|
}
|
||||||
|
|
||||||
return newContent?.length > 0 ? (
|
return newContent?.length > 0 ? (
|
||||||
|
|
|
||||||
|
|
@ -64,82 +64,50 @@ export default function FilterImageComponent(props: {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
async function getDataAll() {
|
async function getDataAll() {
|
||||||
if (asPath?.includes("/polda/") == true) {
|
let filterGroup = "";
|
||||||
if (asPath?.split("/")[2] !== "[polda_name]") {
|
|
||||||
const filter =
|
|
||||||
categoryFilter?.length > 0
|
|
||||||
? categoryFilter?.sort().join(",")
|
|
||||||
: categorie || "";
|
|
||||||
|
|
||||||
const name = title == undefined ? "" : title;
|
if (asPath.includes("/polda/") && asPath.split("/")[2] !== "[polda_name]") {
|
||||||
const filterGroup = group == undefined ? asPath.split("/")[2] : group;
|
filterGroup = group ?? asPath.split("/")[2];
|
||||||
loading();
|
} else if (
|
||||||
const response = await listData(
|
asPath.includes("/satker/") &&
|
||||||
"1",
|
asPath.split("/")[2] !== "[satker_name]"
|
||||||
name,
|
) {
|
||||||
filter,
|
filterGroup = group ?? asPath.split("/")[2];
|
||||||
12,
|
|
||||||
0,
|
|
||||||
sortByOpt,
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
filterGroup,
|
|
||||||
startDateString,
|
|
||||||
endDateString,
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)
|
|
||||||
?.split("/")[0]
|
|
||||||
?.replace("", "")
|
|
||||||
: "",
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
close();
|
|
||||||
const data = response?.data?.data;
|
|
||||||
const contentData = data?.content;
|
|
||||||
setNewContent(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;
|
|
||||||
loading();
|
|
||||||
const response = await listData(
|
|
||||||
"1",
|
|
||||||
name,
|
|
||||||
filter,
|
|
||||||
12,
|
|
||||||
0,
|
|
||||||
sortByOpt,
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
startDateString,
|
|
||||||
endDateString,
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
|
|
||||||
: "",
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
close();
|
|
||||||
|
|
||||||
const data = response?.data?.data;
|
|
||||||
const contentData = data?.content;
|
|
||||||
|
|
||||||
setNewContent(contentData);
|
|
||||||
setTotalData(data?.totalElements);
|
|
||||||
setTotalPage(data?.totalPages);
|
|
||||||
setTotalContent(response?.data?.data?.totalElements);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filter =
|
||||||
|
categoryFilter?.length > 0
|
||||||
|
? categoryFilter?.sort().join(",")
|
||||||
|
: categorie || "";
|
||||||
|
|
||||||
|
const name = title == undefined ? "" : title;
|
||||||
|
loading();
|
||||||
|
const response = await listData(
|
||||||
|
"1",
|
||||||
|
name,
|
||||||
|
filter,
|
||||||
|
12,
|
||||||
|
0,
|
||||||
|
sortByOpt,
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
filterGroup,
|
||||||
|
startDateString,
|
||||||
|
endDateString,
|
||||||
|
monthYearFilter
|
||||||
|
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
|
||||||
|
: "",
|
||||||
|
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
|
||||||
|
);
|
||||||
|
close();
|
||||||
|
|
||||||
|
const data = response?.data?.data;
|
||||||
|
const contentData = data?.content;
|
||||||
|
|
||||||
|
setNewContent(contentData);
|
||||||
|
setTotalData(data?.totalElements);
|
||||||
|
setTotalPage(data?.totalPages);
|
||||||
|
setTotalContent(data?.totalElements);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getDataRegional() {
|
async function getDataRegional() {
|
||||||
|
|
|
||||||
|
|
@ -99,82 +99,50 @@ export default function FilterVideoComponent(props: {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getDataAll() {
|
async function getDataAll() {
|
||||||
if (asPath?.includes("/polda/") == true) {
|
const filter =
|
||||||
if (asPath?.split("/")[2] !== "[polda_name]") {
|
categoryFilter?.length > 0
|
||||||
const filter =
|
? categoryFilter?.sort().join(",")
|
||||||
categoryFilter?.length > 0
|
: categorie || "";
|
||||||
? categoryFilter?.sort().join(",")
|
|
||||||
: categorie || "";
|
|
||||||
|
|
||||||
const name = title == undefined ? "" : title;
|
const name = title ?? "";
|
||||||
const filterGroup = group == undefined ? asPath.split("/")[2] : group;
|
|
||||||
loading();
|
|
||||||
const response = await listData(
|
|
||||||
"2",
|
|
||||||
name,
|
|
||||||
filter,
|
|
||||||
12,
|
|
||||||
0,
|
|
||||||
sortByOpt,
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
filterGroup,
|
|
||||||
startDateString,
|
|
||||||
endDateString,
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)
|
|
||||||
?.split("/")[0]
|
|
||||||
?.replace("", "")
|
|
||||||
: "",
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
close();
|
|
||||||
const data = response?.data?.data;
|
|
||||||
const contentData = data?.content;
|
|
||||||
setNewContent(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 filterGroup =
|
||||||
loading();
|
group ??
|
||||||
const response = await listData(
|
(() => {
|
||||||
"2",
|
const segments = asPath.split("/");
|
||||||
name,
|
if (segments[1] === "polda" || segments[1] === "satker") {
|
||||||
filter,
|
return segments[2];
|
||||||
12,
|
}
|
||||||
0,
|
return "";
|
||||||
sortByOpt,
|
})();
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
startDateString,
|
|
||||||
endDateString,
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
|
|
||||||
: "",
|
|
||||||
monthYearFilter
|
|
||||||
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
close();
|
|
||||||
|
|
||||||
const data = response?.data?.data;
|
loading();
|
||||||
const contentData = data?.content;
|
const response = await listData(
|
||||||
|
"2",
|
||||||
|
name,
|
||||||
|
filter,
|
||||||
|
12,
|
||||||
|
0,
|
||||||
|
sortByOpt,
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
filterGroup,
|
||||||
|
startDateString,
|
||||||
|
endDateString,
|
||||||
|
monthYearFilter
|
||||||
|
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
|
||||||
|
: "",
|
||||||
|
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
|
||||||
|
);
|
||||||
|
close();
|
||||||
|
|
||||||
setNewContent(contentData);
|
const data = response?.data?.data;
|
||||||
setTotalData(data?.totalElements);
|
const contentData = data?.content;
|
||||||
setTotalPage(data?.totalPages);
|
|
||||||
setTotalContent(response?.data?.data?.totalElements);
|
setNewContent(contentData);
|
||||||
}
|
setTotalData(data?.totalElements);
|
||||||
|
setTotalPage(data?.totalPages);
|
||||||
|
setTotalContent(response?.data?.data?.totalElements);
|
||||||
}
|
}
|
||||||
|
|
||||||
return newContent?.length > 0 ? (
|
return newContent?.length > 0 ? (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue