diff --git a/src/app/api/sticker/route.ts b/src/app/api/sticker/route.ts index 99835b3d..a10d099f 100644 --- a/src/app/api/sticker/route.ts +++ b/src/app/api/sticker/route.ts @@ -1,7 +1,9 @@ -import { NextResponse } from "next/server"; import { prisma } from "@/lib"; +import { data } from "autoprefixer"; +import _ from "lodash"; +import { NextResponse } from "next/server"; -export { POST, GET }; +export { GET, POST }; interface IPostSticker { fileId: string; @@ -49,7 +51,6 @@ async function POST(request: Request) { } } - async function GET(request: Request) { const method = request.method; if (method !== "GET") { @@ -59,18 +60,66 @@ async function GET(request: Request) { ); } + let fixData; + const { searchParams } = new URL(request.url); + const search = searchParams.get("search"); + const page = searchParams.get("page"); + const dataTake = 10 + const dataSkip = Number(page) * dataTake - dataTake; + try { - const sticker = await prisma.sticker.findMany({ - orderBy: { - createdAt: "desc", - }, - include: { - MasterEmotions: true, - }, - }); + if (!page) { + fixData = await prisma.sticker.findMany({ + orderBy: { + createdAt: "desc", + }, + include: { + MasterEmotions: true, + }, + }); + } else { + const data = await prisma.sticker.findMany({ + skip: dataSkip, + take: dataTake, + where: { + MasterEmotions: { + some: { + value: { + contains: search ? search : "", + mode: "insensitive", + }, + }, + }, + }, + orderBy: { + createdAt: "desc", + }, + include: { + MasterEmotions: true, + }, + }); + + const nCount = await prisma.sticker.count({ + where: { + MasterEmotions: { + some: { + value: { + contains: search ? search : "", + mode: "insensitive", + }, + }, + }, + }, + }); + + fixData = { + data: data, + nPage: _.ceil(nCount / dataTake), + }; + } return NextResponse.json( - { success: true, message: "Success get data sticker", data: sticker }, + { success: true, message: "Success get data sticker", data: fixData }, { status: 200 } ); } catch (error) { diff --git a/src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx b/src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx index da0d3f26..e8dc25c1 100644 --- a/src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx +++ b/src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx @@ -32,7 +32,7 @@ export const apiAdminCreateSticker = async ({ data }: { data: any }) => { } }; -export const apiAdminGetSticker = async () => { +export const apiAdminGetSticker = async ({ page }: { page: number }) => { try { // Fetch token from cookie const { token } = await fetch("/api/get-cookie").then((res) => res.json()); @@ -41,7 +41,7 @@ export const apiAdminGetSticker = async () => { return null; } - const response = await fetch(`/api/sticker`, { + const response = await fetch(`/api/sticker?page=${page}`, { method: "GET", headers: { "Content-Type": "application/json", diff --git a/src/app_modules/admin/app_info/view/view_stiker.tsx b/src/app_modules/admin/app_info/view/view_stiker.tsx index 536c6890..0272401d 100644 --- a/src/app_modules/admin/app_info/view/view_stiker.tsx +++ b/src/app_modules/admin/app_info/view/view_stiker.tsx @@ -22,9 +22,10 @@ import { Switch, Table, Text, + TextInput, } from "@mantine/core"; import { useShallowEffect } from "@mantine/hooks"; -import { IconPencil, IconPlus } from "@tabler/icons-react"; +import { IconFilter, IconPencil, IconPlus } from "@tabler/icons-react"; import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime"; import { useRouter } from "next/navigation"; import { useState } from "react"; @@ -37,6 +38,7 @@ import { apiAdminGetSticker, apiAdminUpdateStatusStickerById, } from "../lib/api_fetch_stiker"; +import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint"; export default function AdminAppInformation_ViewSticker() { const router = useRouter(); @@ -49,21 +51,31 @@ export default function AdminAppInformation_ViewSticker() { }); const [loadingUpdate, setLoadingUpdate] = useState(false); const [opened, setOpened] = useState(false); + const [nPage, setNPage] = useState(1); + const [activePage, setActivePage] = useState(1); useShallowEffect(() => { - const fetchData = async () => { - try { - const response = await apiAdminGetSticker(); - if (response.success) { - setDataSticker(response.data); - } - } catch (error) { - console.error("Error fetching data", error); - } - }; + handleLoadData(); + }, [activePage]); - fetchData(); - }, []); + const handleLoadData = async () => { + try { + const response = await apiAdminGetSticker({ page: activePage }); + if (response.success) { + setDataSticker(response.data.data); + setNPage(response.data.nPage || 1); + } else { + setDataSticker([]); + } + } catch (error) { + console.error("Error fetching data", error); + setDataSticker([]); + } + }; + + const onPageClick = (page: number) => { + setActivePage(page); + }; const handleUpdateActivation = async ({ id, @@ -77,7 +89,6 @@ export default function AdminAppInformation_ViewSticker() { isActive: value, }; - try { setLoadingUpdate(true); const updt = await apiAdminUpdateStatusStickerById({ @@ -108,63 +119,73 @@ export default function AdminAppInformation_ViewSticker() { - + + {/* */} + + {!dataSticker ? ( ) : ( - - - - - - + + +
-
Aksi
-
-
Status
-
+ + + + - - - - - - {rowTable({ - dataSticker, - router, - loadingDetail, - setLoadingDetail, - setOpened, - dataUpdate, - setDataUpdate, - })} - -
+
Aksi
+
+
Status
+
-
Stiker
-
- Kategori -
-
+ +
Stiker
+ + + Kategori + + + + + {rowTable({ + dataSticker, + router, + loadingDetail, + setLoadingDetail, + setOpened, + dataUpdate, + setDataUpdate, + })} + + + + +
)} @@ -296,7 +317,7 @@ const rowTable = ({ - + {e.MasterEmotions.map((e) => (