import React, { Component } from "react"; import Form from 'react-bootstrap/Form'; import Button from "react-bootstrap/esm/Button"; import { connect } from "react-redux"; import { bindActionCreators } from "redux"; import * as applicationManagementActions from "../state/ApplicationManagementActions" const mapStateToProps = state => { return { accessToken: state.AuthenticationReducer.accessToken, isAdmin: state.AuthenticationReducer.isAdmin, user: state.AuthenticationReducer.user }; } class CreateNewApplicationForm extends Component { constructor(props) { super(props); if (!this.props.isAdmin) { this.state = { degreeCourseID: this.props.degreeCourse.id, targetPeriodYear: "", targetPeriodShortName: "" } } else { this.state = { applicantUserID: "", degreeCourseID: this.props.degreeCourse.id, targetPeriodYear: "", targetPeriodShortName: "" }; } this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { const { name, value } = e.target; this.setState({ [name]: value }) } async handleSubmit(e) { e.preventDefault(); const { createNewApplicationAction } = this.props; this.props.goBack() await createNewApplicationAction(this.state, this.props.accessToken) } handle render() { let degreeCourse = this.props.degreeCourse let userIDField if (this.props.isAdmin) { userIDField = ( <> <Form.Group className="mb-3"> <Form.Label>User-ID</Form.Label> <Form.Control id="CreateDegreeCourseApplicationEditUserID" name="applicantUserID" type="text" placeholder="Bitte User-ID eingeben" onChange={this.handleChange} /> </Form.Group> </>) } else { userIDField = ( <> <Form.Group className="mb-3"> <Form.Label>User-ID</Form.Label> <Form.Control id="CreateDegreeCourseApplicationEditUserID" name="applicantUserID" type="read" disabled value={this.props.user} /> </Form.Group> </>) } return ( <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', textAlign: 'left', padding: '2em', background: "#fff", borderRadius: '30px', margin: '3rem' }}> <Form style={{ width: '60rem' }}> <h2>Bewerbung Anlegen</h2> <Form.Group className="mb-3"> <Form.Label>Studiengang</Form.Label> <Form.Control id="CreateDegreeCourseComponentEditDegreeCourseName" disabled value={degreeCourse.shortName + ": " + degreeCourse.name} type="text" onChange={this.handleChange} required /> </Form.Group> {userIDField} <Form.Group className="mb-3"> <Form.Label>Year</Form.Label> <Form.Control id="CreateDegreeCourseApplicationEditTargetPeriodYear" name="targetPeriodYear" type="number" min={new Date().getFullYear()} placeholder="Year" onChange={this.handleChange} /> </Form.Group> <Form.Group> <Form.Label>Semester</Form.Label> <Form.Control style={{ marginBottom: '1rem' }} id="CreateDegreeCourseApplicationEditTargetPeriodName" as="select" name="targetPeriodShortName" aria-label="Default select example" onChange={this.handleChange}> <option value="">Bitte Semester auswählen</option> <option value="WiSe">Wintersemester</option> <option value="SoSe">Sommersemester</option> </Form.Control> </Form.Group> <Button style={{ marginRight: '1rem' }} id="CreateDegreeCourseApplicationCancelButton" variant="primary" type="button" onClick={this.props.goBack}> Cancel </Button> <Button id="CreateDegreeCourseApplicationCreateButton" variant="primary" type="submit" onClick={this.handleSubmit}> Submit </Button> </Form> </div> ) } } const mapDispatchToProps = dispatch => bindActionCreators({ createNewApplicationAction: applicationManagementActions.passNewApplication }, dispatch) const ConnectedApplicationForm = connect(mapStateToProps, mapDispatchToProps)(CreateNewApplicationForm) export default ConnectedApplicationForm