Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • kszk/devteam/kszkepzes/old/kszkepzes-frontend
  • kbgergely/kszkepzes-frontend
2 results
Show changes
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1122 additions and 1088 deletions
src/components/Header.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Menu,
Container,
Button,
Segment,
Container,
Icon,
Image,
Menu,
Popup,
Icon,
Responsive,
} from 'semantic-ui-react';
Segment,
} from "semantic-ui-react";
import React, { Component } from "react";
import { connect } from 'react-redux';
import { getUserData } from '../actions';
import KSZKlogo from './images/kszk_logo.svg';
import KSZKlogo from "./images/kszk_logo.svg";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { getUserData } from "../actions";
// Objects that will be converted to menu items in the render method
const menuItems = [
{
text: 'Főoldal',
to: '/home',
prefix: <Image size='mini' src={KSZKlogo} style={{ marginRight: '1.5em' }} />,
text: "Főoldal",
to: "/home",
prefix: (
<Image size="mini" src={KSZKlogo} style={{ marginRight: "1.5em" }} />
),
permissionLevel: 0,
},
{
text: 'Hírek',
to: '/news',
prefix: '',
text: "Hírek",
to: "/news",
prefix: "",
permissionLevel: 0,
},
{
text: 'Köreink',
to: '/groups',
prefix: '',
text: "Köreink",
to: "/groups",
prefix: "",
permissionLevel: 0,
},
{
text: 'Ütemterv',
to: '/schedule',
prefix: '',
text: "Ütemterv",
to: "/schedule",
prefix: "",
permissionLevel: 1,
},
{
text: 'Mentorok',
to: '/mentors',
prefix: '',
permissionLevel: 2,
text: "Mentorok",
to: "/mentors",
prefix: "",
permissionLevel: 1,
},
{
text: 'Statisztika',
to: '/statistics',
prefix: '',
text: "Statisztika",
to: "/statistics",
prefix: "",
permissionLevel: 3,
},
{
text: 'Jelentkezések',
to: '/applications',
prefix: '',
text: "Jelentkezések",
to: "/applications",
prefix: "",
permissionLevel: 3,
},
{
text: 'Házi feladatok',
to: '/homework',
prefix: '',
text: "Házi feladatok",
to: "/homework",
prefix: "",
permissionLevel: 2,
},
];
......@@ -83,28 +85,28 @@ class Header extends Component {
// Hide the menu after clicking an item on mobile
handleOpen = () => {
this.setState({ isOpen: true });
}
};
handleClose = () => {
this.setState({ isOpen: false });
}
};
renderHeader(inHeader) {
let renderedItemNum = 0;
let current = 0;
let maxNum = 0;
if (this.props.user.id) {
maxNum = menuItems
.filter((item) => this.props.user.permission >= item.permissionLevel)
.length;
maxNum = menuItems.filter(
(item) => this.props.user.permission >= item.permissionLevel,
).length;
} else {
maxNum = 3;
}
return (
<Segment inverted textAlign='center' vertical>
<Segment inverted textAlign="center" vertical>
<Container>
<Menu inverted secondary size='large'>
<Menu inverted secondary size="large">
{/* Default Menu items */}
{menuItems.map((item) => {
if (item.permissionLevel === 0) {
......@@ -120,10 +122,12 @@ class Header extends Component {
})}
{/* After default menu items */}
{menuItems.map((item, i) => {
if (this.props.user.permission >= item.permissionLevel
&& item.permissionLevel > 0
&& renderedItemNum < inHeader
&& current < i) {
if (
this.props.user.permission >= item.permissionLevel &&
item.permissionLevel > 0 &&
renderedItemNum < inHeader &&
current < i
) {
renderedItemNum += 1;
current = i;
return (
......@@ -136,45 +140,46 @@ class Header extends Component {
return null;
})}
{/* Arrow menu */}
{ this.props.user.id && (current + 1) < maxNum
? (
<Popup
flowing
hoverable
inverted
trigger={(
<Menu.Item>
<Icon name='angle down' size='large' />
</Menu.Item>
)}
position='top center'
>
<Menu inverted secondary size='large'>
{menuItems.map((item, i) => (this.props.user.permission >= item.permissionLevel
&& item.permissionLevel > 0
&& current < i
? (
<Menu.Item key={Math.random()} as={Link} to={item.to}>
{item.prefix}
{item.text}
</Menu.Item>
)
: null
))}
</Menu>
</Popup>
)
: null}
{this.props.user.id && current + 1 < maxNum ? (
<Popup
flowing
hoverable
inverted
trigger={
<Menu.Item>
<Icon name="angle down" size="large" />
</Menu.Item>
}
position="top center"
>
<Menu inverted secondary size="large">
{menuItems.map((item, i) =>
this.props.user.permission >= item.permissionLevel &&
item.permissionLevel > 0 &&
current < i ? (
<Menu.Item key={Math.random()} as={Link} to={item.to}>
{item.prefix}
{item.text}
</Menu.Item>
) : null,
)}
</Menu>
</Popup>
) : null}
{/* Login Button */}
<Menu.Item position='right'>
{this.props.user.id
? (
<Button.Group>
<Button inverted as={Link} to='/profile'>Profilom</Button>
<Button as='a' href='/api/v1/logout/' icon='sign out' />
</Button.Group>
)
: <Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>}
<Menu.Item position="right">
{this.props.user.id ? (
<Button.Group>
<Button inverted as={Link} to="/profile">
Profilom
</Button>
<Button as="a" href="/oidc/logout/" icon="sign out" />
</Button.Group>
) : (
<Button as="a" href="/oidc/authenticate/" inverted>
Bejelentkezés
</Button>
)}
</Menu.Item>
</Menu>
</Container>
......@@ -201,14 +206,12 @@ class Header extends Component {
<Responsive minWidth={1101} maxWidth={1200}>
{this.renderHeader(7)}
</Responsive>
<Responsive minWidth={1201}>
{this.renderHeader(8)}
</Responsive>
<Responsive minWidth={1201}>{this.renderHeader(8)}</Responsive>
{/* Mobile view */}
<Responsive maxWidth={599}>
<Segment inverted textAlign='center' vertical>
<Segment inverted textAlign="center" vertical>
<Container>
<Menu inverted secondary size='large'>
<Menu inverted secondary size="large">
{/* kszk logo + home link */}
<Menu.Item as={Link} to={menuItems[0].to}>
{menuItems[0].prefix}
......@@ -219,24 +222,22 @@ class Header extends Component {
flowing
hoverable
inverted
trigger={(
<Menu.Item
onClick={this.handleClose}
position='right'
>
<Icon name='bars' size='large' />
trigger={
<Menu.Item onClick={this.handleClose} position="right">
<Icon name="bars" size="large" />
</Menu.Item>
)}
position='top center'
}
position="top center"
open={this.state.isOpen}
onOpen={this.handleOpen}
on='click'
size='huge'
on="click"
size="huge"
>
<Menu vertical inverted secondary size='large'>
{menuItems.map((item, i) => ((this.props.user.permission >= item.permissionLevel
|| item.permissionLevel === 0) && i > 0
? (
<Menu vertical inverted secondary size="large">
{menuItems.map((item, i) =>
(this.props.user.permission >= item.permissionLevel ||
item.permissionLevel === 0) &&
i > 0 ? (
<Menu.Item
onClick={this.handleClose}
key={Math.random()}
......@@ -246,18 +247,36 @@ class Header extends Component {
{item.prefix}
{item.text}
</Menu.Item>
)
: null
))}
) : null,
)}
<Menu.Item>
{this.props.user.id
? (
<Button.Group>
<Button onClick={this.handleClose} inverted as={Link} to='/profile'>Profilom</Button>
<Button onClick={this.handleClose} as='a' href='/api/v1/logout/' icon='sign out' />
</Button.Group>
)
: <Button onClick={this.handleClose} as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>}
{this.props.user.id ? (
<Button.Group>
<Button
onClick={this.handleClose}
inverted
as={Link}
to="/profile"
>
Profilom
</Button>
<Button
onClick={this.handleClose}
as="a"
href="/oidc/logout/"
icon="sign out"
/>
</Button.Group>
) : (
<Button
onClick={this.handleClose}
as="a"
href="/oidc/authenticate/"
inverted
>
Bejelentkezés
</Button>
)}
</Menu.Item>
</Menu>
</Popup>
......
src/components/Main.js
View file @ 2eef83d2
import React from 'react';
import {
Switch, Route, Redirect, withRouter,
} from 'react-router-dom';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import ApplicantProfile from './pages/ApplicantProfile';
import Applications from './pages/Applications';
import EventDetail from './pages/EventDetail';
import Groups from './pages/Groups';
import Home from './pages/Home';
import Homework from './pages/Homework';
import Mentors from './pages/Mentors';
import Schedule from './pages/Schedule';
import News from './pages/News';
import NotFound from './pages/NotFound';
import Profile from './pages/Profile';
import React from 'react';
import Schedule from './pages/Schedule';
import Statistics from './pages/Statistics';
import Groups from './pages/Groups';
import News from './pages/News';
import Homework from './pages/Homework';
import Applications from './pages/Applications';
import EventDetail from './pages/EventDetail';
import ApplicantProfile from './pages/ApplicantProfile';
const Main = () => (
<Switch>
<Redirect exact from='/' to='/home' />
<Route exact path='/home' component={Home} />
<Route path='/news' component={News} />
<Route path='/mentors' component={Mentors} />
<Route path='/schedule' component={Schedule} />
<Route path='/profile' component={withRouter(Profile)} />
<Route path='/statistics' component={Statistics} />
<Route path='/groups' component={Groups} />
<Route path='/homework' component={Homework} />
<Route path='/events/:id' component={EventDetail} />
<Route path='/applications' component={Applications} />
<Route path='/applicant/:id' component={ApplicantProfile} />
<Redirect exact from="/" to="/home" />
<Route exact path="/home" component={Home} />
<Route path="/news" component={News} />
<Route path="/mentors" component={Mentors} />
<Route path="/schedule" component={Schedule} />
<Route path="/profile" component={withRouter(Profile)} />
<Route path="/statistics" component={Statistics} />
<Route path="/groups" component={Groups} />
<Route path="/homework" component={Homework} />
<Route path="/events/:id" component={EventDetail} />
<Route path="/applications" component={Applications} />
<Route path="/applicant/:id" component={ApplicantProfile} />
<Route component={NotFound} />
</Switch>
);
......
src/components/extra/GroupCard.js
View file @ 2eef83d2
import { Divider, Header, Segment } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Segment, Header, Divider } from 'semantic-ui-react';
class GroupCard extends Component {
render() {
return (
<Segment style={{ marginTop: 0 }}>
<Divider style={{ fontSize: '2em' }} horizontal>
<Header as='h3' style={{ fontSize: '1.2em' }}>
<Header as="h3" style={{ fontSize: '1.2em' }}>
{this.props.label}
</Header>
</Divider>
<div className='paragraph' dangerouslySetInnerHTML={{ __html: this.props.value }} />
<div
className="paragraph"
dangerouslySetInnerHTML={{ __html: this.props.value }}
/>
</Segment>
);
}
......
src/components/forms/AddEventForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Modal, Button, Form, Input, Icon,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { addEvent, eventDate, writeEvent } from '../../actions/statistics';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import { writeEvent, eventDate, addEvent } from '../../actions/statistics';
import { clearWrite } from '../../actions/news';
import { connect } from 'react-redux';
class AddEventForm extends Component {
constructor(props) {
......@@ -16,7 +15,6 @@ class AddEventForm extends Component {
};
}
// Handling change in redux action creator throws an exception
// Temporal solotion using the components state to display, instead redux state
handleChange = (event, { name, value }) => {
......@@ -24,21 +22,23 @@ class AddEventForm extends Component {
this.setState({ [name]: value });
}
this.props.eventDate(name, value);
}
};
render() {
const { name, description } = this.props.newEvent;
return (
<Modal
open={this.state.showModal}
trigger={(
trigger={
<Button
size='big'
onClick={() => { this.setState({ showModal: true }); }}
size="big"
onClick={() => {
this.setState({ showModal: true });
}}
>
Alkalom hozzáadása
Alkalom hozzáadása
</Button>
)}
}
>
<Modal.Header>Új alkalom:</Modal.Header>
<Modal.Content
......@@ -49,29 +49,29 @@ Alkalom hozzáadása
<Form>
<Form.Field
control={Input}
label='Név'
name='name'
label="Név"
name="name"
onChange={(e) => this.props.writeEvent(e)}
value={name}
style={{
marginBottom: '20px',
}}
placeholder='Title'
placeholder="Title"
/>
<Form.TextArea
name='description'
label='Leírás:'
placeholder='Rövid leírás'
name="description"
label="Leírás:"
placeholder="Rövid leírás"
value={description}
onChange={(e) => this.props.writeEvent(e)}
/>
<DateTimeInput
name='date'
label='Dátum:'
dateFormat='YYYY-MM-DD'
placeholder='Date'
name="date"
label="Dátum:"
dateFormat="YYYY-MM-DD"
placeholder="Date"
value={this.state.date}
iconPosition='left'
iconPosition="left"
onChange={this.handleChange}
/>
</Form>
......@@ -79,26 +79,24 @@ Alkalom hozzáadása
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' />
<Icon name="remove" />
Cancel
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.addEvent(this.props.newEvent);
this.setState({ showModal: false, date: '' });
}}
>
<Icon name='checkmark' />
{' '}
Add
<Icon name="checkmark" /> Add
</Button>
</Modal.Actions>
</Modal>
......@@ -109,5 +107,8 @@ Add
const mapStateToProps = ({ events: { newEvent } }) => ({ newEvent });
export default connect(mapStateToProps, {
writeEvent, addEvent, eventDate, clearWrite,
writeEvent,
addEvent,
eventDate,
clearWrite,
})(AddEventForm);
src/components/forms/AddNewsForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Modal, Button, Form, Input, TextArea, Icon,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { clearWrite, postNews, writeNews } from '../../actions/news';
import { postNews, writeNews, clearWrite } from '../../actions/news';
import { connect } from 'react-redux';
class AddNewsForm extends Component {
constructor(props) {
......@@ -20,57 +18,59 @@ class AddNewsForm extends Component {
return (
<Modal
open={this.state.showModal}
trigger={(
trigger={
<Button
size='big'
onClick={() => { this.setState({ showModal: true }); }}
size="big"
onClick={() => {
this.setState({ showModal: true });
}}
>
Hír hozzáadása
Hír hozzáadása
</Button>
)}
}
>
<Modal.Header>Új hír:</Modal.Header>
<Modal.Content>
<Form>
<Form.Field
control={Input}
label='Title'
name='title'
label="Title"
name="title"
onChange={(e) => this.props.writeNews(e)}
value={title}
placeholder='Title'
placeholder="Title"
/>
<Form.Field
control={TextArea}
label='Text'
name='text'
label="Text"
name="text"
onChange={(e) => this.props.writeNews(e)}
value={text}
placeholder='Tell us what you want...'
placeholder="Tell us what you want..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
onClick={() => { this.setState({ showModal: false }); }}
color="red"
onClick={() => {
this.setState({ showModal: false });
}}
>
<Icon name='remove' />
<Icon name="remove" />
Cancel
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.postNews({ title, text, updated_by });
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' />
{' '}
Add
<Icon name="checkmark" /> Add
</Button>
</Modal.Actions>
</Modal>
......@@ -80,4 +80,6 @@ Add
const mapStateToProps = ({ newNews, user }) => ({ newNews, user });
export default connect(mapStateToProps, { postNews, writeNews, clearWrite })(AddNewsForm);
export default connect(mapStateToProps, { postNews, writeNews, clearWrite })(
AddNewsForm
);
src/components/forms/AddSolutionForm.js
View file @ 2eef83d2
import React, { Component } from 'react';
import './Forms.css';
import {
Modal,
Button,
Dimmer,
Divider,
Form,
Input,
TextArea,
Icon,
Header,
Segment,
Divider,
Dimmer,
Icon,
Input,
Loader,
Modal,
Segment,
TextArea,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import {
addSolution,
writeSolution,
writeSolutionFile,
addDocument,
addSolution,
clearWrite,
getDocuments,
getSolutions,
writeSolution,
writeSolutionFile,
} from '../../actions/homework';
import './Forms.css';
import ConfirmModal from './ConfirmModal';
import { connect } from 'react-redux';
import { customMessage } from '../pages/Homework';
const allowedFileTypes = [
'image/jpeg',
'image/png',
'application/x-zip-compressed',
'application/zip',
'application/x-zip',
];
const allowedFileEnds = ['.zip', '.jpeg', '.jpg', '.jpe', '.png'];
function validateFileName(fileNameToValidate) {
return (
allowedFileEnds.find((typeName) => {
return fileNameToValidate.toLowerCase().endsWith(typeName);
}).length > 0
);
}
// in megabytes
const maxFileSize = 50;
......@@ -46,16 +58,16 @@ class AddSolutionForm extends Component {
}
render() {
const {
name, description, file,
} = this.props.newSolution;
const { name, description, file } = this.props.newSolution;
const task = this.props.taskid;
const thisTaskSolution = this.props.homeworks.solutions
.filter((solution) => solution.task === task);
const thisTaskDocument = this.props.homeworks.documents
.filter((document) => document.solution === thisTaskSolution[0]?.id);
const thisTaskSolution = this.props.homeworks.solutions.filter(
(solution) => solution.task === task
);
const thisTaskDocument = this.props.homeworks.documents.filter(
(document) => document.solution === thisTaskSolution[0]?.id
);
const lastName = thisTaskDocument[0]?.name;
const lastDesc = thisTaskDocument[0]?.description;
......@@ -72,197 +84,233 @@ class AddSolutionForm extends Component {
open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={(
trigger={
<button
type='button'
id='task'
type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
}}
>
<Icon name='external' />
<Icon name="external" />
{this.props.tasktitle}
</button>
)}
}
>
<Modal.Header>
{this.props.multiple ? 'Másik megoldás' : 'Megoldás'}
{' '}
beadása a(z)
{this.props.tasktitle}
{' '}
nevű feladathoz:
{this.props.multiple ? 'Másik megoldás' : '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 key={Math.random()}>{s}</p>))}
<Header as="h5">Feladat leírása:</Header>
{sentences.map((s) => (
<p key={Math.random()}>{s}</p>
))}
</Modal.Description>
{this.props.disabled
? (
<div>
{lastName
? (
<div style={{ paddingBottom: '1em' }}>
<div style={{ marginBottom: '1em', fontWeight: 'bold' }}>Legutóbbi megoldásod:</div>
<Segment attached='top'>
<h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
{lastName}
</Segment>
<Segment attached>
<h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
{lastDesc}
</Segment>
<Segment attached='bottom'>
<h5>Beadott fájl:</h5>
{lastFile
? <a href={lastFile} rel='noreferrer noopener' download>Fájl letöltése</a>
: <span>-</span>}
</Segment>
</div>
)
: customMessage(disabledText, undefined, undefined, this.props.disabled)}
</div>
)
: (
<Form>
{lastName
? (
<div style={{ paddingBottom: '1em' }}>
<div style={{ fontWeight: 'bold' }}>Legutóbbi megoldásod:</div>
<Segment attached='top'>
<h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
{lastName}
</Segment>
<Segment attached>
<h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
{lastDesc}
</Segment>
<Segment attached='bottom'>
<h5>Beadott fájl:</h5>
{lastFile
? <a href={lastFile} rel='noreferrer noopener' download>Fájl letöltése</a>
: <span>-</span>}
</Segment>
</div>
)
: null}
<Divider />
<Form.Field
control={Input}
label='Megoldás címe:'
name='name'
onChange={(e) => this.props.writeSolution(e)}
value={name}
placeholder='Adj meg egy címet a beadandó megoldásodnak...'
/>
<Form.Field
control={TextArea}
label='Megoldás leírása:'
name='description'
onChange={(e) => this.props.writeSolution(e)}
value={description}
placeholder='Add meg a megoldás leírását...'
{this.props.disabled ? (
<div>
{lastName ? (
<div style={{ paddingBottom: '1em' }}>
<div style={{ marginBottom: '1em', fontWeight: 'bold' }}>
Legutóbbi megoldásod:
</div>
<Segment attached="top">
<h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
{lastName}
</Segment>
<Segment attached>
<h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
{lastDesc}
</Segment>
<Segment attached="bottom">
<h5>Beadott fájl:</h5>
{lastFile ? (
<a href={lastFile} rel="noreferrer noopener" download>
Fájl letöltése
</a>
) : (
<span>-</span>
)}
</Segment>
</div>
) : (
customMessage(
disabledText,
undefined,
undefined,
this.props.disabled
)
)}
</div>
) : (
<Form>
{lastName ? (
<div style={{ paddingBottom: '1em' }}>
<div style={{ fontWeight: 'bold' }}>
Legutóbbi megoldásod:
</div>
<Segment attached="top">
<h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
{lastName}
</Segment>
<Segment attached>
<h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
{lastDesc}
</Segment>
<Segment attached="bottom">
<h5>Beadott fájl:</h5>
{lastFile ? (
<a href={lastFile} rel="noreferrer noopener" download>
Fájl letöltése
</a>
) : (
<span>-</span>
)}
</Segment>
</div>
) : null}
<Divider />
<Form.Field
control={Input}
label="Megoldás címe:"
name="name"
onChange={(e) => this.props.writeSolution(e)}
value={name}
placeholder="Adj meg egy címet a beadandó megoldásodnak..."
/>
<Form.Field
control={TextArea}
label="Megoldás leírása:"
name="description"
onChange={(e) => this.props.writeSolution(e)}
value={description}
placeholder="Add meg a megoldás leírását..."
/>
<Form.Field>
<label>
Fájl (Megengedett fájltípusok: png, jpeg, jpg, zip. Maximum 50
MB.):
</label>
<Input
type="file"
accept={allowedFileTypes.join(',')}
onChange={(e) => this.props.writeSolutionFile(e)}
/>
<Form.Field>
<label>
Fájl (Megengedett fájltípusok: png, jpeg, jpg, zip. Maximum 50 MB.):
</label>
<Input type='file' onChange={(e) => this.props.writeSolutionFile(e)} />
</Form.Field>
</Form>
)}
</Form.Field>
</Form>
)}
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' />
{' '}
Mégse
<Icon name="remove" /> Mégse
</Button>
{this.props.multiple
? (
<ConfirmModal
button={(
<Button
disabled={
!name || !description
|| (!file ? false : !allowedFileTypes.includes(file.type)
|| file.size > (maxFileSize) * (1024 ** 2))
{this.props.multiple ? (
<ConfirmModal
button={
<Button
disabled={
!name ||
!description ||
(!file
? false
: !validateFileName(file.name) ||
file.size > maxFileSize * 1024 ** 2)
}
inverted
color="green"
>
<Icon name="checkmark" />
Beadás
{this.state.loading ? (
<Dimmer active>
<Loader size="massive" />
</Dimmer>
) : null}
</Button>
}
text="beadod az új megoldást, ami felülírja az előzőt"
onAccept={() => {
this.setState({
loading: true,
});
this.props
.addSolution({
task,
accepted,
corrected,
note,
name,
description,
file,
})
.then(
() => {
this.setState({
loading: false,
showModal: false,
});
this.props.clearWrite();
},
() => {
this.setState({
loading: false,
});
alert('Sikertelen feltöltés!');
}
inverted
color='green'
>
<Icon name='checkmark' />
Beadás
{this.state.loading
? (
<Dimmer active>
<Loader size='massive' />
</Dimmer>
)
: null }
</Button>
)}
text='beadod az új megoldást, ami felülírja az előzőt'
onAccept={() => {
this.setState({
loading: true,
});
this.props.addSolution({
task, accepted, corrected, note, name, description, file,
}).then(() => {
this.setState({
loading: false,
showModal: false,
});
this.props.clearWrite();
}, () => {
this.setState({
loading: false,
});
alert('Sikertelen feltöltés!');
});
}}
/>
)
: (
<Button
inverted
color='green'
disabled={
!name || !description
|| (!file ? false : !allowedFileTypes.includes(file.type)
|| file.size > (maxFileSize) * (1024 ** 2))
}
onClick={() => {
this.props.addSolution({
task, accepted, corrected, note, name, description, file,
)
.finally(() => {
window.location.reload(false);
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' />
{' '}
Beadás
</Button>
)}
}}
/>
) : (
<Button
inverted
color="green"
disabled={
!name ||
!description ||
(!file
? false
: !validateFileName(file.name) ||
file.size > maxFileSize * 1024 ** 2)
}
onClick={() => {
this.props.addSolution({
task,
accepted,
corrected,
note,
name,
description,
file,
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name="checkmark" /> Beadás
</Button>
)}
</Modal.Actions>
</Modal>
);
}
}
const mapStateToProps = ({ newSolution, homeworks, user }) => ({ newSolution, homeworks, user });
const mapStateToProps = ({ newSolution, homeworks, user }) => ({
newSolution,
homeworks,
user,
});
export default connect(mapStateToProps, {
addSolution,
......
src/components/forms/AddTaskForm.js
View file @ 2eef83d2
import React, { Component } from 'react';
import {
Modal, Button, Form, Input, TextArea, Icon,
Button,
Form,
Icon,
Input,
Modal,
TextArea,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import moment from 'moment';
import React, { Component } from 'react';
import {
addTask, writeTask, writeTaskDeadline, clearWrite,
addTask,
clearWrite,
writeTask,
writeTaskDeadline,
} from '../../actions/homework';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import { connect } from 'react-redux';
import moment from 'moment';
class AddTaskForm extends Component {
constructor(props) {
super(props);
......
src/components/forms/ConfirmModal.js
View file @ 2eef83d2
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Button, Header, Icon, Modal,
} from 'semantic-ui-react';
class ConfirmModal extends Component {
constructor(props) {
......@@ -11,56 +9,45 @@ class ConfirmModal extends Component {
};
}
close = () => this.setState({ showModal: false })
close = () => this.setState({ showModal: false });
open = () => this.setState({ showModal: true })
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='Megerősítés' />
<Modal.Content>
<p>
Biztos hogy
{' '}
{text}
?
</p>
</Modal.Content>
<Modal.Actions>
<Button
basic
color='red'
inverted
onClick={() => this.close()}
>
<Icon name='remove' />
{' '}
Nem
</Button>
<Button
color='green'
inverted
onClick={() => { onAccept(); this.close(); }}
>
<Icon name='checkmark' />
{' '}
Igen
</Button>
</Modal.Actions>
</Modal>
);
}
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="Megerősítés" />
<Modal.Content>
<p>Biztos hogy {text}?</p>
</Modal.Content>
<Modal.Actions>
<Button basic color="red" inverted onClick={() => this.close()}>
<Icon name="remove" /> Nem
</Button>
<Button
color="green"
inverted
onClick={() => {
onAccept();
this.close();
}}
>
<Icon name="checkmark" /> Igen
</Button>
</Modal.Actions>
</Modal>
);
}
}
export default ConfirmModal;
src/components/forms/CorrectSolutionForm.js
View file @ 2eef83d2
import React, { Component } from 'react';
import {
Modal, Button, Icon, Checkbox, Form, TextArea, Header,
Button,
Checkbox,
Form,
Header,
Icon,
Modal,
TextArea,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import {
correctSolution,
writeSolution,
check,
setchecktrue,
clearWrite,
getSolutions,
correctSolution,
getDocuments,
getSolutions,
selectSolution,
setchecktrue,
writeSolution,
} from '../../actions/homework';
import { connect } from 'react-redux';
class CorrectSolutionForm extends Component {
constructor(props) {
super(props);
......@@ -23,11 +30,10 @@ class CorrectSolutionForm extends Component {
}
render() {
const {
studentFullName, studentId, taskTitle, taskSolutions,
} = this.props;
const taskSolutionsProfile = taskSolutions
.filter((solution) => solution.created_by === studentId);
const { studentFullName, studentId, taskTitle, taskSolutions } = this.props;
const taskSolutionsProfile = taskSolutions.filter(
(solution) => solution.created_by === studentId
);
const relevantSolution = taskSolutionsProfile.slice(-1)[0];
const relevantDocuments = this.props.homeworks.documents
.filter((document) => document.solution === relevantSolution.id)
......@@ -39,17 +45,13 @@ class CorrectSolutionForm extends Component {
} else {
fileLink = null;
}
const {
corrected,
accepted,
note,
} = this.props.correction;
const { corrected, accepted, note } = this.props.correction;
return (
<Modal
open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={(
trigger={
<Button
inverted
color={this.props.color}
......@@ -61,108 +63,98 @@ class CorrectSolutionForm extends Component {
>
{studentFullName}
</Button>
)}
}
>
<Modal.Header>
A(z)
{' '}
{taskTitle}
{' '}
nevű feladat
{' '}
{studentFullName}
{' '}
által beadott megoldásának kijavítása:
A(z) {taskTitle} nevű feladat {studentFullName} által beadott
megoldásának kijavítása:
</Modal.Header>
<Modal.Content>
<Header as='h5'>A megoldás címe:</Header>
{(relevantDocument && relevantDocument.description)
? <p>{relevantDocument.name}</p>
: <p>Nincs cím.</p>}
<Header as='h5'>A megoldás leírása:</Header>
{(relevantDocument && relevantDocument.description)
? relevantDocument.description.split('\n').map((s) => (<p key={Math.random()}>{s}</p>))
: <p>Nincs leírás.</p>}
<Header as='h5'>A beadott dokumentum:</Header>
{fileLink
? <a href={fileLink} rel='noreferrer noopener' target>Fájl letöltése</a>
: <p>Nincs fájl.</p>}
<Header as='h5'>Kijavítás állapotának változtatása:</Header>
<Header as="h5">A megoldás címe:</Header>
{relevantDocument && relevantDocument.description ? (
<p>{relevantDocument.name}</p>
) : (
<p>Nincs cím.</p>
)}
<Header as="h5">A megoldás leírása:</Header>
{relevantDocument && relevantDocument.description ? (
relevantDocument.description
.split('\n')
.map((s) => <p key={Math.random()}>{s}</p>)
) : (
<p>Nincs leírás.</p>
)}
<Header as="h5">A beadott dokumentum:</Header>
{fileLink ? (
<a href={fileLink} rel="noreferrer noopener" target>
Fájl letöltése
</a>
) : (
<p>Nincs fájl.</p>
)}
<Header as="h5">Kijavítás állapotának változtatása:</Header>
<Button
color='orange'
color="orange"
inverted={corrected}
onClick={() => this.props.check('corrected')}
>
<Checkbox
label='Nincs kijavítva'
checked={!corrected}
/>
<Checkbox label="Nincs kijavítva" checked={!corrected} />
</Button>
<Header as='h5'>Elfogadás/elutasítás:</Header>
<Header as="h5">Elfogadás/elutasítás:</Header>
<Button
color='green'
color="green"
inverted={!accepted}
onClick={() => {
this.props.check('accepted');
this.props.setchecktrue('corrected');
}}
>
<Checkbox
label='Elfogadható'
checked={accepted}
/>
<Checkbox label="Elfogadható" checked={accepted} />
</Button>
<Button
color='red'
color="red"
inverted={accepted}
onClick={() => this.props.check('accepted')}
>
<Checkbox
label='Nem elfogadható'
checked={!accepted}
/>
<Checkbox label="Nem elfogadható" checked={!accepted} />
</Button>
<Header as='h5'>A feladat megoldásának szöveges értékelése:</Header>
<Header as="h5">A feladat megoldásának szöveges értékelése:</Header>
<Form>
<Form.Field
control={TextArea}
name='note'
name="note"
onChange={(e) => this.props.writeSolution(e)}
value={note}
placeholder='Írhatsz megjegyzést a megoldásra...'
placeholder="Írhatsz megjegyzést a megoldásra..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' />
{' '}
Mégse
<Icon name="remove" /> Mégse
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.correctSolution(
relevantSolution.id,
corrected,
accepted,
note,
note
);
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' />
{' '}
Beadás
<Icon name="checkmark" /> Beadás
</Button>
</Modal.Actions>
</Modal>
......@@ -170,7 +162,11 @@ Beadás
}
}
const mapStateToProps = ({ homeworks, correction, user }) => ({ homeworks, correction, user });
const mapStateToProps = ({ homeworks, correction, user }) => ({
homeworks,
correction,
user,
});
export default connect(mapStateToProps, {
correctSolution,
......
src/components/forms/EditNewsForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Modal, Button, Form, Input, TextArea, Icon,
} from 'semantic-ui-react';
import { clearWrite, editNews, writeNews } from '../../actions/news';
import { connect } from 'react-redux';
import moment from 'moment';
import { writeNews, editNews, clearWrite } from '../../actions/news';
class EditNewsForm extends Component {
constructor(props) {
super(props);
......@@ -17,88 +15,83 @@ class EditNewsForm extends Component {
render() {
const {
id, title, text, author, last_update_by, created_at, updated_at,
id,
title,
text,
author,
last_update_by,
created_at,
updated_at,
} = this.props.selectedNews;
const updated_by = this.props.user.id;
return (
<Modal
open={this.state.showModal}
onOpen={this.props.onClick}
trigger={(
trigger={
<Button
compact
onClick={() => { this.setState({ showModal: true }); }}
size='mini'
onClick={() => {
this.setState({ showModal: true });
}}
size="mini"
>
Edit
</Button>
)}
}
>
<Modal.Header>Szerkesztés:</Modal.Header>
<Modal.Content>
<p style={{ fontStyle: 'italic' }}>
<b>Közzétéve:</b>
{' '}
{moment(created_at).format('LLLL')}
{' '}
<br />
<b>Írta:</b>
{' '}
{author}
{' '}
<br />
<b>Szerkesztve:</b>
{' '}
{moment(updated_at).format('LLLL')}
{' '}
<br />
<b>Szerkesztette:</b>
{' '}
{last_update_by}
<b>Közzétéve:</b> {moment(created_at).format('LLLL')} <br />
<b>Írta:</b> {author} <br />
<b>Szerkesztve:</b> {moment(updated_at).format('LLLL')} <br />
<b>Szerkesztette:</b> {last_update_by}
</p>
<Form>
<Form.Field
control={Input}
label='Title'
name='title'
label="Title"
name="title"
onChange={(e) => this.props.writeNews(e)}
value={title}
placeholder='Title'
placeholder="Title"
/>
<Form.Field
control={TextArea}
label='Text'
name='text'
label="Text"
name="text"
onChange={(e) => this.props.writeNews(e)}
value={text}
placeholder='Tell us what you want...'
placeholder="Tell us what you want..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
onClick={() => { this.setState({ showModal: false }); }}
color="red"
onClick={() => {
this.setState({ showModal: false });
}}
>
<Icon name='remove' />
{' '}
Cancel
<Icon name="remove" /> Cancel
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.editNews({
id, title, text, updated_by,
id,
title,
text,
updated_by,
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' />
{' '}
Edit
<Icon name="checkmark" /> Edit
</Button>
</Modal.Actions>
</Modal>
......@@ -109,5 +102,7 @@ Edit
const mapStateToProps = ({ user, selectedNews }) => ({ user, selectedNews });
export default connect(mapStateToProps, {
editNews, writeNews, clearWrite,
editNews,
writeNews,
clearWrite,
})(EditNewsForm);
src/components/forms/EditTaskForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Modal, Button, Form, Input, TextArea, Icon,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
clearWrite,
editTask,
writeTask,
writeTaskDeadline,
} from '../../actions/homework';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import { connect } from 'react-redux';
import moment from 'moment';
import {
writeTask, writeTaskDeadline, editTask, clearWrite,
} from '../../actions/homework';
class EditTaskForm extends Component {
constructor(props) {
......@@ -18,63 +20,52 @@ class EditTaskForm extends Component {
}
render() {
const {
id,
title,
text,
deadline,
bits,
} = this.props.selectedTask;
const { id, title, text, deadline, bits } = this.props.selectedTask;
return (
<Modal
open={this.state.showModal}
onOpen={this.props.onClick}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={(
trigger={
<Button
inverted
style={{ marginRight: '2em' }}
color='orange'
onClick={() => { this.setState({ showModal: true }); }}
color="orange"
onClick={() => {
this.setState({ showModal: true });
}}
>
<Icon name='edit' />
{' '}
Módosítás
<Icon name="edit" /> Módosítás
</Button>
)}
}
>
<Modal.Header>
A
{title}
{' '}
nevű feladat módosítása:
</Modal.Header>
<Modal.Header>A{title} nevű feladat módosítása:</Modal.Header>
<Modal.Content>
<Form>
<Form.Field
control={Input}
label='Cím:'
name='title'
label="Cím:"
name="title"
onChange={(e) => this.props.writeTask(e)}
value={title}
placeholder='Add meg a feladat címét.'
placeholder="Add meg a feladat címét."
/>
<Form.Field
control={TextArea}
label='Leírás:'
name='text'
label="Leírás:"
name="text"
onChange={(e) => this.props.writeTask(e)}
value={text}
placeholder='Add meg a feladat leírását...'
placeholder="Add meg a feladat leírását..."
/>
<Form.Field
control={DateTimeInput}
label='Beadási határidő (a jelenlegi időnél későbbi időpont):'
name='deadline'
placeholder='Beadási határidő'
iconPosition='left'
dateTimeFormat='YYYY-MM-DDTHH:mm'
label="Beadási határidő (a jelenlegi időnél későbbi időpont):"
name="deadline"
placeholder="Beadási határidő"
iconPosition="left"
dateTimeFormat="YYYY-MM-DDTHH:mm"
onChange={(e, { name, value }) => {
this.props.writeTaskDeadline({ name, value });
}}
......@@ -82,36 +73,35 @@ nevű feladat módosítása:
/>
<Form.Field
control={Input}
type='number'
label='Bitek száma:'
name='bits'
type="number"
label="Bitek száma:"
name="bits"
onChange={(e) => this.props.writeTask(e)}
value={bits}
placeholder='Add meg a feladatért kapható bitek számát ...'
placeholder="Add meg a feladatért kapható bitek számát ..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' />
{' '}
Mégse
<Icon name="remove" /> Mégse
</Button>
<Button
inverted
color='green'
color="green"
disabled={
title === ''
|| (title !== undefined ? title.length > 150 : false)
|| text === ''
|| deadline === '' || moment().isAfter(deadline)
title === '' ||
(title !== undefined ? title.length > 150 : false) ||
text === '' ||
deadline === '' ||
moment().isAfter(deadline)
}
onClick={() => {
this.props.editTask({
......@@ -125,9 +115,7 @@ Mégse
this.props.clearWrite();
}}
>
<Icon name='checkmark' />
{' '}
Módosítás
<Icon name="checkmark" /> Módosítás
</Button>
</Modal.Actions>
</Modal>
......
src/components/forms/Forms.css
View file @ 2eef83d2
#task, #tasknote{
#task,
#tasknote {
border: none;
background-color: inherit;
color: teal;
......@@ -8,7 +9,8 @@
color: black;
}
#task:hover, #tasknote:hover {
#task:hover,
#tasknote:hover {
color: red;
cursor: pointer;
}
src/components/forms/HiddenForm.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Segment } from 'semantic-ui-react';
class HiddenForm extends Component {
render() {
return (
<div>
<div style={{ marginBottom: 0, fontWeight: this.props.fontWeight }}>{this.props.label}</div>
<div style={{ marginBottom: 0, fontWeight: this.props.fontWeight }}>
{this.props.label}
</div>
<Segment style={{ marginTop: 0 }}>
<div>
{this.props.value}
</div>
<div>{this.props.value}</div>
</Segment>
</div>
);
......
src/components/forms/InfoModal.js
View file @ 2eef83d2
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Button, Header, Icon, Modal,
} from 'semantic-ui-react';
class InfoModal extends Component {
constructor(props) {
......@@ -11,41 +9,37 @@ class InfoModal extends Component {
};
}
close = () => this.setState({ showModal: false })
close = () => this.setState({ showModal: false });
open = () => this.setState({ showModal: true })
open = () => this.setState({ showModal: true });
render() {
const { button, title, content } = 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='info' content={title} />
<Modal.Content>
{content.split('\n').map((s) => (<p key={Math.random()}>{s}</p>))}
</Modal.Content>
<Modal.Actions>
<Button
color='green'
inverted
onClick={() => this.close()}
>
<Icon name='checkmark' />
{' '}
Rendben
</Button>
</Modal.Actions>
</Modal>
);
}
render() {
const { button, title, content } = 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="info" content={title} />
<Modal.Content>
{content.split('\n').map((s) => (
<p key={Math.random()}>{s}</p>
))}
</Modal.Content>
<Modal.Actions>
<Button color="green" inverted onClick={() => this.close()}>
<Icon name="checkmark" /> Rendben
</Button>
</Modal.Actions>
</Modal>
);
}
}
export default InfoModal;
src/components/forms/SolutionDetailsForm.js
View file @ 2eef83d2
import './Forms.css';
import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Modal, Button, Header, Icon, Divider,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getDocuments, getSolutions } from '../../actions/homework';
import CorrectSolutionForm from './CorrectSolutionForm';
import { connect } from 'react-redux';
import { customMessage } from '../pages/Homework';
import './Forms.css';
import {
getSolutions,
getDocuments,
} from '../../actions/homework';
class SolutionDetailsForm extends Component {
constructor(props) {
......@@ -20,8 +17,9 @@ class SolutionDetailsForm extends Component {
}
render() {
const taskSolutions = this.props.homeworks.solutions
.filter((solution) => solution.task === this.props.taskid);
const taskSolutions = this.props.homeworks.solutions.filter(
(solution) => solution.task === this.props.taskid
);
const noSubmitStudents = [];
const waitForCorrectionStudents = [];
......@@ -29,15 +27,20 @@ class SolutionDetailsForm extends Component {
const acceptedStudents = [];
this.props.homeworks.profiles.forEach((profile) => {
const profileSolutions = taskSolutions
.filter((solution) => solution.created_by === profile.id);
const profileSolutions = taskSolutions.filter(
(solution) => solution.created_by === profile.id
);
if (profile.role === 'Student') {
if (profileSolutions.length === 0) {
noSubmitStudents.push(profile);
} else if (profileSolutions[profileSolutions.length - 1].corrected === false) {
} else if (
profileSolutions[profileSolutions.length - 1].corrected === false
) {
waitForCorrectionStudents.push(profile);
} else if (profileSolutions[profileSolutions.length - 1].accepted === false) {
} else if (
profileSolutions[profileSolutions.length - 1].accepted === false
) {
noAcceptStudents.push(profile);
} else {
acceptedStudents.push(profile);
......@@ -52,95 +55,105 @@ class SolutionDetailsForm extends Component {
open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={(
trigger={
<button
type='button'
id='task'
type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
this.props.getSolutions();
this.props.getDocuments();
}}
>
<Icon name='external' />
<Icon name="external" />
{this.props.tasktitle}
</button>
)}
}
>
<Modal.Header>
A megoldások beadásának állapota a(z)
{' '}
{this.props.tasktitle}
{' '}
nevű feladatnál:
A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű
feladatnál:
</Modal.Header>
<Modal.Content>
<Header as='h3'>A feladat leírása:</Header>
{this.props.taskdesc.split('\n').map((s) => (<p key={Math.random()}>{s}</p>))}
<Header as="h3">A feladat leírása:</Header>
{this.props.taskdesc.split('\n').map((s) => (
<p key={Math.random()}>{s}</p>
))}
<Divider />
<Header as='h3'>Nem érkezett még megoldás:</Header>
<Header as="h3">Nem érkezett még megoldás:</Header>
{noSubmitStudents.length === 0
? customMessage(noStudentText)
: noSubmitStudents.map((student) => (
<Button key={Math.random()} color='blue' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))}
<Button
key={Math.random()}
color="blue"
style={{ marginRight: '1.5em', marginTop: '1.5em' }}
>
{student.full_name}
</Button>
))}
<Divider />
<Header as='h3'>Javításra vár (A névre kattintva kijavítható a megoldás):</Header>
<Header as="h3">
Javításra vár (A névre kattintva kijavítható a megoldás):
</Header>
{waitForCorrectionStudents.length === 0
? customMessage(noStudentText)
: waitForCorrectionStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color='orange'
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<CorrectSolutionForm
key={Math.random()}
color="orange"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<Divider />
<Header as='h3'>A megoldás nem elfogadható (A névre kattintva módosítható a javítás):</Header>
<Header as="h3">
A megoldás nem elfogadható (A névre kattintva módosítható a
javítás):
</Header>
{noAcceptStudents.length === 0
? customMessage(noStudentText)
: noAcceptStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color='red'
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<CorrectSolutionForm
key={Math.random()}
color="red"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<Divider />
<Header as='h3'>Elfogadva (A névre kattintva módosítható a javítás):</Header>
<Header as="h3">
Elfogadva (A névre kattintva módosítható a javítás):
</Header>
{acceptedStudents.length === 0
? customMessage(noStudentText)
: acceptedStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color='green'
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<CorrectSolutionForm
key={Math.random()}
color="green"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.setState({ showModal: false });
}}
>
<Icon name='checkmark' />
{' '}
Kész
<Icon name="checkmark" /> Kész
</Button>
</Modal.Actions>
</Modal>
......@@ -151,5 +164,6 @@ Kész
const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
export default connect(mapStateToProps, {
getSolutions, getDocuments,
getSolutions,
getDocuments,
})(SolutionDetailsForm);
src/components/pages/ApplicantProfile.js
View file @ 2eef83d2
import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Container, Header, Item, Button, Label,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getSelectedProfile, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { connect } from 'react-redux';
const groupTypes = {
HAT: {
......@@ -36,18 +35,24 @@ class ApplicantProfile extends Component {
render() {
const {
id, signed, role, full_name,
nick, motivation_about, motivation_exercise,
motivation_profession, groups,
id,
signed,
role,
full_name,
nick,
motivation_about,
motivation_exercise,
motivation_profession,
groups,
} = this.props.selectedProfile;
return (
<Container style={{ paddingTop: '3em', paddingBottom: '6em' }}>
<Item>
<Item.Content>
<Container textAlign='center' style={{ paddingBottom: '2em' }}>
<Header as='h2'>{full_name}</Header>
<Container textAlign="center" style={{ paddingBottom: '2em' }}>
<Header as="h2">{full_name}</Header>
<Item.Meta>{nick}</Item.Meta>
<Header as='h2'>
<Header as="h2">
{groups?.map((group) => (
<Label color={groupTypes[group].color}>
{groupTypes[group].name}
......@@ -56,81 +61,83 @@ class ApplicantProfile extends Component {
</Header>
</Container>
<Item.Description>
<Container textAlign='justified' style={{ padding: '1em' }}>
<Header as='h3'>Magamról, eddigi tevékenységem:</Header>
<Container textAlign="justified" style={{ padding: '1em' }}>
<Header as="h3">Magamról, eddigi tevékenységem:</Header>
<p>
{motivation_about
?.split ('\n').map ((item, i) => <div key={i}>{item}</div>)}
{motivation_about?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
<Header as='h3'>Szakmai motiváció:</Header>
<Header as="h3">Szakmai motiváció:</Header>
<p>
{motivation_profession
?.split ('\n').map ((item, i) => <div key={i}>{item}</div>)}
{motivation_profession?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
<Header as='h3'>Feladatok megoldása:</Header>
<Header as="h3">Feladatok megoldása:</Header>
<p>
{motivation_exercise
?.split ('\n').map ((item, i) => <div key={i}>{item}</div>)}
{motivation_exercise?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
</Container>
<Container textAlign='center' style={{ padding: '1em' }}>
<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 textAlign="center" style={{ padding: '1em' }}>
<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>
{ 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}
{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 });
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
selectedProfile,
});
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(ApplicantProfile);
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
ApplicantProfile
);
src/components/pages/Applications.js
View file @ 2eef83d2
import { Button, Container, Label, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Container, Table, Label, Button,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getProfiles, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
const role = [
{
......@@ -41,98 +40,81 @@ class Applications extends Component {
}
renderApplicants(format) {
return this.props.profiles.map((profile) => (
profile.role === format.role
&& (profile.signed === true
|| profile.role === 'Staff')
? (
<Table.Row key={profile.id}>
<Table.Cell textAlign='center'>
<Link to={`applicant/${profile.id}`}>
{profile.full_name}
</Link>
return this.props.profiles.map((profile) =>
profile.role === format.role &&
(profile.signed === true || profile.role === 'Staff') ? (
<Table.Row key={profile.id}>
<Table.Cell textAlign="center">
<Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Table.Cell>
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
{ format.role === 'Staff' ? null
: (
<Table.Cell textAlign='center'>
<ConfirmModal
button={(
<Button
color='blue'
size='tiny'
>
ADD STAFF STATUS
</Button>
)}
text='staff jogot adsz neki'
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
)}
</Table.Row>
)
: null
));
)}
</Table.Row>
) : null
);
}
renderNotApplicants(format) {
return this.props.profiles.map((profile) => (
profile.signed === false && profile.role !== 'Staff'
? (
<Table.Row key={profile.id}>
<Table.Cell textAlign='center'>
<Link to={`applicant/${profile.id}`}>
{profile.full_name}
</Link>
return this.props.profiles.map((profile) =>
profile.signed === false && profile.role !== 'Staff' ? (
<Table.Row key={profile.id}>
<Table.Cell textAlign="center">
<Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Table.Cell>
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
{ format.role === 'Staff' ? null
: (
<Table.Cell textAlign='center'>
<ConfirmModal
button={(
<Button
color='blue'
size='tiny'
>
ADD STAFF STATUS
</Button>
)}
text='staff jogot adsz neki'
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
)}
</Table.Row>
)
: null
));
)}
</Table.Row>
) : null
);
}
renderTable(format) {
return (
<Table color='blue' unstackable celled selectable compact>
<Table color="blue" unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>
<Table.HeaderCell textAlign="center">
<Label color={format.color}>{format.text}</Label>
</Table.HeaderCell>
{format.role !== 'Staff'
? (
<Table.HeaderCell width={3} textAlign='center'>
<Label color={null}>
{format.role === 'no'
? this.props.profiles.filter((profile) => profile.signed === false
&& profile.role !== 'Staff').length
: this.props.profiles.filter((profile) => profile.role === format.role
&& (profile.signed === true
|| profile.role === 'Staff')).length}
{' '}
fő
</Label>
</Table.HeaderCell>
)
: null}
{format.role !== 'Staff' ? (
<Table.HeaderCell width={3} textAlign="center">
<Label color={null}>
{format.role === 'no'
? this.props.profiles.filter(
(profile) =>
profile.signed === false && profile.role !== 'Staff'
).length
: this.props.profiles.filter(
(profile) =>
profile.role === format.role &&
(profile.signed === true || profile.role === 'Staff')
).length}{' '}
fő
</Label>
</Table.HeaderCell>
) : null}
</Table.Row>
</Table.Header>
<Table.Body>
......@@ -144,33 +126,27 @@ fő
);
}
render() {
return (
<Container
textAlign='center'
textAlign="center"
style={{ paddingTop: '1em', paddingBottom: '5em' }}
>
{this.renderTable(role[2])}
{' '}
{/* Applicant */}
{this.renderTable(role[1])}
{' '}
{/* Student */}
{this.renderTable(role[0])}
{' '}
{/* Staff */}
{this.renderTable(role[3])}
{' '}
{/* Denied */}
{this.renderTable(role[4])}
{' '}
{/* Not Signed */}
{this.renderTable(role[2])} {/* Applicant */}
{this.renderTable(role[1])} {/* Student */}
{this.renderTable(role[0])} {/* Staff */}
{this.renderTable(role[3])} {/* Denied */}
{this.renderTable(role[4])} {/* Not Signed */}
</Container>
);
}
}
const mapStateToProps = ({ trainees: { profiles }, user }) => ({ profiles, user });
const mapStateToProps = ({ trainees: { profiles }, user }) => ({
profiles,
user,
});
export default connect(mapStateToProps, { getProfiles, setStatus })(Applications);
export default connect(mapStateToProps, { getProfiles, setStatus })(
Applications
);
src/components/pages/EventDetail.js
View file @ 2eef83d2
import React, { Component } from 'react';
import {
Container,
Item,
Button,
Comment,
Container,
Divider,
Form,
Header,
Table,
Item,
Segment,
Divider,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
Table,
} from "semantic-ui-react";
import React, { Component } from "react";
import {
getEventById, getTrainees, visitorChange, submitVisitors,
} from '../../actions/statistics';
clearWrite,
getNotesByEvent,
postEventNote,
writeNote,
} from "../../actions/notes";
import {
getNotesByEvent, writeNote, clearWrite, postEventNote,
} from '../../actions/notes';
import TraineeTableRow from './EventDetailTableRow';
getEventById,
getTrainees,
submitVisitors,
visitorChange,
} from "../../actions/statistics";
import TraineeTableRow from "./EventDetailTableRow";
import { connect } from "react-redux";
import moment from "moment";
class EventDetail extends Component {
constructor(props) {
......@@ -35,25 +41,32 @@ class EventDetail extends Component {
this.props.getNotesByEvent(this.props.match.params.id);
}
renderTrainees() {
const event = this.props.selectedEvent;
return this.props.trainees?.map((item) => {
const notes = this.props.eventNotes?.filter((note) => note.profile === item.id);
return (
item.role === 'Student'
? (
<TraineeTableRow
selectedEvent={event}
notes={notes}
trainee={item}
edit={this.state.edit}
key={item.id}
/>
)
: null
);
});
return this.props.trainees
?.sort(function (a, b) {
var nameA = a.full_name.toLowerCase(),
nameB = b.full_name.toLowerCase();
if (nameA < nameB)
//sort string ascending
return -1;
if (nameA > nameB) return 1;
return 0; //default return value (no sorting)
})
.map((item) => {
const notes = this.props.eventNotes?.filter(
(note) => note.profile === item.id
);
return item.role === "Student" ? (
<TraineeTableRow
selectedEvent={event}
notes={notes}
trainee={item}
edit={this.state.edit}
key={item.id}
/>
) : null;
});
}
renderEvent() {
......@@ -61,16 +74,16 @@ class EventDetail extends Component {
return (
<Segment>
<Item>
<Divider style={{ fontSize: '2em' }} horizontal>
<Header as='h1'>
<Divider style={{ fontSize: "2em" }} horizontal>
<Header as="h1">
{name}
<Item.Header style={{ fontSize: '0.6em' }}>
{moment(date).format('LL')}
<Item.Header style={{ fontSize: "0.6em" }}>
{moment(date).format("LL")}
</Item.Header>
</Header>
</Divider>
<Container textAlign='justified'>
<Item.Header as='h3'>Leírás</Item.Header>
<Container textAlign="justified">
<Item.Header as="h3">Leírás</Item.Header>
<Item.Content>{description}</Item.Content>
</Container>
</Item>
......@@ -88,17 +101,15 @@ class EventDetail extends Component {
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Metadata>
{moment(note.created_at).format('LL')}
{moment(note.created_at).format("LL")}
</Comment.Metadata>
<Comment.Text>
{note.note}
</Comment.Text>
<Comment.Text>{note.note}</Comment.Text>
</Comment.Content>
</Comment>
</Segment>
);
}
return '';
return "";
});
}
......@@ -106,49 +117,41 @@ class EventDetail extends Component {
const event = this.props.selectedEvent;
const note = this.props.actualNote;
return (
<Container style={{ paddingTop: '1em', paddingBottom: '7em' }}>
<Container textAlign='center'>
{ this.props.selectedEvent && this.props.trainees
<Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
<Container textAlign="center">
{this.props.selectedEvent && this.props.trainees
? this.renderEvent()
: ''}
: ""}
</Container>
{!this.state.edit ? (
<Button onClick={() => this.setState({ edit: true })}>
Módosítás
</Button>
) : (
<Button
onClick={() => {
this.setState({ edit: false });
}}
>
{" "}
Kész
</Button>
)}
<Table celled unstackable>
<Table.Header>
<Table.Row textAlign='center'>
<Table.Row textAlign="center">
<Table.HeaderCell>Név</Table.HeaderCell>
<Table.HeaderCell>Jelen volt</Table.HeaderCell>
<Table.HeaderCell>Megjegyzések</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{ this.props.selectedEvent
? this.renderTrainees()
: null}
{this.props.selectedEvent ? this.renderTrainees() : null}
</Table.Body>
</Table>
{!this.state.edit
? (
<Button onClick={() => this.setState({ edit: true })}>
Módosítás
</Button>
)
: (
<Button onClick={() => {
this.setState({ edit: false });
this.props.submitVisitors(this.props.selectedEvent);
}}
>
{' '}
Kész
</Button>
)}
<Comment.Group>
<Header dividing>
Megjegyzések
</Header>
{this.props.eventNotes
? this.renderComments()
: ''}
<Header dividing>Megjegyzések</Header>
{this.props.eventNotes ? this.renderComments() : ""}
<Form reply>
<Form.TextArea
value={note.note}
......@@ -162,9 +165,9 @@ Kész
});
this.props.clearWrite();
}}
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
content="Megjegyzés hozzáadása"
labelPosition="left"
icon="edit"
primary
/>
</Form>
......@@ -179,7 +182,10 @@ const mapStateToProps = ({
events: { selectedEvent },
trainees: { trainees },
}) => ({
eventNotes, selectedEvent, trainees, actualNote,
eventNotes,
selectedEvent,
trainees,
actualNote,
});
export default connect(mapStateToProps, {
......
src/components/pages/Events.js
View file @ 2eef83d2
import { Button, Container, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import moment from 'moment';
import { deleteEvent, getStaffEvents } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import { Link } from 'react-router-dom';
import { Container, Table, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import moment from 'moment';
class Events extends Component {
UNSAFE_componentWillMount() {
......@@ -14,25 +15,21 @@ class Events extends Component {
renderEvents() {
return this.props.events.map((event) => (
<Table.Row key={event.id}>
<Table.Cell textAlign='center'>
<Link to={`events/${event.id}`}>
{event.name}
</Link>
<Table.Cell textAlign="center">
<Link to={`events/${event.id}`}>{event.name}</Link>
</Table.Cell>
<Table.Cell textAlign='center'>
<Table.Cell textAlign="center">
{moment(event.date).format('LL')}
</Table.Cell>
<Table.Cell textAlign='center'>
{event.visitor_number}
</Table.Cell>
<Table.Cell textAlign='center'>
<Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
<Table.Cell textAlign="center">
<Button
onClick={() => this.props.deleteEvent(event)}
color='red'
color="red"
compact
size='small'
size="small"
>
Törlés
Törlés
</Button>
</Table.Cell>
</Table.Row>
......@@ -41,26 +38,32 @@ class Events extends Component {
render() {
return (
<Container textAlign='center'>
<Container textAlign="center">
<div style={{ overflowX: 'scroll' }}>
<Table
color='blue'
color="blue"
unstackable
celled
selectable
compact
size='small'
size="small"
>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>Alkalom neve</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>Jelen voltak</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Alkalom neve
</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Jelen voltak
</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.events ? this.renderEvents() : 'Nincs még alkalom beírva'}
{this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body>
</Table>
</div>
......@@ -73,4 +76,6 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events);
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);

Hosted with :heart: by KSZK