X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Frounds%2FEditForm.js;fp=resources%2Fjs%2Fcomponents%2Frounds%2FEditForm.js;h=57ee95a5a6e1298c97d9891617beab9e121ac376;hb=4f4b2fd64141cbbff953881e2705602a00b85df5;hp=0000000000000000000000000000000000000000;hpb=33feb66adcce4897c9c92a0300ddcb45bc269da1;p=alttp.git

diff --git a/resources/js/components/rounds/EditForm.js b/resources/js/components/rounds/EditForm.js
new file mode 100644
index 0000000..57ee95a
--- /dev/null
+++ b/resources/js/components/rounds/EditForm.js
@@ -0,0 +1,121 @@
+import axios from 'axios';
+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+import toastr from 'toastr';
+
+import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
+import i18n from '../../i18n';
+import yup from '../../schema/yup';
+
+const EditForm = ({
+	errors,
+	handleBlur,
+	handleChange,
+	handleSubmit,
+	onCancel,
+	touched,
+	values,
+}) =>
+<Form noValidate onSubmit={handleSubmit}>
+	<Modal.Body>
+		<Row>
+			<Form.Group as={Col} controlId="round.title">
+				<Form.Label>{i18n.t('rounds.title')}</Form.Label>
+				<Form.Control
+					isInvalid={!!(touched.title && errors.title)}
+					name="title"
+					onBlur={handleBlur}
+					onChange={handleChange}
+					type="text"
+					value={values.title || ''}
+				/>
+				{touched.title && errors.title ?
+					<Form.Control.Feedback type="invalid">
+						{i18n.t(errors.title)}
+					</Form.Control.Feedback>
+				: null}
+			</Form.Group>
+		</Row>
+		<Row>
+			<Form.Group as={Col} controlId="round.seed">
+				<Form.Label>{i18n.t('rounds.seed')}</Form.Label>
+				<Form.Control
+					isInvalid={!!(touched.seed && errors.seed)}
+					name="seed"
+					onBlur={handleBlur}
+					onChange={handleChange}
+					type="text"
+					value={values.seed || ''}
+				/>
+				{touched.seed && errors.seed ?
+					<Form.Control.Feedback type="invalid">
+						{i18n.t(errors.seed)}
+					</Form.Control.Feedback>
+				: null}
+			</Form.Group>
+		</Row>
+	</Modal.Body>
+	<Modal.Footer>
+		{onCancel ?
+			<Button onClick={onCancel} variant="secondary">
+				{i18n.t('button.cancel')}
+			</Button>
+		: null}
+		<Button type="submit" variant="primary">
+			{i18n.t('button.save')}
+		</Button>
+	</Modal.Footer>
+</Form>;
+
+EditForm.propTypes = {
+	errors: PropTypes.shape({
+		seed: PropTypes.string,
+		title: PropTypes.string,
+	}),
+	handleBlur: PropTypes.func,
+	handleChange: PropTypes.func,
+	handleSubmit: PropTypes.func,
+	onCancel: PropTypes.func,
+	touched: PropTypes.shape({
+		seed: PropTypes.bool,
+		title: PropTypes.bool,
+	}),
+	values: PropTypes.shape({
+		seed: PropTypes.string,
+		title: PropTypes.string,
+	}),
+};
+
+export default withFormik({
+	displayName: 'EditForm',
+	enableReinitialize: true,
+	handleSubmit: async (values, actions) => {
+		const { round_id } = values;
+		const { setErrors } = actions;
+		const { onCancel } = actions.props;
+		try {
+			await axios.put(`/api/rounds/${round_id}`, values);
+			toastr.success(i18n.t('rounds.editSuccess'));
+			if (onCancel) {
+				onCancel();
+			}
+		} catch (e) {
+			toastr.error(i18n.t('rounds.editError'));
+			if (e.response && e.response.data && e.response.data.errors) {
+				setErrors(laravelErrorsToFormik(e.response.data.errors));
+			}
+		}
+	},
+	mapPropsToValues: ({ round }) => ({
+		round_id: round.id,
+		seed: round.seed || '',
+		title: round.title || '',
+	}),
+	validationSchema: yup.object().shape({
+		seed: yup.string().url(),
+		title: yup.string(),
+	}),
+})(withTranslation()(EditForm));