import React from 'react';
import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
+import toastr from 'toastr';
+import LargeCheck from '../common/LargeCheck';
import i18n from '../../i18n';
+import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
+import { findResult } from '../../helpers/Participant';
import { formatTime, parseTime } from '../../helpers/Result';
import yup from '../../schema/yup';
<Form noValidate onSubmit={handleSubmit}>
<Modal.Body>
<Row>
- <Form.Group as={Col} controlId="report.time">
+ <Form.Group as={Col} sm={9} controlId="report.time">
<Form.Label>{i18n.t('results.reportTime')}</Form.Label>
<Form.Control
isInvalid={!!(touched.time && errors.time)}
name="time"
onBlur={handleBlur}
onChange={handleChange}
- placeholder="1:22:59"
+ placeholder={values.forfeit ? 'DNF' : '1:22:59'}
type="text"
value={values.time || ''}
/>
</Form.Text>
}
</Form.Group>
+ <Form.Group as={Col} sm={3} controlId="report.forfeit">
+ <Form.Label>{i18n.t('results.forfeit')}</Form.Label>
+ <Form.Control
+ as={LargeCheck}
+ isInvalid={!!(touched.forfeit && errors.forfeit)}
+ name="forfeit"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ value={!!values.forfeit}
+ />
+ </Form.Group>
</Row>
</Modal.Body>
<Modal.Footer>
ReportForm.propTypes = {
errors: PropTypes.shape({
+ forfeit: PropTypes.string,
time: PropTypes.string,
}),
handleBlur: PropTypes.func,
handleSubmit: PropTypes.func,
onCancel: PropTypes.func,
touched: PropTypes.shape({
+ forfeit: PropTypes.bool,
time: PropTypes.bool,
}),
values: PropTypes.shape({
+ forfeit: PropTypes.bool,
time: PropTypes.string,
}),
};
displayName: 'ReportForm',
enableReinitialize: true,
handleSubmit: async (values, actions) => {
- const { participant_id, round_id, time } = values;
+ const { forfeit, participant_id, round_id, time } = values;
+ const { setErrors } = actions;
const { onCancel } = actions.props;
- await axios.post('/api/results', {
- participant_id,
- round_id,
- time: parseTime(time),
- });
- if (onCancel) {
- onCancel();
+ try {
+ await axios.post('/api/results', {
+ forfeit,
+ participant_id,
+ round_id,
+ time: parseTime(time) || 0,
+ });
+ toastr.success(i18n.t('results.reportSuccess'));
+ if (onCancel) {
+ onCancel();
+ }
+ } catch (e) {
+ toastr.success(i18n.t('results.reportError'));
+ if (e.response && e.response.data && e.response.data.errors) {
+ setErrors(laravelErrorsToFormik(e.response.data.errors));
+ }
}
},
- mapPropsToValues: ({ participant, round }) => ({
- participant_id: participant.id,
- round_id: round.id,
- time: '',
- }),
+ mapPropsToValues: ({ participant, round }) => {
+ const result = findResult(participant, round);
+ console.log(result);
+ return {
+ forfeit: result ? !!result.forfeit : false,
+ participant_id: participant.id,
+ round_id: round.id,
+ time: result && result.time ? formatTime(result) : '',
+ };
+ },
validationSchema: yup.object().shape({
- time: yup.string().required().time(),
+ forfeit: yup.boolean().required(),
+ time: yup.string().time().when('forfeit', {
+ is: false,
+ then: yup.string().required().time(),
+ }),
}),
})(withTranslation()(ReportForm));