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
Select Git revision
  • 2023-ujoncdelutan
  • 2023-update
  • master
  • 1.0
  • 1.0.1
  • 1.0.10
  • 1.0.12
  • 1.0.13
  • 1.0.14
  • 1.0.15
  • 1.0.16
  • 1.0.17
  • 1.0.18
  • 1.0.19
  • 1.0.2
  • 1.0.3
  • 1.0.4
  • 1.0.5
  • 1.0.6
  • 1.0.7
  • 1.0.8
  • 1.0.9
  • 1.1.0
  • 1.1.1
  • 1.1.2
  • 1.1.3
  • 1.1.4
  • 1.1.5
  • 1.2.0
  • 1.3.0
  • 1.3.1
  • 1.3.10
  • 1.3.11
  • 1.3.12
  • 1.3.13
  • 1.3.14
  • 1.3.15
  • 1.3.16
  • 1.3.17
  • 1.3.18
  • 1.3.19
  • 1.3.2
  • 1.3.3
  • 1.3.4
  • 1.3.5
  • 1.3.6
  • 1.3.7
  • 1.3.8
  • 1.3.9
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.4.3
  • 1.4.4
  • 1.4.5
  • 1.4.6
  • 1.4.7
57 results

Target

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