wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #143 from bipproduction/lukman/23-agustus-2024

Browse Source 
style: update skelaton
This commit is contained in:
Amalia
2024-08-23 14:15:02 +08:00
committed by GitHub
parent f6bebedfe5 f1121afee6
commit d4f60ef016
16 changed files with 756 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/module/_global/components/skeleton_detail_list_tugas_task.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Box, Center, Grid, Group, SimpleGrid, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonDetailListTugasTask() {
return (
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Skeleton width={30} height={30} radius={"md"} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<Skeleton width={25} height={25} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
);
}

2
src/module/_global/index.ts
View File

@@ -2,6 +2,7 @@ import prisma from "./bin/prisma";
import { pwd_key_config } from "./bin/val_global"; import { pwd_key_config } from "./bin/val_global";
import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment"; import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member"; import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
import SkeletonDetailProfile from "./components/skeleton_detail_profile"; import SkeletonDetailProfile from "./components/skeleton_detail_profile";
import SkeletonSingle from "./components/skeleton_single"; import SkeletonSingle from "./components/skeleton_single";
import { funUploadFile } from "./fun/upload-file"; import { funUploadFile } from "./fun/upload-file";
@@ -29,3 +30,4 @@ export { SkeletonDetailDiscussionComment }
export { SkeletonDetailDiscussionMember } export { SkeletonDetailDiscussionMember }
export { funUploadFile } export { funUploadFile }
export { SkeletonDetailProfile } export { SkeletonDetailProfile }
export {SkeletonDetailListTugasTask}

