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

feat : update validation

Browse Source
This commit is contained in:
lukman
2024-08-26 17:33:14 +08:00
parent 5f169a7e5f
commit 80c6eb7f9a
27 changed files with 762 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/module/task/ui/add_detail_task.tsx
View File

@@ -10,6 +10,7 @@ import {
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
@@ -27,6 +28,9 @@ export default function AddDetailTask() {
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
title: false,
});
function onVerification() {
if (value[0] == null || value[1] == null)
@@ -106,17 +110,25 @@ export default function AddDetailTask() {
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
label="Tahapan"
placeholder="Input Nama Tahapan"
size="md"
required
value={title}
onChange={(e) => setTitle(e.target.value)}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}
}
onBlur={() => setTouched({ ...touched, title: true })}
error={touched.title ? "Tahapan wajib diisi" : undefined}
/>
</Stack>
<Box mt={"xl"}>

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

@@ -121,26 +121,13 @@ export default function AddMemberDetailTask() {
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"
/> */}
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{/* <Box mt={15}>
<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)
@@ -175,7 +162,7 @@ export default function AddMemberDetailTask() {
</Box>
);
})}
</Box> */}
</Box>
<Box mt={"xl"}>
<Button
c={"white"}

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

@@ -18,6 +18,9 @@ export default function CancelTask() {
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
reason: false,
});
function onVerification() {
if (alasan == "")
@@ -44,7 +47,7 @@ export default function CancelTask() {
return (
<Box>
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title={"Pembatalan Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
@@ -56,10 +59,15 @@ export default function CancelTask() {
}}
value={alasan}
size="md" placeholder='Contoh : Tugas tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => setAlasan(event.target.value)}
onChange={(event) => {
setAlasan(event.target.value)
setTouched({ ...touched, reason: false })
}}
error={touched.reason ? "Error! harus memasukkan alasan pembatalan tugas" : ""}
onBlur={() => setTouched({ ...touched, reason: true })}
/>
</Stack>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}

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

@@ -10,10 +10,11 @@ import {
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
import { useRouter } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IFormDateTask } from "../lib/type_task";
import moment from "moment";
@@ -22,7 +23,11 @@ import moment from "moment";
export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateTask) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const param = useParams<{ id: string }>()
const [title, setTitle] = useState("")
const [touched, setTouched] = useState({
title: false,
});
function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -43,7 +48,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
return (
<Box>
<LayoutNavbarNew back="" title={"Tanggal Tugas"} menu />
<LayoutNavbarNew back={`/division/${param.id}/task/create`} title={"Tanggal Tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -85,7 +90,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -93,9 +98,16 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tugas"
required
size="md"
value={title}
onChange={(e) => setTitle(e.target.value)}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={touched.title && title == "" ? "Judul Tugas Tidak Boleh Kosong" : null}
/>
</Stack>
<Box mt={"xl"}>

50
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 } from "@mantine/core";
import { Avatar, Box, Button, Center, Flex, Group, Input, 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";
@@ -37,6 +37,11 @@ export default function CreateTask() {
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0)
const [title, setTitle] = useState("")
const [touched, setTouched] = useState({
title: false,
task: false,
member: false
});
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
@@ -52,7 +57,14 @@ export default function CreateTask() {
async function onSubmit() {
try {
const response = await funCreateTask({ idDivision: param.id, title, task: dataTask, file: fileForm, member: memberValue })
const response = await funCreateTask(
{
idDivision: param.id,
title,
task: dataTask,
file: fileForm,
member: memberValue
})
if (response.success) {
toast.success(response.message)
@@ -81,20 +93,31 @@ export default function CreateTask() {
return (
<Box>
<LayoutNavbarNew back="" title="tambah tugas" menu />
<LayoutNavbarNew back={`/division/${param.id}/task/`} title="tambah tugas" menu />
<Box p={20}>
<Stack>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Nama Proyek"
placeholder="Nama Tugas"
size="md"
label="Judul Tugas"
value={title}
onChange={(e) => setTitle(e.target.value)}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
required
error={
touched.title && (
title == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<Box onClick={() => { setOpenTugas(true) }}>
<Group
@@ -227,7 +250,20 @@ export default function CreateTask() {
<Box mt="xl">
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setOpenModal(true)}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg" radius={30}
fullWidth
onClick={() => {
if (
title !== ""
) {
setOpenModal(true)
} else {
toast.error("Semua form harus diisi")
}
}}>
Simpan
</Button>
</Box>

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

@@ -6,6 +6,7 @@ import {
Input,
Stack,
Textarea,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { useParams, useRouter } from "next/navigation";
@@ -20,6 +21,9 @@ export default function EditTask() {
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
title: false,
});
function onVerification() {
if (title == "")
@@ -65,11 +69,11 @@ export default function EditTask() {
return (
<Box>
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -77,12 +81,22 @@ export default function EditTask() {
},
}}
placeholder="Tugas"
label="Judul Tugas"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
</Stack>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}

2
src/module/task/ui/navbar_detail_division_task.tsx
View File

@@ -39,7 +39,7 @@ export default function NavbarDetailDivisionTask() {
return (
<>
<LayoutNavbarNew back="" title={name} menu={
<LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={
<ActionIcon
variant="light"
bg={WARNA.bgIcon}