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
Showing
with 1677 additions and 1005 deletions
import './Forms.css';
import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Modal, Button, Header, Icon, Divider } from 'semantic-ui-react'; import { getDocuments, getSolutions } from '../../actions/homework';
import { connect } from 'react-redux';
import CorrectSolutionForm from './CorrectSolutionForm'; import CorrectSolutionForm from './CorrectSolutionForm';
import { emptyMessage } from '../pages/Homework'; import { connect } from 'react-redux';
import './Forms.css'; import { customMessage } from '../pages/Homework';
class SolutionDetailsForm extends Component { class SolutionDetailsForm extends Component {
constructor(props) { constructor(props) {
...@@ -14,97 +17,143 @@ class SolutionDetailsForm extends Component { ...@@ -14,97 +17,143 @@ class SolutionDetailsForm extends Component {
} }
render() { render() {
const taskSolutions = this.props.homeworks.solutions.filter(solution => const taskSolutions = this.props.homeworks.solutions.filter(
solution.task === this.props.taskid); (solution) => solution.task === this.props.taskid
);
const noSubmitStudents = []; const noSubmitStudents = [];
const waitForCorrectionStudents = []; const waitForCorrectionStudents = [];
const noAcceptStudents = []; const noAcceptStudents = [];
const acceptedStudents = []; const acceptedStudents = [];
for (let i = 0; i < this.props.homeworks.profiles.length; i += 1) { this.props.homeworks.profiles.forEach((profile) => {
const profileSolutions = taskSolutions.filter(solution => const profileSolutions = taskSolutions.filter(
solution.created_by === this.props.homeworks.profiles[i].id); (solution) => solution.created_by === profile.id
);
if (this.props.homeworks.profiles[i].role === 'Student') { if (profile.role === 'Student') {
if (profileSolutions.length === 0) { if (profileSolutions.length === 0) {
noSubmitStudents.push(this.props.homeworks.profiles[i]); noSubmitStudents.push(profile);
} else if (taskSolutions[taskSolutions.length - 1].corrected === false) { } else if (
waitForCorrectionStudents.push(this.props.homeworks.profiles[i]); profileSolutions[profileSolutions.length - 1].corrected === false
} else if (taskSolutions[taskSolutions.length - 1].accepted === false) { ) {
noAcceptStudents.push(this.props.homeworks.profiles[i]); waitForCorrectionStudents.push(profile);
} else if (
profileSolutions[profileSolutions.length - 1].accepted === false
) {
noAcceptStudents.push(profile);
} else { } else {
acceptedStudents.push(this.props.homeworks.profiles[i]); acceptedStudents.push(profile);
}
} }
} }
});
const emptyStudentText = 'Nincs ilyen képződő jelenleg.'; const noStudentText = 'Nincs ilyen képződő jelenleg.';
return ( return (
<Modal <Modal
open={this.state.showModal} open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={ trigger={
<button id='task' onClick={() => { this.setState({ showModal: true }); }}> <button
<Icon name='external' /> type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
this.props.getSolutions();
this.props.getDocuments();
}}
>
<Icon name="external" />
{this.props.tasktitle} {this.props.tasktitle}
</button> </button>
} }
> >
<Modal.Header> <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.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>{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
emptyMessage(emptyStudentText) : ? customMessage(noStudentText)
noSubmitStudents.map(student => ( : noSubmitStudents.map((student) => (
<Button 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">
{waitForCorrectionStudents.length === 0 ? Javításra vár (A névre kattintva kijavítható a megoldás):
emptyMessage(emptyStudentText) : </Header>
waitForCorrectionStudents.map(student => ( {waitForCorrectionStudents.length === 0
? customMessage(noStudentText)
: waitForCorrectionStudents.map((student) => (
<CorrectSolutionForm <CorrectSolutionForm
key={Math.random()}
color="orange"
studentName={student.nick} studentName={student.nick}
studentFullName={student.full_name} studentFullName={student.full_name}
studentId={student.id} studentId={student.id}
taskTitle={this.props.tasktitle} taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions} taskSolutions={taskSolutions}
/> />
)) ))}
}
<Divider /> <Divider />
<Header as='h3'>A megoldás nem elfogadható:</Header> <Header as="h3">
{noAcceptStudents.length === 0 ? A megoldás nem elfogadható (A névre kattintva módosítható a
emptyMessage(emptyStudentText) : javítás):
noAcceptStudents.map(student => ( </Header>
<Button color='red' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button> {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}
/>
))}
<Divider /> <Divider />
<Header as='h3'>Elfogadva:</Header> <Header as="h3">
{acceptedStudents.length === 0 ? Elfogadva (A névre kattintva módosítható a javítás):
emptyMessage(emptyStudentText) : </Header>
acceptedStudents.map(student => ( {acceptedStudents.length === 0
<Button color='green' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button> ? 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}
/>
))}
</Modal.Content> </Modal.Content>
<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' /> Kész <Icon name="checkmark" /> Kész
</Button> </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
...@@ -115,4 +164,6 @@ class SolutionDetailsForm extends Component { ...@@ -115,4 +164,6 @@ class SolutionDetailsForm extends Component {
const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user }); const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
export default connect(mapStateToProps, { export default connect(mapStateToProps, {
getSolutions,
getDocuments,
})(SolutionDetailsForm); })(SolutionDetailsForm);
src/components/images/kszk_with_shadow.png

251 KiB

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Menu,
Container,
Button,
Segment,
Visibility,
Responsive,
} from 'semantic-ui-react';
const FixedMenu = ({ user, menuItems }) => (
<Menu fixed='top' size='large' pointing>
<Container>
{menuItems.map((item, i) =>
(user.permission >= item.permissionLevel ||
(item.permissionLevel === 0)
?
<Menu.Item key={i} as={Link} to={item.to}>{item.text}</Menu.Item>
:
null))}
<Menu.Menu position='right'>
<Menu.Item className='item'>
{
user.id ?
<Button.Group>
<Button primary 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/' >Bejelentkezés</Button>
}
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
);
class DesktopContainer extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
componentWillMount() {
this.props.getUserData();
}
hideFixedMenu() {
this.setState({ visible: false });
}
showFixedMenu() {
this.setState({ visible: true });
}
render() {
const { visible } = this.state.visible;
const { children, user, menuItems } = this.props;
return (
<Responsive minWidth={768}>
{visible ? <FixedMenu user={this.props.user} /> : null}
<Visibility
onBottomPassed={() => this.showFixedMenu()}
onBottomVisible={() => this.hideFixedMenu()}
once={false}
>
<Segment inverted textAlign='center' vertical>
<Container>
<Menu inverted secondary stackable size='large'>
{menuItems.map((item, i) =>
(this.props.user.permission >= item.permissionLevel ||
(item.permissionLevel === 0) ?
<Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
:
null))}
<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>
</Menu>
</Container>
</Segment>
</Visibility>
{children}
</Responsive>
);
}
}
export default DesktopContainer;
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Menu,
Container,
Button,
Segment,
Image,
Responsive,
Sidebar,
Icon,
} from 'semantic-ui-react';
import KSZKlogo from '../images/kszk_logo.svg';
class MobileContainer extends Component {
constructor(props) {
super(props);
this.state = {
sidebarVisible: false,
};
}
componentWillMount() {
this.props.getUserData();
}
render() {
const visible = this.state.sidebarVisible;
const { children, user, menuItems } = this.props;
return(
<Responsive maxWidth={767}>
<Segment inverted textAlign='center' vertical>
<Container>
<Menu inverted secondary>
<Menu.Item onClick={visible ? this.handleHideClick : this.handleShowClick}><Icon name='sidebar'/></Menu.Item>
<Image size='mini' src={KSZKlogo} style={{ marginRight: '1.5em' }} />
<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>
</Menu>
</Container>
</Segment>
<Sidebar.Pushable>
<Sidebar
as={Menu}
animation='overlay'
icon='labeled'
inverted
vertical
visible={visible}
width='thin'
>
{menuItems.map((item, i) =>
(this.props.user.permission >= item.permissionLevel ||
(item.permissionLevel === 0) ?
<Menu.Item key={i} as={Link} to={item.to} onClick={this.handleSidebarHide}>{item.text}</Menu.Item>
:
null))}
</Sidebar>
<Sidebar.Pusher onClick={this.handleSidebarHide}>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
</Responsive>);
}
handleShowClick = () => this.setState({ sidebarVisible: true })
handleHideClick = () => this.setState({ sidebarVisible: false })
handleSidebarHide = () => this.setState({ sidebarVisible: false })
}
export default MobileContainer;
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, List } 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 options = [ const groupTypes = {
{ key: 'DT', text: 'DevTeam' }, HAT: {
{ key: 'NET', text: 'NETeam' }, name: 'Hallgatói Tudásbázis',
{ key: 'ST', text: 'SecurITeam' }, color: 'purple',
{ key: 'SYS', text: 'SysAdmin' }, },
{ key: 'HAT', text: 'Hallgatói Tudásbázis' }, SYS: {
]; name: 'Sysadmin',
color: 'violet',
},
NET: {
name: 'NETeam',
color: 'blue',
},
ST: {
name: 'SecurITeam',
color: 'teal',
},
DT: {
name: 'DevTeam',
color: 'green',
},
};
class ApplicantProfile extends Component { class ApplicantProfile extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getSelectedProfile(this.props.match.params.id); this.props.getSelectedProfile(this.props.match.params.id);
} }
renderGroups() {
const { groups } = this.props.selectedProfile;
const groupNames = options.map(item => (groups.includes(item.key) ? item.text : null));
return groupNames.map(item => (
<List.Item>
<List.Content>
<List.Header>{item}</List.Header>
</List.Content>
</List.Item>
));
}
render() { render() {
const { id, signed, groups, role, full_name, nick, motivation_about, motivation_exercise, motivation_profession } const {
= this.props.selectedProfile; id,
signed,
role,
full_name,
nick,
motivation_about,
motivation_exercise,
motivation_profession,
groups,
} = this.props.selectedProfile;
return ( return (
<Container style={{ padding: '60px' }}> <Container style={{ paddingTop: '3em', paddingBottom: '6em' }}>
<Item> <Item>
<Item.Content> <Item.Content>
<Container textAlign='center'> <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">
{groups?.map((group) => (
<Label color={groupTypes[group].color}>
{groupTypes[group].name}
</Label>
))}
</Header>
</Container> </Container>
<Item.Description> <Item.Description>
<Container textAlign='justified' style={{ padding: '30px' }}> <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>{motivation_about}</p> <p>
<Header as='h3'>Szakmai motiváció:</Header> {motivation_about?.split('\n').map((item, i) => (
<p>{motivation_profession}</p> <div key={i}>{item}</div>
<Header as='h3'>Feladatok megoldása:</Header> ))}
<p>{motivation_exercise}</p> </p>
<Header as='h3'>Érdeklődés:</Header> <Header as="h3">Szakmai motiváció:</Header>
{ groups ? <p>
<List horizontal> {motivation_profession?.split('\n').map((item, i) => (
{this.renderGroups()} <div key={i}>{item}</div>
</List> ))}
: </p>
null <Header as="h3">Feladatok megoldása:</Header>
} <p>
{motivation_exercise?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
</Container> </Container>
<Container textAlign='center' style={{ padding: '20px' }}> <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">
: Elfogadva
null </Label>
} ) : null}
{ role === 'Staff' ? {role === 'Staff' ? (
<Label color='blue' size='huge'>Staff</Label> <Label color="blue" size="huge">
: Staff
null </Label>
} ) : null}
{ role === 'Applicant' ? {role === 'Applicant' ? (
<Label color='orange' size='huge'>Jelentkezett</Label> <Label color="orange" size="huge">
: Jelentkezett
null </Label>
} ) : null}
{ role === 'Denied' ? {role === 'Denied' ? (
<Label color='red' size='huge'>Elutasítva</Label> <Label color="red" size="huge">
: Elutasítva
null </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
);
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 = [
{
role: 'Staff',
text: 'Staff',
color: 'blue',
},
{
role: 'Student',
text: 'Elfogadott',
color: 'green',
},
{
role: 'Applicant',
text: 'Jelentkezett',
color: 'orange',
},
{
role: 'Denied',
text: 'Elutasított',
color: 'red',
},
{
role: 'no',
text: 'Nem jelentkezett',
color: 'red',
},
];
class Applications extends Component { class Applications extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getProfiles(); this.props.getProfiles();
} }
renderApplicants() { renderApplicants(format) {
return this.props.profiles.map((profile) => return this.props.profiles.map((profile) =>
{ return ( profile.role === format.role &&
<Table.Row> (profile.signed === true || profile.role === 'Staff') ? (
<Table.Cell> <Table.Row key={profile.id}>
<Link to={`applicant/${profile.id}`}> <Table.Cell textAlign="center">
{profile.full_name} <Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Link>
</Table.Cell> </Table.Cell>
{ profile.signed ? {format.role === 'Staff' ? null : (
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">
{ profile.role === 'Student' ? <ConfirmModal
<Label color='green'>Elfogadva</Label> button={
: <Button color="blue" size="tiny">
null ADD STAFF STATUS
} </Button>
{ profile.role === 'Staff' ?
<Label color='blue'>Staff</Label>
:
null
}
{ profile.role === 'Applicant' ?
<Label color='orange'>Jelentkezett</Label>
:
null
}
{ profile.role === 'Denied' ?
<Label color='red'>Elutasítva</Label>
:
null
} }
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell> </Table.Cell>
: )}
<Table.Cell textAlign='center'> </Table.Row>
{ profile.role === 'Staff' ? ) : null
<Label color='blue'>Staff</Label> );
:
<Label color='red'>Nem jelentkezett</Label>
} }
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>
</Table.Cell> </Table.Cell>
} {format.role === 'Staff' ? null : (
<Table.Cell> <Table.Cell textAlign="center">
{ profile.role !== 'Staff' ?
<ConfirmModal <ConfirmModal
button={<Button button={
color='blue' <Button color="blue" size="tiny">
size='tiny' ADD STAFF STATUS
> </Button>
Staff jog adás }
</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')}
/> />
:
null }
</Table.Cell> </Table.Cell>
)}
</Table.Row> </Table.Row>
) : null
); );
});
} }
render() { renderTable(format) {
return ( return (
<Container <Table color="blue" unstackable celled selectable compact>
textAlign='center'
style={{
padding: '80px'
}}
>
<Table color='blue' selectable compact>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell> <Table.HeaderCell textAlign="center">
<Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell> <Label color={format.color}>{format.text}</Label>
<Table.HeaderCell /> </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}{' '}
</Label>
</Table.HeaderCell>
) : null}
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.renderApplicants()} {format.role === 'no'
? this.renderNotApplicants(format)
: this.renderApplicants(format)}
</Table.Body> </Table.Body>
</Table> </Table>
);
}
render() {
return (
<Container
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 */}
</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
);
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Comment, Modal } from 'semantic-ui-react';
import { deleteNote } from '../../actions/notes';
import ConfirmModal from '../forms/ConfirmModal';
class CommentModal extends Component {
renderComments() {
const { notes, user } = this.props;
return notes.map((note) => {
return (
<Comment style={{ padding: '1em' }} stylekey={note.id}>
<Comment.Content>
<Comment.Author><strong>{note.created_by_name}</strong></Comment.Author>
<Comment.Text>
{note.note}
</Comment.Text>
{ note.created_by_name === user.fullName ?
<ConfirmModal
text='törölni akarod a megjegyzést'
button={
<Button
compact
color='red'
size='mini'
>
Delete
</Button>
}
onAccept={() => this.props.deleteNote(note)}
/>
:
null }
</Comment.Content>
</Comment>
);
});
}
render() {
return (
<Modal
closeIcon
trigger={
<Button icon='comment alternate outline' />
}
>
<Modal.Header>Megjegyzések:</Modal.Header>
<Modal.Content>
{this.renderComments()}
</Modal.Content>
</Modal>
);
}
}
const mapStateToProps = ({ user }) => ({ user });
export default connect(mapStateToProps, { deleteNote })(CommentModal);
import React, { Component } from 'react';
import { import {
Container,
Item,
Button, Button,
Comment, Comment,
Container,
Divider,
Form, Form,
Header, Header,
Item,
Segment,
Table, 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 } from '../../actions/statistics'; clearWrite,
import { getNotesByEvent, writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes'; getNotesByEvent,
import TraineeTableRow from './TraineeTableRow'; postEventNote,
import ConfirmModal from '../forms/ConfirmModal'; writeNote,
} from "../../actions/notes";
import {
getEventById,
getTrainees,
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) {
...@@ -23,39 +35,59 @@ class EventDetail extends Component { ...@@ -23,39 +35,59 @@ class EventDetail extends Component {
}; };
} }
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getEventById(this.props.match.params.id); this.props.getEventById(this.props.match.params.id);
this.props.getTrainees(); this.props.getTrainees();
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(),
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}
trainee={item} trainee={item}
edit={this.state.edit} edit={this.state.edit}
key={item.id}
/> />
); ) : null;
}); });
} }
renderEvent() { renderEvent() {
const { name, date, description } = this.props.selectedEvent; const { name, date, description } = this.props.selectedEvent;
return ( return (
<Segment>
<Item> <Item>
<Item.Header as='h2'>{name}</Item.Header> <Divider style={{ fontSize: "2em" }} horizontal>
<Item.Header as='h3'>Dátum: {moment(date).format('LL')}</Item.Header> <Header as="h1">
<Container textAlign='justified'> {name}
<Item.Header as='h3'>Leírás</Item.Header> <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>
<Item.Content>{description}</Item.Content> <Item.Content>{description}</Item.Content>
</Container> </Container>
</Item> </Item>
</Segment>
); );
} }
...@@ -64,32 +96,20 @@ class EventDetail extends Component { ...@@ -64,32 +96,20 @@ class EventDetail extends Component {
return notes.map((note) => { return notes.map((note) => {
if (!note.profile) { if (!note.profile) {
return ( return (
<Comment> <Segment>
<Comment key={Math.random()}>
<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>
<ConfirmModal </Comment>
text='törölni akarod a megjegyzést' </Segment>
button={ );
<Button
compact
color='red'
size='mini'
>
Delete
</Button>
}
onAccept={() => this.props.deleteNote(note)}
/>
</Comment>);
} }
return ''; return "";
}); });
} }
...@@ -97,79 +117,57 @@ class EventDetail extends Component { ...@@ -97,79 +117,57 @@ 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 <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
style={{ <Container textAlign="center">
padding: '80px' {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 });
}} }}
> >
<Container textAlign='center'> {" "}
{ this.props.selectedEvent && this.props.trainees ? Kész
this.renderEvent() </Button>
: )}
'' <Table celled unstackable>
}
</Container>
<Table centered>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row textAlign="center">
<Table.HeaderCell>Név</Table.HeaderCell> <Table.HeaderCell>Név</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>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.trainees ? {this.props.selectedEvent ? this.renderTrainees() : null}
this.renderTrainees()
:
''
}
</Table.Body> </Table.Body>
</Table> </Table>
<Button
inverted
color='orange'
onClick={() => this.setState({ edit: true })}
>
Szerkeszt
</Button>
{ this.state.edit ?
<Button
inverted
color='blue'
onClick={() => {
this.setState({ edit: false });
this.props.submitVisitors(this.props.selectedEvent);
}
}
>Mentés
</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}
onChange={e => this.props.writeNote(e)} onChange={(e) => this.props.writeNote(e)}
/> />
<Button <Button
onClick={() => { onClick={() => {
this.props.postEventNote({ eventid: event.id, this.props.postEventNote({
note: note.note }); eventid: event.id,
note: note.note,
});
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>
...@@ -182,8 +180,13 @@ class EventDetail extends Component { ...@@ -182,8 +180,13 @@ class EventDetail extends Component {
const mapStateToProps = ({ const mapStateToProps = ({
notes: { eventNotes, actualNote }, notes: { eventNotes, actualNote },
events: { selectedEvent }, events: { selectedEvent },
trainees: { trainees } trainees: { trainees },
}) => ({ eventNotes, selectedEvent, trainees, actualNote }); }) => ({
eventNotes,
selectedEvent,
trainees,
actualNote,
});
export default connect(mapStateToProps, { export default connect(mapStateToProps, {
getEventById, getEventById,
...@@ -194,5 +197,4 @@ export default connect(mapStateToProps, { ...@@ -194,5 +197,4 @@ export default connect(mapStateToProps, {
writeNote, writeNote,
clearWrite, clearWrite,
postEventNote, postEventNote,
deleteNote,
})(EventDetail); })(EventDetail);
import {
Button,
Comment,
Dropdown,
Form,
Grid,
Icon,
Popup,
Table,
} 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';
const visitStates = [
{
text: 'Igen',
value: 'Visitor',
},
{
text: 'Szólt h nem',
value: 'Absent',
},
{
text: 'Nem',
value: 'No',
},
];
class TraineeTableRow extends Component {
constructor(props) {
super(props);
this.state = {
showAddPopup: false,
showMorePopup: false,
};
}
// Hides and shows the Add and More popup
triggerAdd = () =>
this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup });
triggerMore = () =>
this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup });
render() {
const note = this.props.actualNote;
const { trainee, selectedEvent, notes } = this.props;
const isVisitor = selectedEvent.visitors.includes(trainee.id);
const isAbsent = selectedEvent.absent.includes(trainee.id);
let visitorStatusIcon;
let visitorStatusDropdown;
if (isVisitor) {
visitorStatusIcon = <Icon color="green" name="checkmark" />;
visitorStatusDropdown = 'Visitor';
} else if (isAbsent) {
visitorStatusIcon = <Icon color="orange" name="minus" />;
visitorStatusDropdown = 'Absent';
} else {
visitorStatusIcon = <Icon color="red" name="cancel" />;
visitorStatusDropdown = 'No';
}
return (
<Table.Row>
<Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
{/* Show and change Visitors status */}
{!this.props.edit ? (
<Table.Cell textAlign="center">{visitorStatusIcon}</Table.Cell>
) : (
<Table.Cell textAlign="center">
<Dropdown
defaultValue={visitorStatusDropdown}
selection
options={visitStates}
onChange={(_, v) => {
this.props.visitorChange({ id: trainee.id, value: v.value });
// Submit with error check
this.props
.submitVisitors(this.props.selectedEvent)
.then((value) => {
if (value === true) {
console.log('success');
} else {
console.log('error');
}
});
}}
/>
</Table.Cell>
)}
{/* Notes for trainees */}
<Table.Cell>
<Grid>
<Grid.Row>
{/* Note text */}
<Grid.Column floated="left" width={8}>
{notes.length > 0 ? (
<Comment>
<Comment.Content>
<Comment.Author>
<b>{notes[0].created_by_name}:</b>
</Comment.Author>
<Comment.Text style={{ wordWrap: 'break-word' }}>
{notes[0].note.length > 25
? notes[0].note.slice(0, 25).concat('...')
: notes[0].note}
</Comment.Text>
</Comment.Content>
</Comment>
) : null}
</Grid.Column>
{/* Note buttons */}
<Grid.Column floated="right" width={6} textAlign="right">
{notes.length > 0 ? (
<Popup
basic
open={this.state.showMorePopup}
trigger={
<Button
icon="comment alternate outline"
onClick={this.triggerMore}
/>
}
content={notes.map((oneNote) => (
<Comment.Content>
<Comment.Author>
<b>{oneNote.created_by_name}:</b>
</Comment.Author>
<Comment.Text>{oneNote.note}</Comment.Text>
</Comment.Content>
))}
/>
) : null}
<Popup
basic
trigger={<Button icon="plus" onClick={this.triggerAdd} />}
open={this.state.showAddPopup}
content={
<Form reply>
<Form.TextArea
value={note.note}
onChange={(e) => this.props.writeNote(e)}
/>
<Button
primary
onClick={() => {
this.triggerAdd();
this.props.postEventNote({
eventid: selectedEvent.id,
userid: trainee.id,
note: note.note,
});
this.props.clearWrite();
}}
content="Megjegyzés hozzáadása"
labelPosition="left"
icon="edit"
/>
</Form>
}
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Table.Cell>
</Table.Row>
);
}
}
const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote });
export default connect(mapStateToProps, {
writeNote,
clearWrite,
postEventNote,
visitorChange,
submitVisitors,
})(TraineeTableRow);
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, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent, selectEventForEdit } from '../../actions/statistics'; import moment from 'moment';
import AddEventForm from '../forms/AddEventForm';
import EditEventForm from '../forms/EditEventForm';
import ConfirmModal from '../forms/ConfirmModal';
class Events extends Component { class Events extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getStaffEvents(); this.props.getStaffEvents();
} }
renderEvents() { renderEvents() {
return this.props.events.map((event) => return this.props.events.map((event) => (
{ return ( <Table.Row key={event.id}>
<Table.Row> <Table.Cell textAlign="center">
<Table.Cell> <Link to={`events/${event.id}`}>{event.name}</Link>
<Link to={`events/${event.id}`}>
{event.name}
</Link>
</Table.Cell> </Table.Cell>
<Table.Cell>{moment(event.date).format('LL')}</Table.Cell> <Table.Cell textAlign="center">
<Table.Cell>{event.visitor_number}</Table.Cell> {moment(event.date).format('LL')}
<Table.Cell textAlign='center'> </Table.Cell>
<EditEventForm onClick={() => this.props.selectEventForEdit(event)} /> <Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
<ConfirmModal <Table.Cell textAlign="center">
text={`törölni akarod a következő alkalmat:${event.name}`}
button={
<Button <Button
inverted onClick={() => this.props.deleteEvent(event)}
color='red' color="red"
compact
size="small"
> >
<Icon name='x' />
Törlés Törlés
</Button> </Button>
}
onAccept={() => this.props.deleteEvent(event)}
/>
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
); ));
});
} }
render() { render() {
return ( return (
<Container textAlign='center'> <Container textAlign="center">
<Table color='blue' selectable compact> <div style={{ overflowX: 'scroll' }}>
<Table
color="blue"
unstackable
celled
selectable
compact
size="small"
>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell>Alkalom neve</Table.HeaderCell> <Table.HeaderCell textAlign="center">
<Table.HeaderCell>Dátum</Table.HeaderCell> Alkalom neve
<Table.HeaderCell>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 alaklom beírva'} {this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body> </Table.Body>
</Table> </Table>
</div>
<br />
<AddEventForm /> <AddEventForm />
</Container> </Container>
); );
...@@ -70,4 +76,6 @@ class Events extends Component { ...@@ -70,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, selectEventForEdit, deleteEvent })(Events); export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.