From f8eb81795fe0f26c31355211a58658533036ee77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Tue, 22 Jan 2019 23:25:32 +0100
Subject: [PATCH] Create a confirmation modal. Display status on the applicant
profile page
---
src/components/forms/ConfirmModal.js | 61 +++++++++++++++++++
src/components/pages/ApplicantProfile.js | 76 ++++++++++++++++++------
src/components/pages/Applications.js | 4 +-
3 files changed, 122 insertions(+), 19 deletions(-)
create mode 100644 src/components/forms/ConfirmModal.js
diff --git a/src/components/forms/ConfirmModal.js b/src/components/forms/ConfirmModal.js
new file mode 100644
index 0000000..586d624
--- /dev/null
+++ b/src/components/forms/ConfirmModal.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { Button, Header, Icon, Modal } from 'semantic-ui-react';
+
+class ConfirmModal extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showModal: false,
+ };
+ }
+
+ close = () => this.setState({ showModal: false })
+
+ open = () => this.setState({ showModal: true})
+
+ render() {
+ const { button, text, onAccept } = this.props;
+ const open = this.state.showModal;
+ return (
+ <Modal
+ open={open}
+ closeOnDimmerClick
+ trigger={button}
+ onOpen={this.open}
+ onClose={this.close}
+ size='small'
+ basic
+ >
+ <Header icon='question' content='Confirm' />
+ <Modal.Content>
+ <p>
+ Biztos hogy {text}?
+ </p>
+ </Modal.Content>
+ <Modal.Actions>
+ <Button
+ basic
+ color='red'
+ inverted
+ inverted
+ onClick={() => this.close()}
+ >
+ <Icon name='remove' /> No
+ </Button>
+ <Button
+ color='green'
+ inverted
+ onClick={() => { onAccept();
+ this.close();
+ }
+ }
+ >
+ <Icon name='checkmark' /> Yes
+ </Button>
+ </Modal.Actions>
+ </Modal>
+ );
+ }
+}
+
+export default ConfirmModal;
diff --git a/src/components/pages/ApplicantProfile.js b/src/components/pages/ApplicantProfile.js
index 8a6486a..535617c 100644
--- a/src/components/pages/ApplicantProfile.js
+++ b/src/components/pages/ApplicantProfile.js
@@ -1,7 +1,8 @@
import React, { Component } from 'react';
-import { Container, Header, Item, Button } from 'semantic-ui-react';
+import { Container, Header, Item, Button, Label } from 'semantic-ui-react';
import { connect } from 'react-redux';
-import { getSelectedProfile } from '../../actions/statistics';
+import { getSelectedProfile, setStatus } from '../../actions/statistics';
+import ConfirmModal from '../forms/ConfirmModal';
class ApplicantProfile extends Component {
componentWillMount() {
@@ -9,7 +10,7 @@ class ApplicantProfile extends Component {
}
render() {
- const { full_name, nick, motivation_about, motivation_exercise, motivation_profession }
+ const { id, signed, role, full_name, nick, motivation_about, motivation_exercise, motivation_profession }
= this.props.selectedProfile;
return (
<Container style={{ padding: '60px' }}>
@@ -28,26 +29,67 @@ class ApplicantProfile extends Component {
<Header as='h3'>Feladatok megoldĂĄsa:</Header>
<p>{motivation_exercise}</p>
</Container>
+ <Container textAlign='center' style={{ padding: '20px' }}>
+ <Header as='h3'>StĂĄtusz:</Header>
+ { signed ?
+ <div>
+ { role === 'Student' ?
+ <Label color='green' size='huge'>Elfogadva</Label>
+ :
+ null
+ }
+ { role === 'Staff' ?
+ <Label color='blue' size='huge'>Staff</Label>
+ :
+ null
+ }
+ { role === 'Applicant' ?
+ <Label color='orange' size='huge'>Jelentkezett</Label>
+ :
+ null
+ }
+ { role === 'Denied' ?
+ <Label color='red' size='huge'>ElutasĂtva</Label>
+ :
+ null
+ }
+ </div>
+ :
+ <Label color='red' size='huge'>Nem jelentkezett</Label>
+ }
+ </Container>
</Item.Description>
</Item.Content>
</Item>
- <Container textAlign='center'>
- <Button
- color='green'
- >
- JelentkezĂŠs elfogadĂĄsa
- </Button>
- <Button
- color='red'
- >
- JelentkezĂŠs elutasĂtĂĄsa
- </Button>
- </Container>
+ { signed && role !== 'Staff' ?
+ <Container textAlign='center'>
+ <ConfirmModal
+ button={
+ <Button
+ color='green'
+ >JelentkezĂŠs elfogadĂĄsa
+ </Button>}
+ text='elfogadod a jelentkezĂŠst'
+ onAccept={() => this.props.setStatus(id, 'Student')}
+ />
+ <ConfirmModal
+ button={
+ <Button
+ color='red'
+ >JelentkezĂŠs elutasĂtĂĄsa
+ </Button>}
+ text='elutasĂtod a jelentkezĂŠst'
+ onAccept={() => this.props.setStatus(id, 'Denied')}
+ />
+ </Container>
+ :
+ null
+ }
</Container>
- )
+ );
}
}
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({ selectedProfile });
-export default connect(mapStateToProps, { getSelectedProfile })(ApplicantProfile);
+export default connect(mapStateToProps, { getSelectedProfile, setStatus })(ApplicantProfile);
diff --git a/src/components/pages/Applications.js b/src/components/pages/Applications.js
index 3d5a7ae..ce66eb2 100644
--- a/src/components/pages/Applications.js
+++ b/src/components/pages/Applications.js
@@ -30,8 +30,8 @@ class Applications extends Component {
:
null
}
- { profile.role === 'Apllicant' ?
- <Label color='yellow'>Jelentkezett</Label>
+ { profile.role === 'Applicant' ?
+ <Label color='orange'>Jelentkezett</Label>
:
null
}
--
GitLab