From ff9843955743d5998c2fcf842130ec6d24fd4d2c Mon Sep 17 00:00:00 2001
From: Bereczki Sandor <bsandor453@gmail.com>
Date: Mon, 28 Jan 2019 21:43:16 +0100
Subject: [PATCH] Added Solution Details Modal
---
src/components/forms/CorrectSolutionForm.js | 65 ------------
src/components/forms/SolutionDetailsForm.js | 110 ++++++++++++++++++++
src/components/pages/Homework.js | 31 +++++-
src/reducers/CorrectSolutionReducer.js | 16 +++
4 files changed, 153 insertions(+), 69 deletions(-)
delete mode 100644 src/components/forms/CorrectSolutionForm.js
create mode 100644 src/components/forms/SolutionDetailsForm.js
create mode 100644 src/reducers/CorrectSolutionReducer.js
diff --git a/src/components/forms/CorrectSolutionForm.js b/src/components/forms/CorrectSolutionForm.js
deleted file mode 100644
index de4cb38..0000000
--- a/src/components/forms/CorrectSolutionForm.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react';
-import { Modal, Button, Form, Icon } from 'semantic-ui-react';
-import { connect } from 'react-redux';
-
-class CorrectSolutionForm extends Component {
- constructor(props) {
- super(props);
- this.state = {
- showModal: false,
- };
- }
-
- render() {
- const taskSolutions = this.props.homeworks.solutions.filter(solution =>
- solution.task === this.props.taskid);
- const solutionProfileIds = [...new Set(taskSolutions.map(sol => sol.created_by))];
- const solutionProfiles =
- this.props.homeworks.profiles.filter(profile => solutionProfileIds.includes(profile.id));
- return (
- <Modal
- open={this.state.showModal}
- trigger={
- <Button basic color='blue' onClick={() => { this.setState({ showModal: true }); }}>
- <Icon name='external' />
- {this.props.tasktitle}
- </Button>
- }
- >
- <Modal.Header>Ăj javĂtĂĄs beadĂĄsa a(z) {this.props.tasktitle} nevĹą feladathoz:</Modal.Header>
- <Modal.Content>
- <Form>
- <p>Eddig a feladatot beadtĂĄk:</p>
- {solutionProfiles.map(profile => (
- <p>{profile.full_name}</p>
- ))}
- </Form>
- </Modal.Content>
- <Modal.Actions>
- <Button
- inverted
- color='red'
- onClick={() => {
- this.setState({ showModal: false });
- }}
- >
- <Icon name='remove' /> MĂŠgse
- </Button>
- <Button
- inverted
- color='green'
- onClick={() => {
- }}
- >
- <Icon name='checkmark' /> BeadĂĄs
- </Button>
- </Modal.Actions>
- </Modal>
- );
- }
-}
-
-const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
-
-export default connect(mapStateToProps, {
-})(CorrectSolutionForm);
diff --git a/src/components/forms/SolutionDetailsForm.js b/src/components/forms/SolutionDetailsForm.js
new file mode 100644
index 0000000..104a11a
--- /dev/null
+++ b/src/components/forms/SolutionDetailsForm.js
@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { Modal, Button, Header, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { emptyMessage } from '../pages/Homework';
+
+class SolutionDetailsForm extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showModal: false,
+ };
+ }
+
+ render() {
+ const taskSolutions = this.props.homeworks.solutions.filter(solution =>
+ solution.task === this.props.taskid);
+
+ const noSubmitStudents = [];
+ const waitForCorrectionStudents = [];
+ const noAcceptStudents = [];
+ const acceptedStudents = [];
+
+ for (let i = 0; i < this.props.homeworks.profiles.length; i += 1) {
+ const profileSolutions = taskSolutions.filter(solution =>
+ solution.created_by === this.props.homeworks.profiles[i].id);
+
+ if (profileSolutions.length === 0) {
+ noSubmitStudents.push(this.props.homeworks.profiles[i].nick);
+ } else if (taskSolutions[taskSolutions.length - 1].corrected === false) {
+ waitForCorrectionStudents.push(this.props.homeworks.profiles[i].nick);
+ } else if (taskSolutions[taskSolutions.length - 1].accepted === false) {
+ noAcceptStudents.push(this.props.homeworks.profiles[i].nick);
+ } else {
+ acceptedStudents.push(this.props.homeworks.profiles[i].nick);
+ }
+ }
+
+ const emptyStudentText = 'Nincs ilyen kĂŠpzĹdĹ jelenleg.';
+
+ return (
+ <Modal
+ open={this.state.showModal}
+ trigger={
+ <Button basic color='blue' onClick={() => { this.setState({ showModal: true }); }}>
+ <Icon name='external' />
+ {this.props.tasktitle}
+ </Button>
+ }
+ >
+ <Modal.Header>
+ A megoldĂĄsok beadĂĄsĂĄnak ĂĄllapota a(z) {this.props.tasktitle} nevĹą feladatnĂĄl:
+ </Modal.Header>
+ <Modal.Content>
+ <Header as='h3'>Nem ĂŠrkezett mĂŠg megoldĂĄs:</Header>
+ {noSubmitStudents.length === 0 ?
+ emptyMessage(emptyStudentText) :
+ noSubmitStudents.map(name => (
+ <Button color='blue' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{name}</Button>
+ ))
+ }
+ <Header as='h3'>JavĂtĂĄsra vĂĄr (A nĂŠvre kattintva kijavĂthatĂł a megoldĂĄs):</Header>
+ {waitForCorrectionStudents.length === 0 ?
+ emptyMessage(emptyStudentText) :
+ waitForCorrectionStudents.map(name => (
+ <Button inverted color='orange' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{name}</Button>
+ ))
+ }
+ <Header as='h3'>A megoldĂĄs nem elfogadhatĂł:</Header>
+ {noAcceptStudents.length === 0 ?
+ emptyMessage(emptyStudentText) :
+ noAcceptStudents.map(name => (
+ <Button color='red' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{name}</Button>
+ ))
+ }
+ <Header as='h3'>Elfogadva:</Header>
+ {acceptedStudents.length === 0 ?
+ emptyMessage(emptyStudentText) :
+ acceptedStudents.map(name => (
+ <Button color='green' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{name}</Button>
+ ))
+ }
+ </Modal.Content>
+ <Modal.Actions>
+ <Button
+ inverted
+ color='red'
+ onClick={() => {
+ this.setState({ showModal: false });
+ }}
+ >
+ <Icon name='remove' /> MĂŠgse
+ </Button>
+ <Button
+ inverted
+ color='green'
+ onClick={() => {
+ }}
+ >
+ <Icon name='checkmark' /> BeadĂĄs
+ </Button>
+ </Modal.Actions>
+ </Modal>
+ );
+ }
+}
+
+const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
+
+export default connect(mapStateToProps, {
+})(SolutionDetailsForm);
diff --git a/src/components/pages/Homework.js b/src/components/pages/Homework.js
index 2a52e49..f171b65 100644
--- a/src/components/pages/Homework.js
+++ b/src/components/pages/Homework.js
@@ -13,7 +13,7 @@ import moment from 'moment';
import { getTasks, getSolutions, addTask, addDocument, getProfiles } from '../../actions/homework';
import AddTaskForm from '../forms/AddTaskForm';
import AddSolutionForm from '../forms/AddSolutionForm';
-import CorrectSolutionForm from '../forms/CorrectSolutionForm';
+import SolutionDetailsForm from '../forms/SolutionDetailsForm';
const displayTypes = {
can_submit: {
@@ -43,7 +43,7 @@ const displayTypes = {
},
};
-const emptyMessage = (header, text, marginBottom) => (
+export const emptyMessage = (header, text, marginBottom) => (
<Message
style={{ marginBottom }}
icon='info'
@@ -62,7 +62,9 @@ class Homework extends Component {
getTaskDisplayStyle(task) {
const taskSolutions = this.props.homeworks.solutions.filter(solution =>
- solution.task === task.id);
+ solution.task === task.id)
+ .filter(solution =>
+ solution.created_by === this.props.user.id);
if (taskSolutions.length === 0) {
if (moment().isBefore(task.deadline)) {
@@ -87,12 +89,33 @@ class Homework extends Component {
if (!staff) {
return this.props.homeworks.tasks
.filter(task => moment().isBefore(task.deadline) === active)
+ .map(task => (
+ <Table.Row
+ key={task.id}
+ warning={
+ displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning
}
positive={
+ displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
+ }
negative={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
+ }
+ >
<Table.Cell>
<AddSolutionForm taskid={task.id} tasktitle={task.title} taskdesc={task.text} />
+ </Table.Cell>
+ <Table.Cell>
+ {moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
+ </Table.Cell>
+ <Table.Cell>
+ <Icon name={displayTypes[this.getTaskDisplayStyle(task)].icon} />{' '}
+ {displayTypes[this.getTaskDisplayStyle(task)].text}
+ </Table.Cell>
+ </Table.Row>
+ ));
+ }
+
return this.props.homeworks.tasks
.filter(task => moment().isBefore(task.deadline) === active)
.map(task => (
@@ -109,7 +132,7 @@ class Homework extends Component {
}
>
<Table.Cell>
- <CorrectSolutionForm taskid={task.id} tasktitle={task.title} taskdesc={task.text} />
+ <SolutionDetailsForm taskid={task.id} tasktitle={task.title} taskdesc={task.text} />
</Table.Cell>
<Table.Cell>
{moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
diff --git a/src/reducers/CorrectSolutionReducer.js b/src/reducers/CorrectSolutionReducer.js
new file mode 100644
index 0000000..afde07a
--- /dev/null
+++ b/src/reducers/CorrectSolutionReducer.js
@@ -0,0 +1,16 @@
+import { } from '../actions/types';
+
+const INITIAL_STATE = {
+ can_submit: [],
+ no_submit: [],
+ wait_correction: [],
+ no_accept: [],
+ accepted: [],
+};
+
+export default (state = INITIAL_STATE, action) => {
+ switch (action.type) {
+ default:
+ return state;
+ }
+};
--
GitLab