From 349128c3356bbec78ccee4dd7071c1599b18cef9 Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Mon, 16 Dec 2024 22:50:19 +0700 Subject: [PATCH] feat : Commits, adds and updates api in schedule. adjust ui in detail page content --- app/[locale]/(public)/audio/filter/page.tsx | 90 ++- app/[locale]/(public)/contact/page.tsx | 2 +- .../(public)/document/filter/page.tsx | 105 +-- app/[locale]/(public)/faqs/page.tsx | 4 +- .../(public)/image/detail/[slug]/page.tsx | 13 +- app/[locale]/(public)/image/filter/page.tsx | 5 +- app/[locale]/(public)/schedule/page.tsx | 636 ++++++++---------- .../(public)/video/detail/[slug]/page.tsx | 6 +- app/[locale]/(public)/video/filter/page.tsx | 101 +-- components/landing-page/hero.tsx | 59 +- components/landing-page/navbar.tsx | 2 +- service/schedule/schedule.ts | 19 + 12 files changed, 538 insertions(+), 504 deletions(-) diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx index 29121fb7..803e4eab 100644 --- a/app/[locale]/(public)/audio/filter/page.tsx +++ b/app/[locale]/(public)/audio/filter/page.tsx @@ -5,6 +5,17 @@ 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 LandingPagination from "@/components/landing-page/pagination"; + +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, +]; const categories = [ { id: 1, title: "HUT HUMAS KE - 73" }, @@ -26,15 +37,65 @@ const formatAudio = [ ]; const FilterPage = () => { - const [audioData, setAudioData] = useState(); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const searchParams = useSearchParams(); + const locale = params?.locale; + const [imageData, setImageData] = useState(); + 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 [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 6, + }); const [page, setPage] = useState(1); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + const table = useReactTable({ + data: imageData, + columns: columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + const [audioData, setAudioData] = useState(); useEffect(() => { initFetch(); }, []); const initFetch = async () => { - const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "4" }); + const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "4" }); console.log(response); setAudioData(response?.data?.data?.content); + const data = response.data?.data; + const contentData = data?.content; + setAudioData(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); }; return (
@@ -153,32 +214,9 @@ const FilterPage = () => { ))}
+ - - - - - - - 1 - - - - 2 - - - - 3 - - - - - - - - - ); }; diff --git a/app/[locale]/(public)/contact/page.tsx b/app/[locale]/(public)/contact/page.tsx index 6754006a..ca09701b 100644 --- a/app/[locale]/(public)/contact/page.tsx +++ b/app/[locale]/(public)/contact/page.tsx @@ -6,7 +6,7 @@ const ContactForm = () => { {/* Header */}
contact -

Hubungi Kami

+

Hubungi Kami

Tulis Pesan

Silahkan tinggalkan pesan Anda pada kolom yang tersedia

diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index e7277763..de4028f7 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -5,22 +5,16 @@ 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 LandingPagination from "@/components/landing-page/pagination"; -const dummyDescription = [ - { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 7, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 8, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 9, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 10, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 11, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 12, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 13, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, - { id: 14, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, ]; const categories = [ @@ -46,15 +40,65 @@ const formatAudio = [ ]; const DocumentPage = () => { - const [documentData, setDocumentData] = useState(); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const searchParams = useSearchParams(); + const locale = params?.locale; + const [imageData, setImageData] = useState(); + 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 [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 6, + }); const [page, setPage] = useState(1); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + const table = useReactTable({ + data: imageData, + columns: columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + const [documentData, setDocumentData] = useState(); useEffect(() => { initFetch(); }, []); const initFetch = async () => { - const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "3" }); + const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" }); console.log(response); setDocumentData(response?.data?.data?.content); + const data = response.data?.data; + const contentData = data?.content; + setDocumentData(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); }; return (
@@ -155,7 +199,7 @@ const DocumentPage = () => {
- {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518 + {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518
{document?.title}
@@ -168,32 +212,9 @@ const DocumentPage = () => { ))}
+
- - - - - - - 1 - - - - 2 - - - - 3 - - - - - - - - - ); }; diff --git a/app/[locale]/(public)/faqs/page.tsx b/app/[locale]/(public)/faqs/page.tsx index dafea905..6077a44c 100644 --- a/app/[locale]/(public)/faqs/page.tsx +++ b/app/[locale]/(public)/faqs/page.tsx @@ -33,11 +33,11 @@ const FAQS: React.FC = () => { }; return ( -
+
{/* Header */}
Faqs -

Frequently Asked Questions

+

Frequently Asked Questions

{/* FAQS Items */} diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index 444b198f..e3d2c830 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -134,7 +134,7 @@ const DetailInfo = () => { ))} @@ -160,11 +160,12 @@ const DetailInfo = () => { {/* Footer Informasi */}
-

- oleh {detailDataImage?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataImage?.updatedAt} WIB | {" "} - {detailDataImage?.clickCount} -

-

Kreator: {detailDataImage?.creatorName}

+
+ oleh {detailDataImage?.uploadedBy?.userLevel?.name}  |  Diupdate pada {detailDataImage?.updatedAt} WIB  |  + +   {detailDataImage?.clickCount}   +

Kreator: {detailDataImage?.creatorName}

+
{/* Keterangan */} diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx index 43a2a0ac..1830f183 100644 --- a/app/[locale]/(public)/image/filter/page.tsx +++ b/app/[locale]/(public)/image/filter/page.tsx @@ -1,15 +1,12 @@ "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 { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals"; +import { formatDateToIndonesian } from "@/utils/globals"; import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; import { getListContent } from "@/service/landing/landing"; import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; -import TablePagination from "@/components/table/table-pagination"; -import { Response } from "@dnd-kit/core/dist/sensors/types"; import LandingPagination from "@/components/landing-page/pagination"; const columns: ColumnDef[] = [ diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx index d828c38b..58eb216d 100644 --- a/app/[locale]/(public)/schedule/page.tsx +++ b/app/[locale]/(public)/schedule/page.tsx @@ -9,64 +9,148 @@ import { format } from "date-fns"; import { cn } from "@/lib/utils"; import { Checkbox } from "@/components/ui/checkbox"; import { Icon } from "@iconify/react/dist/iconify.js"; +import { listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule"; +import { useRouter } from "@/i18n/routing"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; + +const timeList = [ + { + id: "6", + time: "06:00", + }, + { + id: "7", + time: "07:00", + }, + { + id: "8", + time: "08:00", + }, + { + id: "9", + time: "09:00", + }, + { + id: "10", + time: "10:00", + }, + { + id: "11", + time: "11:00", + }, + { + id: "12", + time: "12:00", + }, + { + id: "13", + time: "13:00", + }, + { + id: "14", + time: "14:00", + }, + { + id: "15", + time: "15:00", + }, + { + id: "16", + time: "16:00", + }, + { + id: "17", + time: "17:00", + }, + { + id: "18", + time: "18:00", + }, + { + id: "19", + time: "19:00", + }, + { + id: "20", + time: "20:00", + }, + { + id: "21", + time: "21:00", + }, + { + id: "22", + time: "22:00", + }, + { + id: "23", + time: "23:00", + }, + { + id: "24", + time: "24:00", + }, + { + id: "1", + time: "01:00", + }, + { + id: "2", + time: "02:00", + }, + { + id: "3", + time: "03:00", + }, + { + id: "4", + time: "04:00", + }, + { + id: "5", + time: "05:00", + }, +]; const Schedule = () => { - const city = [ - { - key: 1, - id: "metro-jaya", - name: "Polda Metro Jaya", - }, - { - key: 2, - id: "jawa-barat", - name: "Polda Jawa Barat", - }, - { - key: 3, - id: "banten", - name: "Polda Banten", - }, - { - key: 4, - id: "jawa-tengah", - name: "Polda Jawa Tengah", - }, - { - key: 5, - id: "daerah-istimewa-yogyakarta", - name: "Polda D.I Yogyakarta", - }, - { - key: 6, - id: "jawa-timur", - name: "Polda Jawa Timur", - }, - { - key: 7, - id: "aceh", - name: "Polda Aceh", - }, - { - key: 8, - id: "sumatera-utara", - name: "Polda Sumatera Utara", - }, - { - key: 9, - id: "sumatera-barat", - name: "Polda Sumatera Barat", - }, - ]; - - const days = ["S", "S", "R", "K", "J", "S", "M"]; - - const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; - + const router = useRouter(); const [startDate, setStartDate] = useState(new Date()); const [dateAWeek, setDateAWeek] = useState([]); const [scheduleSearch, setScheduleSearch] = useState(); const [todayList, setTodayList] = useState([]); + const [prevdayList, setPrevdayList] = useState([]); + const [nextdayList, setNextdayList] = useState([]); + const [isOpen, setIsOpen] = React.useState(false); + const [schedules, setSchedules] = useState([]); + const [openDialog, setOpenDialog] = useState(false); + + useEffect(() => { + async function initState() { + getDataByDate(); + // const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(","); + const resSchedule = await listSchedule(); + setSchedules(resSchedule.data?.data); + console.log(resSchedule); + setDateAWeek(dateList); + } + + initState(); + }, []); + + async function getDataByDate() { + const resToday = await listScheduleTodayPublic(); + const today = resToday.data?.data; + setTodayList(today); + const resNext = await listScheduleNextPublic(); + const next = resNext.data?.data; + + setNextdayList(next); + const resPrev = await listSchedulePrevPublic(); + const prev = resPrev.data?.data; + + setPrevdayList(prev); + } const curr = new Date(); const startDays = (curr.getDay() + 7 - 1) % 7; @@ -80,14 +164,6 @@ const Schedule = () => { } const [dateList, setDateList] = useState(dateListInit); - useEffect(() => { - async function initState() { - setDateAWeek(dateList); - } - - initState(); - }, []); - const handleChangeDate = (date: Date | undefined) => { setStartDate(date); const dateListTemp = []; @@ -179,17 +255,64 @@ const Schedule = () => { } }; - const categories = [ - { id: 1, title: "POLDA METRO JAYA" }, - { id: 2, title: "POLDA JAWA BARAT" }, - { id: 3, title: "POLDA BANTEN" }, - { id: 4, title: "POLDA JAWA TENGAH" }, - { id: 5, title: "POLDA D.I YOGYAKARTA" }, - { id: 6, title: "POLDA JAWA TIMUR" }, - { id: 7, title: "POLDA ACEH" }, - { id: 8, title: "POLDA SUMATERA UTARA" }, - { id: 9, title: "POLDA SUMATERA BARAT" }, - ]; + const getItem = (itemFound: any) => { + setOpenDialog(true); + }; + + function setItemSchedule(id: string, date: string) { + const itemFound: any = schedules?.filter((s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)); + + if (itemFound?.length > 0) { + if (itemFound?.length == 1) { + return ( + { + getItem(itemFound[0]); + }} + > +

+ {itemFound[0]?.title} +

+ {itemFound[0].isYoutube == true ?

LIVE

: ""} + {/*

{itemFound[0].address}

*/} + + ); + } + + // for (let i = 0; i < itemFound.length; i++) { + // const item = itemFound[i]; + // } + return ( +
+

+ {`${itemFound?.length} Jadwal Bersamaan`} +

+ + Lihat Jadwal + + {itemFound?.map((list: any) => ( + { + getItem(itemFound[0]); + }} + > +

+ {list.title} +

+ {list.isYoutube == true ?

LIVE

: ""} + {/*

{list.address}

*/} + + ))} + + +
+
+ ); + } + } return ( <> @@ -286,12 +409,15 @@ const Schedule = () => { Time Table - - changePrevWeek()}> + changePrevWeek()} + className={`text-center cursor-pointer border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`} + > + {/* - {" "} + {" "} */}

