fix(floatingNumberForm): fix some issues with floating quantities in …

…form
Clm-Roig · Jul 4, 2022 · c6ad7f9 · c6ad7f9
1 parent 93933bb
commit c6ad7f9
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 60 deletions.
diff --git a/src/components/CompletionChip/CompletionChip.tsx b/src/components/CompletionChip/CompletionChip.tsx
@@ -36,7 +36,7 @@ const CompletionChip: FC<Props> = ({
     <Chip
       clickable={true}
       color={isSelected ? 'info' : 'primary'}
-      label={quantity.toString() + ' ' + unit}
+      label={quantity + ' ' + unit}
       sx={sxProps}
       {...chipProps}
     />

diff --git a/src/components/TrackerCard/TrackerCardContent.tsx b/src/components/TrackerCard/TrackerCardContent.tsx
@@ -41,7 +41,7 @@ const TrackerCardContent: FC<Props> = ({
     .map((rc) => {
       const todayCompletion = aggCompletions.find((c) => rc.unit === c.unit);
       if (todayCompletion) {
-        const remain = rc.quantity - todayCompletion.quantity;
+        const remain = Number((rc.quantity - todayCompletion.quantity).toFixed(2));
         return {
           ...rc,
           quantity: remain

diff --git a/src/components/forms/ValidateCompletionsForm/ValidateCompletionsForm.tsx b/src/components/forms/ValidateCompletionsForm/ValidateCompletionsForm.tsx
@@ -5,6 +5,7 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { useAutoAnimate } from '../../../hooks/useAutoAnimate';
 import Completion from '../../../models/Completion';
+import { validateFacultativePositiveFloat } from '../../../utils/validateNumber';
 import CompletionQuantityTextField from '../completions/CompletionQuantityTextField';
 import CompletionUnitTextField from '../completions/CompletionUnitTextField';
 import {
@@ -85,43 +86,27 @@ const ValidateCompletionsForm: FC<Props> = ({ completions, formId, onSubmit }) =
               control={control}
               name={`completions.${index}.quantity` as const}
               rules={{
-                min: 1,
-                pattern: /^\d+$/,
-                required: true
-              }}
-              render={({ field: { name, onChange, value }, fieldState: { error } }) => {
-                let errorText = '';
-                if (error) {
-                  switch (error.type) {
-                    case 'min':
-                      errorText = 'La quantité doit être supérieure ou égale à 1.';
-                      break;
-
-                    case 'pattern':
-                      errorText = 'La quantité doit être un nombre.';
-                      break;
-
-                    case 'required':
-                      errorText = 'La quantité est requise';
-                      break;
-                  }
-                }
-                return (
-                  <CompletionQuantityTextField
-                    onDecrement={() => setValue(name, computeDecrementedStringQuantity(value))}
-                    onIncrement={() => setValue(name, computeIncrementedStringQuantity(value))}
-                    textFieldProps={{
-                      error: !!error,
-                      helperText: error && errorText,
-                      onChange: onChange,
-                      required: true,
-                      size: 'small',
-                      sx: { mb: 1 },
-                      value: value || ''
-                    }}
-                  />
-                );
+                min: { value: 1, message: 'La quantité doit être supérieure ou égale à 1.' },
+                required: { value: true, message: 'La quantité est requise.' },
+                validate: (value) =>
+                  validateFacultativePositiveFloat(value) ||
+                  'La quantité doit être un nombre positif.'
               }}
+              render={({ field: { name, onChange, value }, fieldState: { error } }) => (
+                <CompletionQuantityTextField
+                  onDecrement={() => setValue(name, computeDecrementedStringQuantity(value))}
+                  onIncrement={() => setValue(name, computeIncrementedStringQuantity(value))}
+                  textFieldProps={{
+                    error: !!error,
+                    helperText: error && error.message,
+                    onChange: onChange,
+                    required: true,
+                    size: 'small',
+                    sx: { mb: 1 },
+                    value: value || ''
+                  }}
+                />
+              )}
             />
           </Grid>
           <Grid item xs={1}>

diff --git a/src/components/forms/completions/CompletionQuantityTextField.tsx b/src/components/forms/completions/CompletionQuantityTextField.tsx
@@ -1,13 +1,11 @@
 import styled from '@emotion/styled';
-import { Button, TextFieldProps } from '@mui/material';
+import { Button, TextField, TextFieldProps } from '@mui/material';
 import React, { FC } from 'react';
 
-import NumberTextField from '../formElements/NumberTextField/NumberTextField';
-
 const StyledButton = styled(Button)`
   min-width: auto;
 `;
-const StyledTextField = styled(NumberTextField)`
+const StyledTextField = styled(TextField)`
   fieldset {
     border-width: 0 1px 1px 0;
     border-top-right-radius: 0;
@@ -26,6 +24,7 @@ const CompletionQuantityTextField: FC<Props> = ({ onDecrement, onIncrement, text
     <StyledTextField
       inputProps={{
         min: 1,
+        inputMode: 'numeric',
         style: {
           textAlign: 'center'
         }

diff --git a/src/components/forms/formElements/NumberTextField/NumberTextField.tsx b/src/components/forms/formElements/NumberTextField/NumberTextField.tsx