diff --git a/.babelrc b/.babelrc index 20a87235f4..c844f15918 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,7 @@ { "plugins": [ - "transform-object-assign" + "transform-object-assign", + "transform-object-rest-spread" ], "presets": [ [ diff --git a/lms/djangoapps/support/static/support/jsx/entitlements/components/EntitlementForm/container.jsx b/lms/djangoapps/support/static/support/jsx/entitlements/components/EntitlementForm/container.jsx new file mode 100644 index 0000000000..5063648066 --- /dev/null +++ b/lms/djangoapps/support/static/support/jsx/entitlements/components/EntitlementForm/container.jsx @@ -0,0 +1,27 @@ +import { connect } from 'react-redux'; + +import { createEntitlement, reissueEntitlement } from '../../data/actions/entitlement'; +import { closeForm } from '../../data/actions/form'; + +import EntitlementForm from './index.jsx'; + +const mapStateToProps = state => ({ + formType: state.form.formType, + isOpen: state.form.isOpen, + entitlement: state.form.activeEntitlement, +}); + +const mapDispatchToProps = dispatch => ({ + createEntitlement: ({ username, courseUuid, mode, comments }) => + dispatch(createEntitlement({ username, courseUuid, mode, comments })), + reissueEntitlement: ({ entitlement, comments }) => + dispatch(reissueEntitlement({ entitlement, comments })), + closeForm: () => dispatch(closeForm()), +}); + +const EntitlementFormContainer = connect( + mapStateToProps, + mapDispatchToProps, +)(EntitlementForm); + +export default EntitlementFormContainer; diff --git a/lms/djangoapps/support/static/support/jsx/entitlements/components/EntitlementForm/index.jsx b/lms/djangoapps/support/static/support/jsx/entitlements/components/EntitlementForm/index.jsx new file mode 100644 index 0000000000..7bba4c712c --- /dev/null +++ b/lms/djangoapps/support/static/support/jsx/entitlements/components/EntitlementForm/index.jsx @@ -0,0 +1,163 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Button, InputSelect, InputText, TextArea } from '@edx/paragon'; +import { formTypes } from '../../data/constants/formTypes'; + +class EntitlementForm extends React.Component { + constructor(props) { + super(props); + + if (props.formType === formTypes.REISSUE) { + const { courseUuid, mode, user } = props.entitlement; + this.state = { + courseUuid, + mode, + username: user, + comments: '', + }; + } else { + this.state = { + courseUuid: '', + mode: '', + username: '', + comments: '', + }; + } + + this.onClose = this.onClose.bind(this); + this.handleCourseUUIDChange = this.handleCourseUUIDChange.bind(this); + this.handleUsernameChange = this.handleUsernameChange.bind(this); + this.handleModeChange = this.handleModeChange.bind(this); + this.handleCommentsChange = this.handleCommentsChange.bind(this); + this.submitForm = this.submitForm.bind(this); + } + + onClose() { + this.props.closeForm(); + } + + handleCourseUUIDChange(courseUuid) { + this.setState({ courseUuid }); + } + + handleUsernameChange(username) { + this.setState({ username }); + } + + handleModeChange(mode) { + this.setState({ mode }); + } + + handleCommentsChange(comments) { + this.setState({ comments }); + } + + submitForm() { + const { courseUuid, username, mode, comments } = this.state; + const { formType, entitlement } = this.props; + if (formType === formTypes.REISSUE) { // if there is an active entitlement we are updating an entitlement + this.props.reissueEntitlement({ entitlement, comments }); + } else { // if there is no active entitlement we are creating a new entitlement + this.props.createEntitlement({ courseUuid, username, mode, comments }); + } + } + + render() { + const { courseUuid, username, mode, comments } = this.state; + const isReissue = this.props.formType === formTypes.REISSUE; + const title = isReissue ? 'Re-issue Entitlement' : 'Create Entitlement'; + + const body = ( +
+

{title}

+ + + +