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 2014 additions and 907 deletions
import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Container, Header, Item, Button, Label } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getSelectedProfile, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { connect } from 'react-redux';
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);
}
render() {
const { id, signed, 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>
<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
);
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>
</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
}
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>
:
<Table.Cell textAlign='center'>
<Label color='red'>Nem jelentkezett</Label>
{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.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>
<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>
{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.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() {
return (
<Container
textAlign='center'
style={{
padding: '80px'
}}
textAlign="center"
style={{ paddingTop: '1em', paddingBottom: '5em' }}
>
<Table color='blue' 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.Row>
</Table.Header>
<Table.Body>
{this.renderApplicants()}
</Table.Body>
</Table>
{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 {
Container,
Item,
Button,
Comment,
Container,
Divider,
Form,
Header,
Item,
Segment,
Table,
Icon,
Checkbox,
Popup,
Grid,
} 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 } from '../../actions/notes';
import TraineeTableRow from './TraineeTableRow';
} 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) {
......@@ -27,40 +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;
const note = this.props.actualNote;
return this.props.trainees.map((item) => {
const notes = this.props.eventNotes.filter(note => note.profile === item.id);
return (
<TraineeTableRow
selectedEvent={event}
notes={notes}
trainee={item}
edit={this.state.edit}
/>
);
});
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 (
<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>
<Item.Content>{description}</Item.Content>
</Container>
</Item>
<Segment>
<Item>
<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>
);
}
......@@ -69,19 +96,20 @@ class EventDetail extends Component {
return notes.map((note) => {
if (!note.profile) {
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>
</Comment>);
<Segment>
<Comment key={Math.random()}>
<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>
</Comment>
</Segment>
);
}
return '';
return "";
});
}
......@@ -89,79 +117,61 @@ class EventDetail extends Component {
const event = this.props.selectedEvent;
const note = this.props.actualNote;
return (
<Container
style={{
padding: '80px'
}}
>
<Container textAlign='center'>
{ this.props.selectedEvent && this.props.trainees ?
this.renderEvent()
:
''
}
<Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
<Container textAlign="center">
{this.props.selectedEvent && this.props.trainees
? this.renderEvent()
: ""}
</Container>
<Table celled centered>
<Table.Header>
<Table.Row>
<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()
:
''
}
</Table.Body>
</Table>
{!this.state.edit ? (
<Button onClick={() => this.setState({ edit: true })}>
Módosítás
</Button>
) : (
<Button
onClick={() => this.setState({ edit: true })}
onClick={() => {
this.setState({ edit: false });
}}
>
Edit
{" "}
Kész
</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
onClick={() => {
this.setState({ edit: false });
this.props.submitVisitors(this.props.selectedEvent);
}
}
>Save
</Button>
:
''
}
<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
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>
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>
);
}
......@@ -170,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,
......
import React, { Component } from 'react';
import {
Button,
Comment,
Table,
Dropdown,
Form,
Grid,
Icon,
Popup,
Grid,
Button,
Form,
Dropdown,
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';
import { visitorChange, submitVisitors } from '../../actions/statistics';
import { writeNote, clearWrite, postEventNote } from '../../actions/notes';
const visitStates = [
{
......@@ -25,8 +26,8 @@ const visitStates = [
{
text: 'Nem',
value: 'No',
}
]
},
];
class TraineeTableRow extends Component {
constructor(props) {
......@@ -37,105 +38,129 @@ class TraineeTableRow extends Component {
};
}
triggerAdd = () => this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup})
triggerMore = () => this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup })
// 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, edit, actualNote, selectedEvent, notes } = this.props;
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>
{trainee.full_name}
</Table.Cell>
{!this.props.edit ?
<Table.Cell textAlign='center'>
{
isVisitor ?
<Icon color='green' name='checkmark' />
:
isAbsent ?
<Icon color='orange' name='minus' />
:
<Icon color='red' name='cancel' />
}
</Table.Cell>
:
<Table.Cell textAlign='center'>
<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={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'}
defaultValue={visitorStatusDropdown}
selection
options={visitStates}
onChange={(_, v) => this.props.visitorChange({ id : trainee.id, value: v.value })}
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>
<Grid.Column floated='left' width={8} textAlign='left'>
{notes.length > 0 ?
{/* Note text */}
<Grid.Column floated="left" width={8}>
{notes.length > 0 ? (
<Comment>
<Comment.Content>
<Comment.Author>{notes[0].created_by_name}</Comment.Author>
<Comment.Text>
{notes[0].note.length > 50 ? notes[0].note.slice(0, 50).concat('...')
:
notes[0].note }
<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
}
) : null}
</Grid.Column>
<Grid.Column floated='right' width={3} textAlign='right'>
{notes.length > 0 ?
{/* 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((note) => {
return (
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Text>
{note.note}
</Comment.Text>
</Comment.Content>
);
})}
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}
) : null}
<Popup
trigger={<Button icon='plus' onClick={this.triggerAdd}/>}
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)}
onChange={(e) => this.props.writeNote(e)}
/>
<Button
onClick={() => {
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'
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>
......@@ -145,6 +170,12 @@ class TraineeTableRow extends Component {
);
}
}
const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote })
const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote });
export default connect(mapStateToProps, { writeNote, clearWrite, postEventNote, visitorChange})(TraineeTableRow)
export default connect(mapStateToProps, {
writeNote,
clearWrite,
postEventNote,
visitorChange,
submitVisitors,
})(TraineeTableRow);
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 } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
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>
<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
onClick={() => this.props.deleteEvent(event)}
color='red'
color="red"
compact
size='small'
size="small"
>
Delete
Törlés
</Button>
</Table.Cell>
</Table.Row>
);
});
));
}
render() {
return (
<Container textAlign='center'>
<Table color='blue' celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Alkalom neve</Table.HeaderCell>
<Table.HeaderCell>Dátum</Table.HeaderCell>
<Table.HeaderCell>Jelen voltak</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'}
</Table.Body>
</Table>
<Container textAlign="center">
<div style={{ overflowX: 'scroll' }}>
<Table
color="blue"
unstackable
celled
selectable
compact
size="small"
>
<Table.Header>
<Table.Row>
<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 alkalom beírva'}
</Table.Body>
</Table>
</div>
<br />
<AddEventForm />
</Container>
);
......@@ -62,4 +76,6 @@ class Events extends Component {
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.
......@@ -5,8 +5,33 @@
.car-text-kszk {
position: absolute;
width: 100%;
top: 0px;
top: 1vw;
text-shadow: black 0px 0px 10px, black 0px 0px 6px;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.75px;
}
.quote {
position: relative;
margin-bottom: 0.5rem;
}
.quote:before {
content: '“';
position: absolute;
left: -0.45em;
}
.quote::after {
content: '”';
margin-right: -1rem;
}
.quote--container {
margin: 2rem auto 0;
padding-bottom: 0.7rem;
}
.quote--author {
text-align: right;
font-weight: 300;
}
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.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.