feat : update dit calender

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

@@ -0,0 +1,14 @@
+import { UpdateDivisionCalender } from '@/module/calender';
+import React from 'react';
+
+function Page({ searchParams }: { searchParams: any }) {
+  // if (searchParams.page == "update-ulangi-event")
+  //   return <UpdateUlangiEvent />
+  // if (searchParams.page == "update-user-calender")
+  //   return <UpdateUserDivisionCalender />
+  return (
+    <UpdateDivisionCalender/>
+  );
+}
+
+export default Page;

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

@@ -1,14 +0,0 @@
-import { UpdateUlangiEvent, UpdateUserDivisionCalender, ViewUpdateDivisionCalender } from '@/module/division_new';
-import React from 'react';
-
-function Page({ searchParams }: { searchParams: any }) {
-  if (searchParams.page == "update-ulangi-event")
-    return <UpdateUlangiEvent />
-  if (searchParams.page == "update-user-calender")
-    return <UpdateUserDivisionCalender />
-  return (
-    <ViewUpdateDivisionCalender/>
-  );
-}
-
-export default Page;

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

@@ -2,6 +2,7 @@
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _, { result } from "lodash";
+import moment from "moment";
 import { NextResponse } from "next/server";
 
 // GET ONE CALENDER
@@ -47,6 +48,12 @@ export async function GET(request: Request, context: { params: { id: string } })
             }
         });
 
+        const { ...dataCalender } = data
+        const timeStart = moment.utc(dataCalender?.timeStart).format("HH:mm")
+        const timeEnd = moment.utc(dataCalender?.timeEnd).format("HH:mm")
+
+        const result = { ...dataCalender, timeStart, timeEnd  }
+
 
         const member = await prisma.divisionCalendarMember.findMany({
             where: {
@@ -69,12 +76,12 @@ export async function GET(request: Request, context: { params: { id: string } })
 
             name: v.User.name,
             email: v.User.email,
-            
+
         }))
 
 
         const dataFix = {
-            calender: data,
+            calender: result,
             member: fixMember,
             total: fixMember.length
         }
@@ -139,4 +146,77 @@ export async function DELETE(request: Request, context: { params: { id: string }
             { status: 500 }
         );
     }
+}
+
+// EDIT CALENDER BY ID
+export async function PUT(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 { title, desc, timeStart, dateStart, timeEnd, linkMeet, repeatEventTyper, member } = await request.json()
+
+        const cek = await prisma.divisionCalendar.count({
+            where: {
+                id: id
+            }
+        })
+
+        if (cek == 0) {
+            return NextResponse.json(
+                {
+                    success: false,
+                    message: "Gagal mengedit calender, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const data = await prisma.divisionCalendar.update({
+            where: {
+                id: id
+            },
+            data: {
+                title: title,
+                desc: desc,
+                timeStart: timeStart,
+                dateStart: dateStart,
+                timeEnd: timeEnd,
+                linkMeet: linkMeet,
+                repeatEventTyper: repeatEventTyper
+            }
+        });
+
+        await prisma.divisionCalendarMember.deleteMany({
+            where: {
+                idCalendar: id
+            }
+        })
+        
+        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 mengedit calender" }, { status: 200 });
+
+    } catch (error) {
+        return NextResponse.json(
+            {
+                success: false,
+                message: "Gagal mengedit calender, coba lagi nanti",
+            },
+            { status: 500 }
+        );
+    }
 }

src/module/calender/index.ts

@@ -2,8 +2,10 @@ 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";
+import UpdateDivisionCalender from "./ui/update_division_calender";
 
 export { NavbarDivisionCalender }
 export { NavbarCreateDivisionCalender }
 export { CreateCalenderDivisionCaleder }
-export { DetailEventDivision }
+export { DetailEventDivision }
+export { UpdateDivisionCalender }

src/module/calender/lib/api_calender.ts

@@ -1,4 +1,4 @@
-import { IFormCreateCalender } from "./type_calender";
+import { IEditCalender, IFormCreateCalender } from "./type_calender";
 
 export const funGetAllCalender = async (path?: string) => {
     const response = await fetch(`/api/calender${(path) ? path : ''}`, { next: { tags: ['calender'] } });
@@ -26,4 +26,15 @@ export const funDeleteCalenderById = async (path: string) => {
         method: "DELETE",
     });
     return await response.json().catch(() => null);
