diff --git a/src/app/(application)/division/[id]/(fitur-division)/calender/[detail]/add-member/page.tsx b/src/app/(application)/division/[id]/(fitur-division)/calender/[detail]/add-member/page.tsx new file mode 100644 index 0000000..1f76c6b --- /dev/null +++ b/src/app/(application)/division/[id]/(fitur-division)/calender/[detail]/add-member/page.tsx @@ -0,0 +1,10 @@ +import { CreateUserDetailCalender } from '@/module/calender'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; diff --git a/src/module/calender/index.ts b/src/module/calender/index.ts index ed688c7..9ee2ff5 100644 --- a/src/module/calender/index.ts +++ b/src/module/calender/index.ts @@ -1,4 +1,5 @@ import CreateCalenderDivisionCaleder from "./ui/create_calender_division_caleder"; +import CreateUserDetailCalender from "./ui/create_user_detail_calender"; import DetailEventDivision from "./ui/detail_event_division"; import HistoryDivisionCalender from "./ui/history_division_calender"; import NavbarCreateDivisionCalender from "./ui/navbar_create_division_calender"; @@ -10,4 +11,5 @@ export { NavbarCreateDivisionCalender } export { CreateCalenderDivisionCaleder } export { DetailEventDivision } export { UpdateDivisionCalender } -export { HistoryDivisionCalender } \ No newline at end of file +export { HistoryDivisionCalender } +export { CreateUserDetailCalender } \ No newline at end of file diff --git a/src/module/calender/ui/create_user_detail_calender.tsx b/src/module/calender/ui/create_user_detail_calender.tsx new file mode 100644 index 0000000..e749827 --- /dev/null +++ b/src/module/calender/ui/create_user_detail_calender.tsx @@ -0,0 +1,269 @@ +"use client" +import React, { useState } from 'react'; +import { globalCalender } from '../lib/val_calender'; +import { useParams, useRouter } from 'next/navigation'; +import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new'; +import { useHookstate } from '@hookstate/core'; +import toast from 'react-hot-toast'; +import { useShallowEffect } from '@mantine/hooks'; +import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; +import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core'; +import { FaCheck } from 'react-icons/fa6'; +import { HiMagnifyingGlass } from 'react-icons/hi2'; +import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; +import { Carousel } from '@mantine/carousel'; + +export default function CreateUserDetailCalender() { + const router = useRouter() + const param = useParams<{ id: string }>() + const [selectedFiles, setSelectedFiles] = useState([]) + const [isData, setData] = useState([]) + const member = useHookstate(globalCalender) + const [selectAll, setSelectAll] = useState(false) + const [loading, setLoading] = useState(true) + const [onClickSearch, setOnClickSearch] = useState(false) + const [searchQuery, setSearchQuery] = useState('') + + async function getData() { + try { + setLoading(true) + const response = await funGetSearchMemberDivision("?search=", param.id) + if (response.success) { + setData(response.data) + if (member.length > 0) { + setSelectedFiles(JSON.parse(JSON.stringify(member.get()))) + } + setLoading(false) + } else { + toast.error(response.message) + } + + } catch (error) { + console.error(error) + toast.error("Gagal mendapatkan anggota, coba lagi nanti"); + } finally { + setLoading(false) + } + } + + + 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, img: isData[index].img }]) + } + }; + + + + 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, img: isData[index].img + } + 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) + } + + const handleSearchClick = () => { + setOnClickSearch(true); + }; + + const handleClose = () => { + setOnClickSearch(false); + }; + + function handleXMember(id: number) { + setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id)) + } + + async function fetchGetMember(val: string) { + setSearchQuery(val) + try { + const res = await funGetSearchMemberDivision('?search=' + val, param.id); + if (res.success) { + setData(res.data) + } else { + toast.error(res.message); + } + } catch (error) { + console.error(error); + } + } + + return ( + + + + } + /> + + {/* SEARCH */} + {onClickSearch + ? ( + + + + + + + + + fetchGetMember(e.currentTarget.value)} + /> + + + + ) + : null + } + {/* Close User */} + + {selectedFiles.length > 0 ? ( + + {selectedFiles.map((v: any, i: any) => { + return ( + + { handleXMember(v.idUser) }} + > +
+ }> + + +
+ {v.name} + + + ) + })} + + ) : ( + + + Tidak ada anggota yang dipilih + + + )} + + + + + + Pilih Semua Anggota + + {selectAll ? : ""} + + {loading ? + Array(8) + .fill(null) + .map((_, i) => ( + + + + )) + : + + {isData.map((v, i) => { + const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); + return ( + handleFileClick(i)}> + + + + + + + + {v.name} + + {isSelected ? : null} + + + + + + + + ); + })} + + } + + + + + + ); +} + diff --git a/src/module/calender/ui/detail_event_division.tsx b/src/module/calender/ui/detail_event_division.tsx index 7e5ed61..52acbd1 100644 --- a/src/module/calender/ui/detail_event_division.tsx +++ b/src/module/calender/ui/detail_event_division.tsx @@ -1,29 +1,34 @@ 'use client' import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; -import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core'; +import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core'; import React, { useState } from 'react'; import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs'; import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md"; import { LuClock, LuCopy, LuLink } from "react-icons/lu"; -import { FaCheck } from 'react-icons/fa6'; +import { FaCheck, FaUser } 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 { useParams, useRouter } 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'; import SkeletonDetailEvent from './skeleton_detail_event'; +import { IoIosCloseCircle } from 'react-icons/io'; +import LayoutModal from '@/module/_global/layout/layout_modal'; export default function DetailEventDivision() { - const [openDrawer, setOpenDrawer] = useState(false) const param = useParams<{ id: string, detail: string }>() const [isDataCalender, setDataCalender] = useState() const [isDataAnggota, setDataAnggota] = useState([]) const [isLengthMember, setLengthMember] = useState() const [loading, setLoading] = useState(true) + const [openDrawer, setOpenDrawer] = useState(false) + const [openDrawerUser, setOpenDrawerUser] = useState(false) + const [isOpenModal, setOpenModal] = useState(false) + const router = useRouter() const getData = async () => { @@ -47,7 +52,7 @@ export default function DetailEventDivision() { return ( - setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> } /> @@ -188,7 +193,7 @@ export default function DetailEventDivision() { } - {loading ? + {/* {loading ? - } + } */} + + + + Total Anggota + {isLengthMember} Anggota + + + + setOpenDrawerUser(true)}> + + + + + + + + + Nama + + email.com + + + + + + + + + + + + + + Menu} onClose={() => setOpenDrawerUser(false)}> + + + + { router.push('/member/' + ) }} + justify={'center'} align={'center'} direction={'column'} > + + + + + Lihat profil + + + + { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} > + + + + + Keluarkan anggota + + + + + + + + setOpenModal(false)} + description="Apakah Anda yakin ingin mengeluarkan anggota?" + onYes={(val) => { + if (val) { + // onSubmit() + } + setOpenModal(false) + }} /> setOpenDrawer(false)}> diff --git a/src/module/calender/ui/drawer_detail_event.tsx b/src/module/calender/ui/drawer_detail_event.tsx index ab8ef45..d5b4903 100644 --- a/src/module/calender/ui/drawer_detail_event.tsx +++ b/src/module/calender/ui/drawer_detail_event.tsx @@ -9,6 +9,7 @@ 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'; +import { FaUsers } from 'react-icons/fa6'; export default function DrawerDetailEvent() { const router = useRouter() @@ -56,7 +57,15 @@ export default function DrawerDetailEvent() { - Edit + Edit Kalender + + + router.push(`/division/${param.id}/calender/${param.detail}/add-member`)} justify={'center'} align={'center'} direction={'column'} > + + + + + Tambah Anggota diff --git a/src/module/calender/ui/update_division_calender.tsx b/src/module/calender/ui/update_division_calender.tsx index 850254e..f0015a9 100644 --- a/src/module/calender/ui/update_division_calender.tsx +++ b/src/module/calender/ui/update_division_calender.tsx @@ -296,7 +296,7 @@ export default function UpdateDivisionCalender() { } } /> - setOpenMember(true)}> + {/* setOpenMember(true)}> Tambah Anggota - - + */} + {/* Anggota Terpilih Total {memberUser.length} Anggota @@ -353,7 +353,7 @@ export default function UpdateDivisionCalender() { - + */} }