diff --git a/src/pages/darmasaba/surat.tsx b/src/pages/darmasaba/surat.tsx index 78d9ac0..1236391 100644 --- a/src/pages/darmasaba/surat.tsx +++ b/src/pages/darmasaba/surat.tsx @@ -52,7 +52,10 @@ type FormSurat = { syaratDokumen: DataItem[]; }; +type ErrorState = Record; + export default function FormSurat() { + const [errors, setErrors] = useState({}); const [opened, { open, close }] = useDisclosure(false); const [noPengajuan, setNoPengajuan] = useState(""); const [submitLoading, setSubmitLoading] = useState(false); @@ -150,22 +153,24 @@ export default function FormSurat() { }, [jenisSuratFix.id]); function onChecking() { + const hasError = Object.values(errors).some((v) => v); + + if (hasError) { + return notification({ + title: "Gagal", + message: "Masih ada form yang belum valid", + type: "error", + }); + } + const isFormKosong = Object.values(formSurat).some((value) => { if (Array.isArray(value)) { - return ( - value.length === 0 || - value.some( - (item) => - typeof item.value === "string" && item.value.trim() === "", - ) + return value.some( + (item) => + typeof item.value === "string" && item.value.trim() === "", ); } - - if (typeof value === "string") { - return value.trim() === ""; - } - - return false; + return typeof value === "string" && value.trim() === ""; }); if (isFormKosong) { @@ -174,9 +179,9 @@ export default function FormSurat() { message: "Silahkan lengkapi form surat", type: "error", }); - } else { - open(); } + + open(); } async function onSubmit() { @@ -239,6 +244,30 @@ export default function FormSurat() { ); } + + function validateField(key: string, value: any) { + const stringValue = String(value ?? "").trim(); + + // wajib diisi + if (!stringValue) { + return "Field wajib diisi"; + } + + // 🔥 semua key yang mengandung "nik" + if (key.toLowerCase().includes("nik")) { + if (!/^\d+$/.test(stringValue)) { + return "NIK harus berupa angka"; + } + + if (stringValue.length !== 16) { + return "NIK harus 16 digit"; + } + } + + return null; + } + + function validationForm({ key, value, @@ -246,12 +275,26 @@ export default function FormSurat() { key: "nama" | "phone" | "dataPelengkap" | "syaratDokumen"; value: any; }) { - if (key == "dataPelengkap" || key == "syaratDokumen") { + if (key === "dataPelengkap" || key === "syaratDokumen") { + const errorMsg = validateField(value.key, value.value); + + setErrors((prev) => ({ + ...prev, + [value.key]: errorMsg, + })); + setFormSurat((prev) => ({ ...prev, [key]: updateArrayByKey(prev[key], value.key, value.value), })); } else { + const errorMsg = validateField(key, value); + + setErrors((prev) => ({ + ...prev, + [key]: errorMsg, + })); + setFormSurat({ ...formSurat, [key]: value, @@ -259,6 +302,7 @@ export default function FormSurat() { } } + return ( } placeholder="Budi Setiawan" value={formSurat.nama} + error={errors.nama} onChange={(e) => validationForm({ key: "nama", value: e.target.value }) } @@ -374,6 +419,7 @@ export default function FormSurat() { } placeholder="08123456789" value={formSurat.phone} + error={errors.phone} onChange={(e) => validationForm({ key: "phone", value: e.target.value }) } @@ -446,6 +492,7 @@ export default function FormSurat() { /> ) : ( >({}); const [sukses, setSukses] = useState(false); const [submitLoading, setSubmitLoading] = useState(false); const [dataPelengkap, setDataPelengkap] = useState([]); @@ -427,6 +428,29 @@ function DataUpdate({ fetchData(); }, []); + function validateField(key: string, value: any) { + const stringValue = String(value ?? "").trim(); + + // wajib diisi + if (!stringValue) { + return "Field wajib diisi"; + } + + // 🔥 semua key yg mengandung "nik" + if (key.toLowerCase().includes("nik")) { + if (!/^\d+$/.test(stringValue)) { + return "NIK harus berupa angka"; + } + + if (stringValue.length !== 16) { + return "NIK harus 16 digit"; + } + } + + return null; + } + + function upsertById(array: T[], item: T): T[] { const index = array.findIndex((v) => v.id === item.id); @@ -446,6 +470,13 @@ function DataUpdate({ kategori: "dataPelengkap" | "syaratDokumen"; value: UpdateDataItem; }) { + const errorMsg = validateField(value.key, value.value); + + setErrors((prev) => ({ + ...prev, + [value.id]: errorMsg, + })); + setFormSurat((prev) => ({ ...prev, [kategori]: upsertById(prev[kategori], { @@ -456,6 +487,7 @@ function DataUpdate({ })); } + function updateArrayByKey( list: UpdateDataItem[], id: string, @@ -465,6 +497,16 @@ function DataUpdate({ } function onChecking() { + const hasError = Object.values(errors).some((v) => v); + + if (hasError) { + return notification({ + title: "Gagal", + message: "Masih ada data yang belum valid", + type: "error", + }); + } + if ( formSurat.dataPelengkap.length == 0 && formSurat.syaratDokumen.length == 0 @@ -675,8 +717,10 @@ function DataUpdate({ /> ) : ( } placeholder={item.name} + type={item.type} onChange={(e) => validationForm({ kategori: "dataPelengkap",