feat : update add calender

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

@@ -93,3 +93,50 @@ export async function GET(request: Request, context: { params: { id: string } })
     }
 }
 
+// DELETE CALENDER BY ID
+export async function DELETE(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 menghapus calender, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const data = await prisma.divisionCalendar.update({
+            where: {
+                id: id
+            },
+            data: {
+                isActive: false
+            }
+        });
+
+        return NextResponse.json({ success: true, message: "Berhasil menghapus calender", data }, { status: 200 });
+
+    } catch (error) {
+        return NextResponse.json(
+            {
+                success: false,
+                message: "Gagal menghapus calender, coba lagi nanti",
+            },
+            { status: 500 }
+        );
+    }
+}

src/app/api/calender/route.ts

@@ -81,7 +81,9 @@ export async function POST(request: Request) {
             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 { idDivision, title, desc, timeStart, timeEnd, dateStart, dateEnd, repeatEventTyper, member, linkMeet } = (await request.json());
+
+
         const userId = user.id
         const cekDivision = await prisma.division.count({
             where: {
@@ -94,25 +96,61 @@ export async function POST(request: Request) {
             return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
         }
 
+        if (timeStart > timeEnd) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, waktu mulai harus lebih kecil dari waktu berakhir" }, { status: 404 });
+        }
+
+        if (dateStart > dateEnd) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, Tanggal mulai harus lebih kecil dari Tanggal berakhir" }, { status: 404 });
+        }
+
+        if (dateStart < moment().format("YYYY-MM-DD")) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, Tanggal mulai harus lebih kecil dari Tanggal sekarang" }, { status: 404 });
+        }
+
+        if (dateEnd < moment().format("YYYY-MM-DD")) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, Tanggal berakhir harus lebih kecil dari Tanggal sekarang" }, { status: 404 });
+        }
+
+        const statusCalender = 0
+
+        const y = new Date('1970-01-01 ' + timeStart)
+        const x = new Date('1970-01-01 ' + timeEnd)
+        const timeStartFix = new Date(y.getTime() - (y.getTimezoneOffset() * 60000)).toISOString()
+        const timeEndFix = new Date(x.getTime() - (x.getTimezoneOffset() * 60000)).toISOString()
+
         const data = await prisma.divisionCalendar.create({
             data: {
                 idDivision,
-                createdBy:String(userId),
+                createdBy: String(userId),
                 title,
-                timeStart,
+                dateStart: new Date(dateStart),
-                timeEnd,
+                timeStart: timeStartFix,
-                dateStart,
+                timeEnd: timeEndFix,
-                dateEnd,
+                linkMeet,
-                reminderInterval,
                 repeatEventTyper,
                 desc,
+                status: statusCalender
             },
             select: {
-                id: true
+                id: true,
+
             }
         });
 
-        return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender", data: data }, { status: 200 });
+        const omitMember = member.map((v: any) => ({
+            ..._.omit(v, ["name", "idUser"]),
+            idCalendar: data.id,
+            idUser: v.idUser
+        }))
+
+        const insertMember = await prisma.divisionCalendarMember.createMany({
+            data: omitMember
+        });
+
+
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender" }, { status: 200 });
 
     } catch (error) {
         console.error(error);

src/module/calender/lib/api_calender.ts

@@ -1,10 +1,29 @@
+import { IFormCreateCalender } from "./type_calender";
+
 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);
 }
