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

feat : update announcement

api.http

@@ -175,25 +175,24 @@ Content-Type: application/json
    
     "title": "cobaannouncement1 dsdsd",
     "desc": "coba announcement sdsdsd",
-    "idVillage": "121212",
+    "idVillage": "desa1",
-    "createBy": "111",
+    "createBy": "superAdminLukman",
     "groups": [
     {
-      "idGroup": "1",
+      "idGroup": "group1",
       "idDivision": "1"
     },
-    {
-      "idGroup": "1",
-      "idDivision": "2"
-    }
   ]
 }
 
 ###
-GET http://localhost:3000/api/announcement/get?path=get-all-announcement&groupID=1&villageID=121212&createBy=111&divisionID=1 HTTP/1.1
+GET http://localhost:3000/api/announcement/get?path=get-all-announcement HTTP/1.1
 
 ###
-GET http://localhost:3000/api/announcement/get?path=get-one-announcement&announcementId=clz6kqzvt000eb3mle1nyz6fd HTTP/1.1
+GET http://localhost:3000/api/announcement/get?path=get-all-announcement&divisionI=1 HTTP/1.1
+
+###
+GET http://localhost:3000/api/announcement/get?path=get-one-announcement&announcementId=1 HTTP/1.1
 
 ###
 POST http://localhost:3000/api/announcement/post?path=update-announcement HTTP/1.1

src/module/announcement/api/get/getAllAnnouncement.ts

@@ -1,42 +1,33 @@
 import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import _ from "lodash";
