style: update user member

Deskripsi: - update api division - update task - update calender - update division - update project No Issue
2024-09-06 13:55:21 +08:00
parent ab1cd29621
commit 49f7b3c102
11 changed files with 643 additions and 109 deletions
--- a/src/module/task/ui/add_member_detail_task.tsx
+++ b/src/module/task/ui/add_member_detail_task.tsx
@@ -1,16 +1,19 @@
 "use client"
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
-import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
+import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import {
+   ActionIcon,
   Anchor,
   Avatar,
   Box,
   Button,
+   Center,
   Checkbox,
   Divider,
   Flex,
   Grid,
   Group,
+   Indicator,
   rem,
   Stack,
   Text,
@@ -24,6 +27,9 @@ import { FaCheck } from "react-icons/fa6";
 import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
 import { IDataMemberTaskDivision } from "../lib/type_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { HiMagnifyingGlass } from "react-icons/hi2";
+import { IoArrowBackOutline, IoClose } from "react-icons/io5";
+import { Carousel } from "@mantine/carousel";

 export default function AddMemberDetailTask() {
   const router = useRouter()
@@ -34,14 +40,16 @@ export default function AddMemberDetailTask() {
   const [selectAll, setSelectAll] = useState(false)
   const [openModal, setOpenModal] = 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 funGetDivisionById(param.id)
+         const response = await funGetSearchMemberDivision("?search=", param.id)
         if (response.success) {
-            setData(response.data.member)
+            setData(response.data)
         } else {
            toast.error(response.message)
         }
@@ -71,7 +79,7 @@ export default function AddMemberDetailTask() {
      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 }])
+         setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
      }
   };

@@ -84,7 +92,7 @@ export default function AddMemberDetailTask() {
            if (!isDataMember.some((i: any) => i.idUser == isData[index].idUser)) {
               if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
                  const newArr = {
-                     idUser: isData[index].idUser, name: isData[index].name
+                     idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img
                  }
                  setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
               }
@@ -120,16 +128,122 @@ export default function AddMemberDetailTask() {
      }
   }

+   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 (
      <Box>
         <LayoutNavbarNew
            back=""
            title="Pilih Anggota"
-            menu
+            menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+               <HiMagnifyingGlass size={20} color='white' />
+            </ActionIcon>}
         />
