mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add filter section

This commit is contained in:
sabdayagra 2024-12-28 18:42:10 +07:00
parent 5d05674701
commit b748d94c41
5 changed files with 926 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

465
app/[locale]/(public)/document/filter/page.tsx
View File

@ -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<any>[] = [
{
@ -19,35 +23,13 @@ const columns: ColumnDef<any>[] = [
},
];
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<any>();
const [documentData, setDocumentData] = useState<any>();
const [totalData, setTotalData] = React.useState<number>(1);
const [totalPage, setTotalPage] = React.useState<number>(1);
const [sorting, setSorting] = React.useState<SortingState>([]);
@ -56,9 +38,36 @@ const DocumentPage = () => {
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
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<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 [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<any>();
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 (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
Teks {">"} <span className="font-bold">Semua Teks</span>
</p>
<p className="font-bold">|</p>
<p>Terdapat 32499 artikel berisi Teks yang dapat diunduh </p>
<p>{`Terdapat ${totalContent} artikel berisi Teks yang dapat diunduh`}</p>
</div>
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4">
{/* Sidebar Kiri */}
<div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-xl font-semibold mb-4 flex items-center gap-1">
<div className="lg:w-[40%] w-full 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 dark:border-white my-4"></div>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
{/* Pencarian */}
<div>
<label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
Pencarian
</label>
<input 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" />
<Input
value={searchTitle}
onChange={(e) => 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"
/>
</div>
{/* Tahun & Bulan */}
<div>
<label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
Pilih Tahun & Bulan
</label>
<input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan"
showMonthYearPicker
/>
</div>
{/* Tanggal */}
<div>
<label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
Pilih Tanggal
</label>
<input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border 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="Pilih Tanggal"
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
</div>
</div>
{/* Kategori */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
<ul className="mt-2 space-y-2">
{categories.map((category) => (
{categories.map((category: any) => (
<li key={category?.id}>
<label className="inline-flex items-center">
<Checkbox id="terms" />
<span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
<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>
))}
</ul>
</div>
{/* Garis */}
<div className="border-t border-black dark:border-white my-4"></div>
<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 Foto</h3>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Teks</h3>
<ul className="mt-2 space-y-2">
{formatAudio.map((format) => (
<li key={format?.id}>
<label className="inline-flex items-center">
<Checkbox id="terms" />
<span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
</label>
</li>
))}
<li>
<label className="inline-flex items-center">
<Checkbox id="doc" value="doc" checked={formatFilter.includes("doc")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")} />
<span className="ml-2 text-gray-700 dark:text-white">DOC</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="docx" value="docx" checked={formatFilter.includes("docx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")} />
<span className="ml-2 text-gray-700 dark:text-white">DOCX</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="pdf" value="pdf" checked={formatFilter.includes("pdf")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")} />
<span className="ml-2 text-gray-700 dark:text-white">PDF</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="ppt" value="ppt" checked={formatFilter.includes("ppt")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")} />
<span className="ml-2 text-gray-700 dark:text-white">PPT</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="pptx" value="pptx" checked={formatFilter.includes("pptx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")} />
<span className="ml-2 text-gray-700 dark:text-white">PPTX</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a href="#" className="text-[#bb3523]">
<a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
<b>Reset Filter</b>
</a>
</div>
@ -184,20 +493,16 @@ const DocumentPage = () => {
</div>
{/* Konten Kanan */}
<div className="flex-1">
<Reveal>
<Reveal>
<div className="flex-1">
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold tetx-red-300">Urutkan berdasarkan</h2>
<select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</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="terbaru">Terbaru</option>
<option value="terlama">Terpopuler</option>
<option value="terpopuler">Terpopuler</option>
</select>
</div>
</Reveal>
{/* Card */}
<Reveal>
<div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
{documentData?.map((document: any) => (
<Link href={`/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
@ -226,11 +531,11 @@ const DocumentPage = () => {
))}
</div>
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
</Reveal>
</div>
</div>
</Reveal>
</div>
</div>
);
};
export default DocumentPage;
export default FilterPage;

209
app/[locale]/(public)/image/filter/page.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
@ -30,25 +23,6 @@ const columns: ColumnDef<any>[] = [
},
];
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<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([]);
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 [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 = () => {
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
{/* <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@ -379,7 +403,6 @@ const FilterPage = () => {
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
{/* <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
@ -401,9 +424,9 @@ const FilterPage = () => {
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label className="inline-flex items-center">
<Checkbox id="terms" />
<span className="ml-2 text-gray-700 dark:text-white">{category?.title}</span>
<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>
))}
@ -415,19 +438,29 @@ const FilterPage = () => {
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
<ul className="mt-2 space-y-2">
{formatPicture.map((format) => (
<li key={format?.id}>
<label className="inline-flex items-center">
<Checkbox id="terms" />
<span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
</label>
</li>
))}
<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 href="#" className="text-[#bb3523]">
<a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
<b>Reset Filter</b>
</a>
</div>

513
app/[locale]/(public)/video/filter/page.tsx
View File

@ -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<any>[] = [
{
@ -19,34 +23,13 @@ const columns: ColumnDef<any>[] = [
},
];
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<any>();
const [videoData, setVideoData] = useState<any>();
const [totalData, setTotalData] = React.useState<number>(1);
const [totalPage, setTotalPage] = React.useState<number>(1);
const [sorting, setSorting] = React.useState<SortingState>([]);
@ -55,9 +38,36 @@ const FilterPage = () => {
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
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<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 [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<any>();
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 (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
</p>
<p className="font-bold">|</p>
<p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
<p>{`Terdapat ${totalContent} artikel berisi Audio Visual yang dapat diunduh`}</p>
</div>
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<Reveal>
<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 dark:border-white my-4"></div>
<div className="space-y-6">
<div>
<label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
Pencarian
</label>
<input 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" />
</div>
<div className="lg:w-[40%] w-full 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">
Pencarian
</label>
<Input
value={searchTitle}
onChange={(e) => 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"
/>
</div>
<div>
<label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
Tahun & Bulan
</label>
<input type="month" id="month" 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">Tahun & Bulan</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan"
showMonthYearPicker
/>
</div>
<div>
<label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
Tanggal
</label>
<input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
<ul className="mt-2 space-y-2">
{categories.map((category) => (
<li key={category?.id}>
<label className="inline-flex items-center">
<Checkbox id="terms" />
<span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
</label>
</li>
))}
</ul>
</div>
{/* Garis */}
<div className="border-t border-black dark:border-white my-4"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Video</h3>
<ul className="mt-2 space-y-2">
{formatPicture.map((format) => (
<li key={format?.id}>
<label className="inline-flex items-center">
<Checkbox id="terms" />
<span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
</label>
</li>
))}
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a href="#" className="text-[#bb3523]">
<b>Reset Filter</b>
</a>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border 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="Pilih Tanggal"
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
</div>
</div>
</Reveal>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</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>
))}
</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 Foto</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox id="mk4" value="mk4" checked={formatFilter.includes("mk4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")} />
<span className="ml-2 text-gray-700 dark:text-white">MK4</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="mov" value="mov" checked={formatFilter.includes("mov")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")} />
<span className="ml-2 text-gray-700 dark:text-white">MOV</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="mp4" value="mp4" checked={formatFilter.includes("mp4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")} />
<span className="ml-2 text-gray-700 dark:text-white">MP4</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="avi" value="avi" checked={formatFilter.includes("avi")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")} />
<span className="ml-2 text-gray-700 dark:text-white">AVI</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox id="wmv" value="wmv" checked={formatFilter.includes("wmv")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")} />
<span className="ml-2 text-gray-700 dark:text-white">WMV</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="flex-1">
<Reveal>
<Reveal>
<div className="flex-1">
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
<select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
<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="terbaru">Terbaru</option>
<option value="terlama">Terlama</option>
<option value="terpopuler">Terpopuler</option>
</select>
</div>
@ -201,7 +508,7 @@ const FilterPage = () => {
<Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<Link href={`/video/detail/${video?.slug}`}>
<img src={video?.thumbnailLink} className=" h-60 object-cover items-center w-full justify-center rounded-lg" />
<img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
{video?.clickCount}{" "}
@ -212,15 +519,15 @@ const FilterPage = () => {
/>
</svg>{" "}
</div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
</Link>
</CardContent>
</Card>
))}
</div>
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
</Reveal>
</div>
</div>
</Reveal>
</div>
</div>
);

5
components/landing-page/new-content.tsx
View File

@ -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";

8
service/landing/landing.ts
View File

@ -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}`);
}