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

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

@@ -165,6 +165,7 @@ export default function CreateMember() {
}
onChange={(val: any) => {
changeGrup(val);
setTouched({ ...touched, idGroup: false })
}}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
@@ -196,11 +197,13 @@ export default function CreateMember() {
}))
: []
}
onChange={(val: any) =>
onChange={(val: any) => {
setListData({
...listData,
idPosition: val,
})
setTouched({ ...touched, idPosition: false })
}
}
value={listData.idPosition == "" ? null : listData.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
@@ -233,11 +236,13 @@ export default function CreateMember() {
}))
: []
}
onChange={(val: any) =>
onChange={(val: any) => {
setListData({
...listData,
idUserRole: val,
})
setTouched({ ...touched, idUserRole: false })
}
}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
@@ -263,7 +268,7 @@ export default function CreateMember() {
}}
onChange={(event: any) => {
setListData({ ...listData, nik: event.target.value });
setTouched({ ...touched, nik: true });
setTouched({ ...touched, nik: false });
}}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
@@ -288,11 +293,13 @@ export default function CreateMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(event: any) =>
onChange={(event: any) => {
setListData({
...listData,
name: event.target.value,
})
setTouched({ ...touched, name: false })
}
}
onBlur={() => setTouched({ ...touched, name: true })}
error={
@@ -316,11 +323,13 @@ export default function CreateMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(event: any) =>
onChange={(event: any) => {
setListData({
...listData,
email: event.target.value,
})
setTouched({ ...touched, email: false })
}
}
onBlur={() => setTouched({ ...touched, email: true })}
error={
@@ -345,11 +354,13 @@ export default function CreateMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(event: any) =>
onChange={(event: any) => {
setListData({
...listData,
phone: event.target.value,
})
setTouched({ ...touched, phone: false })
}
}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
@@ -378,11 +389,13 @@ export default function CreateMember() {
{ value: "M", label: "Laki-laki" },
{ value: "F", label: "Perempuan" },
]}
onChange={(val: any) =>
onChange={(val: any) => {
setListData({
...listData,
gender: val,
})
setTouched({ ...touched, gender: false })
}
}
onBlur={() => setTouched({ ...touched, gender: true })}
error={

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

@@ -29,7 +29,7 @@ export default function EditMember({ id }: { id: string }) {
idGroup: false,
idPosition: false,
idUserRole: false
});
});
const [data, setData] = useState<IEditDataMember>({
id: "",
nik: "",
@@ -121,7 +121,7 @@ export default function EditMember({ id }: { id: string }) {
idPosition: data.idPosition,
idUserRole: data.idUserRole
})
toast.success(res.message)
router.push(`/member?active=true`)
}
@@ -165,13 +165,14 @@ export default function EditMember({ id }: { id: string }) {
}
onChange={(val: any) => {
changeGrup(val)
setTouched({ ...touched, idGroup: false })
}}
value={data?.idGroup}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
<Select
@@ -191,13 +192,16 @@ export default function EditMember({ id }: { id: string }) {
}))
: []
}
onChange={(val: any) => setData({ ...data, idPosition: val })}
onChange={(val: any) => {
setData({ ...data, idPosition: val })
setTouched({ ...touched, idPosition: false })
}}
value={(data?.idPosition == "") ? null : data.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/>
<Select
@@ -217,13 +221,16 @@ export default function EditMember({ id }: { id: string }) {
}))
: []
}
onChange={(val: any) => setData({ ...data, idUserRole: val })}
onChange={(val: any) => {
setData({ ...data, idUserRole: val })
setTouched({ ...touched, idUserRole: false })
}}
value={data?.idUserRole}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/>
<TextInput
@@ -235,14 +242,17 @@ export default function EditMember({ id }: { id: string }) {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, nik: e.target.value })}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
}}
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
)
touched.nik && (
data.nik == "" ? "NIK Tidak Boleh Kosong" :
data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
)
}
/>
<TextInput
@@ -254,13 +264,16 @@ export default function EditMember({ id }: { id: string }) {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, name: e.target.value })}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
@@ -272,14 +285,17 @@ export default function EditMember({ id }: { id: string }) {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, email: e.target.value })}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
}}
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
)
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
@@ -291,14 +307,17 @@ export default function EditMember({ id }: { id: string }) {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, phone: e.target.value })}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
}}
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
)
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/>
<Select
@@ -322,42 +341,45 @@ export default function EditMember({ id }: { id: string }) {
}
]
}
onChange={(val: any) => setData({ ...data, gender: val })}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => {
if (
data.nik !== "" &&
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>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => {
if (
data.nik !== "" &&
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>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?"