Post events

package.json

@@ -5,19 +5,24 @@
   "dependencies": {
     "axios": "^0.17.1",
     "env-cmd": "^8.0.2",
-    "firebase": "^4.13.1",
+    "firebase": "^5.7.0",
     "history": "^4.7.2",
     "material-ui": "^0.20.0",
     "material-ui-datatables": "^0.18.2",
+    "material-ui-table-edit": "^3.0.3",
     "moment": "^2.19.4",
-    "react": "^15.4.2",
+    "mui-editable-table": "^0.3.3",
+    "react": "^15.4.0",
     "react-collapsible": "^2.0.3",
-    "react-dom": "^15.4.2",
+    "react-dom": "^15.4.0",
     "react-loading": "^1.0.3",
     "react-moment": "^0.6.8",
     "react-redux": "^5.0.6",
     "react-router": "^3.0.5",
     "react-router-dom": "^4.2.2",
+    "react-table": "^6.8.6",
+    "react-table-material": "^0.1.0",
+    "react-tap-event-plugin": "^3.0.3",
     "react-tooltip": "^3.4.0",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",

src/components/ClassroomComponent/MyEventsComponent/MyEventsComponent.js

@@ -20,7 +20,6 @@ import { connect } from 'react-redux'
 import { firebaseDB } from '../../../firebaseConfig'
 import SearchSortContainer from './SearchSortContainer'
 import ViewEventDialog from '../../Dialogs/ViewEventDialogComponent'
-import PostEventDetailDialog from '../../Dialogs/PostEventDetailDialogComponent'
 import FlagIcon from 'material-ui/svg-icons/action/report-problem'
 import NAIcon from 'material-ui/svg-icons/action/restore'
 import DashIcon from 'material-ui/svg-icons/content/remove'
@@ -33,7 +32,7 @@ import moment from 'moment'
 import CancelEventDialog from '../../Dialogs/CancelEventDialogComponent'
 
 class MyEventsComponent extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.showDialog = this.showDialog.bind(this)
     this.showPostEventDetailDialog = this.showPostEventDetailDialog.bind(this)
@@ -45,6 +44,7 @@ class MyEventsComponent extends Component {
     this.uploadPostEventDetail = this.uploadPostEventDetail.bind(this)
     this.showCancelEventDialog = this.showCancelEventDialog.bind(this)
     this.onEventDelete = this.onEventDelete.bind(this)
+    this.handlePostEvent = this.handlePostEvent.bind(this)
 
     this.state = {
       fixedHeader: true,
@@ -68,7 +68,7 @@ class MyEventsComponent extends Component {
     }
   }
 
-  handleIcon (event, state, msg) {
+  handleIcon(event, state, msg) {
     if (state === 'pending') { return <PendingIcon style={{ color: '#FBC02D' }} hoverColor={'#F57F17'} data-tip='Pending' /> }
     if (state === 'approved') { return <CheckCircleIcon style={{ color: '#558B2F' }} hoverColor={'#33691E'} data-tip='Approved' /> }
     if (state === 'flagged') { return <FlagIcon style={{ color: '#D50000', cursor: 'pointer' }} onClick={() => { this.showDialog(event) }} data-multiline data-tip={'Flagged - ' + msg} hoverColor={'red'} /> }
@@ -77,35 +77,35 @@ class MyEventsComponent extends Component {
     if (state === 'prevRejected') { return <DashIcon style={{ color: '#b71c1c' }} data-tip='Previously rejected' /> }
   }
 
-  onEventDelete (myArrx) {
+  onEventDelete(myArrx) {
     this.setState({ myArrx: myArrx })
   }
 
-  showDialog (event) {
+  showDialog(event) {
     this.setState({ dialogOpen: true })
     this.setState({ currentEvent: event })
   }
 
-  showPostEventDetailDialog (event) {
+  showPostEventDetailDialog(event) {
     this.setState({ postEventDetailDialogOpen: true, currentEvent: event })
   }
 
-  showCancelEventDialog (event) {
+  showCancelEventDialog(event) {
     this.setState({ cancelDialogopen: true, currentEvent: event })
   }
 
-  handleDialogClose () {
+  handleDialogClose() {
     this.setState({ dialogOpen: false, postEventDetailDialogOpen: false, cancelDialogopen: false })
   }
 
-  uploadPostEventDetail (event, message) {
+  uploadPostEventDetail(event, message) {
     this.handleDialogClose()
     firebaseDB.ref('/events/').child(event.key + '/postEventDetail').set(message)
     const { dispatch } = this.props
     dispatch({ type: 'TOASTER', message: 'Post event details updated', toastOpen: true })
   }
 
-  nextEvent () {
+  nextEvent() {
     let keys = Object.keys(this.state.myArrx)
     let pos = keys.indexOf(this.state.currentEvent.key) + 1
     if (pos === Object.keys(this.state.myArrx).length) {
@@ -116,14 +116,14 @@ class MyEventsComponent extends Component {
     this.setState({ currentEvent: nextEvent })
   }
 
-  handleSearch (content) {
+  handleSearch(content) {
     this.setState({ searchContent: content })
     var myArrx = this.state.originalArr
     myArrx = Object.values(myArrx).filter(_event => _event.title.toLowerCase().includes(content.toLowerCase()))
     this.setState({ myArrx })
   }
 
-  handleSort () {
+  handleSort() {
     if (this.state.dateSort === 'des') { this.setState({ dateSort: 'asc' }) } else { this.setState({ dateSort: 'des' }) }
     var scope = this
     var myArrx = this.state.originalArr
@@ -136,7 +136,13 @@ class MyEventsComponent extends Component {
     this.setState({ myArrx })
   }
 
-  filterAndStore (arr) {
+  handlePostEvent(currEvent) {
+    const { dispatch } = this.props
+    dispatch({ type: 'POST_EVENT', currEvent: currEvent })
+    hashHistory.push('/dashboard/postEventDetails')
+  }
+
+  filterAndStore(arr) {
     for (let [key, value] of Object.entries(arr)) {
       if (value.FA_appr && value.AD_appr && value.SO_appr) {
         this.state.approvedArr[key] = value
@@ -147,7 +153,7 @@ class MyEventsComponent extends Component {
     }
   }
 
-  componentWillReceiveProps (newProps) {
+  componentWillReceiveProps(newProps) {
     if (newProps.filter === 'pending') {
       const { pendingArr } = this.state
       this.setState({ myArr: pendingArr })
@@ -160,7 +166,7 @@ class MyEventsComponent extends Component {
     }
   }
 
-  componentWillMount () {
+  componentWillMount() {
     if (!this.props.user) {
       hashHistory.push('/auth')
       return
@@ -207,7 +213,7 @@ class MyEventsComponent extends Component {
       }, this)
   }
 
-  render () {
+  render() {
     return (
       <div style={{ display: 'flex', justifyContent: 'start', flexDirection: 'column', alignItems: 'center', backgroundColor: '', height: '100%' }}>
 
@@ -217,7 +223,6 @@ class MyEventsComponent extends Component {
 
         <ViewEventDialog open={this.state.dialogOpen} currentEvent={this.state.currentEvent} handleClose={this.handleDialogClose} nextEvent={this.nextEvent} />
 
-        <PostEventDetailDialog open={this.state.postEventDetailDialogOpen} currentEvent={this.state.currentEvent} handleClose={this.handleDialogClose} uploadPostEventDetail={this.uploadPostEventDetail} />
 
         <CancelEventDialog open={this.state.cancelDialogopen} currentEvent={this.state.currentEvent} handleClose={this.handleDialogClose} allevents={this.state.myArrx} onEventDelete={this.onEventDelete} />
 
@@ -241,14 +246,14 @@ class MyEventsComponent extends Component {
                   style={{ color: '#000', fontWeight: 700, display: 'flex', alignItems: 'center', width: '18%' }}
                   hidden={this.props.isMobile}
                 >
-                START DATE
+                  START DATE
                   <IconButton data-tip='Sort by date' onClick={this.handleSort} style={{ padding: 0, height: 20, width: 20, marginLeft: 5 }}>{this.state.dateSort != null ? (this.state.dateSort === 'asc' ? <UpArrow viewBox='0 0 30 30' /> : <DownArrow viewBox='0 0 30 30' />) : <SortIcon viewBox='0 0 30 30' />}</IconButton>
                 </TableHeaderColumn>
                 <TableHeaderColumn
                   style={{ color: '#000', fontWeight: 700, alignItems: 'center', width: '18%' }}
                   hidden={this.props.isMobile}
                 >
-                END DATE
+                  END DATE
                 </TableHeaderColumn>
                 <TableHeaderColumn style={{ color: '#000', fontWeight: 700, width: this.props.isMobile ? '13%' : '9%' }}>SC</TableHeaderColumn>
                 <TableHeaderColumn style={{ color: '#000', fontWeight: 700, width: this.props.isMobile ? '13%' : '9%' }}>FA</TableHeaderColumn>
@@ -265,9 +270,9 @@ class MyEventsComponent extends Component {
             >
 
               {this.state.fetching &&
-              <div style={{ textAlign: 'center', marginTop: '10%' }}>
-                <CircularProgress size={60} />
-              </div>
+                <div style={{ textAlign: 'center', marginTop: '10%' }}>
+                  <CircularProgress size={60} />
+                </div>
               }
 
               {
@@ -289,20 +294,24 @@ class MyEventsComponent extends Component {
                           useLayerForClickAway
                         >
                           <MenuItem primaryText='View' onClick={() => this.showDialog(event)} />
-                          <MenuItem hidden={!event.receiptURL} primaryText='Post Event Details' onClick={() => this.showPostEventDetailDialog(event)} />
                           <MenuItem hidden={!event.receiptURL} primaryText='Download Receipt' onClick={() => { window.location = (event.receiptURL) }} />
                           <MenuItem hidden={moment(new Date(), 'DD-MM-YYYY').isAfter(moment(event.startDate, 'DD-MM-YYYY'))} primaryText='Cancel Event' onClick={() => this.showCancelEventDialog(event)} />
+                          <MenuItem
+                            hidden={!event.receiptURL}
+                            primaryText='Post Event Detail'
+                            onClick={() => this.handlePostEvent(event)}
+                          />
                         </IconMenu>}
                       </TableRowColumn>
                     </TableRow>
                   )
                 }, this)) : (
 
-                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: this.props.isMobile ? '15%' : '2%', textAlign: 'center', minHeight: 250 }} hidden={this.state.fetching}>
-                    <img src={require(this.state.searchContent.length > 0 ? '../../../assets/empty-state.gif' : '../../../assets/empty-state.gif')} style={{ width: this.props.isMobile ? '70%' : '30%', marginBottom: 10 }} />
-                    <p>{this.state.searchContent.length > 0 ? 'No events for this search' : 'No events found'}</p>
-                  </div>
-                )
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: this.props.isMobile ? '15%' : '2%', textAlign: 'center', minHeight: 250 }} hidden={this.state.fetching}>
+                      <img src={require(this.state.searchContent.length > 0 ? '../../../assets/empty-state.gif' : '../../../assets/empty-state.gif')} style={{ width: this.props.isMobile ? '70%' : '30%', marginBottom: 10 }} />
+                      <p>{this.state.searchContent.length > 0 ? 'No events for this search' : 'No events found'}</p>
+                    </div>
+                  )
               }
 
             </TableBody>
@@ -314,7 +323,7 @@ class MyEventsComponent extends Component {
   }
 }
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   const { openSideNav, isMobile, filter } = state.toggler
   const { user, verified, vals } = state.authentication
   return {