+
+export const funCreateCalender = async (data: IFormCreateCalender) => {
+    const response = await fetch("/api/calender", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+export const funDeleteCalenderById = async (path: string) => {
+    const response = await fetch(`/api/calender/${path}`, {
+        method: "DELETE",
+    });
+    return await response.json().catch(() => null);
+}

src/module/calender/lib/type_calender.ts

@@ -28,3 +28,23 @@ export interface IDataDetailByIdMember {
     name: string
     email: string
 }
+
+export interface IFormCreateCalender {
+    idDivision: string
+    title: string
+    dateStart: String
+    timeStart: string
+    timeEnd: string
+    linkMeet: string
+    repeatEventTyper: string
+    desc: string,
+    member: IFormMemberCalender[]
+}
+
+export interface IFormMemberCalender {
+    idCalender: string
+    idUser: {
+        id: string
+        name: string
+    }[]
+}

src/module/calender/lib/val_calender.ts

@@ -0,0 +1,5 @@
+import { hookstate } from "@hookstate/core";
+import { IFormMemberCalender } from "./type_calender";
+
+
+export const globalCalender = hookstate<IFormMemberCalender[]>([])

src/module/calender/ui/create_user_calender.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { globalCalender } from '../lib/val_calender';
+import { useParams, useRouter } from 'next/navigation';
+import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
+import { useHookstate } from '@hookstate/core';
+import toast from 'react-hot-toast';
+import { useShallowEffect } from '@mantine/hooks';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Avatar, Box, Button, Divider, Flex, Group, Text } from '@mantine/core';
+import { FaCheck } from 'react-icons/fa6';
+
+export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
+  const router = useRouter()
+  const param = useParams<{ id: string }>()
+  const [selectedFiles, setSelectedFiles] = useState<any>([])
+  const [isData, setData] = useState<IDataMemberDivision[]>([])
+  const member = useHookstate(globalCalender)
+  const [selectAll, setSelectAll] = useState(false)
+
+  async function getData() {
+    try {
+      const response = await funGetDivisionById(param.id)
+      if (response.success) {
+        setData(response.data.member)
+        if (member.length > 0) {
+          setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
+        }
+      } else {
+        toast.error(response.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    }
+  }
+
+
+  useShallowEffect(() => {
+    getData()
+  }, []);
+
+  const handleFileClick = (index: number) => {
+    if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
+      setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
+    } else {
+      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }])
+    }
+  };
+
+
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      for (let index = 0; index < isData.length; index++) {
+        if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
+          const newArr = {
+            idUser: isData[index].idUser, name: isData[index].name
+          }
+          setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
+        }
+
+      }
+    } else {
+      setSelectedFiles([]);
+    }
+  };
+
+
+  function onSubmit() {
+    if (selectedFiles.length == 0) {
+      return toast.error("Error! silahkan pilih anggota")
+    }
+    member.set(selectedFiles)
+    onClose(true)
+  }
+
+  return (
+    <Box>
+    <LayoutNavbarNew
+      // back=""
+      title="Pilih Anggota"
+      menu
+    />
+    <Box p={20}>
+      <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+        <Text c={WARNA.biruTua} fw={"bold"}>
+          Pilih Semua Anggota
+        </Text>
+        {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+      </Group>
+      <Box mt={15}>
+        {isData.map((v, i) => {
+          const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+          return (
+            <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
+              <Flex justify={"space-between"} align={"center"}>
+                <Group>
+                  <Avatar src={"v.image"} alt="it's me" size="lg" />
+                  <Text style={{
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}>
+                    {v.name}
+                  </Text>
+                </Group>
+                <Text
+                  style={{
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingLeft: 20,
+                  }}
+                >
+                  {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                </Text>
+              </Flex>
+              <Divider my={"md"} />
+            </Box>
+          );
+        })}
+      </Box>
+      <Box mt={"xl"}>
+        <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => {onSubmit()}}
+        >
+          Simpan
+        </Button>
+      </Box>
+    </Box>
+  </Box>
+  );
+}

src/module/calender/ui/drawer_detail_event.tsx

@@ -2,26 +2,45 @@
 import { WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
-import { useRouter } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { AiOutlineFileSearch } from 'react-icons/ai';
 import { IoAddCircle } from 'react-icons/io5';
 import { MdDelete, MdEdit } from 'react-icons/md';
+import { funDeleteCalenderById } from '../lib/api_calender';
 
 export default function DrawerDetailEvent() {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
+  const param = useParams<{ id: string, detail: string }>()
 
-  function onTrue(val: boolean) {
+  async function fetchDeleteCalender(val: boolean) {
+    try {
       if (val) {
-      toast.success("Sukses! Data dihapus");
+        const response = await funDeleteCalenderById(
+          param.detail
+        )
+        if (response.success) {
+          toast.success(response.message)
+          setModal(false)
+          router.push(`/division/${param.id}/calender`)
+        } else {
+          toast.error(response.message)
+        }
       }
       setModal(false)
+    } catch (error) {
+      console.log(error);
+      setModal(false)
+      toast.error("Gagal hapus calender, coba lagi nanti");
     }
+  }
+
   return (
     <Box>
       <Stack pt={10}>
+        {JSON.stringify(param)}
         <SimpleGrid
           cols={{ base: 3, sm: 3, lg: 3 }}
         >
@@ -45,7 +64,7 @@ export default function DrawerDetailEvent() {
       </Stack>
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menghapus data?"
-        onYes={(val) => { onTrue(val) }} />
+        onYes={(val) => { fetchDeleteCalender(val) }} />
     </Box>
   );
 }

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -1,15 +1,37 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, Button, Group, Input, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
-import { useRouter } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import toast from 'react-hot-toast';
+import moment from 'moment';
+import { useHookstate } from '@hookstate/core';
+import { globalCalender } from '../lib/val_calender';
+import { IFormMemberCalender } from '../lib/type_calender';
+import { funCreateCalender } from '../lib/api_calender';
+import CreateUserCalender from './create_user_calender';
 
 export default function NavbarCreateDivisionCalender() {
+  const [value, setValue] = useState<Date | null>(null);
+  const router = useRouter()
   const [isModal, setModal] = useState(false)
+  const memberUser = useHookstate(globalCalender)
+  const memberValue = memberUser.get() as IFormMemberCalender[]
+  const [openMember, setOpenMember] = useState(false)
+  const param = useParams<{ id: string, detail: string }>()
+  const [isData, setData] = useState({
+    idDivision: "",
+    title: "",
+    dateStart: "",
+    timeStart: "",
+    timeEnd: "",
+    linkMeet: "",
+    repeatEventTyper: "1",
+    desc: "",
+  })
 
   function onTrue(val: boolean) {
     if (val) {
@@ -17,12 +39,66 @@ export default function NavbarCreateDivisionCalender() {
     }
     setModal(false)
   }
-  const [value, setValue] = useState<Date | null>(null);
+
-  const router = useRouter()
+  async function onSubmit() {
+    try {
+      if (isData.timeStart >  isData.timeEnd) {
+       return toast.error("Waktu Akhir Tidak tepat");
+    }
+      const response = await funCreateCalender({
+        idDivision: param.id,
+        title: isData.title,
+        dateStart: isData.dateStart,
+        timeStart: isData.timeStart,
+        timeEnd: isData.timeEnd,
+        linkMeet: isData.linkMeet,
+        repeatEventTyper: isData.repeatEventTyper,
+        desc: isData.desc,
+        member: memberValue
+      })
+
+      if (response.success) {
+        toast.success(response.message)
+        setModal(false)
+        setData({
+          ...isData,
+          title: "",
+          dateStart: "",
+          timeStart: "",
+          timeEnd: "",
+          linkMeet: "",
+          repeatEventTyper: "1",
+          desc: "",
+        })
+        memberUser.set([])
+      } else {
+        toast.error(response.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
+    }
+    console.log({
+      idDivision: param.id,
+      title: isData.title,
+      dateStart: isData.dateStart,
+      timeStart: isData.timeStart,
+      timeEnd: isData.timeEnd,
+      linkMeet: isData.linkMeet,
+      repeatEventTyper: isData.repeatEventTyper,
+      desc: isData.desc,
+      member: memberValue
+    })
+  }
+
+  if(openMember) return <CreateUserCalender onClose={() => setOpenMember(false)}/>
+
+
   return (
     <Box>
       <LayoutNavbarNew back="/calender" title="tambah kalender" menu />
       <Box p={20}>
+        {/* <pre>{JSON.stringify(param.id, null, 1)}</pre> */}
         <Stack>
           <TextInput
             styles={{
@@ -34,6 +110,8 @@ export default function NavbarCreateDivisionCalender() {
             size="md"
             placeholder="Event Nama"
             label="Event Nama"
+            value={isData.title}
+            onChange={(event) => setData({ ...isData, title: event.target.value })}
           />
           <DateInput
             styles={{
@@ -44,9 +122,13 @@ export default function NavbarCreateDivisionCalender() {
             }}
             size="md"
             value={value}
-            onChange={setValue}
+            onChange={(val) => {
+              setValue(val);
+              setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") });
+            }}
           placeholder="Input Tanggal"
           label="Tanggal"
+          minDate={new Date()}
           />
           <SimpleGrid
             cols={{ base: 2, sm: 2, lg: 2 }}
@@ -60,6 +142,8 @@ export default function NavbarCreateDivisionCalender() {
               }}
               size="md"
               label="Waktu Awal"
+              value={isData.timeStart}
+              onChange={(event) => setData({ ...isData, timeStart: event.target.value })}
             />
             <TimeInput
               styles={{
@@ -70,6 +154,8 @@ export default function NavbarCreateDivisionCalender() {
               }}
               size="md"
               label="Waktu Akhir"
+              value={isData.timeEnd}
+              onChange={(event) => setData({ ...isData, timeEnd: event.target.value })}
             />
           </SimpleGrid>
           <TextInput
@@ -82,6 +168,8 @@ export default function NavbarCreateDivisionCalender() {
             size="md"
             placeholder="Link Meet"
             label="Link Meet"
+            value={isData.linkMeet}
+            onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
           />
           <Box mt={5} onClick={() => router.push('/calender/create?page=ulangi-event')}>
             <Group
@@ -96,7 +184,7 @@ export default function NavbarCreateDivisionCalender() {
               <IoIosArrowDropright size={25} />
             </Group>
           </Box>
-          <Box mt={5} onClick={() => router.push('/calender/create?page=user-calender')}>
+          <Box mt={5} onClick={() => setOpenMember(true)}>
             <Group
               justify="space-between"
               p={10}
@@ -115,7 +203,55 @@ export default function NavbarCreateDivisionCalender() {
               borderRadius: 10,
             },
           }}
-            size="md" placeholder='Deskripsi' label="Deskripsi" />
+            value={isData.desc}
+            size="md" placeholder='Deskripsi' label="Deskripsi"
+            onChange={(event) => setData({ ...isData, desc: event.target.value })}
+          />
+                  {
+          memberUser.length > 0 &&
+          <Box pt={30}>
+            <Group justify="space-between">
+              <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
+              <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
+            </Group>
+            <Box pt={10}>
+              <Box mb={20}>
+                <Box
+                  style={{
+                    border: `1px solid ${"#C7D6E8"}`,
+                    borderRadius: 10,
+                  }}
+                  px={20}
+                  py={10}
+                >
+                  {memberUser.get().map((v: any, i: any) => {
+                    return (
+                      <Flex
+                        justify={"space-between"}
+                        align={"center"}
+                        mt={20}
+                        key={i}
+                      >
+                        <Group>
+                          <Avatar src={"v.image"} alt="it's me" size="lg" />
+                          <Box>
+                            <Text c={WARNA.biruTua} fw={"bold"}>
+                              {v.name}
+                            </Text>
+                          </Box>
+                        </Group>
+                        <Text c={WARNA.biruTua} fw={"bold"}>
+                          Anggota
+                        </Text>
+                      </Flex>
+                    );
+                  })}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        }
+
           <Box mt={"xl"}>
             <Button
               c={"white"}
@@ -123,7 +259,7 @@ export default function NavbarCreateDivisionCalender() {
               size="lg"
               radius={30}
               fullWidth
-              onClick={() => setModal(true)}
+              onClick={onSubmit}
             >
               Simpan
             </Button>