71
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,5 +1,5 @@
"use client" "use client"
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core"; import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global"; import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr"; import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu"; import { LuSendHorizonal } from "react-icons/lu";
@@ -17,7 +17,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isData, setData] = useState<IDetailDiscussion>() const [isData, setData] = useState<IDetailDiscussion>()
const [isComent, setIsComent] = useState("") const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [isLoad, setIsLoad] = useState(false) const [isLoad, setIsLoad] = useState(true)
const getData = async () => { const getData = async () => {
try { try {
@@ -67,8 +67,26 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
Array(1) Array(1)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} p={10}> <Box key={i}>
<SkeletonDetailDiscussionMember/> <Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={60} height={60} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
</Box>
</Box> </Box>
)) : )) :
<Box> <Box>
@@ -104,11 +122,35 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
} }
<Box p={10}> <Box p={10}>
{isLoad ? {isLoad ?
Array(6) Array(2)
.fill(0) .fill(0)
.map((_, i) => ( .map((_, i) => (
<Box key={i} p={10}> <Box key={i} p={10}>
<SkeletonDetailDiscussionComment /> <Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={40} height={40} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={50} radius={"md"} />
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Skeleton width={"30%"} height={20} radius={"md"} />
</Group>
</Box>
<Box mt={20}>
<Skeleton width={"100%"} height={1} radius={"md"} />
</Box>
</Box> </Box>
)) : )) :
isData?.DivisionDisscussionComment.map((v, i) => { isData?.DivisionDisscussionComment.map((v, i) => {
@@ -137,14 +179,20 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
}) })
} }
</Box> </Box>
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{ {isLoad ?
<Skeleton width={"100%"} height={50} radius={100} />
:
<Box h={60} pos={"fixed"} bottom={20} w={{ base: "90%", md: "35.5%" }} style={{
zIndex: 999 zIndex: 999
}}> }}>
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Grid bg={"white"} style={{ <Grid bg={"white"} style={{
border: '1px solid gray', border: '1px solid gray',
borderRadius: 40 borderRadius: 40
}} justify="center" align="center"> }} justify="center" align="center">
<Grid.Col span={10}> <Grid.Col span={10}>
<TextInput <TextInput
styles={{ styles={{
input: { input: {
@@ -157,8 +205,10 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
placeholder="Kirim Komentar" placeholder="Kirim Komentar"
disabled={isData?.status === 2} disabled={isData?.status === 2}
onChange={(e) => setIsComent(e.target.value)} onChange={(e) => setIsComent(e.target.value)}
value={isComent} value={isComent}
/> maxLength={300}
/>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col span={2}>
<Center> <Center>
@@ -171,6 +221,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
}
</Box> </Box>
</> </>
) )

119
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core"; import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { GrChatOption } from "react-icons/gr"; import { GrChatOption } from "react-icons/gr";
@@ -13,13 +13,18 @@ export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([]) const [isData, setData] = useState<IDataDiscussion[]>([])
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const getData = async () => { const getData = async () => {
try { try {
setLoading(true)
const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery) const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
setData(response.data) setData(response.data)
setLoading(false)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} finally {
setLoading(false)
} }
} }
@@ -45,45 +50,83 @@ export default function ListDiscussion({ id }: { id: string }) {
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
{isData.map((v, i) => { {loading ?
return ( Array(3)
<Box key={i} pl={10} pr={10} .fill(null)
onClick={() => { .map((_, i) => (
router.push(`/division/${param.id}/discussion/${v.id}`) <Box key={i}>
}} <Box pl={10} pr={10}>
> <Flex
<Flex justify={"space-between"}
justify={"space-between"} align={"center"}
align={"center"} mt={20}
mt={20} >
> <Group>
<Group> <Skeleton width={40} height={40} radius={"md"} />
<Avatar alt="it's me" size="lg" /> <Box>
<Box> <Skeleton width={"50%"} height={20} radius={"md"} />
<Text c={WARNA.biruTua} fw={"bold"}> <Skeleton width={"50%"} height={20} radius={"md"} />
{v.user_name} </Box>
</Text> </Group>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge> <Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box> </Box>
</Group> <Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Text c={"grey"} fz={13}>{v.createdAt}</Text> <Skeleton width={"30%"} height={20} radius={"md"} />
</Flex> <Skeleton width={"30%"} height={20} radius={"md"} />
<Box mt={10}>{v.desc}</Box> </Group>
<Group justify="space-between" mt={20} c={'#8C8C8C'}> <Box mt={20}>
<Group gap={5} align="center"> <Skeleton width={"100%"} height={1} radius={"md"} />
<GrChatOption size={18} /> </Box>
<Text fz={13}>Diskusikan</Text> </Box>
</Group >
<Group gap={5} align="center">
<Text fz={13}>{v.total_komentar} Komentar</Text>
</Group>
</Group>
<Box mt={20}>
<Divider size={"xs"} />
</Box> </Box>
</Box> ))
); :
})} isData.map((v, i) => {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Avatar alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>Diskusikan</Text>
</Group >
<Group gap={5} align="center">
<Text fz={13}>{v.total_komentar} Komentar</Text>
</Group>
</Group>
<Box mt={20}>
{isData.length <= 1 ? "" :
<Divider size={"xs"} />
}
</Box>
</Box>
);
})
}
</Box> </Box>
) )
} }

38
src/module/division_new/ui/information_division.tsx
View File

