diff --git a/src/components/forms/DefaultCompletionsForm/DefaultCompletionsForm.tsx b/src/components/forms/DefaultCompletionsForm/DefaultCompletionsForm.tsx new file mode 100644 index 00000000..f9290c4b --- /dev/null +++ b/src/components/forms/DefaultCompletionsForm/DefaultCompletionsForm.tsx @@ -0,0 +1,139 @@ +import styled from '@emotion/styled'; +import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; +import DeleteIcon from '@mui/icons-material/Delete'; +import { Box, Button, Grid, GridProps, IconButton, Typography, useTheme } from '@mui/material'; +import { FC } from 'react'; +import { + Control, + Controller, + FieldArrayWithId, + UseFieldArrayAppend, + UseFieldArrayRemove +} from 'react-hook-form'; + +import { useAppSelector } from '../../../app/hooks'; +import ThemeMode from '../../../models/ThemeMode'; +import { selectThemeMode } from '../../../store/theme/theme.selectors'; +import { FormValues } from '../TrackerForm/types'; +import CompletionQuantityTextField from '../completions/CompletionQuantityTextField'; +import CompletionUnitTextField from '../completions/CompletionUnitTextField'; + +export const FieldsetGrid = styled(Grid)` + border: 1px solid rgba(0, 0, 0, 0.23); + border-radius: 4px; + padding: 8px; +`; + +interface Props { + append: UseFieldArrayAppend; + control: Control /* eslint-disable-line @typescript-eslint/no-explicit-any */; + fields: FieldArrayWithId[]; + gridProps?: GridProps; + remove: UseFieldArrayRemove; +} + +/** + * This forms is used to create one or many defaultCompletions for a new tracker. + * + * @param {*} { append, control, fields, gridProps, remove } + * @return {*} + */ +const DefaultCompletionsForm: FC = ({ append, control, fields, gridProps, remove }) => { + const themeMode = useAppSelector(selectThemeMode); + const theme = useTheme(); + + const fieldsetSx = { + bgcolor: themeMode === ThemeMode.LIGHT ? theme.palette.grey[100] : theme.palette.grey[900], + mb: 1 + }; + + return ( + + {fields.map((field, index) => ( + + + Réalisation par défaut n°{index + 1} + remove(index)} sx={{ p: 0 }}> + + + + + { + let errorText = ''; + if (error) { + switch (error.type) { + case 'min': + errorText = 'La quantité doit être supérieure à 0.'; + break; + + case 'pattern': + errorText = 'La quantité doit être un nombre.'; + break; + + case 'required': + errorText = 'La quantité est requise'; + break; + } + } + return ( + + ); + }} + /> + + + ( + + )} + /> + + + ))} + + + ); +}; + +export default DefaultCompletionsForm; diff --git a/src/components/forms/TrackerForm/TrackerForm.tsx b/src/components/forms/TrackerForm/TrackerForm.tsx index 05665c15..7fef8b31 100644 --- a/src/components/forms/TrackerForm/TrackerForm.tsx +++ b/src/components/forms/TrackerForm/TrackerForm.tsx @@ -7,6 +7,7 @@ import { v4 } from 'uuid'; import { useAppDispatch } from '../../../app/hooks'; import TrackerStatus from '../../../models/TrackerStatus'; import { createTracker } from '../../../store/trackers/trackersSlice'; +import DefaultCompletionsForm from '../DefaultCompletionsForm/DefaultCompletionsForm'; import RequiredCompletionsForm from '../RequiredCompletionsForm/RequiredCompletionsForm'; import { FormValues } from './types'; @@ -14,6 +15,7 @@ const getDefaultValues = (): FormValues => ({ id: v4(), beginDate: new Date().toString(), duration: '', + defaultCompletions: [], entries: [], name: '', requiredCompletions: [ @@ -33,10 +35,14 @@ const TrackerForm: FC = ({ hideForm }) => { const { control, handleSubmit, reset } = useForm({ defaultValues: getDefaultValues() }); - const { fields, append, remove } = useFieldArray({ + const requiredCompletionsFieldArray = useFieldArray({ control, // control props comes from useForm name: 'requiredCompletions' }); + const defaultCompletionsFieldArray = useFieldArray({ + control, // control props comes from useForm + name: 'defaultCompletions' + }); const dispatch = useAppDispatch(); @@ -139,7 +145,19 @@ const TrackerForm: FC = ({ hideForm }) => { }} /> - + + +