+         {/* SEARCH */}
+         {onClickSearch
+            ? (
+               <Box
+                  pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+                     maxWidth: rem(550),
+                     zIndex: 9999,
+                     backgroundColor: `${WARNA.biruTua}`,
+                     borderBottomLeftRadius: 20,
+                     borderBottomRightRadius: 20,
+                  }}>
+                  <Grid justify='center' align='center' gutter={'lg'}>
+                     <Grid.Col span={1}>
+                        <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                           <IoArrowBackOutline size={30} />
+                        </ActionIcon>
+                     </Grid.Col>
+                     <Grid.Col span={11}>
+                        <TextInput
+                           styles={{
+                              input: {
+                                 color: "white",
+                                 borderRadius: '#A3A3A3',
+                                 borderColor: `${WARNA.biruTua}`,
+                                 backgroundColor: `${WARNA.biruTua}`,
+                              },
+                           }}
+                           size="md"
+                           radius={30}
+                           placeholder="Pencarian"
+                           onChange={(e) => fetchGetMember(e.currentTarget.value)}
+                        />
+                     </Grid.Col>
+                  </Grid>
+               </Box>
+            )
+            : null
+         }
+         {/* Close User */}
+         <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 100,
+            backgroundColor: `${WARNA.bgWhite}`,
+            borderBottom: `1px solid ${"#E0DFDF"}`
+         }}>
+            {selectedFiles.length > 0 ? (
+               <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+                  {selectedFiles.map((v: any, i: any) => {
+                     return (
+                        <Carousel.Slide key={i}>
+                           <Box w={{
+                              base: 70,
+                              xl: 70
+                           }}
+                              onClick={() => { handleXMember(v.idUser) }}
+                           >
+                              <Center>
+                                 <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                                    <Avatar style={{
+                                       border: `2px solid ${WARNA.biruTua}`
+                                    }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                                 </Indicator>
+                              </Center>
+                              <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                           </Box>
+                        </Carousel.Slide>
+                     )
+                  })}
+               </Carousel>
+            ) : (
+               <Box h={rem(81)}>
+                  <Flex justify={"center"} align={'center'} h={"100%"}>
+                     <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+                  </Flex>
+               </Box>
+            )}
+         </Box>
+
+
         <Box p={20}>
-            <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+            <Group justify="space-between" mt={100} onClick={handleSelectAll}>
               <Text c={WARNA.biruTua} fw={"bold"}>
                  Pilih Semua Anggota
               </Text>
--- a/src/module/task/ui/create_users_project.tsx
+++ b/src/module/task/ui/create_users_project.tsx
@@ -1,19 +1,22 @@
 "use client"
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
-import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
+import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import {
  ActionIcon,
  Avatar,
  Box,
  Button,
+  Center,
  Divider,
  Flex,
  Grid,
  Group,
+  Indicator,
  rem,
  Skeleton,
  Text,
+  TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
@@ -23,6 +26,9 @@ import { globalMemberTask } from "../lib/val_task";
 import { FaCheck } from "react-icons/fa6";
 import { RiListCheck } from "react-icons/ri";
 import { BsListCheck } from "react-icons/bs";
+import { HiMagnifyingGlass } from "react-icons/hi2";
+import { IoArrowBackOutline, IoClose } from "react-icons/io5";
+import { Carousel } from "@mantine/carousel";

 export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) {
  const router = useRouter()
@@ -32,14 +38,16 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
  const member = useHookstate(globalMemberTask)
  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 funGetDivisionById(param.id)
+      const response = await funGetSearchMemberDivision("?search=", param.id)
      if (response.success) {
-        setData(response.data.member)
+        setData(response.data)
        if (member.length > 0) {
          setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
        }
@@ -96,19 +104,125 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
    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 (
    <Box>
      <LayoutNavbarNew
        // back=""
        title="Pilih Anggota"
-        menu
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>}
      />
+      {/* SEARCH */}
+      {onClickSearch
+        ? (
+          <Box
+            pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+              maxWidth: rem(550),
+              zIndex: 9999,
+              backgroundColor: `${WARNA.biruTua}`,
+              borderBottomLeftRadius: 20,
+              borderBottomRightRadius: 20,
+            }}>
+            <Grid justify='center' align='center' gutter={'lg'}>
+              <Grid.Col span={1}>
+                <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                  <IoArrowBackOutline size={30} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={11}>
+                <TextInput
+                  styles={{
+                    input: {
+                      color: "white",
+                      borderRadius: '#A3A3A3',
+                      borderColor: `${WARNA.biruTua}`,
+                      backgroundColor: `${WARNA.biruTua}`,
+                    },
+                  }}
+                  size="md"
+                  radius={30}
+                  placeholder="Pencarian"
+                  onChange={(e) => fetchGetMember(e.currentTarget.value)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Box>
+        )
+        : null
+      }
+      {/* Close User */}
+      <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 100,
+        backgroundColor: `${WARNA.bgWhite}`,
+        borderBottom: `1px solid ${"#E0DFDF"}`
+      }}>
+        {selectedFiles.length > 0 ? (
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+            {selectedFiles.map((v: any, i: any) => {
+              return (
+                <Carousel.Slide key={i}>
+                  <Box w={{
+                    base: 70,
+                    xl: 70
+                  }}
+                    onClick={() => { handleXMember(v.idUser) }}
+                  >
+                    <Center>
+                      <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                        <Avatar style={{
+                          border: `2px solid ${WARNA.biruTua}`
+                        }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                      </Indicator>
+                    </Center>
+                    <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                  </Box>
+                </Carousel.Slide>
+              )
+            })}
+          </Carousel>
+        ) : (
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
+          </Box>
+        )}
+      </Box>
+
+
      <Box p={20}>
        {loading ?
          <Skeleton height={20} width={"100%"} mt={20} />
          :
-          <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+          <Group justify="space-between" mt={100} onClick={handleSelectAll}>
            <Text c={WARNA.biruTua} fw={"bold"}>
              Pilih Semua Anggota
            </Text>