From 97129d62b1ecfe5dc0296ed17880aa12a58c1999 Mon Sep 17 00:00:00 2001 From: bagusajisaputroo Date: Thu, 8 May 2025 22:27:32 +0700 Subject: [PATCH] changing response on edit and add in mater data module --- src/pages/master/aldeias/blocks/AddDialog.tsx | 145 +++-- .../master/aldeias/blocks/EditDialog.tsx | 59 +- .../master/municipios/blocks/AddDialog.tsx | 55 +- .../master/municipios/blocks/EditDialog.tsx | 90 ++- .../master/postoadms/blocks/AddDialog.tsx | 143 +++-- .../master/postoadms/blocks/EditDialog.tsx | 141 +++-- .../master/products/blocks/AddDialog.tsx | 572 ++++++++++-------- .../master/products/blocks/EditDialog.tsx | 352 +++++++---- .../master/profession/blocks/AddDialog.tsx | 51 +- .../master/profession/blocks/EditDialog.tsx | 42 +- .../master/provider/blocks/AddDialog.tsx | 187 ++++-- .../master/provider/blocks/EditDialog.tsx | 199 +++--- src/pages/master/sucos/blocks/AddDialog.tsx | 146 +++-- src/pages/master/sucos/blocks/EditDialog.tsx | 59 +- .../transfer/transferfee/blocks/AddDialog.tsx | 1 + .../transfertype/blocks/EditDialog.tsx | 7 +- 16 files changed, 1461 insertions(+), 788 deletions(-) diff --git a/src/pages/master/aldeias/blocks/AddDialog.tsx b/src/pages/master/aldeias/blocks/AddDialog.tsx index bd4fe9a..f2ad4b5 100644 --- a/src/pages/master/aldeias/blocks/AddDialog.tsx +++ b/src/pages/master/aldeias/blocks/AddDialog.tsx @@ -46,12 +46,18 @@ const AddDialog = () => { show: false, message: '' }); - const initialState = { + const initialState: { + name: string; + sucosId: number | null; + created_by: string; + created_at: string; + } = { name: '', - sucosId: 0, + sucosId: null, created_by: '', created_at: '' }; + const [errors, setErrors] = useState>({}); const [formField, setFormField] = useState(initialState); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); @@ -59,9 +65,32 @@ const AddDialog = () => { const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Aldeia Name' }, + { key: 'sucosId', label: 'Sucos ID' } + ]; + const newErrors: Record = {}; + let isValid = true; + + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; + }; const doCreateAldeias = useCallback( async (e: React.FormEvent) => { e.preventDefault(); @@ -117,14 +146,12 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (formField.name === '' || formField.sucosId === 0) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } - doCreateAldeias(e); - console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -169,12 +196,20 @@ const AddDialog = () => { - setFormField({ ...formField, name: e.target.value })} - /> +
+ { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} + /> + {errors.name && {errors.name}} +
@@ -183,46 +218,50 @@ const AddDialog = () => { - - - + + e.stopPropagation()} > - {sucos.find((suco) => suco.id === formField.sucosId)?.name || - 'Select Sucos'} - - - e.stopPropagation()} - > - - - - No Sucos found. - - {sucos.map((suco) => ( - { - setFormField({ - ...formField, - sucosId: suco.id - }); - setOpen(false); - }} - > - {suco.name} - - ))} - - - - - + + + + No Sucos found. + + {sucos.map((suco) => ( + { + setFormField({ + ...formField, + sucosId: suco.id + }); + setOpen(false); + setErrors((prev) => ({ ...prev, sucosId: '' })); + }} + > + {suco.name} + + ))} + + + + + + {errors.sucosId && {errors.sucosId}} + diff --git a/src/pages/master/aldeias/blocks/EditDialog.tsx b/src/pages/master/aldeias/blocks/EditDialog.tsx index 502a6c2..4f5f2d9 100644 --- a/src/pages/master/aldeias/blocks/EditDialog.tsx +++ b/src/pages/master/aldeias/blocks/EditDialog.tsx @@ -56,12 +56,35 @@ const EditDialog = () => { const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const [isSubmitting, setIsSubmitting] = useState(false); - + const [errors, setErrors] = useState>({}); const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Aldeia Name' }, + { key: 'sucosId', label: 'Sucos ID' } + ]; + const newErrors: Record = {}; + let isValid = true; + + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; + }; const doUpdateAldeias = useCallback( async (e: React.FormEvent) => { e.preventDefault(); @@ -139,15 +162,13 @@ const EditDialog = () => { const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); - - if (formField.name === '' || formField.sucosId === 0) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } doUpdateAldeias(e); - console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -212,12 +233,19 @@ const EditDialog = () => { - setFormField({ ...formField, name: e.target.value })} - /> +
+ { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} /> + {errors.name && {errors.name}} +
@@ -226,6 +254,7 @@ const EditDialog = () => { +
diff --git a/src/pages/master/municipios/blocks/AddDialog.tsx b/src/pages/master/municipios/blocks/AddDialog.tsx index ca2f96b..bd0cee5 100644 --- a/src/pages/master/municipios/blocks/AddDialog.tsx +++ b/src/pages/master/municipios/blocks/AddDialog.tsx @@ -41,10 +41,30 @@ const AddDialog = () => { const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const [isSubmitting, setIsSubmitting] = useState(false); - + const [errors, setErrors] = useState>({}); const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); + }; + const validateForm = () => { + const requiredFields = [{ key: 'name', label: 'Municipio Name' }]; + const newErrors: Record = {}; + let isValid = true; + + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; }; const doCreateMunicipio = useCallback( @@ -82,16 +102,17 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - - if (formField.name.trim() === '') { - setAlert({ show: true, message: 'Please fill name field.' }); + setIsSubmitting(true); + if(!validateForm()) { + setIsSubmitting(false); return; } + doCreateMunicipio(e); - console.log(parsedUser.email); - console.log(formField); - setAlert({ show: false, message: '' }); + // console.log(parsedUser.email); + // console.log(formField); + // setAlert({ show: false, message: '' }); }; const handleReset = () => { @@ -133,21 +154,29 @@ const AddDialog = () => {
-
+
setFormField({ ...formField, name: e.target.value })} + onChange={({target})=>{ + setFormField((prev) => ({...prev,name:target.value})) + if (target.value){ + setErrors((prev)=> ({...prev,name: ''})) + } + } + } /> + {errors.name && {errors.name}}
-
) : ( - +
-
-
- +
+
+ +
setFormField({ ...formField, name: e.target.value })} + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} /> + {errors.name && ( + {errors.name} + )}
+
- - e.stopPropagation()} - > - - - - No Municipio found. - - {municipios.map((municipio) => ( - { - setFormField({ - ...formField, - municipio_id: municipio.id - }); - setOpen(false); - }} - > - {municipio.name} - - ))} - - - - - +
+ + + + + e.stopPropagation()} + > + + + + No Municipio found. + + {municipios.map((municipio) => ( + { + setFormField({ ...formField, municipio_id: municipio.id }); + setErrors((prev) => ({ ...prev, municipio_id: '' })); + setOpen(false); + }} + > + {municipio.name} + + ))} + + + + + + {errors.municipio_id && ( + {errors.municipio_id} + )} +
diff --git a/src/pages/master/postoadms/blocks/EditDialog.tsx b/src/pages/master/postoadms/blocks/EditDialog.tsx index 7200831..edb43fb 100644 --- a/src/pages/master/postoadms/blocks/EditDialog.tsx +++ b/src/pages/master/postoadms/blocks/EditDialog.tsx @@ -45,7 +45,7 @@ const EditDialog = () => { const [isLoading, setIsLoading] = useState(false); const [municipios, setMunicipios] = useState([]); const [isSubmitting, setIsSubmitting] = useState(false); - + const [errors, setErrors] = useState>({}); const [alert, setAlert] = useState({ show: false, message: '' @@ -62,7 +62,28 @@ const EditDialog = () => { const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); + }; + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Postu Administrativo Name' }, + { key: 'municipio_id', label: 'Municipio Name' } + ]; + const newErrors: Record = {}; + let isValid = true; + + requiredFields.forEach(({ key, label }) => { + const value = formField[key as keyof typeof formField]; + const isEmpty = value === '' || value === null || value === undefined || value === 0; + if (isEmpty) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; }; const doUpdatePostoAdm = useCallback( @@ -147,15 +168,12 @@ const EditDialog = () => { const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); - - if (formField.name.trim() === '' || formField.municipio_id === 0) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } - doUpdatePostoAdm(e); - console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -218,57 +236,80 @@ const EditDialog = () => {
-
+
- setFormField({ ...formField, name: e.target.value })} - /> +
+ { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} + /> + {errors.name && ( + {errors.name} + )} +
- - - - - - - - - No Municipio found. - - {municipios.map((municipio) => ( - { - setFormField({ - ...formField, - municipio_id: municipio.id - }); - setOpen(false); - }} - > - {municipio.name} - - ))} - - - - - +
+ + + + + e.stopPropagation()} + > + + + + No Municipio found. + + {municipios.map((municipio) => ( + { + setFormField({ ...formField, municipio_id: municipio.id }); + setErrors((prev) => ({ ...prev, municipio_id: '' })); // Clear error + setOpen(false); + }} + > + {municipio.name} + + ))} + + + + + + {errors.municipio_id && ( + {errors.municipio_id} + )} +
diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx index f20e8dc..b2e2851 100644 --- a/src/pages/master/products/blocks/AddDialog.tsx +++ b/src/pages/master/products/blocks/AddDialog.tsx @@ -76,11 +76,41 @@ const AddDialog = () => { const [isSubmitting, setIsSubmitting] = useState(false); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); - + const [errors, setErrors] = useState>({}); const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; + const validateForm = () => { + const requiredFields = [ + {key:'name', label: 'Name'}, + {key:'type', label: 'Type'}, + {key:'code', label: 'Code'}, + {key:'description', label: 'Description'}, + {key:'price_point', label: 'Price Point'}, + {key:'price_cash', label: 'Price Cash'}, + {key:'cashback_point', label: 'Cashback Point'}, + {key:'cashback_cash', label: 'Cashback Cash'}, + {key:'status', label: 'Status'}, + {key:'provider', label: 'Provider'}, + {key:'process_on_third_party', label: 'Process On Third Party'} + ] + const newErrors: Record = {}; + let isValid = true; + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + setErrors(newErrors); + return isValid; + } const doCreateProduct = useCallback( async (e: React.FormEvent) => { @@ -136,28 +166,15 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if ( - formField.name.trim() === '' || - formField.type.trim() === '' || - formField.code.trim() === '' || - formField.description.trim() === '' || - formField.price_point === null || - formField.price_cash === null || - formField.cashback_point === null || - formField.cashback_cash === null || - formField.status.trim() === '' || - formField.provider.trim() === '' || - formField.process_on_third_party.trim() === '' || - formField.created_by.trim() === '' || - formField.created_at.trim() === '' - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } doCreateProduct(e); // console.log(formField); - setAlert({ show: false, message: '' }); + // setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -197,234 +214,317 @@ const AddDialog = () => {
)} - -
-
-
- - setFormField({ ...formField, name: e.target.value })} - /> -
-
+ +
+
+
+ +
+ { + setFormField({ ...formField, name: e.target.value }); + if (e.target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} + /> + {errors.name && {errors.name}} +
+
+
-
-
- - setFormField({ ...formField, type: e.target.value })} - /> -
-
+
+
+ +
+ { + setFormField({ ...formField, type: e.target.value }); + if (e.target.value) { + setErrors((prev) => ({ ...prev, type: '' })); + } + }} + /> + {errors.type && {errors.type}} +
+
+
-
-
- - setFormField({ ...formField, code: e.target.value })} - /> -
-
+
+
+ +
+ { + setFormField({ ...formField, code: e.target.value }); + if (e.target.value) { + setErrors((prev) => ({ ...prev, code: '' })); + } + }} + /> + {errors.code && {errors.code}} +
+
+
-
-
- - setFormField({ ...formField, description: e.target.value })} - /> -
-
+
+
+ +
+ { + setFormField({ ...formField, description: e.target.value }); + if (e.target.value) { + setErrors((prev) => ({ ...prev, description: '' })); + } + }} + /> + {errors.description && ( + {errors.description} + )} +
+
+
-
-
- - { - setFormField((prev) => ({ - ...prev, - price_point: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Price Point" - /> -
-
+
+
+ +
+ { + setFormField((prev) => ({ + ...prev, + price_point: values.floatValue !== undefined ? values.floatValue : '' + })); + if (values.floatValue !== undefined) { + setErrors((prev) => ({ ...prev, price_point: '' })); + } + }} + placeholder="Enter Price Point" + /> + {errors.price_point && ( + {errors.price_point} + )} +
+
+
-
-
- - { - setFormField((prev) => ({ - ...prev, - price_cash: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Price Cash" - /> -
-
+
+
+ +
+ { + setFormField((prev) => ({ + ...prev, + price_cash: values.floatValue !== undefined ? values.floatValue : '' + })); + if (values.floatValue !== undefined) { + setErrors((prev) => ({ ...prev, price_cash: '' })); + } + }} + placeholder="Enter Price Cash" + /> + {errors.price_cash && ( + {errors.price_cash} + )} +
+
+
-
-
- - { - setFormField((prev) => ({ - ...prev, - cashback_point: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Cashback Point" - /> -
-
+
+
+ +
+ { + setFormField((prev) => ({ + ...prev, + cashback_point: values.floatValue !== undefined ? values.floatValue : '' + })); + if (values.floatValue !== undefined) { + setErrors((prev) => ({ ...prev, cashback_point: '' })); + } + }} + placeholder="Enter Cashback Point" + /> + {errors.cashback_point && ( + {errors.cashback_point} + )} +
+
+
-
-
- - { - setFormField((prev) => ({ - ...prev, - cashback_cash: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Cashback Cash" - /> -
-
+
+
+ +
+ { + setFormField((prev) => ({ + ...prev, + cashback_cash: values.floatValue !== undefined ? values.floatValue : '' + })); + if (values.floatValue !== undefined) { + setErrors((prev) => ({ ...prev, cashback_cash: '' })); + } + }} + placeholder="Enter Cashback Cash" + /> + {errors.cashback_cash && ( + {errors.cashback_cash} + )} +
+
+
-
-
- - -
-
+
+
+ +
+ + {errors.status && {errors.status}} +
+
+
-
-
- - -
-
+
+
+ +
+ + {errors.provider && {errors.provider}} +
+
+
-
-
- - -
-
+
+
+ +
+ + {errors.process_on_third_party && ( + {errors.process_on_third_party} + )} +
+
+
+ +
+ + +
+
+ -
- - -
-
-
diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx index e9e3a81..2d6ebb3 100644 --- a/src/pages/master/products/blocks/EditDialog.tsx +++ b/src/pages/master/products/blocks/EditDialog.tsx @@ -81,7 +81,37 @@ const EditDialog = () => { setFormField(initialState); setAlert({ show: false, message: '' }); }; - + const[errors, setErrors] = useState>({}); + const validateForm = () => { + const requiredFields = [ + {key:'name', label: 'Name'}, + {key:'type', label: 'Type'}, + {key:'code', label: 'Code'}, + {key:'description', label: 'Description'}, + {key:'price_point', label: 'Price Point'}, + {key:'price_cash', label: 'Price Cash'}, + {key:'cashback_point', label: 'Cashback Point'}, + {key:'cashback_cash', label: 'Cashback Cash'}, + {key:'status', label: 'Status'}, + {key:'provider', label: 'Provider'}, + {key:'process_on_third_party', label: 'Process On Third Party'} + ] + const newErrors: Record = {}; + let isValid = true; + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + setErrors(newErrors); + return isValid; + } const doUpdateProduct = useCallback( async (e: React.FormEvent) => { e.preventDefault(); @@ -164,29 +194,14 @@ const EditDialog = () => { const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); - - if ( - formField.name.trim() === '' || - formField.type.trim() === '' || - formField.code.trim() === '' || - formField.description.trim() === '' || - formField.price_point === null || - formField.price_cash === null || - formField.cashback_point === null || - formField.cashback_cash === null || - formField.status.trim() === '' || - formField.provider.trim() === '' || - formField.process_on_third_party.trim() === '' || - formField.updated_by.trim() === '' || - formField.updated_at.trim() === '' - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } - doUpdateProduct(e); // console.log(formField); - setAlert({ show: false, message: '' }); + // setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -245,72 +260,102 @@ const EditDialog = () => {
) : (
-
-
-
- +
+ {/* Name */} +
+
+ +
setFormField({ ...formField, name: e.target.value })} + onChange={(e) => { + setFormField({ ...formField, name: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, name: '' })); + }} /> + {errors.name && {errors.name}}
- -
-
- +
+ + {/* Type */} +
+
+ +
setFormField({ ...formField, type: e.target.value })} + onChange={(e) => { + setFormField({ ...formField, type: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, type: '' })); + }} /> + {errors.type && {errors.type}}
- -
-
- +
+ + {/* Code */} +
+
+ +
setFormField({ ...formField, code: e.target.value })} + onChange={(e) => { + setFormField({ ...formField, code: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, code: '' })); + }} /> + {errors.code && {errors.code}}
- -
-
- +
+ + {/* Description */} +
+
+ +
- setFormField({ ...formField, description: e.target.value }) - } + onChange={(e) => { + setFormField({ ...formField, description: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, description: '' })); + }} /> + {errors.description && ( + {errors.description} + )}
- -
-
- +
+ + {/* Price Point */} +
+
+ +
{ onValueChange={(values) => { setFormField((prev) => ({ ...prev, - price_point: values.floatValue !== undefined ? values.floatValue : '' + price_point: values.floatValue ?? '' })); + if (values.floatValue !== undefined) + setErrors((prev) => ({ ...prev, price_point: '' })); }} placeholder="Enter Price Point" /> + {errors.price_point && ( + {errors.price_point} + )}
- -
-
- +
+ + {/* Price Cash */} +
+
+ +
{ onValueChange={(values) => { setFormField((prev) => ({ ...prev, - price_cash: values.floatValue !== undefined ? values.floatValue : '' + price_cash: values.floatValue ?? '' })); + if (values.floatValue !== undefined) + setErrors((prev) => ({ ...prev, price_cash: '' })); }} placeholder="Enter Price Cash" /> + {errors.price_cash && ( + {errors.price_cash} + )}
- -
-
- +
+ + {/* Cashback Point */} +
+
+ +
{ onValueChange={(values) => { setFormField((prev) => ({ ...prev, - cashback_point: values.floatValue !== undefined ? values.floatValue : '' + cashback_point: values.floatValue ?? '' })); + if (values.floatValue !== undefined) + setErrors((prev) => ({ ...prev, cashback_point: '' })); }} placeholder="Enter Cashback Point" /> + {errors.cashback_point && ( + {errors.cashback_point} + )}
- -
-
- +
+ + {/* Cashback Cash */} +
+
+ +
{ onValueChange={(values) => { setFormField((prev) => ({ ...prev, - cashback_cash: values.floatValue !== undefined ? values.floatValue : '' + cashback_cash: values.floatValue ?? '' })); + if (values.floatValue !== undefined) + setErrors((prev) => ({ ...prev, cashback_cash: '' })); }} placeholder="Enter Cashback Cash" /> + {errors.cashback_cash && ( + {errors.cashback_cash} + )}
- -
-
- +
+ + {/* Status */} +
+
+ +
+ {errors.status && ( + {errors.status} + )}
- -
-
- +
+ + {/* Provider */} +
+
+ +
+ {errors.provider && ( + {errors.provider} + )}
- -
-
- +
+ + {/* Process on Third Party */} +
+
+ +
+ {errors.process_on_third_party && ( + {errors.process_on_third_party} + )}
- -
- -
- + +
+ +
+
+ + )}
diff --git a/src/pages/master/profession/blocks/AddDialog.tsx b/src/pages/master/profession/blocks/AddDialog.tsx index 929041e..3510140 100644 --- a/src/pages/master/profession/blocks/AddDialog.tsx +++ b/src/pages/master/profession/blocks/AddDialog.tsx @@ -29,7 +29,7 @@ const AddDialog = () => { show: false, message: '' }); - + const [errors, setErrors] = useState>({}); const initialState = { name: '', created_by: '', @@ -40,9 +40,31 @@ const AddDialog = () => { const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); + + const validateForm = () => { + const requiredFields = [{ key: 'name', label: 'Profession Name' }]; + const newErrors: Record = {}; + let isValid = true; + + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; + }; + const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; const doCreateProfession = useCallback( @@ -81,15 +103,13 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - - if (!formField.name.trim()) { - setAlert({ show: true, message: 'Please fill name field.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } doCreateProfession(e); - console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -130,12 +150,21 @@ const AddDialog = () => { +
+ setFormField({ ...formField, name: e.target.value })} - /> + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} /> + {errors.name && {errors.name}} +
diff --git a/src/pages/master/profession/blocks/EditDialog.tsx b/src/pages/master/profession/blocks/EditDialog.tsx index 3b6fa0b..4800f05 100644 --- a/src/pages/master/profession/blocks/EditDialog.tsx +++ b/src/pages/master/profession/blocks/EditDialog.tsx @@ -38,12 +38,29 @@ const EditDialog = () => { updated_at: '' }; const [formField, setFormField] = useState(initialState); - + const [errors, setErrors] = useState>({}); const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; + const validateForm = () => { + const requiredFields = [{ key: 'name', label: 'Profession Name' }]; + const newErrors: Record = {}; + let isValid = true; + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; + }; const doUpdateProfession = useCallback( async (e: React.FormEvent) => { e.preventDefault(); @@ -101,14 +118,13 @@ const EditDialog = () => { const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); - if (formField.name.trim() === '') { - setAlert({ show: true, message: 'Please fill name field.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } doUpdateProfession(e); - console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -169,12 +185,22 @@ const EditDialog = () => { +
+ setFormField({ ...formField, name: e.target.value })} + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} /> + {errors.name && {errors.name}} +
diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx index 83666d9..028f6ce 100644 --- a/src/pages/master/provider/blocks/AddDialog.tsx +++ b/src/pages/master/provider/blocks/AddDialog.tsx @@ -63,7 +63,31 @@ const AddDialog = () => { show: false, message: '' }); - + const [errors, setErrors] = useState>({}); + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Name' }, + { key: 'description', label: 'Description' }, + { key: 'type', label: 'Type' }, + { key: 'status', label: 'Status' }, + { key: 'transaction_type', label: 'Transaction Type' } + ]; + const newErrors: Record = {}; + let isValid = true; + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + setErrors(newErrors); + return isValid; + }; const initialState: { name: string; description: string; @@ -130,21 +154,13 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - - if ( - formField.name.trim() === '' || - formField.description.trim() === '' || - formField.type.trim() === '' || - formField.status.trim() === '' || - formField.transaction_type === '' - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } - // console.log(formField); doCreateProvider(e); - setAlert({ show: false, message: '' }); }; const getTransactionTypeList = async (sorting: any) => { @@ -225,12 +241,20 @@ const AddDialog = () => { - setFormField({ ...formField, name: e.target.value })} - /> +
+ { + setFormField({ ...formField, name: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, name: '' })); + }} + /> + {errors.name && ( + {errors.name} + )} +
@@ -239,12 +263,20 @@ const AddDialog = () => { - setFormField({ ...formField, description: e.target.value })} - /> +
+ { + setFormField({ ...formField, description: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, description: '' })); + }} + /> + {errors.description && ( + {errors.description} + )} +
@@ -253,38 +285,53 @@ const AddDialog = () => { - +
+ + {errors.type && ( + {errors.type} + )} +
-
- +
+ + {errors.status && ( + {errors.status} + )} +
@@ -293,23 +340,31 @@ const AddDialog = () => { - +
+ + {errors.transaction_type && ( + {errors.transaction_type} + )} +
diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx index 1a34f96..780599f 100644 --- a/src/pages/master/provider/blocks/EditDialog.tsx +++ b/src/pages/master/provider/blocks/EditDialog.tsx @@ -53,7 +53,31 @@ const EditDialog = () => { show: false, message: '' }); - + const [errors, setErrors] = useState>({}); + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Name' }, + { key: 'description', label: 'Description' }, + { key: 'type', label: 'Type' }, + { key: 'status', label: 'Status' }, + { key: 'transaction_type', label: 'Transaction Type' } + ]; + const newErrors: Record = {}; + let isValid = true; + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + setErrors(newErrors); + return isValid; + }; const initialState: { name: string; description: string; @@ -81,7 +105,7 @@ const EditDialog = () => { const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; const doUpdateProvider = useCallback( @@ -177,22 +201,14 @@ const EditDialog = () => { const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); - - if ( - formField.name.trim() === '' || - formField.description.trim() === '' || - formField.type.trim() === '' || - formField.status.trim() === '' || - formField.transaction_type.trim() === '' || - formField.agent === null - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } - doUpdateProvider(e); // console.log(formField); - setAlert({ show: false, message: '' }); + // setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -258,30 +274,43 @@ const EditDialog = () => { - - setFormField((prev) => ({ ...prev, name: target.value })) - } - /> +
+ { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) setErrors((prev) => ({ ...prev, name: '' })); + }} + /> + {errors.name && ( + {errors.name} + )} +
+ {/* Description */}
- - setFormField({ ...formField, description: e.target.value }) - } - /> +
+ { + setFormField({ ...formField, description: e.target.value }); + if (e.target.value) setErrors((prev) => ({ ...prev, description: '' })); + }} + /> + {errors.description && ( + {errors.description} + )} +
@@ -290,18 +319,26 @@ const EditDialog = () => { - +
+ + {errors.type && ( + {errors.type} + )} +
@@ -310,18 +347,28 @@ const EditDialog = () => { - +
+ + {errors.status && ( + {errors.status} + )} +
@@ -330,23 +377,33 @@ const EditDialog = () => { - +
+ + {errors.transaction_type && ( + + {errors.transaction_type} + + )} +
diff --git a/src/pages/master/sucos/blocks/AddDialog.tsx b/src/pages/master/sucos/blocks/AddDialog.tsx index 5452053..14fb63a 100644 --- a/src/pages/master/sucos/blocks/AddDialog.tsx +++ b/src/pages/master/sucos/blocks/AddDialog.tsx @@ -46,12 +46,18 @@ const AddDialog = () => { show: false, message: '' }); - const initialState = { + const initialState: { + name: string; + postoId: number | null; + created_by: string; + created_at: string; + } = { name: '', - postoId: 0, + postoId: null, created_by: '', created_at: '' }; + const [errors, setErrors] = useState>({}); const [formField, setFormField] = useState(initialState); const created_time = new Date(); @@ -59,7 +65,31 @@ const AddDialog = () => { const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); + }; + + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Sucos Name' }, + { key: 'postoId', label: 'Posto Administrativo Name' } + ]; + const newErrors: Record = {}; + let isValid = true; + + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; }; const doCreateSucos = useCallback( @@ -97,15 +127,14 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - - if (formField.name.trim() === '' || formField.postoId === 0) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } doCreateSucos(e); - console.log(formField); - setAlert({ show: false, message: '' }); + // console.log(formField); }; useEffect(() => { @@ -168,12 +197,23 @@ const AddDialog = () => { - setFormField({ ...formField, name: e.target.value })} - /> +
+ { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} + /> + {errors.name && ( + {errors.name} + )} +
@@ -182,42 +222,48 @@ const AddDialog = () => { - - - - - e.stopPropagation()} - > - - - - No Postu Administrativo Found. - - {posto_adms.map((posto) => ( - { - setFormField({ - ...formField, - postoId: posto.PostoAdms_id - }); - setOpen(false); - }} - > - {posto.PostoAdms_name} - - ))} - - - - - +
+ + + + + e.stopPropagation()} + > + + + + No Postu Administrativo Found. + + {posto_adms.map((posto) => ( + { + setFormField({ + ...formField, + postoId: posto.PostoAdms_id + }); + setOpen(false); + setErrors((prev) => ({ ...prev, postoId: '' })); + }} + > + {posto.PostoAdms_name} + + ))} + + + + + + {errors.postoId && ( + {errors.postoId} + )} +
{/* { const [isSubmitting, setIsSubmitting] = useState(false); const [isLoading, setIsLoading] = useState(false); const [postoadms, setPostoadms] = useState([]); - + const [errors, setErrors] = useState>({}); const [alert, setAlert] = useState({ show: false, message: '' }); - + const initialState = { name: '', postoId: 0, @@ -62,12 +62,31 @@ const EditDialog = () => { const resetForm = () => { setFormField(initialState); - setAlert({ - show: false, - message: '' - }); + setErrors({}); }; + const validateForm = () => { + const requiredFields = [ + { key: 'name', label: 'Sucos Name' }, + { key: 'postoId', label: 'Posto Administrativo Name' } + ]; + const newErrors: Record = {}; + let isValid = true; + requiredFields.forEach(({ key, label }) => { + if ( + formField[key as keyof typeof formField] === '' || + formField[key as keyof typeof formField] === null || + formField[key as keyof typeof formField] === undefined + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; + } const doUpdateSucos = useCallback( async (e: React.FormEvent) => { e.preventDefault(); @@ -144,15 +163,15 @@ const EditDialog = () => { const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); - - if (formField.name.trim() === '' || formField.postoId === 0) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + setIsSubmitting(true); + if (!validateForm()) { + setIsSubmitting(false); return; } + // console.log('Form Field before update:', formField); doUpdateSucos(e); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -217,12 +236,24 @@ const EditDialog = () => { +
+ setFormField({ ...formField, name: e.target.value })} - /> + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} + /> + {errors.name && ( + {errors.name} + )} +
diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx index 6b73eed..3e2a99e 100644 --- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx +++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx @@ -90,6 +90,7 @@ const AddFeeDialog = () => { id: customer.id, name: customer.username })); + const [errors, setErrors] = useState>({}); const initialState = { name: '', description: '', diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx index 4ba5874..01c3f10 100644 --- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx +++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx @@ -109,7 +109,6 @@ const EditDialog = () => { const resetForm = () => { setFormField(initialState); setSelectedGroups([]); - setAlert({ show: false, message: '' }); setErrors({}); }; @@ -231,11 +230,7 @@ const EditDialog = () => { } catch (error) { toast.error( error instanceof Error ? error.message : 'Failed to Update Transfer Type' - ); - setAlert({ - show: true, - message: error instanceof Error ? error.message : 'Failed to Update Transfer Type' - }); + ) return false; } }, [formField, selectedTransferType]);