From 689acfe26d7bb76417772e3cf05a0a01f6e6fd98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Sat, 5 Jan 2019 21:23:06 +0100
Subject: [PATCH] Add method to render notes as comments, add drpdown to
 display and add visitors, use moment to display date.

---
 src/components/pages/EventDetail.js | 93 +++++++++++++++++++++++++----
 src/components/pages/Events.js      |  2 +-
 2 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index e0e1b21..b4c82dc 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -1,36 +1,103 @@
 import React, { Component } from 'react';
-import { Container } from 'semantic-ui-react';
+import { Container, Item, Dropdown, Button, Label, Comment, Form, Header } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getEventById } from '../../actions/statistics';
+import moment from 'moment';
+import { getEventById, getTrainees, visitorChange, getNotesByEvent, submitVisitors } from '../../actions/statistics';
 
 class EventDetail extends Component {
   componentWillMount() {
     this.props.getEventById(this.props.match.params.id);
+    this.props.getTrainees();
+    this.props.getNotesByEvent(this.props.match.params.id);
   }
 
   renderEvent() {
-    const { name, date } = this.props.selectedEvent;
+    const { id, name, date, visitors } = this.props.selectedEvent;
+    const usernames = this.props.trainees.map((item) => {
+      return ({
+        key: item.id,
+        text: item.full_name,
+        value: item.id,
+      });
+    });
+
     return (
-      <div>
-        <p>Alkalom neve: {name}</p>
-        <p>DĂĄtum: {date}</p>
-      </div>
+      <Item>
+        <Item.Header as='h2'>{name}</Item.Header>
+        <Item.Header as='h3'>DĂĄtum: {moment(date).format('LL')}</Item.Header>
+        <Label>Jelen voltak:</Label>
+        <Dropdown
+          multiple
+          selection
+          placeholder='Újoncok hozzáadása'
+          style={{
+            minWidth: '150px',
+            maxWidth: '200px',
+          }}
+          onChange={(_, v) => this.props.visitorChange(v.value)}
+          defaultValue={visitors}
+          options={usernames}
+        />
+      <Button onCLick={this.props.submitVisitors({id, visitors})}>
+          Megerősítés
+        </Button>
+      </Item>
+      );
+    }
+
+  renderComments() {
+    const notes = this.props.eventNotes;
+    return notes.map(note => (
+      <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>
+      )
     );
   }
 
   render() {
     return (
       <Container>
-        {this.props.selectedEvent ?
-          this.renderEvent()
-          :
-          ''
+        <Container textAlign='center'>
+          { this.props.selectedEvent && this.props.trainees ?
+            this.renderEvent()
+            :
+            ''
         }
+        </Container>
+        <Container
+          style={{
+            padding: '80px'
+          }}
+        >
+          <Comment.Group>
+            <Header dividing>
+              MegjegyzĂŠsek
+            </Header>
+            {this.props.eventNotes ?
+              this.renderComments()
+              :
+              ''
+            }
+            <Form reply>
+              <Form.TextArea />
+              <Button content='MegjegyzĂŠs hozzĂĄadĂĄsa' labelPosition='left' icon='edit' primary />
+            </Form>
+          </Comment.Group>
+        </Container>
       </Container>
     );
   }
 }
 
-const mapStateToProps = ({ user, events: { selectedEvent } }) => ({ user, selectedEvent });
+const mapStateToProps = ({ notes: { eventNotes }, events: { selectedEvent }, trainees: { trainees } }) => ({ eventNotes, selectedEvent, trainees });
 
-export default connect(mapStateToProps, { getEventById })(EventDetail);
+export default connect(mapStateToProps, { getEventById, getTrainees, visitorChange, getNotesByEvent, submitVisitors })(EventDetail);
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index 3accb86..54c5c72 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -20,7 +20,7 @@ class Events extends Component {
           </Link>
         </Table.Cell>
         <Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
-        <Table.Cell>111</Table.Cell>
+        <Table.Cell>{event.visitor_number}</Table.Cell>
       </Table.Row>
     );
     });
-- 
GitLab