@@ -21,7 +21,7 @@ export default function InformationDivision() {
const [name, setName] = useState('') const [name, setName] = useState('')
const [deskripsi, setDeskripsi] = useState('') const [deskripsi, setDeskripsi] = useState('')
const [member, setMember] = useState<IDataMemberDivision[]>([]) const [member, setMember] = useState<IDataMemberDivision[]>([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(true)
const [valChooseMember, setChooseMember] = useState("") const [valChooseMember, setChooseMember] = useState("")
const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false) const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
const [valChooseMemberName, setChooseMemberName] = useState("") const [valChooseMemberName, setChooseMemberName] = useState("")
@@ -137,12 +137,36 @@ export default function InformationDivision() {
<Text>{member.length} Anggota</Text> <Text>{member.length} Anggota</Text>
</Box> </Box>
<Box mt={15}> <Box mt={15}>
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}> {loading ?
<Avatar size="lg"> <Group
<AiOutlineUserAdd size={30} color={WARNA.biruTua} /> align="center"
</Avatar> style={{
<Text>Tambah Anggota</Text> padding: 10,
</Group> }}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={25} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={100} />
</Box>
</Group>
:
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size="lg">
<AiOutlineUserAdd size={30} color={WARNA.biruTua} />
</Avatar>
<Text>Tambah Anggota</Text>
</Group>
}
</Box> </Box>
<Box pt={10}> <Box pt={10}>
<Box mb={10}> <Box mb={10}>

136
src/module/division_new/ui/list_division.tsx
View File

@@ -1,5 +1,5 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core'; import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -95,72 +95,98 @@ export default function ListDivision() {
</Flex> </Flex>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
{loading ?
<>
<Skeleton width={"100%"} height={100} radius={"md"} />
</>
:
<Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}> <Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={'white'}>Total Divisi</Text> <Text fw={'bold'} c={'white'}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}> <Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text> <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
</Flex> </Flex>
</Box> </Box>
</Box> }
</Box>
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
{data?.map((v: any, i: any) => { {loading
return ( ? Array(6)
<Box key={i}> .fill(null)
<Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}> .map((_, i) => (
<Group> <Box key={i}>
<Center> <SkeletonSingle />
<ActionIcon </Box>
variant="gradient" ))
size={50} :
aria-label="Gradient action icon" data?.map((v: any, i: any) => {
radius={100} return (
gradient={{ <Box key={i}>
from: '#DFDA7C', <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
to: '#F2AF46', <Group>
deg: 174 <Center>
}} <ActionIcon
> variant="gradient"
<HiMiniUserGroup size={25} color={WARNA.biruTua} /> size={50}
</ActionIcon> aria-label="Gradient action icon"
</Center> radius={100}
<Text>{v.name}</Text> gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.name}</Text>
</Group>
</Group> </Group>
</Group> <Divider my="sm" />
<Divider my="sm" /> </Box>
</Box> );
); })
})} }
</Box> </Box>
) : ( ) : (
<Box pt={20}> <Box pt={20}>
{data?.map((v: any, i: any) => { {loading ?
return ( Array(6)
<Box key={i} mb={20}> .fill(null)
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}> .map((_, i) => (
<Card.Section> <Box key={i} pb={20}>
<Box h={120} bg={WARNA.biruTua}> <Skeleton width={"100%"} height={200} radius={"md"} />
<Flex justify={'center'} align={'center'} h={"100%"}> </Box>
<Title order={3} c={"white"}>{v.name}</Title> ))
</Flex> :
data?.map((v: any, i: any) => {
return (
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Text lineClamp={2}>{v.desc}</Text>
<Group align='center' pt={10} justify='flex-end'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.jumlah_member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box> </Box>
</Card.Section> </Card>
<Box pt={10}> </Box>
<Text lineClamp={2}>{v.desc}</Text> );
<Group align='center' pt={10} justify='flex-end'> })
<Avatar.Group> }
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.jumlah_member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})}
</Box> </Box>
)} )}
</Box> </Box>

78
src/module/division_new/ui/navbar_create_users.tsx
View File

@@ -1,7 +1,7 @@
"use client" "use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -17,6 +17,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
const member = useHookstate(globalMemberDivision) const member = useHookstate(globalMemberDivision)
const [selectedFiles, setSelectedFiles] = useState<any>([]); const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([]) const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true)
const handleFileClick = (index: number) => { const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) { if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -28,6 +29,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
async function loadData(search: string) { async function loadData(search: string) {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search); const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
const user = await funGetUserByCookies(); const user = await funGetUserByCookies();
@@ -41,7 +43,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
} else { } else {
toast.error(res.message) toast.error(res.message)
} }
setLoading(false)
} }
@@ -77,35 +79,51 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
onChange={(e) => loadData(e.target.value)} onChange={(e) => loadData(e.target.value)}
/> />
<Box pt={10}> <Box pt={10}>
<SimpleGrid {loading ?
cols={{ base: 2, sm: 2, lg: 2 }} <SimpleGrid
spacing={{ base: 20, sm: "xl" }} cols={{ base: 2, sm: 2, lg: 2 }}
verticalSpacing={{ base: "md", sm: "xl" }} spacing={{ base: 20, sm: "xl" }}
> verticalSpacing={{ base: "md", sm: "xl" }}
{dataMember.map((v, index) => { >
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id); {Array(6)
return ( .fill(null)
<Box key={index} mb={10}> .map((_, i) => (
<Box <Box key={i}>
bg={isSelected ? WARNA.bgHijauMuda : "white"} <Skeleton width={"100%"} height={100} radius={"md"} />
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box> </Box>
</Box> ))}
); </SimpleGrid>
})} :
</SimpleGrid> <SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
);
})}
</SimpleGrid>
}
</Box> </Box>
</Stack> </Stack>
<Box mt="xl"> <Box mt="xl">

