Skip to content
Snippets Groups Projects

Compare revisions

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

Source

Select target project
No results found

Target

Select target project
  • kszk/devteam/kszkepzes/old/kszkepzes-frontend
  • kbgergely/kszkepzes-frontend
2 results
Show changes
Showing
with 1768 additions and 971 deletions
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>
{ 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
}
</Table.Cell> </Table.Cell>
: {format.role === 'Staff' ? null : (
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">
<Label color='red'>Nem jelentkezett</Label> <ConfirmModal
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
)}
</Table.Row>
) : null
);
}
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">
<ConfirmModal <ConfirmModal
button = {<Button button={
color='blue' <Button color="blue" size="tiny">
size='tiny' ADD STAFF STATUS
> </Button>
ADD STAFF STATUS }
</Button>} text="staff jogot adsz neki"
text='staff jogot adsz neki' onAccept={() => this.props.setStatus(profile.id, 'Staff')}
onAccept={() => this.props.setStatus(profile.id, 'Staff')} />
/> </Table.Cell>
</Table.Cell> )}
</Table.Row> </Table.Row>
) : null
);
}
renderTable(format) {
return (
<Table color="blue" unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<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>
{format.role === 'no'
? this.renderNotApplicants(format)
: this.renderApplicants(format)}
</Table.Body>
</Table>
); );
});
} }
render() { render() {
return ( return (
<Container <Container
textAlign='center' textAlign="center"
style={{ style={{ paddingTop: '1em', paddingBottom: '5em' }}
padding: '80px'
}}
> >
<Table color='blue' celled selectable compact> {this.renderTable(role[2])} {/* Applicant */}
<Table.Header> {this.renderTable(role[1])} {/* Student */}
<Table.Row> {this.renderTable(role[0])} {/* Staff */}
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell> {this.renderTable(role[3])} {/* Denied */}
<Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell> {this.renderTable(role[4])} {/* Not Signed */}
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderApplicants()}
</Table.Body>
</Table>
</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 { import {
Container,
Item,
Button, Button,
Comment, Comment,
Container,
Divider,
Form, Form,
Header, Header,
Table, Item,
Segment, Segment,
Icon, Table,
Checkbox, } from "semantic-ui-react";
Popup, import React, { Component } from "react";
Grid, import {
Divider, clearWrite,
} from 'semantic-ui-react'; getNotesByEvent,
import { connect } from 'react-redux'; postEventNote,
import moment from 'moment'; writeNote,
import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics'; } from "../../actions/notes";
import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes'; import {
import TraineeTableRow from './TraineeTableRow'; 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) {
...@@ -29,28 +35,38 @@ class EventDetail extends Component { ...@@ -29,28 +35,38 @@ 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;
const note = this.props.actualNote; return this.props.trainees
return this.props.trainees?.map((item) => { ?.sort(function (a, b) {
const notes = this.props.eventNotes?.filter(note => note.profile === item.id); var nameA = a.full_name.toLowerCase(),
return ( nameB = b.full_name.toLowerCase();
<TraineeTableRow if (nameA < nameB)
selectedEvent={event} //sort string ascending
notes={notes} return -1;
trainee={item} if (nameA > nameB) return 1;
edit={this.state.edit} return 0; //default return value (no sorting)
/> })
); .map((item) => {
}); const notes = this.props.eventNotes?.filter(
return null (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() { renderEvent() {
...@@ -58,16 +74,16 @@ class EventDetail extends Component { ...@@ -58,16 +74,16 @@ class EventDetail extends Component {
return ( return (
<Segment> <Segment>
<Item> <Item>
<Divider style={{ fontSize: '2em'}} horizontal> <Divider style={{ fontSize: "2em" }} horizontal>
<Header as='h1'> <Header as="h1">
{name} {name}
<Item.Header as='h5'> <Item.Header style={{ fontSize: "0.6em" }}>
{moment(date).format('LL')} {moment(date).format("LL")}
</Item.Header> </Item.Header>
</Header> </Header>
</Divider> </Divider>
<Container textAlign='justified'> <Container textAlign="justified">
<Item.Header as='h3'>Leírás</Item.Header> <Item.Header as="h3">Leírás</Item.Header>
<Item.Content>{description}</Item.Content> <Item.Content>{description}</Item.Content>
</Container> </Container>
</Item> </Item>
...@@ -80,19 +96,20 @@ class EventDetail extends Component { ...@@ -80,19 +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.Content> <Comment key={Math.random()}>
<Comment.Author>{note.created_by_name}</Comment.Author> <Comment.Content>
<Comment.Metadata> <Comment.Author>{note.created_by_name}</Comment.Author>
{moment(note.created_at).format('LL')} <Comment.Metadata>
</Comment.Metadata> {moment(note.created_at).format("LL")}
<Comment.Text> </Comment.Metadata>
{note.note} <Comment.Text>{note.note}</Comment.Text>
</Comment.Text> </Comment.Content>
</Comment.Content> </Comment>
</Comment>); </Segment>
);
} }
return ''; return "";
}); });
} }
...@@ -100,75 +117,61 @@ class EventDetail extends Component { ...@@ -100,75 +117,61 @@ class EventDetail extends Component {
const event = this.props.selectedEvent; const event = this.props.selectedEvent;
const note = this.props.actualNote; const note = this.props.actualNote;
return ( return (
<Container style={{paddingTop: '1em', paddingBottom: '7em'}}> <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
<Container textAlign='center'> <Container textAlign="center">
{ this.props.selectedEvent && this.props.trainees ? {this.props.selectedEvent && this.props.trainees
this.renderEvent() ? this.renderEvent()
: : ""}
''
}
</Container> </Container>
<Table celled centered unstackable> {!this.state.edit ? (
<Table.Header> <Button onClick={() => this.setState({ edit: true })}>
<Table.Row textAlign='center'> Módosítás
<Table.HeaderCell>Név</Table.HeaderCell> </Button>
<Table.HeaderCell>Jelen volt</Table.HeaderCell> ) : (
<Table.HeaderCell>Megjegyzések</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{ this.props.selectedEvent ?
this.renderTrainees()
:
''
}
</Table.Body>
</Table>
<Button <Button
onClick={() => this.setState({ edit: true })} onClick={() => {
this.setState({ edit: false });
}}
> >
Edit {" "}
Kész
</Button> </Button>
{ this.state.edit ? )}
<Table celled unstackable>
<Table.Header>
<Table.Row textAlign="center">
<Table.HeaderCell>Név</Table.HeaderCell>
<Table.HeaderCell>Jelen volt</Table.HeaderCell>
<Table.HeaderCell>Megjegyzések</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.selectedEvent ? this.renderTrainees() : null}
</Table.Body>
</Table>
<Comment.Group>
<Header dividing>Megjegyzések</Header>
{this.props.eventNotes ? this.renderComments() : ""}
<Form reply>
<Form.TextArea
value={note.note}
onChange={(e) => this.props.writeNote(e)}
/>
<Button <Button
onClick={() => { onClick={() => {
this.setState({ edit: false }); this.props.postEventNote({
this.props.submitVisitors(this.props.selectedEvent); eventid: event.id,
} note: note.note,
} });
>Save this.props.clearWrite();
</Button> }}
: content="Megjegyzés hozzáadása"
'' labelPosition="left"
} icon="edit"
<Comment.Group> primary
<Header dividing> />
Megjegyzések </Form>
</Header> </Comment.Group>
{this.props.eventNotes ?
this.renderComments()
:
''
}
<Form reply>
<Form.TextArea
value={note.note}
onChange={e => this.props.writeNote(e)}
/>
<Button
onClick={() => {
this.props.postEventNote({ eventid: event.id,
note: note.note });
this.props.clearWrite();
}
}
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
primary
/>
</Form>
</Comment.Group>
</Container> </Container>
); );
} }
...@@ -177,8 +180,13 @@ class EventDetail extends Component { ...@@ -177,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,
......
import { Button, Container, Table } from 'semantic-ui-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import { deleteEvent, getStaffEvents } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Container, Table, Button } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent } from '../../actions/statistics'; import moment from 'moment';
import AddEventForm from '../forms/AddEventForm';
class Events extends Component { class Events extends Component {
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 textAlign='center'> <Link to={`events/${event.id}`}>{event.name}</Link>
<Link to={`events/${event.id}`}> </Table.Cell>
{event.name} <Table.Cell textAlign="center">
</Link> {moment(event.date).format('LL')}
</Table.Cell> </Table.Cell>
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
{moment(event.date).format('LL')} <Table.Cell textAlign="center">
</Table.Cell> <Button
<Table.Cell textAlign='center'> onClick={() => this.props.deleteEvent(event)}
{event.visitor_number} color="red"
</Table.Cell> compact
<Table.Cell textAlign='center'> size="small"
<Button >
onClick={() => this.props.deleteEvent(event)} Törlés
color='red' </Button>
compact </Table.Cell>
size='small' </Table.Row>
> ));
Törlés
</Button>
</Table.Cell>
</Table.Row>
);
});
} }
render() { render() {
return ( return (
<Container textAlign='center'> <Container textAlign="center">
<Table color='blue' unstackable celled selectable compact> <div style={{ overflowX: 'scroll' }}>
<Table.Header> <Table
<Table.Row> color="blue"
<Table.HeaderCell textAlign='center'>Alkalom neve</Table.HeaderCell> unstackable
<Table.HeaderCell textAlign='center'>Dátum</Table.HeaderCell> celled
<Table.HeaderCell textAlign='center'>Jelen voltak</Table.HeaderCell> selectable
<Table.HeaderCell /> compact
</Table.Row> size="small"
</Table.Header> >
<Table.Header>
<Table.Body> <Table.Row>
{this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'} <Table.HeaderCell textAlign="center">
</Table.Body> Alkalom neve
</Table> </Table.HeaderCell>
<Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Jelen voltak
</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body>
</Table>
</div>
<br />
<AddEventForm /> <AddEventForm />
</Container> </Container>
); );
...@@ -66,4 +76,6 @@ class Events extends Component { ...@@ -66,4 +76,6 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user }); const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events); export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
.news-extra { .news-extra {
color: grey; color: grey;
font-size: 0.75em; font-size: 0.75em;
font-style: italic; font-style: italic;
font-family: fantasy; font-family: fantasy;
text-align: justify; text-align: justify;
} }
.news-text { .news-text {
font-size: 1.15em; font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
text-align: justify; text-align: justify;
} }
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.