Added Solution Details Modal

src/components/forms/CorrectSolutionForm.js → src/components/forms/SolutionDetailsForm.js

 import React, { Component } from 'react';
-import { Modal, Button, Form, Icon } from 'semantic-ui-react';
+import { Modal, Button, Header, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
+import { emptyMessage } from '../pages/Homework';
 
-class CorrectSolutionForm extends Component {
+class SolutionDetailsForm extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -13,9 +14,29 @@ class CorrectSolutionForm extends Component {
   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));
+
+    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}
@@ -26,14 +47,38 @@ class CorrectSolutionForm extends Component {
           </Button>
         }
       >
-        <Modal.Header>Új javítás beadása a(z) {this.props.tasktitle} nevű feladathoz:</Modal.Header>
+        <Modal.Header>
+          A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű feladatnál:
+        </Modal.Header>
         <Modal.Content>
-          <Form>
-            <p>Eddig a feladatot beadták:</p>
-            {solutionProfiles.map(profile => (
-              <p>{profile.full_name}</p>
-            ))}
-          </Form>
+          <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
@@ -62,4 +107,4 @@ class CorrectSolutionForm extends Component {
 const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
 
 export default connect(mapStateToProps, {
-})(CorrectSolutionForm);
+})(SolutionDetailsForm);

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')}

src/reducers/CorrectSolutionReducer.js

+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;
+  }
+};