Skip to content
Snippets Groups Projects
Select Git revision
  • f8eb81795fe0f26c31355211a58658533036ee77
  • master default protected
  • 2023-ujoncdelutan
  • 2023-update
  • 1.4.7 protected
  • 1.4.6 protected
  • 1.4.5 protected
  • 1.4.4 protected
  • 1.4.3 protected
  • 1.4.2 protected
  • 1.4.1 protected
  • 1.4.0 protected
  • 1.3.19 protected
  • 1.3.18 protected
  • 1.3.17 protected
  • 1.3.16 protected
  • 1.3.15 protected
  • 1.3.14 protected
  • 1.3.13 protected
  • 1.3.12 protected
  • 1.3.10 protected
  • 1.3.11 protected
  • 1.3.9 protected
  • 1.3.8 protected
24 results

EventDetail.js

Blame
  • user avatar
    Chif Gergő authored
    eb61620b
    History
    EventDetail.js 5.75 KiB
    import React, { Component } from 'react';
    import {
      Container,
      Item,
      Button,
      Comment,
      Form,
      Header,
      Table,
      Icon,
      Checkbox,
      Popup,
    } 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';
    
    class EventDetail extends Component {
      constructor(props) {
        super(props);
        this.state = {
          edit: false,
        };
      }
    
      componentWillMount() {
        this.props.getEventById(this.props.match.params.id);
        this.props.getTrainees();
        this.props.getNotesByEvent(this.props.match.params.id);
      }
    
    
      renderTrainees() {
        return this.props.trainees.map((item) => {
          const isVisitor = this.props.selectedEvent.visitors.includes(item.id);
          return (
            <Table.Row>
              <Table.Cell>
                {item.full_name}
              </Table.Cell>
              {!this.state.edit ?
                <Table.Cell textAlign='center'>
                  {
                      isVisitor ?
                        <Icon color='green' name='checkmark' />
                      :
                        <Icon color='red' name='cancel' />
                    }
                </Table.Cell>
                :
                <Table.Cell textAlign='center'>
                  <Checkbox
                    defaultChecked={isVisitor ? true : false}
                    onChange={() => this.props.visitorChange(item)}
                  />
                </Table.Cell>
              }
              <Table.Cell>
                <Popup
                  trigger={<Button icon='add' />}
                  content={this.props.eventNotes.map((note) => {
                      if (note.profile === item.id) {
                        return (
                          <Comment.Content>
                            <Comment.Author>{note.created_by_name}</Comment.Author>
                            <Comment.Text>
                              {note.note}
                            </Comment.Text>
                          </Comment.Content>
                        );
                    }
                    return ('');
                    })
                  }
                  basic
                />
              </Table.Cell>
            </Table.Row>
          );
        });
      }
    
      renderEvent() {
        const { name, date } = this.props.selectedEvent;
        return (
          <Item>
            <Item.Header as='h2'>{name}</Item.Header>
            <Item.Header as='h3'>Dátum: {moment(date).format('LL')}</Item.Header>
          </Item>
        );
      }
    
      renderComments() {
        const notes = this.props.eventNotes;
        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>);
          }
          return '';
        });
      }
    
      render() {
        const event = this.props.selectedEvent;
        const note = this.props.actualNote;
        return (
          <Container>
            <Container textAlign='center'>
              { this.props.selectedEvent && this.props.trainees ?
                this.renderEvent()
                :
                ''
            }
            </Container>
            <Container
              style={{
                padding: '80px',
              }}
            >
              <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.trainees &&
                    this.props.selectedEvent ?
                    this.renderTrainees()
                    :
                    ''
                  }
                </Table.Body>
              </Table>
              <Button
                onClick={() => this.setState({ edit: true })}
              >
              Edit
              </Button>
              { this.state.edit ?
                <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>
            </Container>
          </Container>
        );
      }
    }
    
    const mapStateToProps = ({
      notes: { eventNotes, actualNote },
      events: { selectedEvent },
      trainees: { trainees }
    }) => ({ eventNotes, selectedEvent, trainees, actualNote });
    
    export default connect(mapStateToProps, {
      getEventById,
      getTrainees,
      visitorChange,
      getNotesByEvent,
      submitVisitors,
      writeNote,
      clearWrite,
      postEventNote,
    })(EventDetail);