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
Showing
with 1657 additions and 1098 deletions
import React, { Component } from 'react';
import { Segment } from 'semantic-ui-react';
class HiddenForm extends Component {
render() {
return (
<div>
<div style={{ marginBottom: 0, fontWeight: this.props.fontWeight }}>
{this.props.label}
</div>
<Segment style={{ marginTop: 0 }}>
<div>{this.props.value}</div>
</Segment>
</div>
);
}
}
export default HiddenForm;
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
class InfoModal extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
};
}
close = () => this.setState({ showModal: false });
open = () => this.setState({ showModal: true });
render() {
const { button, title, content } = this.props;
const open = this.state.showModal;
return (
<Modal
open={open}
closeOnDimmerClick
trigger={button}
onOpen={this.open}
onClose={this.close}
size="small"
basic
>
<Header icon="info" content={title} />
<Modal.Content>
{content.split('\n').map((s) => (
<p key={Math.random()}>{s}</p>
))}
</Modal.Content>
<Modal.Actions>
<Button color="green" inverted onClick={() => this.close()}>
<Icon name="checkmark" /> Rendben
</Button>
</Modal.Actions>
</Modal>
);
}
}
export default InfoModal;
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

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;
const { children, user, menuItems } = this.props;
return (
<Responsive minWidth={768}>
{visible ? <FixedMenu user={this.props.user} menuItems={menuItems} /> : 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 {
Container,
Header,
Item,
Button,
Label,
List,
Form,
Comment,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getSelectedProfile, setStatus } from '../../actions/statistics';
import { getNotesByProfile, writeNote, clearWrite, postNote, deleteNote } from '../../actions/notes';
import ConfirmModal from '../forms/ConfirmModal';
import moment from 'moment';
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);
this.props.getNotesByProfile(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>
));
}
renderComments() {
const notes = this.props.profileNotes;
return notes.map((note) => {
if (!note.event) {
return (
<Comment>
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Metadata>
{moment(note.created_at).format('LL')}
</Comment.Metadata>
<Comment.Text>
{note.note}
</Comment.Text>
</Comment.Content>
{ this.props.user.fullName === note.created_by_name ?
<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>);
}
return '';
});
}
render() {
const note = this.props.actualNote;
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>
<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>
<Comment.Group>
<Header dividing>
Megjegyzések
</Header>
{this.renderComments()}
<Form reply>
<Form.TextArea
value={note.note}
onChange={e => this.props.writeNote(e)}
/>
<Button
onClick={() => {
this.props.postNote({ userid: id,
note: note.note });
this.props.clearWrite();
}
}
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
primary
/>
</Form>
</Comment.Group>
</Container>
:
null
}
) : null}
</Container>
);
}
}
const mapStateToProps = ({
user,
trainees: { selectedProfile },
notes: { profileNotes, actualNote }
}) => ({ user, selectedProfile, profileNotes, actualNote });
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
selectedProfile,
});
export default connect(mapStateToProps, {
getSelectedProfile,
setStatus,
postNote,
getNotesByProfile,
writeNote,
deleteNote,
clearWrite,
})(ApplicantProfile);
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
ApplicantProfile
);
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}{' '}
</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
);
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 {
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, postNote, 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,35 +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>
{ this.props.user.fullName === note.created_by_name ?
<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>);
</Comment>
</Segment>
);
}
return '';
return "";
});
}
......@@ -100,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.postNote({ 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>
......@@ -183,11 +178,15 @@ class EventDetail extends Component {
}
const mapStateToProps = ({
user,
notes: { eventNotes, actualNote },
events: { selectedEvent },
trainees: { trainees }
}) => ({ user, eventNotes, selectedEvent, trainees, actualNote });
trainees: { trainees },
}) => ({
eventNotes,
selectedEvent,
trainees,
actualNote,
});
export default connect(mapStateToProps, {
getEventById,
......@@ -197,6 +196,5 @@ export default connect(mapStateToProps, {
submitVisitors,
writeNote,
clearWrite,
postNote,
deleteNote,
postEventNote,
})(EventDetail);
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.