import React, { Component } from "react"; import Button from "react-bootstrap/esm/Button"; import Card from 'react-bootstrap/Card'; import Table from "react-bootstrap/esm/Table"; 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', margin: '0.5rem' }} id={itemID}> <Card.Header><b>{application.applicantUserID}: {application.universityShortName} {application.targetPeriodShortName} {application.targetPeriodYear}</b></Card.Header> <Table responsive="sm"> <tbody> <tr id="ApplicantUserID"> <td><b>User:</b></td> <td style={{ textAlign: 'left' }}>{application.applicantUserID}</td> </tr> <tr id="DegreeCourseName"> <td><b>Studiengang:</b></td> <td style={{ textAlign: 'left' }}>{application.degreeCourseName}</td> </tr> <tr id="TargetPeriodYear"> <td><b>Bewerbungsjahr:</b></td> <td style={{ textAlign: 'left' }}>{application.targetPeriodYear}</td> </tr> <tr id="TargetPeriodShortName"> <td><b>Bewerbungssemester:</b></td> <td style={{ textAlign: 'left' }}>{application.targetPeriodShortName}</td> </tr> <tr id="UniversityShortName"> <td><b>Universität:</b></td> <td style={{ textAlign: 'left' }}>{application.universityShortName}</td> </tr> <tr id="DepartmentShortName"> <td><b>Fachbereich:</b></td> <td style={{ textAlign: 'left' }}>{application.departmentShortName}</td> </tr> </tbody> </Table> <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