+import moment from "moment";
+import "moment/locale/id";
 import { NextRequest } from "next/server";
 
 export async function getAllAnnouncement(req: NextRequest) {
   try {
-    const searchParams = req.nextUrl.searchParams;
+    const user = await funGetUserByCookies();
-    const groupID = searchParams.get("groupID");
+    const villageId = user.idVillage
-    const villageID = searchParams.get("villageID");
-    const createBy = searchParams.get("createBy");
-    const divisionID = searchParams.get("divisionID");
     const announcements = await prisma.announcement.findMany({
       where: {
-        idVillage: String(villageID),
+        idVillage: String(villageId),
-        createdBy: String(createBy),
         isActive: true,
       },
       select: {
         id: true,
         title: true,
         desc: true,
+        createdAt: true,
       },
     });
 
-    const announcementMember = await prisma.announcementMember.findMany({
+    const allData = announcements.map((v: any) => ({
-      where: {
+      ..._.omit(v, ["createdAt"]),
-        idGroup: String(groupID),
+      createdAt: moment(v.createdAt).format("LL")
-        idDivision: String(divisionID),
+    }))
-        idAnnouncement: {
-          in: announcements.map((announcement: any) => announcement.id),
-        },
-      },
-      select: {
-        idAnnouncement: true,
-        idGroup: true,
-        idDivision: true,
-      },
-    });
 
-    return Response.json({ announcements, announcementMember });
+    return Response.json(allData);
   } catch (error) {
     console.error(error);
     return Response.json(

src/module/announcement/api/get/getOneAnnouncement.ts

@@ -1,4 +1,5 @@
 import { prisma } from "@/module/_global";
+import _ from "lodash";
 import { NextRequest } from "next/server";
 
 export async function getOneAnnouncement(req: NextRequest) {
@@ -23,10 +24,20 @@ export async function getOneAnnouncement(req: NextRequest) {
         idAnnouncement: true,
         idGroup: true,
         idDivision: true,
+        Group: {
+          select: {
+            name: true,
+          },
+        },
       },
     });
 
-    return Response.json({ announcement, announcementMember });
+    const allAnnouncementMember = announcementMember.map((v: any) => ({
+      ..._.omit(v, ["Group"]),
+      group: v.Group.name,
+    }))
+
+    return Response.json({ announcement, allAnnouncementMember });
   } catch (error) {
     console.error(error);
     return Response.json(

src/module/announcement/component/create_announcement.tsx

@@ -1,10 +1,11 @@
 'use client'
 import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import { Box, Button, Group, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiOutlineChevronRight } from "react-icons/hi2";
+import { IoIosArrowForward } from "react-icons/io";
 
 export default function CreateAnnouncement() {
    const [isOpen, setOpen] = useState(false)
@@ -19,14 +20,10 @@ export default function CreateAnnouncement() {
    return (
       <Box>
          <Stack
-            align="center"
+            p={20}
-            justify="center"
-            gap="xs"
-            pt={30}
-            px={20}
          >
             <TextInput
-               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                styles={{
                   input: {
                      color: WARNA.biruTua,
@@ -37,7 +34,7 @@ export default function CreateAnnouncement() {
             />
             <Textarea
                size="md"
-               radius={20}
+               radius={10}
                w={"100%"}
                label="Pengumuman"
                withAsterisk
@@ -50,10 +47,18 @@ export default function CreateAnnouncement() {
                   },
                }}
             />
-
+            <Box pt={10}>
-            <Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               <Group justify="space-between" style={{
-               Pilih Anggota
+                  border: `1px solid ${WARNA.biruTua}`,
-            </Button>
+                  padding: 10,
+                  borderRadius: 10
+               }}>
+                  <Text size="sm">
+                     Tambah Anggota
+                  </Text>
+                  <IoIosArrowForward />
+               </Group>
+            </Box>
          </Stack>
          <Box mt={30} mx={20}>
             <Button

src/module/announcement/component/detail_announcement.tsx

@@ -1,37 +1,80 @@
-import { Box, Group, Stack, Text } from "@mantine/core";
+"use client"
+import { API_ADDRESS } from "@/module/_global";
+import { Box, Flex, Grid, Group, Spoiler, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
 import { BsCardText } from "react-icons/bs";
 import { TfiAnnouncement } from "react-icons/tfi";
 
-export default function DetailAnnouncement() {
+export interface RootAll {
+   announcement: Announcement
+   allAnnouncementMember: AllAnnouncementMember[]
+}
+
+export interface Announcement {
+   id: string
+   title: string
+   desc: string
+}
+
+export interface AllAnnouncementMember {
+   idAnnouncement: string
+   idGroup: string
+   idDivision: string
+   group: string
+}
+
+
+export default function DetailAnnouncement({ id }: { id: string }) {
+   const [isData, setIsData] = useState<RootAll>()
+
+   async function fetchOneAnnouncement() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetOneAnnouncement}&announcementId=${id}`)
+         const data = await res.json()
+         setIsData(data)
+      } catch (error) {
+         console.error(error)
+         throw new Error("Error")
+      }
+   }
+
+   useShallowEffect(() => {
+      fetchOneAnnouncement()
+   }, [])
+
    return (
       <Box py={30} px={20}>
          <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
             <Stack>
                <Group>
                   <TfiAnnouncement size={25} />
-                  <Text fw={'bold'}>Pengumuman Dinas</Text>
+                  <Text fw={'bold'}>{isData?.announcement.title}</Text>
                </Group>
-               <Group>
+               <Grid gutter={'md'}>
+                  <Grid.Col span={1}>
                      <BsCardText size={25} />
-                  <Text>Pengumuman agar menggunakan</Text>
+                  </Grid.Col>
-               </Group>
+                  <Grid.Col span={11}>
+                     <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                        <Text>{isData?.announcement.desc}</Text>
+                     </Spoiler>
+                  </Grid.Col>
+               </Grid>
             </Stack>
          </Box>
          <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
-            <Stack>
+            {isData?.allAnnouncementMember.map((v, i) => {
+               return (
+                  <Stack key={i}>
                      <Text fw={'bold'}>Anggota</Text>
-               <Group>
+                     <Flex direction={"column"} gap={10}>
-                  <Text>LPD</Text>
+                        <Text>{v.group}</Text>
-               </Group>
+                     </Flex>
-               <Group>
-                  <Text>PKK</Text>
-               </Group>
-               <Group>
-                  <Text>Karang Taruna</Text>
-               </Group>
                   </Stack>
+               )
+            })}
          </Box>
       </Box>
-
    )
 }

src/module/announcement/component/list_announcement.tsx

@@ -1,72 +1,38 @@
 'use client'
-import { WARNA } from '@/module/_global';
+import { API_ADDRESS, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import React, { useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
 
-const dataPengumuman = [
+type dataAnnouncement = {
-   {
+   id: string,
-      id: 1,
+   title: string,
-      name: 'Lembaga Pengkreditan Desa',
+   desc: string,
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
+   createdAt: string
-      grup: 'Dinas',
+}
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 2,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 3,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Adat',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 4,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 5,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'PKK',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 6,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Karang Taruna',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 7,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 8,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara ben...',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-]
 
 export default function ListAnnouncement() {
+   const [isData, setIsData] = useState<dataAnnouncement[]>([])
    const router = useRouter()
+
+   async function fetchGetAllAnnouncement() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetAllAnnouncement}`)
+         const data = await res.json()
+         setIsData(data)
+      } catch (error) {
+         console.error(error)
+         throw new Error("Error")
+      }
+   }
+
+   useShallowEffect(() => {
+      fetchGetAllAnnouncement()
+   }, [])
+
    return (
       <Box p={20}>
          <TextInput
@@ -82,12 +48,10 @@ export default function ListAnnouncement() {
             leftSection={<HiMagnifyingGlass size={20} />}
             placeholder="Pencarian"
          />
-         {dataPengumuman.map((v, i) => {
+         {isData.map((v, i) => {
             return (
                <Box key={i} mt={15}>
-                  <Box onClick={() => {
+                  <Box >
-                     router.push(`/announcement/${v.id}`)
-                  }}>
                      <Grid>
                         <Grid.Col span={2}>
                            <Center>
@@ -97,16 +61,22 @@ export default function ListAnnouncement() {
                            </Center>
                         </Grid.Col>
                         <Grid.Col span={10}>
-                           <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                           <Group justify='space-between' mb={5} onClick={() => {
-                           <Text  c={WARNA.biruTua} truncate={'end'}>{v.desc}</Text>
+                              router.push(`/announcement/${v.id}`)
-                           <Group justify='space-between' mt={5}>
+                           }}>
-                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.grup}</Text>
+                              <Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
-                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.tgl}</Text>
+                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
                            </Group>
+                           {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
+                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                              <Text c={WARNA.biruTua} onClick={() => {
+                                 router.push(`/announcement/${v.id}`)
+                              }} >{v.desc}</Text>
+                           </Spoiler>
                         </Grid.Col>
                      </Grid>
                   </Box>
-                  <Divider my={15}/>
+                  <Divider my={15} />
                </Box>
             )
          })}

src/module/announcement/view/view_detail_anouncement.tsx

@@ -6,7 +6,7 @@ export default function ViewDetailAnnouncement({ data }: { data: string }) {
    return (
       <Box>
          <NavbarDetailAnnouncement />
-         <DetailAnnouncement />
+         <DetailAnnouncement id={data} />
       </Box>
    )
 }

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

@@ -12,7 +12,6 @@ export async function getAllPosition(req: NextRequest) {
     const active = searchParams.get('active');
     const name = searchParams.get('name')
     const user = await funGetUserByCookies()
-    console.log(groupID)
 
     if (groupID == "null") {
       grupFix = user.idGroup