+}
+
+export const funEditCalenderById = async (path: string, data: IEditCalender) => {
+    const response = await fetch(`/api/calender/${path}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
 }

src/module/calender/lib/type_calender.ts

@@ -51,4 +51,34 @@ export interface IFormMemberCalender {
 
 export interface IFormUlangiEvent {
     id: string
+}
+
+export interface IEditCalender {
+    title?: string
+    dateStart?: String
+    timeStart?: string
+    timeEnd?: string
+    linkMeet?: string
+    repeatEventTyper?: string
+    desc?: string,
+    member?: IEditMemberCalender[]
+}
+
+export interface IEditMemberCalender {
+    idUser: {
+        id: string
+        name: string
+    }[]
+}
+
+
+export interface IDetailByIdCalender {
+    title?: string
+    desc?: string
+    timeStart?: string
+    dateStart?: string
+    timeEnd?: string
+    createdAt?: string
+    linkMeet?: string
+    repeatEventTyper?: string
 }

src/module/calender/ui/drawer_detail_event.tsx

@@ -51,7 +51,7 @@ export default function DrawerDetailEvent() {
               <Text ta={"center"} c={WARNA.biruTua}>Hapus</Text>
             </Box>
           </Flex>
-          <Flex onClick={() => router.push('/calender/update')} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => router.push(`/division/${param.id}/calender/update/${param.detail}`)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <MdEdit size={30} color={WARNA.biruTua} />
             </Box>

src/module/calender/ui/update_division_calender.tsx

@@ -0,0 +1,324 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Avatar, Box, Button, Flex, Group, Input, Select, 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 { useParams, useRouter } from 'next/navigation';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import toast from 'react-hot-toast';
+import { funEditCalenderById, funGetOneCalender } from '../lib/api_calender';
+import { useShallowEffect } from '@mantine/hooks';
+import { IDataDetailByIdCalender, IDataDetailByIdMember, IDetailByIdCalender, IEditMemberCalender, IFormMemberCalender } from '../lib/type_calender';
+import moment from 'moment';
+import "moment/locale/id";
+import { useHookstate } from '@hookstate/core';
+import { globalCalender } from '../lib/val_calender';
+
+export default function UpdateDivisionCalender() {
+  const [isModal, setModal] = useState(false)
+  const param = useParams<{ id: string, detail: string }>()
+  const memberUser = useHookstate(globalCalender)
+  const memberValue = memberUser.get() as IFormMemberCalender[]
+  const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
+  const [isDataAnggota, setDataAnggota] = useState<IEditMemberCalender[]>([])
+  const [isLengthMember, setLengthMember] = useState()
+
+  const fetchGetOne = async () => {
+    try {
+      const response = await funGetOneCalender(param.detail)
+      setDataCalender(response.data.calender)
+      setDataAnggota(response.data.member)
+      setLengthMember(response.data.member.length)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useShallowEffect(() => {
+    fetchGetOne()
+  }, [])
+
+  function onTrue(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data tersimpan");
+    }
+    setModal(false)
+  }
+  const [value, setValue] = useState<Date | null>(null);
+  const router = useRouter()
+
+  async function onSubmit(val: boolean) {
+    try {
+      if (val) {
+        const response = await funEditCalenderById(param.detail, {
+          title: isDataCalender?.title,
+          dateStart: isDataCalender?.dateStart,
+          timeStart: isDataCalender?.timeStart,
+          timeEnd: isDataCalender?.timeEnd,
+          linkMeet: isDataCalender?.linkMeet,
+          repeatEventTyper: isDataCalender?.repeatEventTyper,
+          desc: isDataCalender?.desc,
+          member: isDataAnggota
+        })
+
+        if (response.success) {
+          setModal(false)
+          router.push(`/division/${param.id}/calender`)
+        } else {
+          toast.error(response.message)
+        }
+      }
+      setModal(false)
+    } catch (error) {
+      console.log(error)
+      toast.error("Terjadi kesalahan! Silahkan coba kembali");
+      setModal(false)
+    } finally {
+      setModal(false)
+    }
+    if (val) {
+      console.log(
+        {
+          title: isDataCalender?.title,
+          dateStart: isDataCalender?.dateStart,
+          timeStart: isDataCalender?.timeStart,
+          timeEnd: isDataCalender?.timeEnd,
+          linkMeet: isDataCalender?.linkMeet,
+          repeatEventTyper: isDataCalender?.repeatEventTyper,
+          desc: isDataCalender?.desc,
+          member: isDataAnggota
+        }
+      )
+    }
+  }
+
+  return (
+    <Box>
+      <LayoutNavbarNew back={`/division/${param.id}/calender`} title="Edit kalender" menu />
+      <Box p={20}>
+        <Stack>
+          <TextInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            placeholder="Event Nama"
+            label="Event Nama"
+            value={isDataCalender?.title}
+            onChange={
+              (event) => {
+                setDataCalender({
+                  ...isDataCalender,
+                  title: event.target.value
+                })
+              }
+            }
+          />
+          <DateInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            value={
+              (isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
+            }
+            onChange={
+              (val) => {
+                setValue(val);
+                setDataCalender({
+                  ...isDataCalender,
+                  dateStart: moment(val).format("YYYY-MM-DD")
+                })
+              }
+            }
+            placeholder="Input Tanggal"
+            label="Tanggal"
+          />
+          <SimpleGrid
+            cols={{ base: 2, sm: 2, lg: 2 }}
+          >
+            <TimeInput
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+              size="md"
+              label="Waktu Awal"
+              value={isDataCalender?.timeStart}
+              onChange={
+                (event) => {
+                  setDataCalender({
+                    ...isDataCalender,
+                    timeStart: event.target.value
+                  })
+                }
+              }
+            />
+            <TimeInput
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+              size="md"
+              label="Waktu Akhir"
+              value={isDataCalender?.timeEnd}
+              onChange={
+                (event) => {
+                  setDataCalender({
+                    ...isDataCalender,
+                    timeEnd: event.target.value
+                  })
+                }
+              }
+            />
+          </SimpleGrid>
+          <TextInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            placeholder="Link Meet"
+            label="Link Meet"
+            value={isDataCalender?.linkMeet}
+            onChange={
+              (event) => {
+                setDataCalender({
+                  ...isDataCalender,
+                  linkMeet: event.target.value
+                })
+              }
+            }
+          />
+          <Select
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            placeholder="Ulangi Event"
+            label="Ulangi Event"
+            data={[
+              { value: '1', label: 'Acara 1 Kali' },
+              { value: '2', label: 'Hari Kerja (Sen - Jum)' },
+              { value: '3', label: 'Mingguan' },
+              { value: '4', label: 'Bulanan' },
+              { value: '5', label: 'Tahunan' },
+            ]}
+            value={isDataCalender?.repeatEventTyper}
+            onChange={
+              (val: any) => {
+                setDataCalender({
+                  ...isDataCalender,
+                  repeatEventTyper: val
+                })
+              }
+            }
+          />
+          <Box mt={5} onClick={() => router.push('/calender/update?page=update-user-calender')}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+          <Textarea styles={{
+            input: {
+              border: `1px solid ${"#D6D8F6"}`,
+              borderRadius: 10,
+            },
+          }}
+            size="md" placeholder='Deskripsi' label="Deskripsi"
+            value={isDataCalender?.desc}
+            onChange={
+              (event) => {
+                setDataCalender({
+                  ...isDataCalender,
+                  desc: event.target.value
+                })
+              }
+            }
+          />
+          <Box pt={30}>
+            <Group justify="space-between">
+              <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
+              <Text c={WARNA.biruTua}>Total {isLengthMember} Anggota</Text>
+            </Group>
+            <Box pt={10}>
+              <Box mb={20}>
+                <Box
+                  style={{
+                    border: `1px solid ${"#C7D6E8"}`,
+                    borderRadius: 10,
+                  }}
+                  px={20}
+                  py={10}
+                >
+                  {isDataAnggota.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"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={() => setModal(true)}
+            >
+              Simpan
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin menambahkan data?"
+        onYes={(val) => { onSubmit(val) }} />
+    </Box>
+  );
+}
+

src/module/division_new/index.ts

@@ -2,7 +2,7 @@ import { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDa
 import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
 import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
 import UpdateUlangiEvent from "./_division_fitur/calender/components/update_calander/update_ulangi_event";
-import UpdateUserDivisionCalender from "./_division_fitur/calender/components/update_calander/update_user_division_calender";
+import UpdateUserDivisionCalender from "../calender/ui/update_user_division_calender";
 import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
 import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
 import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";