{dateAWeek[0]?.split("-")[2]}

Monday

@@ -312,283 +438,35 @@ const Schedule = () => {
{dateAWeek[5]?.split("-")[2]}
Saturday - + changeNextWeek()} + className={`text-center border cursor-pointer border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""}`} + >

{dateAWeek[6]?.split("-")[2]}

Sunday

- changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center"> + {/* - + */} - - 06:00 - - - - - - - - - - - 07:00 - - - - - - - - - - - 08:00 - - - - - - - - - - - 09:00 - - - - - - - - - - - 10:00 - - - - - - - - - - - 11:00 - - - - - - - - - - - 12:00 - - - - - - - - - - - 13:00 - - - - - - - - - - - 14:00 - - - - - - - - - - - 15:00 - - - - - - - - - - - 16:00 - - - - - - - - - - - 17:00 - - - - - - - - - - - 18:00 - - - - - - - - - - - 19:00 - - - - - - - - - - - 20:00 - - - - - - - - - - - 21:00 - - - - - - - - - - - 22:00 - - - - - - - - - - - 23:00 - - - - - - - - - - - 24:00 - - - - - - - - - - - 01:00 - - - - - - - - - - - 02:00 - - - - - - - - - - - 03:00 - - - - - - - - - - - 04:00 - - - - - - - - - - - 05:00 - - - - - - - - + {timeList.map((times) => ( + + {times.time} + {setItemSchedule(times.id, dateList[0])} + {setItemSchedule(times.id, dateList[1])} + {setItemSchedule(times.id, dateList[2])} + {setItemSchedule(times.id, dateList[3])} + {setItemSchedule(times.id, dateList[4])} + {setItemSchedule(times.id, dateList[5])} + {setItemSchedule(times.id, dateList[6])} + + ))}
@@ -619,18 +497,60 @@ const Schedule = () => {
- + {/* jadwal sebelumnya */} + + + +
+ Jadwal Sebelumnya + + + +
+ + {prevdayList?.map((list: any) => ( + +
{new Date(list.startDate).getDate()}
+
+

{list?.title}

+

+ + {list?.startTime} - {list?.endTime} WIB +

+

+ + {list?.address} +

+

Pembicara :

+

+ + {list?.speakerTitle} {list?.speakerName} +

+
+ + ))} + + +
6
+
+

Test Event

+

+ + 08.00 - 12.00 WIB +

+

+ + Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia. +

+

Pembicara :

+

+ + Hanif Salafi +

+
+ + + + + + + Are you absolutely sure? + This action cannot be undone. This will permanently delete your account and remove your data from our servers. + + + Cancel + Continue + + + ); }; diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx index 5d2dbb28..e4d637f1 100644 --- a/app/[locale]/(public)/video/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx @@ -131,8 +131,10 @@ const DetailVideo = () => { {/* Footer Informasi */}
-

- oleh {detailDataVideo?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataVideo?.updatedAt} WIB | {" "} +

+ oleh {detailDataVideo?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataVideo?.updatedAt} WIB |  + +   {detailDataVideo?.clickCount}

Kreator: {detailDataVideo?.creatorName}

diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx index d4835e28..39b52e62 100644 --- a/app/[locale]/(public)/video/filter/page.tsx +++ b/app/[locale]/(public)/video/filter/page.tsx @@ -1,22 +1,20 @@ "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 LandingPagination from "@/components/landing-page/pagination"; -const dummyImage = [ - { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, - { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, ]; const categories = [ @@ -41,15 +39,65 @@ const formatPicture = [ ]; const FilterPage = () => { - const [videoData, setVideoData] = useState(); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const searchParams = useSearchParams(); + const locale = params?.locale; + const [imageData, setImageData] = useState(); + 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 [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 6, + }); const [page, setPage] = useState(1); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + const table = useReactTable({ + data: imageData, + columns: columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + const [videoData, setVideoData] = useState(); useEffect(() => { initFetch(); - }, []); + }, [page]); const initFetch = async () => { - const response = await getListContent({page: page-1, size: 12, sortBy: "createdAt", contentTypeId: "2", }); + const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "2" }); console.log(response); setVideoData(response?.data?.data?.content); + const data = response.data?.data; + const contentData = data?.content; + setVideoData(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); }; return ( @@ -148,32 +196,9 @@ const FilterPage = () => { ))}
+ - - - - - - - 1 - - - - 2 - - - - 3 - - - - - - - - - ); }; diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx index 67bef1eb..6ef6a1d8 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -1,6 +1,5 @@ import { formatDateToIndonesian, textEllipsis } from "@/utils/globals"; import React, { useEffect, useState } from "react"; -import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css/bundle"; import "swiper/css/navigation"; import { getHeroData } from "@/service/landing/landing"; @@ -24,37 +23,37 @@ const Hero: React.FC = () => { setHeroData(response?.data?.data?.content); }; return ( -
+
{/* Section Gambar Utama */} - - - {heroData?.map((list: any) => ( - -
- Gambar Utama -
- {list?.categoryName} - -

{list?.title}

- -

- {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "} - - - {" "} - {list?.clickCount}{" "} -

-
+ + + {heroData?.map((list: any) => ( + +
+ Gambar Utama +
+ {list?.categoryName} + +

{list?.title}

+ +

+ {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "} + + + {" "} + {list?.clickCount}{" "} +

- - ))} - - - - +
+ + ))} + + + + {/* Section Kanan */}
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index 1d44516f..ca8d9c42 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -133,7 +133,7 @@ const Navbar = () => { - + diff --git a/service/schedule/schedule.ts b/service/schedule/schedule.ts index be28b318..273797f8 100644 --- a/service/schedule/schedule.ts +++ b/service/schedule/schedule.ts @@ -17,4 +17,23 @@ export async function detailSchedule(id: any) { return getAPIInterceptor({ url }); } +export async function listScheduleTodayPublic(group = null) { + const url = `public/schedule/today?group=${group}`; + return getAPI( url, null ); +} + +export async function listScheduleNextPublic(group = null) { + const url = `public/schedule/next-activity?group=${group}`; + return getAPI( url, null ); +} + +export async function listSchedulePrevPublic(group = null) { + const url = `public/schedule/prev-activity?group=${group}`; + return getAPI( url, null ); +} + +export async function listSchedule(group = null) { + const url = `public/schedule/list?group=${group}`; + return getAPI( url, null ); +}