From 3015e385ef540b1b84772bbcc3aff80a5c176260 Mon Sep 17 00:00:00 2001
From: Bereczki Sandor <bsandor453@gmail.com>
Date: Sun, 27 Jan 2019 18:36:17 +0100
Subject: [PATCH] Separate user views, Added base of correction form
---
src/actions/homework.js | 22 +++-
src/components/forms/AddSolutionForm.js | 27 +++--
src/components/forms/CorrectSolutionForm.js | 65 ++++++++++++
src/components/pages/Homework.js | 108 +++++++++++++-------
src/reducers/HomeworksReducer.js | 9 +-
5 files changed, 177 insertions(+), 54 deletions(-)
create mode 100644 src/components/forms/CorrectSolutionForm.js
diff --git a/src/actions/homework.js b/src/actions/homework.js
index 9594ec4..f3aff4e 100644
--- a/src/actions/homework.js
+++ b/src/actions/homework.js
@@ -7,6 +7,7 @@ import { GET_TASKS,
ADD_SOLUTION,
WRITE_SOLUTION,
WRITE_SOLUTION_FILE,
+ GET_PROFILES,
ADD_DOCUMENT } from './types';
export const getTasks = () => (
@@ -23,10 +24,10 @@ export const getTasks = () => (
}
);
-export const getSolutions = () => (
+export const getSolutions = id => (
async (dispatch) => {
try {
- const response = await axios.get('/api/v1/homework/solutions/');
+ const response = await axios.get('/api/v1/homework/solutions/', { params: { profileID: id } });
dispatch({
type: GET_SOLUTIONS,
payload: response.data,
@@ -72,7 +73,6 @@ export const addSolution = ({
note,
});
if (response.data.id) {
- alert('Sikeres mentĂŠs!');
dispatch({
type: ADD_SOLUTION,
payload: response.data,
@@ -120,7 +120,7 @@ export const writeSolution = ({ target: { name, value } }) => (
export const writeSolutionFile = ({ target: { files } }) => (
(dispatch) => {
- dispatch({ type: WRITE_SOLUTION, payload: files[0], target: 'file' });
+ dispatch({ type: WRITE_SOLUTION_FILE, payload: files[0], target: 'file' });
}
);
@@ -141,3 +141,17 @@ export const clearWrite = () => (
dispatch({ type: CLEAR_WRITE });
}
);
+
+export const getProfiles = () => (
+ async (dispatch) => {
+ try {
+ const response = await axios.get('/api/v1/profiles/');
+ dispatch({
+ type: GET_PROFILES,
+ payload: response.data,
+ });
+ } catch (e) {
+ console.log(e);
+ }
+ }
+);
diff --git a/src/components/forms/AddSolutionForm.js b/src/components/forms/AddSolutionForm.js
index d730dfc..999bf9a 100644
--- a/src/components/forms/AddSolutionForm.js
+++ b/src/components/forms/AddSolutionForm.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
+import { Modal, Button, Form, Input, TextArea, Icon, Header } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { addSolution, writeSolution, writeSolutionFile, addDocument, clearWrite } from '../../actions/homework';
@@ -13,15 +13,18 @@ class AddSolutionForm extends Component {
render() {
const {
- name, description, file
+ name, description, file,
} = this.props.newSolution;
const task = this.props.taskid;
const corrected = false;
const accepted = false;
+ const sentences = this.props.taskdesc.split('\n');
const note = '';
let solution = 1;
- if((this.props.homeworks.solutions[this.props.homeworks.solutions.length - 1]) !== undefined)
+ if ((this.props.homeworks.solutions[this.props.homeworks.solutions.length - 1])
+ !== undefined) {
solution = (this.props.homeworks.solutions[this.props.homeworks.solutions.length - 1]).id;
+ }
return (
<Modal
open={this.state.showModal}
@@ -32,20 +35,26 @@ class AddSolutionForm extends Component {
</Button>
}
>
- <Modal.Header>Ăj megoldĂĄs beadĂĄsa a {this.props.tasktitle} nevĹą feladathoz:</Modal.Header>
+ <Modal.Header>
+ Ăj megoldĂĄs beadĂĄsa a(z) {this.props.tasktitle} nevĹą feladathoz:
+ </Modal.Header>
<Modal.Content>
+ <Modal.Description style={{ marginBottom: '2em' }}>
+ <Header as='h5'>Feladat leĂrĂĄsa:</Header>
+ {sentences.map(s => (<p>{s}</p>))}
+ </Modal.Description>
<Form>
<Form.Field
control={Input}
- label='CĂm:'
+ label='MegoldĂĄs cĂme:'
name='name'
onChange={e => this.props.writeSolution(e)}
value={name}
- placeholder='Add meg a dokumentum cĂmĂŠt'
+ placeholder='Adj meg egy cĂmet a beadandĂł megoldĂĄsodnak...'
/>
<Form.Field
control={TextArea}
- label='LeĂrĂĄs:'
+ label='MegoldĂĄs leĂrĂĄsa:'
name='description'
onChange={e => this.props.writeSolution(e)}
value={description}
@@ -74,7 +83,9 @@ class AddSolutionForm extends Component {
this.props.addSolution({
task, accepted, corrected, note,
});
- this.props.addDocument({ name, description, file, solution });
+ this.props.addDocument({
+ name, description, file, solution,
+});
this.setState({ showModal: false });
}}
>
diff --git a/src/components/forms/CorrectSolutionForm.js b/src/components/forms/CorrectSolutionForm.js
new file mode 100644
index 0000000..de4cb38
--- /dev/null
+++ b/src/components/forms/CorrectSolutionForm.js
@@ -0,0 +1,65 @@
+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/pages/Homework.js b/src/components/pages/Homework.js
index 2f15f46..2a52e49 100644
--- a/src/components/pages/Homework.js
+++ b/src/components/pages/Homework.js
@@ -10,9 +10,10 @@ import {
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
-import { getTasks, getSolutions, addTask, addDocument } from '../../actions/homework';
+import { getTasks, getSolutions, addTask, addDocument, getProfiles } from '../../actions/homework';
import AddTaskForm from '../forms/AddTaskForm';
import AddSolutionForm from '../forms/AddSolutionForm';
+import CorrectSolutionForm from '../forms/CorrectSolutionForm';
const displayTypes = {
can_submit: {
@@ -55,7 +56,8 @@ const emptyMessage = (header, text, marginBottom) => (
class Homework extends Component {
componentDidMount() {
this.props.getTasks();
- this.props.getSolutions();
+ this.props.getSolutions(this.props.user.id);
+ this.props.getProfiles();
}
getTaskDisplayStyle(task) {
@@ -81,24 +83,33 @@ class Homework extends Component {
return 'accepted';
}
- renderTaskList(active) {
+ renderTaskList(active, staff) {
+ if (!staff) {
+ return this.props.homeworks.tasks
+ .filter(task => moment().isBefore(task.deadline) === active)
+ }
+ positive={
+ negative={
+ displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
+ <Table.Cell>
+ <AddSolutionForm taskid={task.id} tasktitle={task.title} taskdesc={task.text} />
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
- }
+ displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning
+ }
positive={
- displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
- }
+ displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
+ }
negative={
- displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
- }
+ displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
+ }
>
<Table.Cell>
- <AddSolutionForm taskid={task.id} tasktitle={task.title}/>
+ <CorrectSolutionForm taskid={task.id} tasktitle={task.title} taskdesc={task.text} />
</Table.Cell>
<Table.Cell>
{moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
@@ -111,7 +122,7 @@ class Homework extends Component {
));
}
- renderHomeworksTable(active) {
+ renderHomeworksTable(active, staff) {
let tableColor = 'green';
let marginBottom = '0em';
@@ -138,18 +149,22 @@ class Homework extends Component {
</Table.HeaderCell>
</Table.Row>
</Table.Header>
- <Table.Body>{this.renderTaskList(active)}</Table.Body>
+ <Table.Body>{this.renderTaskList(active, staff)}</Table.Body>
</Table>
);
}
- renderHomeworks(active) {
+ renderHomeworks(active, staff) {
let empty = false;
let emptyText = 'Jelenleg nincs egyetlen beadhatĂł feladat sem. ';
let marginBottom = '0em';
const emptyHeaderText = 'Nincs feladat.';
let headerText = 'AktĂv feladatok';
+ if (staff) {
+ headerText = 'AktĂv feladatok kijavĂtĂĄsa';
+ }
+
if (
this.props.homeworks.tasks.filter(task =>
moment().isBefore(task.deadline) === active).length === 0
@@ -158,7 +173,11 @@ class Homework extends Component {
}
if (!active) {
- headerText = 'LejĂĄrt hatĂĄridejĹą feladatok';
+ if (staff) {
+ headerText = 'LejĂĄrt hatĂĄridejĹą feladatok kijavĂtĂĄsa';
+ } else {
+ headerText = 'LejĂĄrt hatĂĄridejĹą feladatok';
+ }
emptyText = 'Jelenleg nincs egyetlen lejĂĄrt hatĂĄridejĹą feladat sem.';
marginBottom = '3em';
}
@@ -179,37 +198,47 @@ class Homework extends Component {
/>
{empty
? emptyMessage(emptyHeaderText, emptyText, marginBottom)
- : this.renderHomeworksTable(active)}
+ : this.renderHomeworksTable(active, staff)}
</Container>
</Segment>
);
}
render() {
- return (
- <div>
- <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
- <Container>
- <Header
- as='h1'
- dividing
- content='HĂĄzi feladat hozzĂĄadĂĄsa, mĂłdosĂtĂĄsa vagy tĂśrlĂŠse'
- style={{
- fontSize: '3em',
- fontWeight: 'normal',
- marginBottom: '0.5em',
- marginTop: '0.5em',
- }}
- />
- <Button.Group>
- <AddTaskForm />
- </Button.Group>
- </Container>
- </Segment>
- {this.renderHomeworks(true)}
- {this.renderHomeworks(false)}
- </div>
- );
+ if (this.props.user.role === 'Student') {
+ return (
+ <div>
+ {this.renderHomeworks(true, false)}
+ {this.renderHomeworks(false, false)}
+ </div>
+ );
+ } else if (this.props.user.role === 'Staff') {
+ return (
+ <div>
+ <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
+ <Container>
+ <Header
+ as='h1'
+ dividing
+ content='HĂĄzi feladat hozzĂĄadĂĄsa, mĂłdosĂtĂĄsa vagy tĂśrlĂŠse'
+ style={{
+ fontSize: '3em',
+ fontWeight: 'normal',
+ marginBottom: '0.5em',
+ marginTop: '0.5em',
+ }}
+ />
+ <Button.Group>
+ <AddTaskForm />
+ </Button.Group>
+ </Container>
+ </Segment>
+ {this.renderHomeworks(true, true)}
+ {this.renderHomeworks(false, true)}
+ </div>
+ );
+ }
+ return null;
}
}
@@ -222,5 +251,6 @@ export default connect(
getSolutions,
addTask,
addDocument,
+ getProfiles,
},
)(Homework);
diff --git a/src/reducers/HomeworksReducer.js b/src/reducers/HomeworksReducer.js
index b367634..da7dfd7 100644
--- a/src/reducers/HomeworksReducer.js
+++ b/src/reducers/HomeworksReducer.js
@@ -1,8 +1,9 @@
-import { GET_TASKS, GET_SOLUTIONS, ADD_TASK, ADD_SOLUTION } from '../actions/types';
+import { GET_TASKS, GET_SOLUTIONS, ADD_TASK, ADD_SOLUTION, GET_PROFILES } from '../actions/types';
const INITIAL_STATE = {
tasks: [],
solutions: [],
+ profiles: [],
};
@@ -13,9 +14,11 @@ export default (state = INITIAL_STATE, action) => {
case GET_SOLUTIONS:
return { ...state, solutions: action.payload };
case ADD_SOLUTION:
- return state;
+ return { ...state, solutions: [action.payload, ...state.solutions] };
case ADD_TASK:
- return { tasks: [action.payload, ...state.tasks], solutions: [...state.solutions] };
+ return { ...state, tasks: [action.payload, ...state.tasks] };
+ case GET_PROFILES:
+ return { ...state, profiles: action.payload };
default:
return state;
}
--
GitLab