From 6626f92ff1954f2ff755d4098ada43cf6f5a595f Mon Sep 17 00:00:00 2001 From: lukman Date: Thu, 19 Sep 2024 13:41:04 +0800 Subject: [PATCH] feat : update scroll and style Deskripsi: - update api - update globle - update project - update user - update profile No Issue --- src/app/api/user/route.ts | 4 ++ .../_global/components/reload_button_top.tsx | 2 +- .../project/ui/list_tugas_detail_project.tsx | 8 ++- .../project/ui/navbar_detail_project.tsx | 5 ++ src/module/user/member/ui/edit_member.tsx | 3 + src/module/user/member/ui/tab_list_member.tsx | 56 ++++++++++++++++--- src/module/user/profile/ui/edit_profile.tsx | 3 + 7 files changed, 70 insertions(+), 11 deletions(-) diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts index ee9c44e..75772ea 100644 --- a/src/app/api/user/route.ts +++ b/src/app/api/user/route.ts @@ -14,6 +14,8 @@ export async function GET(request: Request) { const name = searchParams.get('search') const idGroup = searchParams.get("group"); const active = searchParams.get("active"); + const page = searchParams.get('page'); + const dataSkip = Number(page) * 5 - 5; const user = await funGetUserByCookies() if (user.id == undefined) { return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); @@ -36,6 +38,8 @@ export async function GET(request: Request) { const users = await prisma.user.findMany({ + skip: dataSkip, + take: 5, where: { isActive: active == 'false' ? false : true, idGroup: String(fixGroup), diff --git a/src/module/_global/components/reload_button_top.tsx b/src/module/_global/components/reload_button_top.tsx index d60bb0d..cf2dd68 100644 --- a/src/module/_global/components/reload_button_top.tsx +++ b/src/module/_global/components/reload_button_top.tsx @@ -36,7 +36,7 @@ export default function ReloadButtonTop({ onReload, title }: { onReload: () => v style={{ ...state, zIndex: 999, - position: 'absolute', + position: 'fixed', top: 90, display: 'flex', justifyContent: 'center', diff --git a/src/module/project/ui/list_tugas_detail_project.tsx b/src/module/project/ui/list_tugas_detail_project.tsx index 81624dd..1adc62c 100644 --- a/src/module/project/ui/list_tugas_detail_project.tsx +++ b/src/module/project/ui/list_tugas_detail_project.tsx @@ -171,9 +171,13 @@ export default function ListTugasDetailProject() { - { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} > + { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} pb={20}> diff --git a/src/module/project/ui/navbar_detail_project.tsx b/src/module/project/ui/navbar_detail_project.tsx index 67ebe89..6f7d497 100644 --- a/src/module/project/ui/navbar_detail_project.tsx +++ b/src/module/project/ui/navbar_detail_project.tsx @@ -59,6 +59,10 @@ export default function NavbarDetailProject() { { router.push(param.id + '/add-task') }} + pb={20} > diff --git a/src/module/user/member/ui/edit_member.tsx b/src/module/user/member/ui/edit_member.tsx index 419d4dc..d3b27ff 100644 --- a/src/module/user/member/ui/edit_member.tsx +++ b/src/module/user/member/ui/edit_member.tsx @@ -178,6 +178,9 @@ export default function EditMember({ id }: { id: string }) { size="150" radius={"100"} src={img} + style={{ + border: `1px solid ${"#C1BFBFFF"}` + }} /> } diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx index c7ec9ef..2c9f273 100644 --- a/src/module/user/member/ui/tab_list_member.tsx +++ b/src/module/user/member/ui/tab_list_member.tsx @@ -1,9 +1,9 @@ -import { globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global" +import { currentScroll, globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global" import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core" import { useShallowEffect } from "@mantine/hooks" import { useRouter, useSearchParams } from "next/navigation" -import { useState } from "react" +import { useEffect, useState } from "react" import { HiMagnifyingGlass } from "react-icons/hi2" import { IListMember } from "../lib/type_member" import { funGetAllmember } from "../lib/api_member" @@ -25,14 +25,24 @@ export default function TabListMember() { const [nameGroup, setNameGroup] = useState('') const tema = useHookstate(TEMA) + //scroll + const { value: containerRef } = useHookstate(currentScroll); + const [isPage, setPage] = useState(1) - async function getAllUser() { + + async function getAllUser(loading: boolean) { try { setLoading(true) - const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery) + const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage) if (res.success) { - setDataMember(res.data) - setNameGroup(res.filter.name) + if (isPage == 1) { + setDataMember(res.data) + setNameGroup(res.filter.name) + } else { + setDataMember([...dataMember, ...res.data]) + setNameGroup(res.filter.name) + } + } else { toast.error(res.message) } @@ -44,10 +54,40 @@ export default function TabListMember() { } } + function onSearch(val:string){ + setSearchQuery(val) + setPage(1) + } + useShallowEffect(() => { - getAllUser() + getAllUser(true) }, [status, searchQuery]) + useShallowEffect(() => { + getAllUser(false) + }, [status, isPage]) + + useEffect(() => { + const handleScroll = async () => { + if (containerRef && containerRef.current) { + const scrollTop = containerRef.current.scrollTop; + const containerHeight = containerRef.current.clientHeight; + const scrollHeight = containerRef.current.scrollHeight; + + if (scrollTop + containerHeight >= scrollHeight) { + setPage(isPage + 1) + } + + } + }; + + const container = containerRef?.current; + container?.addEventListener("scroll", handleScroll); + return () => { + container?.removeEventListener("scroll", handleScroll); + }; + }, [containerRef, isPage]); + return ( <> @@ -63,7 +103,7 @@ export default function TabListMember() { radius={30} leftSection={} placeholder="Pencarian" - onChange={(e) => setSearchQuery(e.target.value)} + onChange={(e) => onSearch(e.target.value)} my={10} /> {loading diff --git a/src/module/user/profile/ui/edit_profile.tsx b/src/module/user/profile/ui/edit_profile.tsx index 48d6cd1..a3a47de 100644 --- a/src/module/user/profile/ui/edit_profile.tsx +++ b/src/module/user/profile/ui/edit_profile.tsx @@ -120,6 +120,9 @@ export default function EditProfile() { size="150" radius={"100"} src={img} + style={{ + border: `1px solid ${"#C1BFBFFF"}` + }} /> }