106
src/module/task/ui/create_users_project.tsx
View File

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new"; import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { import {
ActionIcon,
Anchor, Anchor,
Avatar, Avatar,
Box, Box,
@@ -11,6 +12,7 @@ import {
Divider, Divider,
Flex, Flex,
Group, Group,
Skeleton,
Text, Text,
TextInput, TextInput,
} from "@mantine/core"; } from "@mantine/core";
@@ -28,10 +30,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const [isData, setData] = useState<IDataMemberDivision[]>([]) const [isData, setData] = useState<IDataMemberDivision[]>([])
const member = useHookstate(globalMemberTask) const member = useHookstate(globalMemberTask)
const [selectAll, setSelectAll] = useState(false) const [selectAll, setSelectAll] = useState(false)
const [loading, setLoading] = useState(true)
async function getData() { async function getData() {
try { try {
setLoading(true)
const response = await funGetDivisionById(param.id) const response = await funGetDivisionById(param.id)
if (response.success) { if (response.success) {
setData(response.data.member) setData(response.data.member)
@@ -41,9 +45,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
setLoading(false)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti"); toast.error("Gagal mendapatkan anggota, coba lagi nanti");
} finally {
setLoading(false)
} }
} }
@@ -110,43 +117,72 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
leftSection={<HiMagnifyingGlass size={20} />} leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian" placeholder="Pencarian"
/> */} /> */}
<Group justify="space-between" mt={20} onClick={handleSelectAll}> {loading ?
<Text c={WARNA.biruTua} fw={"bold"}> <Skeleton height={20} width={"100%"} mt={20} />
Pilih Semua Anggota :
</Text> <Group justify="space-between" mt={20} onClick={handleSelectAll}>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} <Text c={WARNA.biruTua} fw={"bold"}>
</Group> Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
}
<Box mt={15}> <Box mt={15}>
{isData.map((v, i) => { {loading ?
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); Array(3)
return ( .fill(null)
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> .map((_, i) => (
<Flex justify={"space-between"} align={"center"}> <Box key={i} mb={15}>
<Group> <Group>
<Avatar src={"v.image"} alt="it's me" size="lg" /> <Box>
<Text style={{ <ActionIcon
cursor: 'pointer', variant="light"
display: 'flex', bg={"#DCEED8"}
alignItems: 'center', size={"lg"}
}}> radius={100}
{v.name} aria-label="icon"
</Text> >
<Skeleton height={30} width={30} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={"80%"} />
</Box>
</Group> </Group>
<Text </Box>
style={{ ))
cursor: 'pointer', :
display: 'flex', isData.map((v, i) => {
alignItems: 'center', const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
paddingLeft: 20, return (
}} <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
> <Flex justify={"space-between"} align={"center"}>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""} <Group>
</Text> <Avatar src={"v.image"} alt="it's me" size="lg" />
</Flex> <Text style={{
<Divider my={"md"} /> cursor: 'pointer',
</Box> display: 'flex',
); alignItems: 'center',
})} }}>
{v.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})
}
</Box> </Box>
<Box mt={"xl"}> <Box mt={"xl"}>
<Button <Button
@@ -155,7 +191,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => {onSubmit()}} onClick={() => { onSubmit() }}
> >
Simpan Simpan
</Button> </Button>

