import React, { Component } from "react"; import Button from "react-bootstrap/esm/Button"; import Card from 'react-bootstrap/Card'; import ListGroup from 'react-bootstrap/ListGroup'; import { connect } from "react-redux"; const mapStateToProps = state => { return { isAdmin: state.AuthenticationReducer.isAdmin }; } class ApplicationItem extends Component { render() { let application = this.props.application let deleteButtonID = "DegreeCourseApplicationItemDeleteButton" + application.id let itemID = "DegreeCourseApplicationItem" + application.id let dialogData = { dialogID: "DeleteDialogDegreeCourseApplication" + application.id, name: application.degreeCourseName, applicationID: application.id, user: application.applicantUserID, universityName: application.universityName } return ( <div> <div> <Card style={{ width: "22rem", background: '#ebebeb' }} id={itemID}> <Card.Header>{application.applicantUserID}: {application.universityShortName} {application.targetPeriodShortName} {application.targetPeriodYear}</Card.Header> <ListGroup variant="flush"> <ListGroup.Item className="list-group-item"> <p id="ApplicantUserID" style={{ display: 'flex', alignItems: 'right', margin: '0' }}> <span style={{ marginRight: '1.3rem' }}>User:</span> {application.applicantUserID} </p> </ListGroup.Item> <ListGroup.Item className="list-group-item"> <p id="DegreeCourseName" style={{ display: 'flex', alignItems: 'right', margin: '0' }}> <span style={{ marginRight: '1.3rem' }}>Studiengang:</span> {application.degreeCourseName} </p> </ListGroup.Item> <ListGroup.Item className="list-group-item"> <p id="TargetPeriodYear" style={{ display: 'flex', alignItems: 'right', margin: '0' }}> <span style={{ marginRight: '1.3rem' }}>Bewerbungsjahr:</span> {application.targetPeriodYear} </p> </ListGroup.Item> <ListGroup.Item className="list-group-item"> <p id="TargetPeriodShortName" style={{ display: 'flex', alignItems: 'right', margin: '0' }}> <span style={{ marginRight: '1.3rem' }}>Bewerbungssemester:</span> {application.targetPeriodShortName} </p> </ListGroup.Item> <ListGroup.Item className="list-group-item"> <p id="UniversityShortName" style={{ display: 'flex', alignItems: 'right', margin: '0' }}> <span style={{ marginRight: '1.3rem' }}>Universität:</span> {application.universityShortName} </p> </ListGroup.Item> <ListGroup.Item className="list-group-item"> <p id="DepartmentShortName" style={{ display: 'flex', alignItems: 'right', margin: '0' }}> <span style={{ marginRight: '1.3rem' }}>Fachbereich:</span> {application.departmentShortName} </p> </ListGroup.Item> </ListGroup> <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}> <Button variant="primary" type="submit" onClick={(e) => this.props.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}> Delete </Button> </Card.Footer> </Card> </div> </div> ) } } const ConnectedApplicationItem = connect(mapStateToProps)(ApplicationItem) export default ConnectedApplicationItem