-
Orlando Piñero authoredOrlando Piñero authored
DegreeCourseManagement.js 6.29 KiB
import React, { Component } from "react";
import DegreeCourseItem from "./components/DegreeCourseItem";
import DeleteDegreeCourseModal from './components/DeleteDegreeCourseModal'
import EditDegreeCourse from './components/EditDegreeCourse'
import CreateNewDegreeCourse from './components/CreateNewDegreeCourse'
import CreateNewApplication from '../degreeCourseApplication/components/CreateNewApplication'
import addIcon from '../../icons/addIcon.png'
import Button from "react-bootstrap/esm/Button";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as degreeCourseManagementActions from './state/DegreeCourseManagementActions'
const mapStateToProps = state => {
return {
showDeleteDegreeCourseModal: state.DegreeCourseReducer.showDeleteDegreeCourseModal,
degreeCourseList: state.DegreeCourseReducer.degreeCourseList,
isAdmin: state.AuthenticationReducer.isAdmin
};
}
const DISPLAY = {
LIST: "list",
EDIT: "edit",
CREATE: "create",
APPLICATION: "application"
}
class DegreeCourseManagement extends Component {
constructor(props) {
super(props);
this.state = {
displayingPage: DISPLAY.LIST,
currentDegreeCourse: null
}
this.MapAllDegreeCourses = this.MapAllDegreeCourses.bind(this);
this.handleShowDeleteModal = this.handleShowDeleteModal.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleSwitchToList = this.handleSwitchToList.bind(this);
this.handleShowCreatePage = this.handleShowCreatePage.bind(this);
this.handleShowEditPage = this.handleShowEditPage.bind(this);
this.handleShowCreateApplication = this.handleShowCreateApplication.bind(this);
}
handleShowDeleteModal(e, dialogModalData) {
e.preventDefault();
const { showDeleteDegreeCourseModalAction } = this.props
showDeleteDegreeCourseModalAction(dialogModalData)
}
handleShowEditPage(e, degreeCourse) {
e.preventDefault();
this.setState(
{
currentDegreeCourse: degreeCourse,
displayingPage: DISPLAY.EDIT
})
}
handleShowCreatePage(e) {
e.preventDefault();
this.setState({ displayingPage: DISPLAY.CREATE })
}
handleSwitchToList() {
this.setState({ displayingPage: DISPLAY.LIST })
}
handleClose() {
const { hideDeleteDegreeCourseModalAction } = this.props;
hideDeleteDegreeCourseModalAction();
}
handleShowCreateApplication(e, degreeCourse) {
e.preventDefault();
this.setState(
{
currentDegreeCourse: degreeCourse,
displayingPage: DISPLAY.APPLICATION
})
}
MapAllDegreeCourses() {
const allDegreeCourses = this.props.degreeCourseList
if (allDegreeCourses) {
var showDeleteDegreeCourseModal = this.props.showDeleteDegreeCourseModal
if (showDeleteDegreeCourseModal === undefined) {
showDeleteDegreeCourseModal = false
}
var degreeCourses = allDegreeCourses.map(degreeCourse => {
return (
<DegreeCourseItem key={degreeCourse.id} degreeCourse={degreeCourse} handleShowDeleteModal={this.handleShowDeleteModal} handleShowEditPage={this.handleShowEditPage} handleShowCreateApplication={this.handleShowCreateApplication} />
)
})
return degreeCourses
}
}
render() {
var addButton
if (this.props.isAdmin) {
addButton =
<div style={{ display: 'flex', justifyContent: 'center', width: '5vw', background: '#f8f9fa', borderRadius: '30px' }}>
<Button onClick={this.handleShowCreatePage} style={{ background: 'transparent', border: 'none' }}>
<img alt="Add-DegreeCourse-Button" src={addIcon} style={{ width: '2rem' }}></img>
</Button>
</div>
}
var workspace
switch (this.state.displayingPage) {
case DISPLAY.LIST:
workspace =
<>
<h2 style={{textAlign: 'left', color: "white"}}>Studiengang-Liste</h2>
{addButton}
<div style={{ display: "flex", flexFlow: "row wrap", justifyContent: 'left' }} id="DegreeCourseManagementPageListComponent">
{this.MapAllDegreeCourses()}
<DeleteDegreeCourseModal />
</div>
</>
break
case DISPLAY.CREATE:
workspace = <CreateNewDegreeCourse goBack={this.handleSwitchToList} />
break
case DISPLAY.EDIT:
workspace = <EditDegreeCourse goBack={this.handleSwitchToList} editDegreeCourse={this.state.currentDegreeCourse} />
break
case DISPLAY.APPLICATION:
workspace = <CreateNewApplication degreeCourse={this.state.currentDegreeCourse} goBack={this.handleSwitchToList} />
break
default:
workspace =
<>
<h2 style={{textAlign: 'left', color: "white"}}>Studiengang-Liste</h2>
{addButton}
<div style={{ display: "flex", flexFlow: "row wrap", justifyContent: 'center' }} id="DegreeCourseManagementPageListComponent">
{this.MapAllDegreeCourses()}
<DeleteDegreeCourseModal />
</div>
</>
}
return (
<div>
<div id="DegreeCourseManagementPage" style={{ height: '100vh', background: '#2b3648', padding: '1rem' }}>
{workspace}
</div>
</div>
)
}
}
const mapDispatchToProps = dispatch => bindActionCreators({
showDeleteDegreeCourseModalAction: degreeCourseManagementActions.getShowDeleteDegreeCourseModalAction,
hideDeleteDegreeCourseModalAction: degreeCourseManagementActions.getHideDeleteDegreeCourseModalAction
}, dispatch)
const ConnectedDegreeCourseManagement = connect(mapStateToProps, mapDispatchToProps)(DegreeCourseManagement)
export default ConnectedDegreeCourseManagement