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/calender/ui/create_user_calender.tsx
+++ b/src/module/calender/ui/create_user_calender.tsx
@@ -1,13 +1,16 @@
 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 { 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 { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Text } from '@mantine/core';
+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 CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
  const router = useRouter()
@@ -17,13 +20,15 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
  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 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())))
        }
@@ -81,15 +86,122 @@ export default function CreateUserCalender({ 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}>
-        <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/calender/ui/update_list_users.tsx
+++ b/src/module/calender/ui/update_list_users.tsx
@@ -1,8 +1,8 @@
 "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 { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -10,6 +10,8 @@ import { globalCalender } from '../lib/val_calender';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { FaCheck } from 'react-icons/fa6';
+import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
+import { Carousel } from '@mantine/carousel';


 export default function UpdateListUsers({ onClose }: { onClose: (val: any) => void }) {
@@ -20,13 +22,15 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
  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 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())))
        }
@@ -51,7 +55,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
    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  }])
+      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
    }
  };

@@ -83,15 +87,122 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
    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}>
-        <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>
@@ -99,12 +210,12 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
        </Group>
        {loading ?
          Array(4)
-          .fill(null)
-          .map((_, i) => (
-             <Box key={i}>
+            .fill(null)
+            .map((_, i) => (
+              <Box key={i}>
                <SkeletonSingle />
-             </Box>
-          ))
+              </Box>
+            ))
          :
          <Box mt={20} mb={100}>
            {isData.map((v, i) => {
@@ -136,10 +247,10 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
          </Box>
        }
      </Box>
-        <Box  pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-            maxWidth: rem(550),
-            zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
      }}>
        {loading ?
          <Skeleton height={50} radius={30} />
@@ -155,7 +266,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
            Simpan
          </Button>
        }
-        </Box>
+      </Box>
    </Box>
  );
 }