X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FForm.js;fp=resources%2Fjs%2Fcomponents%2Ftechniques%2FForm.js;h=9bbb5112511a4d1e0fef78cb22c000bc6954052a;hb=7c6716036321ba09846785720e81459aad55a323;hp=0000000000000000000000000000000000000000;hpb=9aca4f1a99af65dc988d2f66e122e25456a4efd9;p=alttp.git

diff --git a/resources/js/components/techniques/Form.js b/resources/js/components/techniques/Form.js
new file mode 100644
index 0000000..9bbb511
--- /dev/null
+++ b/resources/js/components/techniques/Form.js
@@ -0,0 +1,132 @@
+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { getTranslation } from '../../helpers/Technique';
+import yup from '../../schema/yup';
+
+const ContentForm = ({
+	errors,
+	handleBlur,
+	handleChange,
+	handleSubmit,
+	onCancel,
+	touched,
+	values,
+}) => {
+	const { t } = useTranslation();
+
+	return <Form noValidate onSubmit={handleSubmit}>
+		<Modal.Body>
+			<Row>
+				<Form.Group as={Col} md={6} controlId="content.title">
+					<Form.Label>{t('content.title')}</Form.Label>
+					<Form.Control
+						isInvalid={!!(touched.title && errors.title)}
+						name="title"
+						onBlur={handleBlur}
+						onChange={handleChange}
+						type="text"
+						value={values.title || ''}
+					/>
+				</Form.Group>
+			</Row>
+			<Form.Group controlId="content.short">
+				<Form.Label>{t('content.short')}</Form.Label>
+				<Form.Control
+					as="textarea"
+					isInvalid={!!(touched.short && errors.short)}
+					name="short"
+					onBlur={handleBlur}
+					onChange={handleChange}
+					rows={3}
+					value={values.short || ''}
+				/>
+			</Form.Group>
+			<Form.Group controlId="content.description">
+				<Form.Label>{t('content.description')}</Form.Label>
+				<Form.Control
+					as="textarea"
+					isInvalid={!!(touched.description && errors.description)}
+					name="description"
+					onBlur={handleBlur}
+					onChange={handleChange}
+					rows={10}
+					value={values.description || ''}
+				/>
+			</Form.Group>
+			<Form.Group controlId="content.attribution">
+				<Form.Label>{t('content.attribution')}</Form.Label>
+				<Form.Control
+					as="textarea"
+					isInvalid={!!(touched.attribution && errors.attribution)}
+					name="attribution"
+					onBlur={handleBlur}
+					onChange={handleChange}
+					rows={3}
+					value={values.attribution || ''}
+				/>
+			</Form.Group>
+		</Modal.Body>
+		<Modal.Footer>
+			{onCancel ?
+				<Button onClick={onCancel} variant="secondary">
+					{t('button.cancel')}
+				</Button>
+			: null}
+			<Button type="submit" variant="primary">
+				{t('button.save')}
+			</Button>
+		</Modal.Footer>
+	</Form>;
+};
+
+ContentForm.propTypes = {
+	errors: PropTypes.shape({
+		attribution: PropTypes.string,
+		description: PropTypes.string,
+		short: PropTypes.string,
+		title: PropTypes.string,
+	}),
+	handleBlur: PropTypes.func,
+	handleChange: PropTypes.func,
+	handleSubmit: PropTypes.func,
+	onCancel: PropTypes.func,
+	touched: PropTypes.shape({
+		attribution: PropTypes.bool,
+		description: PropTypes.bool,
+		short: PropTypes.bool,
+		title: PropTypes.bool,
+	}),
+	values: PropTypes.shape({
+		attribution: PropTypes.string,
+		description: PropTypes.string,
+		short: PropTypes.string,
+		title: PropTypes.string,
+	}),
+};
+
+export default withFormik({
+	displayName: 'ContentForm',
+	enableReinitialize: true,
+	handleSubmit: async (values, actions) => {
+		const { onSubmit } = actions.props;
+		await onSubmit(values);
+	},
+	mapPropsToValues: ({ content, language }) => ({
+		attribution: getTranslation(content, 'attribution', language),
+		description: getTranslation(content, 'description', language),
+		id: (content && content.id) || null,
+		language,
+		short: getTranslation(content, 'short', language),
+		title: getTranslation(content, 'title', language),
+	}),
+	validationSchema: yup.object().shape({
+		attribution: yup.string(),
+		description: yup.string(),
+		short: yup.string(),
+		title: yup.string(),
+	}),
+})(ContentForm);