Merge pull request #95 from bipproduction/lukman/7-agustus-2024

feat : update search

src/module/group/api/get/listGroup.ts

@@ -8,10 +8,15 @@ export async function listGroups(req: NextRequest): Promise<Response> {
     const searchParams = req.nextUrl.searchParams
     const villaId = user.idVillage
     const active = searchParams.get('active');
+    const name = searchParams.get('name');
     const groups = await prisma.group.findMany({
       where: {
         isActive: (active == "true" ? true : false),
         idVillage: String(villaId),
+        name: {
+          contains: String(name),
+          mode: "insensitive"
+        }
       },
       select: {
         id: true,

src/module/group/components/list_group_active.tsx

@@ -26,6 +26,7 @@ export default function ListGroupActive({ status }: { status: boolean }) {
   const [isData, setData] = useState<dataGroup[]>([]);
   const [selectId, setSelectId] = useState<string | null>(null);
   const [active, setActive] = useState<boolean | null>(null);
+  const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true);
 
   const getData = async () => {
@@ -33,7 +34,7 @@ export default function ListGroupActive({ status }: { status: boolean }) {
       setData([]);
       setLoading(true);
       const res = await fetch(
-        `${API_ADDRESS.apiGetAllGroup}&villageId=121212&active=` + status
+        `${API_ADDRESS.apiGetAllGroup}&villageId=121212&active=${status}&name=${searchQuery}`
       );
       const data = await res.json();
       setData(data);
@@ -52,7 +53,7 @@ export default function ListGroupActive({ status }: { status: boolean }) {
 
   useShallowEffect(() => {
     getData();
-  }, [status]);
+  }, [status, searchQuery]);
 
   return (
     <Box pt={20}>
@@ -68,6 +69,7 @@ export default function ListGroupActive({ status }: { status: boolean }) {
         radius={30}
         leftSection={<HiMagnifyingGlass size={20} />}
         placeholder="Pencarian"
+        onChange={(e) => setSearchQuery(e.target.value)}
       />
       {loading
         ? Array(6)

src/module/position/api/get/getAllPosition.ts

@@ -10,6 +10,7 @@ export async function getAllPosition(req: NextRequest) {
     const searchParams = req.nextUrl.searchParams
     const groupID = searchParams.get('groupId');
     const active = searchParams.get('active');
+    const name = searchParams.get('name')
     const user = await funGetUserByCookies()
     console.log(groupID)
 
@@ -23,6 +24,10 @@ export async function getAllPosition(req: NextRequest) {
       where: {
         idGroup: String(grupFix),
         isActive: (active == "true" ? true : false),
+        name: {
+          contains: String(name),
+          mode: "insensitive"
+        }
       },
       select: {
         id: true,

src/module/position/component/ui/list_position_active.tsx

@@ -24,6 +24,7 @@ export default function ListPositionActive({ status }: { status: boolean }) {
   const [loading, setLoading] = useState(true);
   const [selectId, setSelectId] = useState<string | null>(null);
   const [active, setActive] = useState<boolean | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
   const searchParams = useSearchParams()
   const group = searchParams.get('group')
 
@@ -31,7 +32,7 @@ export default function ListPositionActive({ status }: { status: boolean }) {
     try {
       setDataPosition([]);
       setLoading(true)
-      const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&active=${status}&groupId=${group}`);
+      const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&active=${status}&groupId=${group}&name=${searchQuery}`);
       const data = await res.json();
       setDataPosition(data);
       setLoading(false);
@@ -44,7 +45,7 @@ export default function ListPositionActive({ status }: { status: boolean }) {
 
   useShallowEffect(() => {
     getAllPosition();
-  }, [status, group])
+  }, [status, group, searchQuery])
 
   return (
     <Box pt={20}>
@@ -60,6 +61,7 @@ export default function ListPositionActive({ status }: { status: boolean }) {
         radius={30}
         leftSection={<HiMagnifyingGlass size={20} />}
         placeholder="Pencarian"
+        onChange={(e) => setSearchQuery(e.target.value)}
       />
       {loading ? Array(6).fill(null).map((_, i) => (
         <Box key={i}>

src/module/user/api/get/getAllUser.ts

@@ -10,6 +10,7 @@ export async function getAllUser(req: NextRequest) {
     const idGroup = searchParams.get("groupId");
     const active = searchParams.get("active");
     const user = await funGetUserByCookies();
+    const name = searchParams.get("name")
 
     if (idGroup == "null" || idGroup == undefined) {
       fixGroup = user.idGroup
@@ -21,6 +22,10 @@ export async function getAllUser(req: NextRequest) {
       where: {
         isActive: active == "true" ? true : false,
         idGroup: String(fixGroup),
+        name: {
+          contains: String(name),
+          mode: "insensitive",
+        }
       },
       select: {
         id: true,

src/module/user/member/component/list_member.tsx

@@ -26,21 +26,6 @@ export default function ListMember() {
                </Tabs.Tab>
             </Tabs.List>
 
-            <TextInput
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               size="md"
-               radius={30}
-               leftSection={<HiMagnifyingGlass size={20} />}
-               placeholder="Pencarian" 
-               my={10}
-            />
-
             <Tabs.Panel value="aktif">
                <TabListMember status={true} />
             </Tabs.Panel>

src/module/user/member/component/ui/tab_list_member.tsx

@@ -1,10 +1,10 @@
 
 import { API_ADDRESS, WARNA } from "@/module/_global"
-import { Box, Group, ActionIcon, Text } from "@mantine/core"
+import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
-import { HiMiniUser } from "react-icons/hi2"
+import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2"
 
 type dataMember = {
    id: string,
@@ -23,13 +23,14 @@ export default function TabListMember({ status }: { status: boolean }) {
    const [loading, setLoading] = useState(true);
    const [dataMember, setDataMember] = useState<dataMember[]>([])
    const searchParams = useSearchParams()
+   const [searchQuery, setSearchQuery] = useState('')
    const group = searchParams.get('group')
 
 
    async function getAllUser() {
       try {
          setLoading(true)
-         const res = await fetch(`${API_ADDRESS.apiGetAllUser}&active=${status}&groupId=${group}`  )
+         const res = await fetch(`${API_ADDRESS.apiGetAllUser}&active=${status}&groupId=${group}&name=${searchQuery}`)
          const data = await res.json()
 
          setDataMember(data)
@@ -43,32 +44,49 @@ export default function TabListMember({ status }: { status: boolean }) {
 
    useShallowEffect(() => {
       getAllUser()
-   }, [status])
+   }, [status, searchQuery])
 
    return (
       <>
-         {dataMember.map((v, i) => {
+         <Box>
-            return (
+            <TextInput
-               <Box pt={20} key={i} onClick={() => {
+               styles={{
-                  router.push(`/member/${v.id}`)
+                  input: {
-               }}>
+                     color: WARNA.biruTua,
-                  <Group align='center' style={{
+                     borderRadius: WARNA.biruTua,
-                     borderBottom: `1px solid #D9D9D9`,
+                     borderColor: WARNA.biruTua,
-                     padding: 10,
+                  },
-                  }} >
+               }}
-                     <Box>
+               size="md"
-                        <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+               radius={30}
-                           <HiMiniUser color={'white'} size={25} />
+               leftSection={<HiMagnifyingGlass size={20} />}
-                        </ActionIcon>
+               placeholder="Pencarian"
-                     </Box>
+               onChange={(e) => setSearchQuery(e.target.value)}
-                     <Box>
+               my={10}
-                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+            />
-                        <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+            {dataMember.map((v, i) => {
-                     </Box>
+               return (
-                  </Group>
+                  <Box pt={20} key={i} onClick={() => {
-               </Box>
+                     router.push(`/member/${v.id}`)
-            )
+                  }}>
-         })}
+                     <Group align='center' style={{
+                        borderBottom: `1px solid #D9D9D9`,
+                        padding: 10,
+                     }} >
+                        <Box>
+                           <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                              <HiMiniUser color={'white'} size={25} />
+                           </ActionIcon>
+                        </Box>
+                        <Box>
+                           <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                           <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                        </Box>
+                     </Group>
+                  </Box>
+               )
+            })}
+         </Box>
       </>
    )
 }