feat : calender

Deskripsi:
- update api calender
- update ui calender

No Issue

prisma/schema.prisma

@@ -117,6 +117,7 @@ model User {
   DivisionDisscussionComment DivisionDisscussionComment[]
   DivisionDocumentFolderFile DivisionDocumentFolderFile[]
   DivisionCalendar           DivisionCalendar[]
+  DivisionCalendarMember     DivisionCalendarMember[]
 }
 
 model UserLog {
@@ -371,18 +372,20 @@ model DivisionCalendar {
   idDivision               String
   title                    String
   desc                     String                     @db.Text
+  linkMeet                 String?                    @db.Text
   dateStart                DateTime                   @db.Date
-  dateEnd                  DateTime                   @db.Date
+  dateEnd                  DateTime?                  @db.Date
   timeStart                DateTime                   @db.Time()
   timeEnd                  DateTime                   @db.Time()
-  repeatEventTyper         String
+  repeatEventTyper         String // 1 = Acara 1 Kali, 2 = hari Kerja (senin - jumat), 3 = Minggu, 4 = Bulanan, 5 = Tahunan
-  reminderInterval         String
+  reminderInterval         String?
   status                   Int                        @default(0)
   isActive                 Boolean                    @default(true)
   User                     User                       @relation(fields: [createdBy], references: [id])
   createdBy                String
   createdAt                DateTime                   @default(now())
   DivisionCalendarReminder DivisionCalendarReminder[]
+  DivisionCalendarMember   DivisionCalendarMember[]
 }
 
 model DivisionCalendarReminder {
@@ -401,6 +404,17 @@ model DivisionCalendarReminder {
   updatedAt        DateTime         @updatedAt
 }
 
+model DivisionCalendarMember {
+  id               String           @id @default(cuid())
+  DivisionCalendar DivisionCalendar @relation(fields: [idCalendar], references: [id])
+  idCalendar       String
+  User             User             @relation(fields: [idUser], references: [id])
+  idUser           String
+  isActive         Boolean          @default(true)
+  createdAt        DateTime         @default(now())
+  updatedAt        DateTime         @updatedAt
+}
+
 model ContainerImage {
   id         String   @id @default(cuid())
   category   String

src/app/(application)/division/[id]/(fitur-division)/calender/[detail]/page.tsx

@@ -0,0 +1,12 @@
+import { DetailEventDivision } from '@/module/calender';
+import React from 'react';
+
+function Page() {
+  return (
+    <>
+    <DetailEventDivision />
+    </>
+  );
+}
+
+export default Page;

src/app/(application)/division/[id]/(fitur-division)/calender/create/page.tsx

@@ -1,3 +1,4 @@
+import { CreateCalenderDivisionCaleder, NavbarCreateDivisionCalender } from '@/module/calender';
 import { CreateUserDivisionCalender, UlangiEvent, ViewCreateDivisionCalender } from '@/module/division_new';
 import React from 'react';
 
@@ -9,7 +10,7 @@ function Page({ searchParams }: { searchParams: any }) {
 
   
   return (
-    <ViewCreateDivisionCalender />
+    <CreateCalenderDivisionCaleder />
   );
 }
 

src/app/(application)/division/[id]/(fitur-division)/calender/page.tsx

@@ -1,10 +1,7 @@
 import { NavbarDivisionCalender } from '@/module/calender';
-import { ViewDetailEventDivision } from '@/module/division_new';
 import React from 'react';
 
-function Page({ searchParams }: { searchParams: any }) {
+function Page() {
-  if (searchParams.page == "detail-event")
-    return <ViewDetailEventDivision />
   return (
     <NavbarDivisionCalender />
   );

src/app/api/calender/[id]/route.ts

@@ -0,0 +1,93 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import _, { result } from "lodash";
+import { NextResponse } from "next/server";
+
+// GET ONE CALENDER
+export async function GET(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { id } = context.params
+
+        const cek = await prisma.divisionCalendar.count({
+            where: {
+                id: id
+            }
+        })
+
+        if (cek == 0) {
+            return NextResponse.json(
+                {
+                    success: false,
+                    message: "Gagal mendapatkan calender, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const data = await prisma.divisionCalendar.findUnique({
+            where: {
+                id: id
+            },
+            select: {
+                id: true,
+                title: true,
+                desc: true,
+                timeStart: true,
+                dateStart: true,
+                timeEnd: true,
+                createdAt: true,
+                linkMeet: true,
+                repeatEventTyper: true,
+            }
+        });
+
+
+        const member = await prisma.divisionCalendarMember.findMany({
+            where: {
+                idCalendar: id
+            },
+            select: {
+                id: true,
+                idUser: true,
+                User: {
+                    select: {
+                        id: true,
+                        name: true,
+                        email: true
+                    }
+                }
+            }
+        })
+        const fixMember = member.map((v: any) => ({
+            ..._.omit(v, ["User"]),
+
+            name: v.User.name,
+            email: v.User.email,
+            
+        }))
+
+
+        const dataFix = {
+            calender: data,
+            member: fixMember,
+            total: fixMember.length
+        }
+
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender", data: dataFix }, { status: 200 });
+
+    } catch (error) {
+        return NextResponse.json(
+            {
+                success: false,
+                message: "Gagal mendapatkan calender, data tidak ditemukan",
+            },
+            { status: 404 }
+        );
+    }
+}

src/app/api/calender/route.ts

@@ -4,6 +4,7 @@ import { funGetUserByCookies } from "@/module/auth";
 import _ from "lodash";
 import moment from "moment";
 import { NextResponse } from "next/server";
+import "moment/locale/id";
 
 //GET ALL CALENDER
 export async function GET(request: Request) {
@@ -38,7 +39,9 @@ export async function GET(request: Request) {
                     title: true,
                     desc: true,
                     status: true,
+                    timeStart: true,
                     dateStart: true,
+                    timeEnd: true,
                     dateEnd: true,
                     createdAt: true,
                     User: {
@@ -51,7 +54,9 @@ export async function GET(request: Request) {
 
             const allOmit = data.map((v: any) => ({
                 ..._.omit(v, ["User"]),
-                user_name: v.User.name
+                user_name: v.User.name,
+                timeStart: moment(v.timeStart).format('LT'),
+                timeEnd: moment(v.timeEnd).format('LT')
             }))
 
 
@@ -66,3 +71,51 @@ export async function GET(request: Request) {
         return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, data tidak ditemukan" }, { status: 404 });
     }
 }
+
+
+//CREATE CALENDER
+export async function POST(request: Request) {
+    try {
+        const user = await funGetUserByCookies();
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { idDivision, title, desc, timeStart, timeEnd, dateStart, dateEnd, reminderInterval, repeatEventTyper } = (await request.json());
+        const userId = user.id
+        const cekDivision = await prisma.division.count({
+            where: {
+                id: idDivision,
+                isActive: true
+            }
+        })
+
+        if (cekDivision == 0) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
+        }
+
+        const data = await prisma.divisionCalendar.create({
+            data: {
+                idDivision,
+                createdBy:String(userId),
+                title,
+                timeStart,
+                timeEnd,
+                dateStart,
+                dateEnd,
+                reminderInterval,
+                repeatEventTyper,
+                desc,
+            },
+            select: {
+                id: true
+            }
+        });
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender", data: data }, { status: 200 });
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

src/module/calender/index.ts

@@ -1,3 +1,9 @@
+import CreateCalenderDivisionCaleder from "./ui/create_calender_division_caleder";
+import DetailEventDivision from "./ui/detail_event_division";
+import NavbarCreateDivisionCalender from "./ui/navbar_create_division_calender";
 import NavbarDivisionCalender from "./ui/navbar_division_calender";
 
-export { NavbarDivisionCalender }
+export { NavbarDivisionCalender }
+export { NavbarCreateDivisionCalender }
+export { CreateCalenderDivisionCaleder }
+export { DetailEventDivision }

src/module/calender/lib/api_calender.ts

@@ -1,4 +1,10 @@
 export const funGetAllCalender = async (path?: string) => {
     const response = await fetch(`/api/calender${(path) ? path : ''}`, { next: { tags: ['calender'] } });
     return await response.json().catch(() => null);
+}
+
+
+export const funGetOneCalender = async (path: string) => {
+    const response = await fetch(`/api/calender/${path}`);
+    return await response.json().catch(() => null);
 }

src/module/calender/lib/type_calender.ts

@@ -3,8 +3,28 @@ export interface IDataCalender {
     title: string
     desc: string
     status: number
+    timeStart: string
+    timeEnd: string
     dateStart: string
     dateEnd: string
     createdAt: string
     user_name: string
+}
+
+export interface IDataDetailByIdCalender {
+    id: string
+    title: string
+    desc: string
+    timeStart: string
+    dateStart: string
+    timeEnd: string
+    createdAt: string
+    linkMeet: string
+    repeatEventTyper: string
+}
+export interface IDataDetailByIdMember {
+    id: string
+    idUser: string
+    name: string
+    email: string
 }

src/module/calender/ui/date_event_division.tsx

@@ -7,43 +7,11 @@ import { funGetAllCalender } from '../lib/api_calender';
 import { useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 
-const HariIni = [
-  {
-    id: 1,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "10.00",
-    jamAkhir: "11.00",
-    dibuat: "Jhon"
-  },
-  {
-    id: 2,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "11.00",
-    jamAkhir: "12.00",
-    dibuat: "Jhon"
-  },
-]
-const Besok = [
-  {
-    id: 1,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "10.00",
-    jamAkhir: "11.00",
-    dibuat: "Jhon"
-  },
-  {
-    id: 2,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "11.00",
-    jamAkhir: "12.00",
-    dibuat: "Jhon"
-  },
-]
 
 export default function DateEventDivision() {
   const[isData, setData] = useState<IDataCalender[]>([])
   const router = useRouter()
-  const param = useParams<{ id: string }>()
+  const param = useParams<{ id: string, detail: string }>()
 
   const getData = async () => {
     try {
@@ -69,7 +37,6 @@ export default function DateEventDivision() {
   };
   return (
     <Box>
-      <pre>{JSON.stringify(isData, null, 1)}</pre>
       <Group
         justify="center"
         bg={"white"}
@@ -80,41 +47,20 @@ export default function DateEventDivision() {
       </Group>
       <Box>
         <Text mb={10} mt={20}  fw={"bold"}>Hari Ini</Text>
-        {HariIni.map((event, index) => {
+        {isData.map((event, index) => {
           const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
           const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
           return (
             <Box key={event.id} mt={10}>
-              <Box onClick={() => router.push("/calender?page=detail-event")} bg={bgColor} pl={15} p={10} style={{
+              <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
                 borderRadius: 10
               }} h={113}>
                 <Group>
                   <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
                   <Box>
-                    <Text>{event.jamAwal} - {event.jamAkhir}</Text>
+                    <Text>{event.timeStart} - {event.timeEnd}</Text>
                     <Text fw={"bold"}>{event.title}</Text>
-                    <Text>Dibuat oleh : {event.dibuat}</Text>
+                    <Text>Dibuat oleh : {event.user_name}</Text>
-                  </Box>
-                </Group>
-              </Box>
-            </Box>
-          )
-        })}
-        <Text mb={10} mt={20}  fw={"bold"}>16 Juli 2024</Text>
-        {Besok.map((event, index) => {
-          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
-          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
-          return (
-            <Box key={event.id} mt={10}>
-              <Box onClick={() => router.push("/calender?page=detail-event")}  bg={bgColor} pl={15} p={10} style={{
-                borderRadius: 10
-              }} h={113}>
-                <Group>
-                  <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                  <Box>
-                    <Text>{event.jamAwal} - {event.jamAkhir}</Text>
-                    <Text fw={"bold"}>{event.title}</Text>
-                    <Text>Dibuat oleh : {event.dibuat}</Text>
                   </Box>
                 </Group>
               </Box>

src/module/calender/ui/dawer_division_calender.tsx

@@ -1,17 +1,19 @@
 import { WARNA } from '@/module/_global';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
 import React from 'react';
 import { AiOutlineFileSearch } from 'react-icons/ai';
 import { IoAddCircle } from 'react-icons/io5';
 
 export default function DawerDivisionCalender() {
+  const param = useParams<{ id: string }>()
   return (
     <Box>
       <Stack pt={10}>
         <SimpleGrid
           cols={{ base: 2, sm: 3, lg: 3 }}
         >
-          <Flex onClick={() => window.location.href = "/calender/create"} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => window.location.href = `/division/${param.id}/calender/create`} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
@@ -19,7 +21,7 @@ export default function DawerDivisionCalender() {
               <Text ta={"center"} c={WARNA.biruTua}>Tambah Kalender</Text>
             </Box>
           </Flex>
-          <Flex onClick={() => window.location.href = "/calender/history"} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => window.location.href = `/division/${param.id}/calender/history`} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <AiOutlineFileSearch size={30} color={WARNA.biruTua} />
             </Box>

src/module/calender/ui/detail_event_division.tsx

@@ -9,6 +9,12 @@ import { FaCheck } from 'react-icons/fa6';
 import { TbCopy } from 'react-icons/tb';
 import { HiMenu } from 'react-icons/hi';
 import DrawerDetailEvent from './drawer_detail_event';
+import { useParams } from 'next/navigation';
+import { funGetOneCalender } from '../lib/api_calender';
+import { useShallowEffect } from '@mantine/hooks';
+import moment from "moment";
+import "moment/locale/id";
+import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
 const dataAnggota = [
   {
     id: 1,
@@ -44,6 +50,27 @@ const dataAnggota = [
 
 export default function DetailEventDivision() {
   const [openDrawer, setOpenDrawer] = useState(false)
+  const param = useParams<{ id: string, detail: string }>()
+  const [isDataCalender, setDataCalender] = useState<IDataDetailByIdCalender>()
+  const [isDataAnggota, setDataAnggota] = useState<IDataDetailByIdMember[]>([])
+  const [isLengthMember, setLengthMember] = useState()
+
+
+  const getData = async () => {
+    try {
+      const response = await funGetOneCalender(param.detail)
+      setDataCalender(response.data.calender)
+      setDataAnggota(response.data.member)
+      setLengthMember(response.data.total)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, [])
+
   return (
     <Box>
       <LayoutNavbarNew back="" title="Detail Event"
@@ -59,25 +86,32 @@ export default function DetailEventDivision() {
           <Stack ml={10}>
             <Group mb={10} gap={30}>
               <BsCalendar2Event size={25} color={WARNA.biruTua} />
-              <Text>Pembahasan mengenai Darmasaba</Text>
+              <Text>{isDataCalender?.title}</Text>
             </Group>
             <Group mb={10} gap={30}>
               <BsCalendarDate size={25} color={WARNA.biruTua} />
-              <Text>Senin, 24 Juni 2024</Text>
+              <Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
             </Group>
             <Group mb={10} gap={30}>
               <LuClock size={25} color={WARNA.biruTua} />
-              <Text>10:00  | 11:00 </Text>
+              <Text>{moment(isDataCalender?.timeStart).format('LT')}  | {moment(isDataCalender?.timeEnd).format('LT')} </Text>
             </Group>
             <Group mb={10} gap={30}>
               <BsCalendarDate size={25} color={WARNA.biruTua} />
-              <Text>Acara 1 Kali</Text>
+              <Text>
+                {isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
+                  isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
+                    isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
+                      isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
+                        isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
+                          ''}
+              </Text>
             </Group>
             <Group mb={10} gap={30}>
               <LuLink size={25} color={WARNA.biruTua} />
               <Group justify='space-between'>
-                <Text>http://Linkmeet.com</Text>
+                <Text>{isDataCalender?.linkMeet}</Text>
-                <CopyButton value="http://Linkmeet.com" timeout={2000}>
+                <CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
                   {({ copied, copy }) => (
                     <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
                       <ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
@@ -94,11 +128,15 @@ export default function DetailEventDivision() {
             </Group>
             <Group gap={30}>
               <MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
-              <Text>Dimohon agar tepat waktu</Text>
+              <Text>{isDataCalender?.desc}</Text>
             </Group>
           </Stack>
         </Box>
         <Box pt={20}>
+          <Group justify='space-between'>
+            <Text fw={"bold"}>Total Anggota</Text>
+            <Text>{isLengthMember} Anggota</Text>
+          </Group>
           <Box mb={20}>
             <Box
               style={{
@@ -108,7 +146,7 @@ export default function DetailEventDivision() {
               px={20}
               pt={20}
             >
-              {dataAnggota.map((v, i) => {
+              {isDataAnggota.map((v, i) => {
                 return (
                   <Flex
                     justify={"space-between"}
@@ -117,7 +155,7 @@ export default function DetailEventDivision() {
                     key={i}
                   >
                     <Group>
-                      <Avatar src={v.image} alt="it's me" size="lg" />
+                      <Avatar src={""} alt="it's me" size="lg" />
                       <Box>
                         <Text c={WARNA.biruTua} fw={"bold"}>
                           {v.name}
@@ -127,9 +165,6 @@ export default function DetailEventDivision() {
                         </Text>
                       </Box>
                     </Group>
-                    <Text c={WARNA.biruTua} fw={"bold"}>
-                      Anggota
-                    </Text>
                   </Flex>
                 );
               })}
@@ -138,7 +173,7 @@ export default function DetailEventDivision() {
         </Box>
       </Box>
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-       <DrawerDetailEvent/>
+        <DrawerDetailEvent />
       </LayoutDrawer>
     </Box>
   );

src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CreateCalenderDivisionCaleder from '../components/create_calender_division_caleder';
+import CreateCalenderDivisionCaleder from '../../../../calender/ui/create_calender_division_caleder';
 
 export default function ViewCreateDivisionCalender() {
   return (

src/module/division_new/_division_fitur/calender/view/view_detail_event_division.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import DetailEventDivision from '../components/detail_event_division';
+import DetailEventDivision from '../../../../calender/ui/detail_event_division';
 
 export default function ViewDetailEventDivision() {
   return (
-    <DetailEventDivision/>
+    <DetailEventDivision />
   );
 }