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

Target

Select target project
  • kszk/devteam/kszkepzes/old/kszkepzes-frontend
  • kbgergely/kszkepzes-frontend
2 results
Select Git revision
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1677 additions and 1005 deletions
src/components/forms/SolutionDetailsForm.js
View file @ 2eef83d2
import './Forms.css';
import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Header, Icon, Divider } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getDocuments, getSolutions } from '../../actions/homework';
import CorrectSolutionForm from './CorrectSolutionForm';
import { emptyMessage } from '../pages/Homework';
import './Forms.css';
import { connect } from 'react-redux';
import { customMessage } from '../pages/Homework';
class SolutionDetailsForm extends Component {
constructor(props) {
......@@ -14,97 +17,143 @@ class SolutionDetailsForm extends Component {
}
render() {
const taskSolutions = this.props.homeworks.solutions.filter(solution =>
solution.task === this.props.taskid);
const taskSolutions = this.props.homeworks.solutions.filter(
(solution) => solution.task === this.props.taskid
);
const noSubmitStudents = [];
const waitForCorrectionStudents = [];
const noAcceptStudents = [];
const acceptedStudents = [];
for (let i = 0; i < this.props.homeworks.profiles.length; i += 1) {
const profileSolutions = taskSolutions.filter(solution =>
solution.created_by === this.props.homeworks.profiles[i].id);
this.props.homeworks.profiles.forEach((profile) => {
const profileSolutions = taskSolutions.filter(
(solution) => solution.created_by === profile.id
);
if (this.props.homeworks.profiles[i].role === 'Student') {
if (profile.role === 'Student') {
if (profileSolutions.length === 0) {
noSubmitStudents.push(this.props.homeworks.profiles[i]);
} else if (taskSolutions[taskSolutions.length - 1].corrected === false) {
waitForCorrectionStudents.push(this.props.homeworks.profiles[i]);
} else if (taskSolutions[taskSolutions.length - 1].accepted === false) {
noAcceptStudents.push(this.props.homeworks.profiles[i]);
noSubmitStudents.push(profile);
} else if (
profileSolutions[profileSolutions.length - 1].corrected === false
) {
waitForCorrectionStudents.push(profile);
} else if (
profileSolutions[profileSolutions.length - 1].accepted === false
) {
noAcceptStudents.push(profile);
} 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 (
<Modal
open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={
<button id='task' onClick={() => { this.setState({ showModal: true }); }}>
<Icon name='external' />
<button
type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
this.props.getSolutions();
this.props.getDocuments();
}}
>
<Icon name="external" />
{this.props.tasktitle}
</button>
}
>
<Modal.Header>
A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű feladatnál:
A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű
feladatnál:
</Modal.Header>
<Modal.Content>
<Header as='h3'>A feladat leírása:</Header>
{this.props.taskdesc.split('\n').map(s => (<p>{s}</p>))}
<Header as="h3">A feladat leírása:</Header>
{this.props.taskdesc.split('\n').map((s) => (
<p key={Math.random()}>{s}</p>
))}
<Divider />
<Header as='h3'>Nem érkezett még megoldás:</Header>
{noSubmitStudents.length === 0 ?
emptyMessage(emptyStudentText) :
noSubmitStudents.map(student => (
<Button color='blue' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))
}
<Header as="h3">Nem érkezett még megoldás:</Header>
{noSubmitStudents.length === 0
? customMessage(noStudentText)
: noSubmitStudents.map((student) => (
<Button
key={Math.random()}
color="blue"
style={{ marginRight: '1.5em', marginTop: '1.5em' }}
>
{student.full_name}
</Button>
))}
<Divider />
<Header as='h3'>Javításra vár (A névre kattintva kijavítható a megoldás):</Header>
{waitForCorrectionStudents.length === 0 ?
emptyMessage(emptyStudentText) :
waitForCorrectionStudents.map(student => (
<Header as="h3">
Javításra vár (A névre kattintva kijavítható a megoldás):
</Header>
{waitForCorrectionStudents.length === 0
? customMessage(noStudentText)
: waitForCorrectionStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color="orange"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))
}
))}
<Divider />
<Header as='h3'>A megoldás nem elfogadható:</Header>
{noAcceptStudents.length === 0 ?
emptyMessage(emptyStudentText) :
noAcceptStudents.map(student => (
<Button color='red' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))
}
<Header as="h3">
A megoldás nem elfogadható (A névre kattintva módosítható a
javítás):
</Header>
{noAcceptStudents.length === 0
? customMessage(noStudentText)
: noAcceptStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color="red"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<Divider />
<Header as='h3'>Elfogadva:</Header>
{acceptedStudents.length === 0 ?
emptyMessage(emptyStudentText) :
acceptedStudents.map(student => (
<Button color='green' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))
}
<Header as="h3">
Elfogadva (A névre kattintva módosítható a javítás):
</Header>
{acceptedStudents.length === 0
? customMessage(noStudentText)
: acceptedStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color="green"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.setState({ showModal: false });
}}
>
<Icon name='checkmark' /> Kész
<Icon name="checkmark" /> Kész
</Button>
</Modal.Actions>
</Modal>
......@@ -115,4 +164,6 @@ class SolutionDetailsForm extends Component {
const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
export default connect(mapStateToProps, {
getSolutions,
getDocuments,
})(SolutionDetailsForm);
src/components/images/kszk_with_shadow.png 0 → 100644
View file @ 2eef83d2
src/components/images/kszk_with_shadow.png

251 KiB

src/components/menus/DesktopContainer.js deleted 100644 → 0
View file @ b5539498
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;
src/components/menus/MobileContainer.js deleted 100644 → 0
View file @ b5539498
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;
src/components/pages/ApplicantProfile.js
View file @ 2eef83d2
import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Container, Header, Item, Button, Label, List } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getSelectedProfile, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { connect } from 'react-redux';
const options = [
{ key: 'DT', text: 'DevTeam' },
{ key: 'NET', text: 'NETeam' },
{ key: 'ST', text: 'SecurITeam' },
{ key: 'SYS', text: 'SysAdmin' },
{ key: 'HAT', text: 'Hallgatói Tudásbázis' },
];
const groupTypes = {
HAT: {
name: 'Hallgatói Tudásbázis',
color: 'purple',
},
SYS: {
name: 'Sysadmin',
color: 'violet',
},
NET: {
name: 'NETeam',
color: 'blue',
},
ST: {
name: 'SecurITeam',
color: 'teal',
},
DT: {
name: 'DevTeam',
color: 'green',
},
};
class ApplicantProfile extends Component {
componentWillMount() {
UNSAFE_componentWillMount() {
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() {
const { id, signed, groups, role, full_name, nick, motivation_about, motivation_exercise, motivation_profession }
= this.props.selectedProfile;
const {
id,
signed,
role,
full_name,
nick,
motivation_about,
motivation_exercise,
motivation_profession,
groups,
} = this.props.selectedProfile;
return (
<Container style={{ padding: '60px' }}>
<Container style={{ paddingTop: '3em', paddingBottom: '6em' }}>
<Item>
<Item.Content>
<Container textAlign='center'>
<Header as='h2'>{full_name}</Header>
<Container textAlign="center" style={{ paddingBottom: '2em' }}>
<Header as="h2">{full_name}</Header>
<Item.Meta>{nick}</Item.Meta>
<Header as="h2">
{groups?.map((group) => (
<Label color={groupTypes[group].color}>
{groupTypes[group].name}
</Label>
))}
</Header>
</Container>
<Item.Description>
<Container textAlign='justified' style={{ padding: '30px' }}>
<Header as='h3'>Magamról, eddigi tevékenységem:</Header>
<p>{motivation_about}</p>
<Header as='h3'>Szakmai motiváció:</Header>
<p>{motivation_profession}</p>
<Header as='h3'>Feladatok megoldása:</Header>
<p>{motivation_exercise}</p>
<Header as='h3'>Érdeklődés:</Header>
{ groups ?
<List horizontal>
{this.renderGroups()}
</List>
:
null
}
<Container textAlign="justified" style={{ padding: '1em' }}>
<Header as="h3">Magamról, eddigi tevékenységem:</Header>
<p>
{motivation_about?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
<Header as="h3">Szakmai motiváció:</Header>
<p>
{motivation_profession?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
<Header as="h3">Feladatok megoldása:</Header>
<p>
{motivation_exercise?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
</Container>
<Container textAlign='center' style={{ padding: '20px' }}>
<Header as='h3'>Státusz:</Header>
{ signed ?
<Container textAlign="center" style={{ padding: '1em' }}>
<Header as="h3">Státusz:</Header>
{signed ? (
<div>
{ role === 'Student' ?
<Label color='green' size='huge'>Elfogadva</Label>
:
null
}
{ role === 'Staff' ?
<Label color='blue' size='huge'>Staff</Label>
:
null
}
{ role === 'Applicant' ?
<Label color='orange' size='huge'>Jelentkezett</Label>
:
null
}
{ role === 'Denied' ?
<Label color='red' size='huge'>Elutasítva</Label>
:
null
}
{role === 'Student' ? (
<Label color="green" size="huge">
Elfogadva
</Label>
) : null}
{role === 'Staff' ? (
<Label color="blue" size="huge">
Staff
</Label>
) : null}
{role === 'Applicant' ? (
<Label color="orange" size="huge">
Jelentkezett
</Label>
) : null}
{role === 'Denied' ? (
<Label color="red" size="huge">
Elutasítva
</Label>
) : null}
</div>
:
<Label color='red' size='huge'>Nem jelentkezett</Label>
}
) : (
<Label color="red" size="huge">
Nem jelentkezett
</Label>
)}
</Container>
</Item.Description>
</Item.Content>
</Item>
{ signed && role !== 'Staff' ?
<Container textAlign='center'>
{signed && role !== 'Staff' ? (
<Container textAlign="center">
<ConfirmModal
button={
<Button
color='green'
>Jelentkezés elfogadása
</Button>}
text='elfogadod a jelentkezést'
button={<Button color="green">Jelentkezés elfogadása</Button>}
text="elfogadod a jelentkezést"
onAccept={() => this.props.setStatus(id, 'Student')}
/>
<ConfirmModal
button={
<Button
color='red'
>Jelentkezés elutasítása
</Button>}
text='elutasítod a jelentkezést'
button={<Button color="red">Jelentkezés elutasítása</Button>}
text="elutasítod a jelentkezést"
onAccept={() => this.props.setStatus(id, 'Denied')}
/>
</Container>
:
null
}
) : null}
</Container>
);
}
}
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({ selectedProfile });
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
selectedProfile,
});
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(ApplicantProfile);
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
ApplicantProfile
);
src/components/pages/Applications.js
View file @ 2eef83d2
import { Button, Container, Label, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Container, Table, Label, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getProfiles, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
const role = [
{
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 {
componentWillMount() {
UNSAFE_componentWillMount() {
this.props.getProfiles();
}
renderApplicants() {
renderApplicants(format) {
return this.props.profiles.map((profile) =>
{ return (
<Table.Row>
<Table.Cell>
<Link to={`applicant/${profile.id}`}>
{profile.full_name}
</Link>
profile.role === format.role &&
(profile.signed === true || profile.role === 'Staff') ? (
<Table.Row key={profile.id}>
<Table.Cell textAlign="center">
<Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Table.Cell>
{ profile.signed ?
<Table.Cell textAlign='center'>
{ profile.role === 'Student' ?
<Label color='green'>Elfogadva</Label>
:
null
}
{ 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
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
:
<Table.Cell textAlign='center'>
{ profile.role === 'Staff' ?
<Label color='blue'>Staff</Label>
:
<Label color='red'>Nem jelentkezett</Label>
)}
</Table.Row>
) : null
);
}
renderNotApplicants(format) {
return this.props.profiles.map((profile) =>
profile.signed === false && profile.role !== 'Staff' ? (
<Table.Row key={profile.id}>
<Table.Cell textAlign="center">
<Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Table.Cell>
}
<Table.Cell>
{ profile.role !== 'Staff' ?
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal
button={<Button
color='blue'
size='tiny'
>
Staff jog adás
</Button>}
text='staff jogot adsz neki'
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
:
null }
</Table.Cell>
)}
</Table.Row>
) : null
);
});
}
render() {
renderTable(format) {
return (
<Container
textAlign='center'
style={{
padding: '80px'
}}
>
<Table color='blue' selectable compact>
<Table color="blue" unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell>
<Table.HeaderCell />
<Table.HeaderCell textAlign="center">
<Label color={format.color}>{format.text}</Label>
</Table.HeaderCell>
{format.role !== 'Staff' ? (
<Table.HeaderCell width={3} textAlign="center">
<Label color={null}>
{format.role === 'no'
? this.props.profiles.filter(
(profile) =>
profile.signed === false && profile.role !== 'Staff'
).length
: this.props.profiles.filter(
(profile) =>
profile.role === format.role &&
(profile.signed === true || profile.role === 'Staff')
).length}{' '}
fő
</Label>
</Table.HeaderCell>
) : null}
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderApplicants()}
{format.role === 'no'
? this.renderNotApplicants(format)
: this.renderApplicants(format)}
</Table.Body>
</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>
);
}
}
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/CommentModal.js deleted 100644 → 0
View file @ b5539498
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);
src/components/pages/EventDetail.js
View file @ 2eef83d2
import React, { Component } from 'react';
import {
Container,
Item,
Button,
Comment,
Container,
Divider,
Form,
Header,
Item,
Segment,
Table,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
import { getNotesByEvent, writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes';
import TraineeTableRow from './TraineeTableRow';
import ConfirmModal from '../forms/ConfirmModal';
} from "semantic-ui-react";
import React, { Component } from "react";
import {
clearWrite,
getNotesByEvent,
postEventNote,
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 {
constructor(props) {
......@@ -23,39 +35,59 @@ class EventDetail extends Component {
};
}
componentWillMount() {
UNSAFE_componentWillMount() {
this.props.getEventById(this.props.match.params.id);
this.props.getTrainees();
this.props.getNotesByEvent(this.props.match.params.id);
}
renderTrainees() {
const event = this.props.selectedEvent;
return this.props.trainees.map((item) => {
const notes = this.props.eventNotes.filter(note => note.profile === item.id);
return (
return this.props.trainees
?.sort(function (a, b) {
var nameA = a.full_name.toLowerCase(),
nameB = b.full_name.toLowerCase();
if (nameA < nameB)
//sort string ascending
return -1;
if (nameA > nameB) return 1;
return 0; //default return value (no sorting)
})
.map((item) => {
const notes = this.props.eventNotes?.filter(
(note) => note.profile === item.id
);
return item.role === "Student" ? (
<TraineeTableRow
selectedEvent={event}
notes={notes}
trainee={item}
edit={this.state.edit}
key={item.id}
/>
);
) : null;
});
}
renderEvent() {
const { name, date, description } = this.props.selectedEvent;
return (
<Segment>
<Item>
<Item.Header as='h2'>{name}</Item.Header>
<Item.Header as='h3'>Dátum: {moment(date).format('LL')}</Item.Header>
<Container textAlign='justified'>
<Item.Header as='h3'>Leírás</Item.Header>
<Divider style={{ fontSize: "2em" }} horizontal>
<Header as="h1">
{name}
<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>
</Container>
</Item>
</Segment>
);
}
......@@ -64,32 +96,20 @@ class EventDetail extends Component {
return notes.map((note) => {
if (!note.profile) {
return (
<Comment>
<Segment>
<Comment key={Math.random()}>
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Metadata>
{moment(note.created_at).format('LL')}
{moment(note.created_at).format("LL")}
</Comment.Metadata>
<Comment.Text>
{note.note}
</Comment.Text>
<Comment.Text>{note.note}</Comment.Text>
</Comment.Content>
<ConfirmModal
text='törölni akarod a megjegyzést'
button={
<Button
compact
color='red'
size='mini'
>
Delete
</Button>
}
onAccept={() => this.props.deleteNote(note)}
/>
</Comment>);
</Comment>
</Segment>
);
}
return '';
return "";
});
}
......@@ -97,79 +117,57 @@ class EventDetail extends Component {
const event = this.props.selectedEvent;
const note = this.props.actualNote;
return (
<Container
style={{
padding: '80px'
<Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
<Container textAlign="center">
{this.props.selectedEvent && this.props.trainees
? this.renderEvent()
: ""}
</Container>
{!this.state.edit ? (
<Button onClick={() => this.setState({ edit: true })}>
Módosítás
</Button>
) : (
<Button
onClick={() => {
this.setState({ edit: false });
}}
>
<Container textAlign='center'>
{ this.props.selectedEvent && this.props.trainees ?
this.renderEvent()
:
''
}
</Container>
<Table centered>
{" "}
Kész
</Button>
)}
<Table celled unstackable>
<Table.Header>
<Table.Row>
<Table.Row textAlign="center">
<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.Row>
</Table.Header>
<Table.Body>
{ this.props.selectedEvent && this.props.trainees ?
this.renderTrainees()
:
''
}
{this.props.selectedEvent ? this.renderTrainees() : null}
</Table.Body>
</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>
<Header dividing>
Megjegyzések
</Header>
{this.props.eventNotes ?
this.renderComments()
:
''
}
<Header dividing>Megjegyzések</Header>
{this.props.eventNotes ? this.renderComments() : ""}
<Form reply>
<Form.TextArea
value={note.note}
onChange={e => this.props.writeNote(e)}
onChange={(e) => this.props.writeNote(e)}
/>
<Button
onClick={() => {
this.props.postEventNote({ eventid: event.id,
note: note.note });
this.props.postEventNote({
eventid: event.id,
note: note.note,
});
this.props.clearWrite();
}
}
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
}}
content="Megjegyzés hozzáadása"
labelPosition="left"
icon="edit"
primary
/>
</Form>
......@@ -182,8 +180,13 @@ class EventDetail extends Component {
const mapStateToProps = ({
notes: { eventNotes, actualNote },
events: { selectedEvent },
trainees: { trainees }
}) => ({ eventNotes, selectedEvent, trainees, actualNote });
trainees: { trainees },
}) => ({
eventNotes,
selectedEvent,
trainees,
actualNote,
});
export default connect(mapStateToProps, {
getEventById,
......@@ -194,5 +197,4 @@ export default connect(mapStateToProps, {
writeNote,
clearWrite,
postEventNote,
deleteNote,
})(EventDetail);
src/components/pages/EventDetailTableRow.js 0 → 100644
View file @ 2eef83d2
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);
src/components/pages/Events.js
View file @ 2eef83d2
import { Button, Container, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import moment from 'moment';
import { deleteEvent, getStaffEvents } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import { Link } from 'react-router-dom';
import { Container, Table, Button, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent, selectEventForEdit } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import EditEventForm from '../forms/EditEventForm';
import ConfirmModal from '../forms/ConfirmModal';
import moment from 'moment';
class Events extends Component {
componentWillMount() {
UNSAFE_componentWillMount() {
this.props.getStaffEvents();
}
renderEvents() {
return this.props.events.map((event) =>
{ return (
<Table.Row>
<Table.Cell>
<Link to={`events/${event.id}`}>
{event.name}
</Link>
return this.props.events.map((event) => (
<Table.Row key={event.id}>
<Table.Cell textAlign="center">
<Link to={`events/${event.id}`}>{event.name}</Link>
</Table.Cell>
<Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
<Table.Cell>{event.visitor_number}</Table.Cell>
<Table.Cell textAlign='center'>
<EditEventForm onClick={() => this.props.selectEventForEdit(event)} />
<ConfirmModal
text={`törölni akarod a következő alkalmat:${event.name}`}
button={
<Table.Cell textAlign="center">
{moment(event.date).format('LL')}
</Table.Cell>
<Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
<Table.Cell textAlign="center">
<Button
inverted
color='red'
onClick={() => this.props.deleteEvent(event)}
color="red"
compact
size="small"
>
<Icon name='x' />
Törlés
</Button>
}
onAccept={() => this.props.deleteEvent(event)}
/>
</Table.Cell>
</Table.Row>
);
});
));
}
render() {
return (
<Container textAlign='center'>
<Table color='blue' selectable compact>
<Container textAlign="center">
<div style={{ overflowX: 'scroll' }}>
<Table
color="blue"
unstackable
celled
selectable
compact
size="small"
>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Alkalom neve</Table.HeaderCell>
<Table.HeaderCell>Dátum</Table.HeaderCell>
<Table.HeaderCell>Jelen voltak</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Alkalom neve
</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Jelen voltak
</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'}
{this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body>
</Table>
</div>
<br />
<AddEventForm />
</Container>
);
......@@ -70,4 +76,6 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStaffEvents, selectEventForEdit, deleteEvent })(Events);
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);
src/components/pages/Groups.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Home.css
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Home.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Homework.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/LeaderBoard.js 0 → 100644
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Mentors.js 0 → 100644
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/News.css
View file @ 2eef83d2
src/components/pages/News.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/NotFound.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Presence.js 0 → 100644
View file @ 2eef83d2
This diff is collapsed.

Hosted with :heart: by KSZK