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

feat : update all button

Browse Source
This commit is contained in:
lukman
2024-08-29 17:43:05 +08:00
parent 2ce1f204ed
commit e5adacb636
20 changed files with 406 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
import {
Anchor,
@@ -10,6 +10,7 @@ import {
Divider,
Flex,
Group,
rem,
Stack,
Text,
TextInput,
@@ -31,10 +32,12 @@ export default function AddMemberDetailTask() {
const [isDataMember, setDataMember] = useState<IDataMemberTaskDivision[]>([])
const [selectAll, setSelectAll] = useState(false)
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
async function getData() {
try {
setLoading(true)
const response = await funGetDivisionById(param.id)
if (response.success) {
setData(response.data.member)
@@ -48,9 +51,13 @@ export default function AddMemberDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -127,54 +134,67 @@ export default function AddMemberDetailTask() {
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
<Box mt={15}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Stack align="flex-start" justify="flex-start">
<Text style={{
{loading ? Array(8)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
<Box mt={15} mb={60}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Stack align="flex-start" justify="flex-start">
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Stack>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Stack>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerifikasi() }}
>
Simpan
</Button>
</Box>
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerifikasi() }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

33
src/module/task/ui/cancel_task.tsx
View File

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Box,
Button,
rem,
Stack,
Textarea,
} from "@mantine/core";
@@ -20,7 +21,7 @@ export default function CancelTask() {
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
reason: false,
});
});
function onVerification() {
if (alasan == "")
@@ -47,7 +48,7 @@ export default function CancelTask() {
return (
<Box pos={"relative"} h={"100vh"}>
<Box>
<LayoutNavbarNew back="" title={"Pembatalan Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
@@ -68,18 +69,22 @@ export default function CancelTask() {
onBlur={() => setTouched({ ...touched, reason: true })}
/>
</Stack>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>

9
src/module/task/ui/create_date_end_task.tsx
View File

@@ -7,6 +7,7 @@ import {
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
@@ -110,7 +111,12 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
error={touched.title && title == "" ? "Judul Tugas Tidak Boleh Kosong" : null}
/>
</Stack>
<Box mt={"xl"}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -122,7 +128,6 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

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

@@ -1,6 +1,6 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Avatar, Box, Button, Center, Flex, Group, Input, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { Avatar, Box, Button, Center, Flex, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import React, { useRef, useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
@@ -205,7 +205,7 @@ export default function CreateTask() {
{
member.length > 0 &&
<Box pt={30}>
<Box pt={30} mb={60}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -249,7 +249,12 @@ export default function CreateTask() {
}
<Box mt="xl">
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
@@ -267,7 +272,6 @@ export default function CreateTask() {
Simpan
</Button>
</Box>
</Box>

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

@@ -12,6 +12,7 @@ import {
Divider,
Flex,
Group,
rem,
Skeleton,
Text,
TextInput,
@@ -104,19 +105,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
menu
/>
<Box p={20}>
{/* <TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/> */}
{loading ?
<Skeleton height={20} width={"100%"} mt={20} />
:
@@ -127,7 +115,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
}
<Box mt={15}>
<Box mt={15} mb={60}>
{loading ?
Array(3)
.fill(null)
@@ -184,7 +172,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
})
}
</Box>
<Box mt={"xl"}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -196,7 +189,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

34
src/module/task/ui/edit_detail_task.tsx
View File

@@ -7,9 +7,11 @@ import {
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
@@ -122,31 +124,37 @@ export default function EditDetailTask() {
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
label={"Nama Tahapan"}
required
placeholder="Input Nama Tahapan"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

19
src/module/task/ui/edit_task.tsx
View File

@@ -4,6 +4,7 @@ import {
Box,
Button,
Input,
rem,
Stack,
Textarea,
TextInput,
@@ -23,7 +24,7 @@ export default function EditTask() {
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
title: false,
});
});
function onVerification() {
if (title == "")
@@ -69,7 +70,7 @@ export default function EditTask() {
return (
<Box pos={"relative"} h={"100vh"}>
<Box >
<LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
@@ -86,18 +87,23 @@ export default function EditTask() {
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
</Stack>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -109,7 +115,6 @@ export default function EditTask() {
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}