12
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -1,5 +1,5 @@
'use client' 'use client'
import { LayoutDrawer, WARNA } from "@/module/_global"; import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core"; import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
@@ -79,7 +79,15 @@ export default function ListAnggotaDetailTask() {
py={10} py={10}
> >
{ {
loading ? <Text>loading</Text> : loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada anggota</Text> : isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => { isData.map((v, i) => {
return ( return (

18
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core"; import { Box, Group, Skeleton, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -22,7 +22,6 @@ export default function ListFileDetailTask() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan file tugas divisi, coba lagi nanti"); toast.error("Gagal mendapatkan file tugas divisi, coba lagi nanti");
@@ -45,7 +44,18 @@ export default function ListFileDetailTask() {
}}> }}>
{ {
loading ? <Text>loading</Text> : loading ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Group>
<Skeleton width={30} height={30} radius={"md"} />
<Skeleton width={"50%"} height={30} radius={"md"} />
</Group>
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada file</Text> : isData.length === 0 ? <Text>Tidak ada file</Text> :
isData.map((item, index) => { isData.map((item, index) => {
return ( return (

13
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -1,5 +1,5 @@
'use client' 'use client'
import { LayoutDrawer, WARNA } from "@/module/_global" import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global"
import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core" import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks" import { useShallowEffect } from "@mantine/hooks"
import { useParams, useRouter } from "next/navigation" import { useParams, useRouter } from "next/navigation"
@@ -99,7 +99,11 @@ export default function ListTugasDetailTask() {
}} }}
> >
{ {
loading ? <Text>loading</Text> : loading ?
<>
<SkeletonDetailListTugasTask />
</>
:
isData.length === 0 ? <Text>Tidak ada tugas</Text> : isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
@@ -163,7 +167,10 @@ export default function ListTugasDetailTask() {
</Box> </Box>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Divider my={"lg"} /> {isData.length >= 1
? "" :
<Divider my={"lg"} />
}
</Box> </Box>
) )
}) })

13
src/module/task/ui/detail_progress_task.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text } from "@mantine/core"; import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -15,9 +15,11 @@ export default function ProgressDetailTask() {
const [valLastUpdate, setValLastUpdate] = useState('') const [valLastUpdate, setValLastUpdate] = useState('')
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshTask) const refresh = useHookstate(globalRefreshTask)
const [loading, setLoading] = useState(true)
async function getOneData() { async function getOneData() {
try { try {
setLoading(true)
const res = await funGetTaskDivisionById(param.detail, 'progress'); const res = await funGetTaskDivisionById(param.detail, 'progress');
if (res.success) { if (res.success) {
setValProgress(res.data.progress); setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailTask() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti"); toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti");
} finally {
setLoading(false)
} }
} }
@@ -51,6 +55,9 @@ export default function ProgressDetailTask() {
return ( return (
<Box mt={10}> <Box mt={10}>
{loading ?
<Skeleton width={"100%"} height={100} radius={"md"} />
:
<Box <Box
p={20} p={20}
bg={"#DCEED8"} bg={"#DCEED8"}
@@ -83,11 +90,11 @@ export default function ProgressDetailTask() {
size="xl" size="xl"
value={valProgress} value={valProgress}
/> />
{/* <Text c={"dimmed"}>Update terakhir : {valLastUpdate}</Text> */}
</Box> </Box>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
}
</Box> </Box>
) )
} }

85
src/module/task/ui/list_division_task.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core"; import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2"; import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
@@ -8,6 +8,7 @@ import { IDataTask } from "../lib/type_task";
import { funGetAllTask } from "../lib/api_task"; import { funGetAllTask } from "../lib/api_task";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
export default function ListDivisionTask() { export default function ListDivisionTask() {
const [isList, setIsList] = useState(false) const [isList, setIsList] = useState(false)
@@ -79,12 +80,18 @@ export default function ListDivisionTask() {
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
{loading ?
<Box>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
:
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}> <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text> <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Flex justify={'center'} align={'center'} h={'100%'}> <Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text> <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex> </Flex>
</Box> </Box>
}
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
{isData.map((v, i) => { {isData.map((v, i) => {
@@ -117,37 +124,53 @@ export default function ListDivisionTask() {
</Box> </Box>
) : ( ) : (
<Box pt={20}> <Box pt={20}>
{isData.map((v: any, i: any) => { {loading ?
return ( Array(3)
<Box key={i} mb={20}> .fill(null)
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}> .map((_, i) => (
<Card.Section> <Box key={i} mb={20}>
<Box h={120} bg={WARNA.biruTua}> <Skeleton width={"100%"} height={200} radius={"md"} />
<Flex justify={'center'} align={'center'} h={"100%"}> </Box>
<Title order={3} c={"white"}>{v.title}</Title> ))
</Flex> :
</Box> _.isEmpty(isData)
</Card.Section> ?
<Box pt={10}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member-1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box> </Box>
); :
})} isData.map((v: any, i: any) => {
return (
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})
}
</Box> </Box>
)} )}
</Box> </Box>

4
src/module/task/ui/navbar_division_task.tsx
View File

@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
import { useState } from "react"; import { useState } from "react";
import { HiMenu } from "react-icons/hi"; import { HiMenu } from "react-icons/hi";
import DrawerDivisionTask from "./drawer_division_task"; import DrawerDivisionTask from "./drawer_division_task";
import { useParams } from "next/navigation";
export default function NavbarDivisionTask() { export default function NavbarDivisionTask() {
const [openDrawer, setOpenDrawer] = useState(false) const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string}>()
return ( return (
<> <>
<LayoutNavbarNew back="" title="Divisi - Tugas" <LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
menu={ menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' /> <HiMenu size={20} color='white' />

144
src/module/user/member/ui/create_member.tsx
View File

@@ -10,6 +10,7 @@ import { HiUser } from "react-icons/hi2";
import { IDataPositionMember, IDataROleMember } from "../lib/type_member"; import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
import { funGetAllPosition } from "@/module/position/lib/api_position"; import { funGetAllPosition } from "@/module/position/lib/api_position";
import { funCreateMember, funGetRoleUser } from "../lib/api_member"; import { funCreateMember, funGetRoleUser } from "../lib/api_member";
import _ from "lodash";
export default function CreateMember() { export default function CreateMember() {
const router = useRouter(); const router = useRouter();
@@ -17,6 +18,16 @@ export default function CreateMember() {
const [listGroup, setListGorup] = useState<IDataGroup[]>([]); const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]); const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]); const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
const [touched, setTouched] = useState({
nik: false,
name: false,
phone: false,
email: false,
gender: false,
idGroup: false,
idPosition: false,
idUserRole: false
});
const [listData, setListData] = useState({ const [listData, setListData] = useState({
nik: "", nik: "",
@@ -80,24 +91,29 @@ export default function CreateMember() {
async function onSubmit(val: boolean) { async function onSubmit(val: boolean) {
try { try {
const res = await funCreateMember({ if (_.isEmpty(listData)) {
nik: listData.nik, return;
name: listData.name,
phone: listData.phone,
email: listData.email,
gender: listData.gender,
idGroup: listData.idGroup,
idPosition: listData.idPosition,
idUserRole: listData.idUserRole,
});
if (res.success) {
toast.success(res.message);
setModal(false);
router.push("/member?active=true");
} else {
toast.error(res.message);
} }
if (val) {
const res = await funCreateMember({
nik: listData.nik,
name: listData.name,
phone: listData.phone,
email: listData.email,
gender: listData.gender,
idGroup: listData.idGroup,
idPosition: listData.idPosition,
idUserRole: listData.idUserRole,
});
if (res.success) {
toast.success(res.message);
setModal(false);
router.push("/member?active=true");
} else {
toast.error(res.message);
}
}
setModal(false);
} catch (error) { } catch (error) {
toast.error("Error"); toast.error("Error");
} finally { } finally {
@@ -142,14 +158,20 @@ export default function CreateMember() {
data={ data={
listGroup listGroup
? listGroup.map((data) => ({ ? listGroup.map((data) => ({
value: data.id, value: data.id,
label: data.name, label: data.name,
})) }))
: [] : []
} }
onChange={(val: any) => { onChange={(val: any) => {
changeGrup(val); changeGrup(val);
}} }}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/> />
<Select <Select
placeholder="Pilih Jabatan" placeholder="Pilih Jabatan"
@@ -169,9 +191,9 @@ export default function CreateMember() {
data={ data={
listPosition listPosition
? listPosition.map((data) => ({ ? listPosition.map((data) => ({
value: data.id, value: data.id,
label: data.name, label: data.name,
})) }))
: [] : []
} }
onChange={(val: any) => onChange={(val: any) =>
@@ -181,6 +203,12 @@ export default function CreateMember() {
}) })
} }
value={listData.idPosition == "" ? null : listData.idPosition} value={listData.idPosition == "" ? null : listData.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/> />
<Select <Select
placeholder="Pilih Role" placeholder="Pilih Role"
@@ -200,9 +228,9 @@ export default function CreateMember() {
data={ data={
listUserRole listUserRole
? listUserRole.map((data) => ({ ? listUserRole.map((data) => ({
value: data.id, value: data.id,
label: data.name, label: data.name,
})) }))
: [] : []
} }
onChange={(val: any) => onChange={(val: any) =>
@@ -211,6 +239,12 @@ export default function CreateMember() {
idUserRole: val, idUserRole: val,
}) })
} }
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/> />
<TextInput <TextInput
size="md" size="md"
@@ -227,11 +261,16 @@ export default function CreateMember() {
borderColor: WARNA.biruTua, borderColor: WARNA.biruTua,
}, },
}} }}
onChange={(event: any) => onChange={(event: any) => {
setListData({ setListData({ ...listData, nik: event.target.value });
...listData, setTouched({ ...touched, nik: true });
nik: event.target.value, }}
}) onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
listData.nik == "" ? "NIK Tidak Boleh Kosong" :
listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
)
} }
/> />
<TextInput <TextInput
@@ -255,6 +294,12 @@ export default function CreateMember() {
name: event.target.value, name: event.target.value,
}) })
} }
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
listData.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/> />
<TextInput <TextInput
size="md" size="md"
@@ -277,6 +322,13 @@ export default function CreateMember() {
email: event.target.value, email: event.target.value,
}) })
} }
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
listData.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email) ? "Email tidak valid" : null
)
}
/> />
<TextInput <TextInput
size="md" size="md"
@@ -299,6 +351,13 @@ export default function CreateMember() {
phone: event.target.value, phone: event.target.value,
}) })
} }
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
listData.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/> />
<Select <Select
placeholder="Pilih Gender" placeholder="Pilih Gender"
@@ -325,6 +384,12 @@ export default function CreateMember() {
gender: val, gender: val,
}) })
} }
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
listData.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/> />
</Stack> </Stack>
<Box mt={30} mx={20} pb={20}> <Box mt={30} mx={20} pb={20}>
@@ -334,7 +399,22 @@ export default function CreateMember() {
size="md" size="md"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => setModal(true)} onClick={() => {
if (
listData.nik !== "" &&
listData.name !== "" &&
listData.email !== "" &&
listData.phone !== "" &&
listData.gender !== "" &&
listData.idGroup !== "" &&
listData.idPosition !== "" &&
listData.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
> >
Simpan Simpan
</Button> </Button>

129
src/module/user/member/ui/edit_member.tsx
View File

@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2"; import { HiUser } from "react-icons/hi2";
import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member"; import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member"; import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
import _ from "lodash";
export default function EditMember({ id }: { id: string }) { export default function EditMember({ id }: { id: string }) {
@@ -19,6 +20,16 @@ export default function EditMember({ id }: { id: string }) {
const [listGroup, setListGorup] = useState<IDataGroup[]>([]) const [listGroup, setListGorup] = useState<IDataGroup[]>([])
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]) const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]) const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
const [touched, setTouched] = useState({
nik: false,
name: false,
phone: false,
email: false,
gender: false,
idGroup: false,
idPosition: false,
idUserRole: false
});
const [data, setData] = useState<IEditDataMember>({ const [data, setData] = useState<IEditDataMember>({
id: "", id: "",
nik: "", nik: "",
@@ -95,21 +106,25 @@ export default function EditMember({ id }: { id: string }) {
async function onSubmit(val: boolean) { async function onSubmit(val: boolean) {
try { try {
if (_.isEmpty(data)) {
return
}
if (val) {
const res = await funEditMember(id, {
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
})
const res = await funEditMember(id, { toast.success(res.message)
id: data.id, router.push(`/member?active=true`)
nik: data.nik, }
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
})
toast.success(res.message)
router.push(`/member?active=true`)
} catch (error) { } catch (error) {
toast.error('Error'); toast.error('Error');
@@ -152,6 +167,12 @@ export default function EditMember({ id }: { id: string }) {
changeGrup(val) changeGrup(val)
}} }}
value={data?.idGroup} value={data?.idGroup}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/> />
<Select <Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30} placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -172,6 +193,12 @@ export default function EditMember({ id }: { id: string }) {
} }
onChange={(val: any) => setData({ ...data, idPosition: val })} onChange={(val: any) => setData({ ...data, idPosition: val })}
value={(data?.idPosition == "") ? null : data.idPosition} value={(data?.idPosition == "") ? null : data.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/> />
<Select <Select
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30} placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
@@ -192,6 +219,12 @@ export default function EditMember({ id }: { id: string }) {
} }
onChange={(val: any) => setData({ ...data, idUserRole: val })} onChange={(val: any) => setData({ ...data, idUserRole: val })}
value={data?.idUserRole} value={data?.idUserRole}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/> />
<TextInput <TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"} size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -204,6 +237,13 @@ export default function EditMember({ id }: { id: string }) {
}} }}
onChange={(e) => setData({ ...data, nik: e.target.value })} onChange={(e) => setData({ ...data, nik: e.target.value })}
value={data.nik} value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik == "" ? "NIK Tidak Boleh Kosong" :
data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
)
}
/> />
<TextInput <TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"} size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -216,6 +256,12 @@ export default function EditMember({ id }: { id: string }) {
}} }}
onChange={(e) => setData({ ...data, name: e.target.value })} onChange={(e) => setData({ ...data, name: e.target.value })}
value={data.name} value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/> />
<TextInput <TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"} size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -228,6 +274,13 @@ export default function EditMember({ id }: { id: string }) {
}} }}
onChange={(e) => setData({ ...data, email: e.target.value })} onChange={(e) => setData({ ...data, email: e.target.value })}
value={data.email} value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
)
}
/> />
<TextInput <TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"} size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -240,6 +293,13 @@ export default function EditMember({ id }: { id: string }) {
}} }}
onChange={(e) => setData({ ...data, phone: e.target.value })} onChange={(e) => setData({ ...data, phone: e.target.value })}
value={data.phone} value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/> />
<Select <Select
placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30} placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -264,19 +324,40 @@ export default function EditMember({ id }: { id: string }) {
} }
onChange={(val: any) => setData({ ...data, gender: val })} onChange={(val: any) => setData({ ...data, gender: val })}
value={data.gender} value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/> />
</Stack> </Stack>
<Box mt={30} mx={20} pb={20}> <Box mt={30} mx={20} pb={20}>
<Button <Button
c={"white"} c={"white"}
bg={WARNA.biruTua} bg={WARNA.biruTua}
size="md" size="md"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => setModal(true)} onClick={() => {
> if (
Simpan data.nik !== "" &&
</Button> data.name !== "" &&
data.email !== "" &&
data.phone !== "" &&
data.gender !== "" &&
data.idGroup !== "" &&
data.idPosition !== "" &&
data.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
</Box> </Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)} <LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?" description="Apakah Anda yakin ingin mengubah data?"