From 87f716d46971a8d602ff71262412a9c2649f361a Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 8 May 2025 11:23:13 +0700 Subject: [PATCH] fix alert empty validation on currency module --- .../master/currency/blocks/AddDialog.tsx | 104 +++++------- .../master/currency/blocks/EditDialog.tsx | 159 +++++++++--------- src/pages/master/currency/blocks/Types.ts | 47 ++++++ .../currency/hooks/ManageCurrencyContext.tsx | 3 +- 4 files changed, 172 insertions(+), 141 deletions(-) create mode 100644 src/pages/master/currency/blocks/Types.ts diff --git a/src/pages/master/currency/blocks/AddDialog.tsx b/src/pages/master/currency/blocks/AddDialog.tsx index 9371a44..be8768d 100644 --- a/src/pages/master/currency/blocks/AddDialog.tsx +++ b/src/pages/master/currency/blocks/AddDialog.tsx @@ -15,16 +15,6 @@ import { import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { NumericFormat } from 'react-number-format'; -import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList -} from '@/components/ui/command'; -import { set } from 'date-fns'; import { Select, SelectContent, @@ -33,9 +23,9 @@ import { SelectValue } from '@/components/ui/select'; import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext'; -import { prefix } from 'stylis'; import { doSaveLogActivity } from '@/actions/GlobalActions'; import { RefreshCw } from 'lucide-react'; +import { initialStateCurrency, validateFormCurrency } from './Types'; interface CurrencyProps { ID: string; name: string; @@ -50,27 +40,15 @@ const AddDialog = () => { const { PostData, GetData } = useCallApi(); const parsedUser = getAuth()?.user; const [currencies, setCurrencies] = useState([]); - const [open, setOpen] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); - const initialState = { - code: '', - name: '', - prefix: '', - status: '', - created_by: '', - created_at: '' - }; - const [formField, setFormField] = useState(initialState); + const [errors, setErrors] = useState>({}); + const [formField, setFormField] = useState(initialStateCurrency); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const resetForm = () => { - setFormField(initialState); - setAlert({ show: false, message: '' }); + setFormField(initialStateCurrency); + setErrors({}); }; const doCreateCurrency = useCallback( @@ -94,8 +72,7 @@ const AddDialog = () => { doSaveLogActivity(createActivity); reload(); } else { - toast.error('Error Create Currency'); - setAlert({ show: true, message: response?.message }); + toast.error(response?.message); } } catch (error) { toast.error('Something went wrong'); @@ -109,19 +86,11 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if ( - formField.code === '' || - formField.name === '' || - formField.prefix === '' || - formField.status === '' - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + if (!validateFormCurrency(formField, setErrors)) { return; } doCreateCurrency(e); - // console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -144,17 +113,11 @@ const AddDialog = () => { handleAddDialog(open)}> - Cuurency - Create + Currency - Create
- {alert.show && ( - -

{alert.message}

- - )} -
@@ -167,10 +130,16 @@ const AddDialog = () => { type="text" autoComplete="off" value={formField.code} - onChange={({ target }) => - setFormField((prev) => ({ ...prev, code: target.value })) - } + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, code: target.value })); + setErrors((prev) => ({ ...prev, code: '' })); + }} /> + {errors.code && ( + + {errors.code} + + )}
@@ -211,11 +192,12 @@ const AddDialog = () => {
+ {errors.status && ( + {errors.status} + )}
-
diff --git a/src/pages/master/currency/blocks/Types.ts b/src/pages/master/currency/blocks/Types.ts new file mode 100644 index 0000000..8ee67ea --- /dev/null +++ b/src/pages/master/currency/blocks/Types.ts @@ -0,0 +1,47 @@ +import { toast } from 'sonner'; + +export const initialStateCurrency: { + code: string; + name: string; + prefix: string; + status: string; + created_by: string; + created_at: string; +} = { + code: '', + name: '', + prefix: '', + status: '', + created_by: '', + created_at: '' +}; + +export const validateFormCurrency = ( + formField: typeof initialStateCurrency, + setErrors: React.Dispatch>> +) => { + const requiredFields = [ + { key: 'code', label: 'Code' }, + { key: 'name', label: 'Name' }, + { key: 'prefix', label: 'Prefix' }, + { key: 'status', label: 'Status' } + ]; + + 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; +}; diff --git a/src/pages/master/currency/hooks/ManageCurrencyContext.tsx b/src/pages/master/currency/hooks/ManageCurrencyContext.tsx index 2795014..67f320e 100644 --- a/src/pages/master/currency/hooks/ManageCurrencyContext.tsx +++ b/src/pages/master/currency/hooks/ManageCurrencyContext.tsx @@ -155,7 +155,6 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode order_direction: sorting[0].desc ? 'ASC' : 'DESC' // filter: JSON.stringify(filter) }); - // console.log(response?.data); return { data: response?.data.list, totalCount: response?.data.total_count }; }; @@ -181,7 +180,7 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode pagination={{ size: 10 }} layout={{ card: true }} toolbar={} - sorting={[{ id: 'ID', desc: true }]} + sorting={[{ id: 'created_at', desc: false }]} serverSide={true} onFetchData={({ pageIndex, pageSize, sorting }) => doGetCurrency(pageIndex, pageSize, sorting)