feat : update create

2024-08-16 17:12:44 +08:00
parent a2c60cc67a
commit 0f627ac349
6 changed files with 122 additions and 150 deletions
--- a/src/module/calender/lib/type_calender.ts
+++ b/src/module/calender/lib/type_calender.ts
@@ -47,4 +47,8 @@ export interface IFormMemberCalender {
        id: string
        name: string
    }[]
+}
+
+export interface IFormUlangiEvent {
+    id: string
 }
--- a/src/module/calender/lib/val_calender.ts
+++ b/src/module/calender/lib/val_calender.ts
@@ -1,5 +1,6 @@
 import { hookstate } from "@hookstate/core";
-import { IFormMemberCalender } from "./type_calender";
+import { IFormMemberCalender, IFormUlangiEvent } from "./type_calender";


-export const globalCalender = hookstate<IFormMemberCalender[]>([])
+export const globalCalender = hookstate<IFormMemberCalender[]>([])
+export const globalUlangiEvent = hookstate<IFormUlangiEvent | string>('')
--- a/src/module/calender/ui/detail_event_division.tsx
+++ b/src/module/calender/ui/detail_event_division.tsx
@@ -15,38 +15,6 @@ import { useShallowEffect } from '@mantine/hooks';
 import moment from "moment";
 import "moment/locale/id";
 import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
-const dataAnggota = [
-  {
-    id: 1,
-    name: "Iqbal Ramadan",
-    image: "https://i.pravatar.cc/1000?img=5",
-    email: "iqbal.ramadan@gmail.com",
-  },
-  {
-    id: 2,
-    name: "Doni Setiawan",
-    image: "https://i.pravatar.cc/1000?img=10",
-    email: "doni.setiawan@gmail.com",
-  },
-  {
-    id: 3,
-    name: "Rangga Agung",
-    image: "https://i.pravatar.cc/1000?img=51",
-    email: "rangga.agung@gmail.com",
-  },
-  {
-    id: 4,
-    name: "Ramadan Sananta",
-    image: "https://i.pravatar.cc/1000?img=15",
-    email: "ramadan@gmail.com",
-  },
-  {
-    id: 5,
-    name: "Imam Baroni",
-    image: "https://i.pravatar.cc/1000?img=22",
-    email: "imam.baroni@gmail.com",
-  },
-];

 export default function DetailEventDivision() {
  const [openDrawer, setOpenDrawer] = useState(false)
@@ -94,7 +62,7 @@ export default function DetailEventDivision() {
            </Group>
            <Group mb={10} gap={30}>
              <LuClock size={25} color={WARNA.biruTua} />
-              <Text>{moment(isDataCalender?.timeStart).format('LT')}  | {moment(isDataCalender?.timeEnd).format('LT')} </Text>
+              <Text>{moment.utc(isDataCalender?.timeStart).format('HH:mm')}  | {moment.utc(isDataCalender?.timeEnd).format('HH:mm')} </Text>
            </Group>
            <Group mb={10} gap={30}>
              <BsCalendarDate size={25} color={WARNA.biruTua} />
--- a/src/module/calender/ui/drawer_detail_event.tsx
+++ b/src/module/calender/ui/drawer_detail_event.tsx
@@ -40,7 +40,6 @@ export default function DrawerDetailEvent() {
  return (
    <Box>
      <Stack pt={10}>
-        {JSON.stringify(param)}
        <SimpleGrid
          cols={{ base: 3, sm: 3, lg: 3 }}
        >
--- a/src/module/calender/ui/navbar_create_division_calender.tsx
+++ b/src/module/calender/ui/navbar_create_division_calender.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Flex, Group, Input, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+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';
@@ -9,8 +9,8 @@ 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 { globalCalender, globalUlangiEvent } from '../lib/val_calender';
+import { IFormMemberCalender, IFormUlangiEvent } from '../lib/type_calender';
 import { funCreateCalender } from '../lib/api_calender';
 import CreateUserCalender from './create_user_calender';

@@ -29,76 +29,64 @@ export default function NavbarCreateDivisionCalender() {
    timeStart: "",
    timeEnd: "",
    linkMeet: "",
-    repeatEventTyper: "1",
+    repeatEventTyper: "",
    desc: "",
  })

-  function onTrue(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Data tersimpan");
-    }
-    setModal(false)
-  }
-
-  async function onSubmit() {
+  async function onSubmit(val: boolean) {
    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: "",
+      if (val) {
+        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
        })
-        memberUser.set([])
-      } else {
-        toast.error(response.message)
+  
+        if (response.success) {
+          setModal(false)
+          router.push(`/division/${param.id}/calender`)
+          setData({
+            ...isData,
+            title: "",
+            dateStart: "",
+            timeStart: "",
+            timeEnd: "",
+            linkMeet: "",
+            repeatEventTyper: "1",
+            desc: "",
+          })
+          toast.success(response.message)
+          memberUser.set([])
+        } else {
+          toast.error(response.message)
+          setModal(false)
+        } 
      }
    } catch (error) {
      console.log(error)
+      setModal(false)
      toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
+    } finally {
+      setModal(false)
    }
-    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)}/>
+  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={{
@@ -126,9 +114,9 @@ export default function NavbarCreateDivisionCalender() {
              setValue(val);
              setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") });
            }}
-          placeholder="Input Tanggal"
-          label="Tanggal"
-          minDate={new Date()}
+            placeholder="Input Tanggal"
+            label="Tanggal"
+            minDate={new Date()}
          />
          <SimpleGrid
            cols={{ base: 2, sm: 2, lg: 2 }}
@@ -171,19 +159,28 @@ export default function NavbarCreateDivisionCalender() {
            value={isData.linkMeet}
            onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
          />
-          <Box mt={5} onClick={() => router.push('/calender/create?page=ulangi-event')}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
+          <Select
+            styles={{
+              input: {
                border: `1px solid ${"#D6D8F6"}`,
                borderRadius: 10,
-              }}
-            >
-              <Text>Ulangi Event</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
+              },
+            }}
+            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={isData.repeatEventTyper}
+            onChange={(val: any) =>
+              setData({ ...isData, repeatEventTyper: val })
+            }
+          />
          <Box mt={5} onClick={() => setOpenMember(true)}>
            <Group
              justify="space-between"
@@ -207,50 +204,50 @@ export default function NavbarCreateDivisionCalender() {
            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>
-                    );
-                  })}
+          {
+            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>
-        }
+          }

          <Box mt={"xl"}>
            <Button
@@ -259,7 +256,7 @@ export default function NavbarCreateDivisionCalender() {
              size="lg"
              radius={30}
              fullWidth
-              onClick={onSubmit}
+              onClick={() => setModal(true)}
            >
              Simpan
            </Button>
@@ -268,7 +265,7 @@ export default function NavbarCreateDivisionCalender() {
      </Box>
      <LayoutModal opened={isModal} onClose={() => setModal(false)}
        description="Apakah Anda yakin ingin menambahkan data?"
-        onYes={(val) => { onTrue(val) }} />
+        onYes={(val) => { onSubmit(val) }} />
    </Box>
  );
 }