feat(EntityList): add Edit Schedules button on calendar list view

Author: landonreed

lib/editor/actions/active.js

@@ -40,6 +40,12 @@ export function settingActiveGtfsEntity (feedSourceId, component, entityId, subC
   }
 }
 
+export function enterTimetableEditor () {
+  return function (dispatch, getState) {
+    dispatch(setActiveGtfsEntity(getState().editor.data.active.feedSourceId, 'route', getState().editor.data.tables.route[0].id, 'trippattern', 'new', 'timetable'))
+  }
+}
+
 export function setActiveGtfsEntity (feedSourceId, component, entityId, subComponent, subEntityId, subSubComponent, subSubEntityId) {
   return function (dispatch, getState) {
     // TODO: figure out a good way to handle route changes without confirm window

lib/editor/components/EntityList.js

@@ -1,11 +1,11 @@
 import React, {Component, PropTypes} from 'react'
-import { Button, Nav, NavItem } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
 import {Icon} from '@conveyal/woonerf'
 import { Table, Column } from 'react-virtualized'
 import { shallowEqual } from 'react-pure-render'
 
-import VirtualizedEntitySelect from './VirtualizedEntitySelect'
 import EntityListButtons from './EntityListButtons'
+import EntityListSecondaryActions from './EntityListSecondaryActions'
 import { getEntityName } from '../util/gtfs'
 
 export default class EntityList extends Component {
@@ -126,8 +126,19 @@ export default class EntityList extends Component {
   //
   // }
   render () {
+    const {
+      tableView,
+      width,
+      activeEntity,
+      activeComponent,
+      hasRoutes,
+      feedSource,
+      entities,
+      newGtfsEntity,
+      enterTimetableEditor
+    } = this.props
     const sidePadding = '5px'
-    const panelWidth = !this.props.tableView ? `${this.props.width}px` : '100%'
+    const panelWidth = !tableView ? `${width}px` : '100%'
     const panelStyle = {
       width: panelWidth,
       height: '100%',
@@ -138,17 +149,15 @@ export default class EntityList extends Component {
       paddingRight: '0px',
       paddingLeft: sidePadding
     }
-    const entArray = this.props.entities
-    const activeEntity = this.props.activeEntity
     let activeIndex
-    const list = entArray && entArray.length
-      ? entArray.map((entity, index) => {
+    const list = entities && entities.length
+      ? entities.map((entity, index) => {
         if (activeEntity && entity.id === activeEntity.id) {
           activeIndex = index
         }
         const isActive = activeEntity && entity.id === activeEntity.id
         const isSelected = typeof this.state.fromIndex !== 'undefined' && typeof this.state.toIndex !== 'undefined' && index >= this.state.fromIndex && index <= this.state.toIndex
-        const name = getEntityName(this.props.activeComponent, entity) || '[Unnamed]'
+        const name = getEntityName(activeComponent, entity) || '[Unnamed]'
         return {name, id: entity.id, isActive, isSelected}
       }
     )
@@ -163,9 +172,9 @@ export default class EntityList extends Component {
       style={{outline: 'none'}}
     >
       <Table
-        width={this.props.width - 5}
+        width={width - 5}
         height={560}
-        key={`${this.props.feedSource.id}-${this.props.activeComponent}-table`}
+        key={`${feedSource.id}-${activeComponent}-table`}
         disableHeader
         headerHeight={20}
         rowHeight={25}
@@ -186,19 +195,19 @@ export default class EntityList extends Component {
           dataKey='name'
           className='small entity-list-row'
           style={{outline: 'none'}}
-          width={this.props.width - 5}
+          width={width - 5}
         />
       </Table>
     </div>
       : <div style={{marginTop: '20px'}} className='text-center'>
         <Button
           bsSize='small'
-          disabled={this.props.entities && this.props.entities.findIndex(e => e.id === 'new') !== -1}
+          disabled={entities && entities.findIndex(e => e.id === 'new') !== -1}
           onClick={() => {
-            this.props.newGtfsEntity(this.props.feedSource.id, this.props.activeComponent)
+            newGtfsEntity(feedSource.id, activeComponent)
           }}
         >
-          <Icon type='plus' /> Create first {this.props.activeComponent === 'scheduleexception' ? 'exception' : this.props.activeComponent}
+          <Icon type='plus' /> Create first {activeComponent === 'scheduleexception' ? 'exception' : activeComponent}
         </Button>
       </div>
     return (
@@ -213,50 +222,21 @@ export default class EntityList extends Component {
             updateIndexes={this.updateIndexes}
             {...this.props}
           />
+          {activeComponent === 'calendar' || activeComponent === 'scheduleexception'
+            ? <Button
+              style={{marginTop: '10px'}}
+              block
+              disabled={!hasRoutes}
+              onClick={() => enterTimetableEditor()}
+            >
+              <Icon type='pencil' /> Edit schedules
+            </Button>
+            : null
+          }
           {/* Table view button */}
         </div>
-        {this.props.activeComponent === 'calendar' || this.props.activeComponent === 'scheduleexception'
-          ? <Nav style={{marginBottom: '5px'}} bsStyle='pills' justified activeKey={this.props.activeComponent} onSelect={this.handleSelect}>
-            <NavItem
-              eventKey={'calendar'}
-              onClick={() => {
-                if (this.props.activeComponent !== 'calendar') {
-                  // browserHistory.push(`/feed/${this.props.feedSource.id}/edit/calendar`)
-                  this.props.setActiveEntity(this.props.feedSource.id, 'calendar')
-                }
-              }}
-            >
-              Calendars
-            </NavItem>
-            <NavItem
-              eventKey={'scheduleexception'}
-              onClick={() => {
-                if (this.props.activeComponent !== 'scheduleexception') {
-                  // browserHistory.push(`/feed/${this.props.feedSource.id}/edit/scheduleexception`)
-                  this.props.setActiveEntity(this.props.feedSource.id, 'scheduleexception')
-                }
-              }}
-            >
-              Exceptions
-            </NavItem>
-          </Nav>
-          : this.props.activeComponent === 'stop' || this.props.activeComponent === 'route'
-          ? <VirtualizedEntitySelect
-            value={this.props.activeEntity && this.props.activeEntity.id}
-            optionRenderer={this._optionRenderer}
-            component={this.props.activeComponent}
-            entities={entArray}
-            onChange={(value) => {
-              if (!value) {
-                this.props.setActiveEntity(this.props.feedSource.id, this.props.activeComponent)
-              } else {
-                this.props.setActiveEntity(this.props.feedSource.id, this.props.activeComponent, value.entity)
-              }
-            }}
-          />
-          : null
-        }
-        {!this.props.tableView
+        <EntityListSecondaryActions {...this.props} />
+        {!tableView
           ? entityList
           : null // GtfsTable fully removed from repo, last available at fe29528569f5f64c23a49d2af0bd224f3d63d010
         }

lib/editor/components/EntityListSecondaryActions.js

@@ -0,0 +1,68 @@
+import React, {PropTypes, Component} from 'react'
+import { Nav, NavItem } from 'react-bootstrap'
+
+import VirtualizedEntitySelect from './VirtualizedEntitySelect'
+
+export default class EntityListSecondaryActions extends Component {
+  static propTypes = {
+    activeComponent: PropTypes.string
+  }
+  render () {
+    const {
+      activeComponent,
+      feedSource,
+      setActiveEntity,
+      activeEntity,
+      entities
+    } = this.props
+    switch (activeComponent) {
+      case 'calendar':
+      case 'scheduleexception':
+        return (
+          <Nav style={{marginBottom: '5px'}} bsStyle='pills' justified activeKey={activeComponent} onSelect={this.handleSelect}>
+            <NavItem
+              eventKey={'calendar'}
+              onClick={() => {
+                if (activeComponent !== 'calendar') {
+                  // browserHistory.push(`/feed/${feedSource.id}/edit/calendar`)
+                  setActiveEntity(feedSource.id, 'calendar')
+                }
+              }}
+            >
+              Calendars
+            </NavItem>
+            <NavItem
+              eventKey={'scheduleexception'}
+              onClick={() => {
+                if (activeComponent !== 'scheduleexception') {
+                  // browserHistory.push(`/feed/${feedSource.id}/edit/scheduleexception`)
+                  setActiveEntity(feedSource.id, 'scheduleexception')
+                }
+              }}
+            >
+              Exceptions
+            </NavItem>
+          </Nav>
+        )
+      case 'route':
+      case 'stop':
+        return (
+          <VirtualizedEntitySelect
+            value={activeEntity && activeEntity.id}
+            optionRenderer={this._optionRenderer}
+            component={activeComponent}
+            entities={entities}
+            onChange={(value) => {
+              if (!value) {
+                setActiveEntity(feedSource.id, activeComponent)
+              } else {
+                setActiveEntity(feedSource.id, activeComponent, value.entity)
+              }
+            }}
+          />
+        )
+      default:
+        return null
+    }
+  }
+}