refactor(FE-114): simplify input handling in MovementForm and RecordingForm by removing unnecessary value normalization

This commit is contained in:
rstubryan
2025-10-25 11:26:38 +07:00
parent 6290199074
commit d7ce8c667a
2 changed files with 27 additions and 42 deletions
@@ -427,9 +427,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const handleDeliveryCostChangeWrapper = useCallback( const handleDeliveryCostChangeWrapper = useCallback(
(idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => { (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
const rawValue = e.target.value.replace(/[^\d,.-]/g, ''); const value = parseFloat(e.target.value) || 0;
const normalizedValue = rawValue.replace(/,/g, '');
const value = parseFloat(normalizedValue) || 0;
handleDeliveryCostChange(idx, value); handleDeliveryCostChange(idx, value);
}, },
[handleDeliveryCostChange] [handleDeliveryCostChange]
@@ -437,9 +435,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const handleDeliveryCostPerItemChangeWrapper = useCallback( const handleDeliveryCostPerItemChangeWrapper = useCallback(
(idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => { (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
const rawValue = e.target.value.replace(/[^\d,.-]/g, ''); const value = parseFloat(e.target.value) || 0;
const normalizedValue = rawValue.replace(/,/g, '');
const value = parseFloat(normalizedValue) || 0;
handleDeliveryCostPerItemChange(idx, value); handleDeliveryCostPerItemChange(idx, value);
}, },
[handleDeliveryCostPerItemChange] [handleDeliveryCostPerItemChange]
@@ -1389,9 +1385,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={delivery.delivery_cost || ''} value={delivery.delivery_cost || ''}
onChange={handleDeliveryCostChangeWrapper(idx)} onChange={handleDeliveryCostChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='currency' decimalScale={0}
decimals={0} allowNegative={false}
min={0} thousandSeparator=','
decimalSeparator='.'
{...isRepeaterInputError( {...isRepeaterInputError(
'deliveries', 'deliveries',
'delivery_cost', 'delivery_cost',
@@ -1411,9 +1408,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={delivery.delivery_cost_per_item || ''} value={delivery.delivery_cost_per_item || ''}
onChange={handleDeliveryCostPerItemChangeWrapper(idx)} onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='currency' decimalScale={0}
decimals={0} allowNegative={false}
min={0} thousandSeparator=','
decimalSeparator='.'
{...isRepeaterInputError( {...isRepeaterInputError(
'deliveries', 'deliveries',
'delivery_cost_per_item', 'delivery_cost_per_item',
@@ -494,16 +494,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}; };
const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => { const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
const rawValue = e.target.value.replace(/[^\d,.-]/g, ''); const value = parseFloat(e.target.value) || 0;
const normalizedValue = rawValue.replace(/,/g, '');
const value = parseFloat(normalizedValue) || 0;
handleWeightChange(idx, value); handleWeightChange(idx, value);
}; };
const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => { const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
const rawValue = e.target.value.replace(/[^\d,.-]/g, ''); const value = parseFloat(e.target.value) || 0;
const normalizedValue = rawValue.replace(/,/g, '');
const value = parseFloat(normalizedValue) || 0;
handleQtyChange(idx, value); handleQtyChange(idx, value);
}; };
@@ -511,9 +507,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setEditingAverageIndex(idx); setEditingAverageIndex(idx);
setManuallyEditedRows(prev => new Set(prev).add(idx)); setManuallyEditedRows(prev => new Set(prev).add(idx));
const rawValue = e.target.value.replace(/[^\d,.-]/g, ''); const value = parseFloat(e.target.value) || 0;
const normalizedValue = rawValue.replace(/,/g, '');
const value = parseFloat(normalizedValue) || 0;
handleAverageWeightChange(idx, value); handleAverageWeightChange(idx, value);
}; };
@@ -551,7 +545,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
const handleStockUsageAmountChangeWrapper = useCallback( const handleStockUsageAmountChangeWrapper = useCallback(
(idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => { (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0; const value = parseFloat(e.target.value) || 0;
formik.setFieldValue(`stocks.${idx}.usage_amount`, value); formik.setFieldValue(`stocks.${idx}.usage_amount`, value);
}, },
[formik] [formik]
@@ -584,7 +578,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
const handleDepletionTotalChangeWrapper = useCallback( const handleDepletionTotalChangeWrapper = useCallback(
(idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => { (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0; const value = parseFloat(e.target.value) || 0;
formik.setFieldValue(`depletions.${idx}.total`, value); formik.setFieldValue(`depletions.${idx}.total`, value);
}, },
[formik] [formik]
@@ -801,10 +795,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
value={bw.weight} value={bw.weight}
onChange={handleWeightChangeWrapper(idx)} onChange={handleWeightChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='weight' decimalScale={2}
weightUnit='gram' allowNegative={false}
decimals={2}
min={0}
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
isError={ isError={
@@ -828,9 +820,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
value={bw.qty} value={bw.qty}
onChange={handleQtyChangeWrapper(idx)} onChange={handleQtyChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='number' decimalScale={0}
decimals={0} allowNegative={false}
min={0}
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
isError={ isError={
@@ -856,10 +847,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
handleAverageWeightBlur(idx); handleAverageWeightBlur(idx);
formik.handleBlur(e); formik.handleBlur(e);
}} }}
maskType='weight' decimalScale={2}
weightUnit='gram' allowNegative={false}
decimals={2}
min={0}
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
isError={ isError={
@@ -1063,11 +1052,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
value={stock.usage_amount} value={stock.usage_amount}
onChange={handleStockUsageAmountChangeWrapper(idx)} onChange={handleStockUsageAmountChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='number' decimalScale={0}
decimals={0} allowNegative={false}
min={0}
thousandSeparator=',' thousandSeparator=','
decimalSeparator='' decimalSeparator='.'
isError={ isError={
isRepeaterInputError('stocks', 'usage_amount', idx) isRepeaterInputError('stocks', 'usage_amount', idx)
.isError || Boolean(getStockUsageError(idx)) .isError || Boolean(getStockUsageError(idx))
@@ -1255,11 +1243,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
value={depletion.total} value={depletion.total}
onChange={handleDepletionTotalChangeWrapper(idx)} onChange={handleDepletionTotalChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='number' decimalScale={0}
decimals={0} allowNegative={false}
min={0}
thousandSeparator=',' thousandSeparator=','
decimalSeparator='' decimalSeparator='.'
isError={ isError={
isRepeaterInputError('depletions', 'total', idx) isRepeaterInputError('depletions', 'total', idx)
.isError .isError