fix(editor): fixes "scheduleexception" misspelling and create stop bug

landonreed · landonreed · commit c6acfa8ee56d · 2018-05-01T10:35:34.000-04:00
fixes #79, fixes #78
diff --git a/lib/editor/components/EntityList.js b/lib/editor/components/EntityList.js
@@ -6,7 +6,7 @@ import {Table, Column} from 'react-virtualized/dist/commonjs/Table'
 import {AutoSizer} from 'react-virtualized/dist/commonjs/AutoSizer'
 
 import {getConfigProperty} from '../../common/util/config'
-import {entityIsNew} from '../util/objects'
+import {componentToText, entityIsNew} from '../util/objects'
 import EntityListButtons from './EntityListButtons'
 import EntityListSecondaryActions from './EntityListSecondaryActions'
 
@@ -31,8 +31,9 @@ export default class EntityList extends Component {
 
   componentWillReceiveProps (nextProps) {
     let fromIndex, toIndex
-    // set state indexes to undefined when active table (component) changes
     if (nextProps.activeComponent !== this.props.activeComponent) {
+      // Set the state's from and to indexes to undefined when the active table
+      // (i.e., component) changes.
       this.setState({fromIndex, toIndex})
     }
   }
@@ -49,15 +50,15 @@ export default class EntityList extends Component {
       typeof toIndex !== 'undefined' &&
       index >= fromIndex &&
       index <= toIndex
-    if (this._getRow({index}) && (this._getRow({index}).isActive || isSelected)) {
+    const row = this._getRow({index})
+    if (row && (row.isActive || isSelected)) {
+      // Set active color for selected rows
       rowStyle.backgroundColor = activeColor
     }
     return rowStyle
   }
 
-  updateIndexes = (fromIndex, toIndex) => {
-    this.setState({fromIndex, toIndex})
-  }
+  updateIndexes = (fromIndex, toIndex) => this.setState({fromIndex, toIndex})
 
   _getRow = ({index}) => this.props.list.get(index)
 
@@ -87,10 +88,12 @@ export default class EntityList extends Component {
     }
     this.setState({fromIndex, toIndex})
   }
+
   // TODO: add hover to row rendering
   // _rowRenderer (props) {
   //
   // }
+
   render () {
     const {
       tableView,
@@ -102,7 +105,6 @@ export default class EntityList extends Component {
       sort,
       list
     } = this.props
-    // console.debug(list, 'active', activeEntity)
     const createDisabled = list.findIndex(entityIsNew) !== -1
     const sidePadding = '5px'
     const panelWidth = !tableView ? `${width}px` : '100%'
@@ -128,52 +130,60 @@ export default class EntityList extends Component {
       activeIndex = list.findIndex(e => e.id === activeEntity.id)
     }
     const entityList = list.size
-    ? <AutoSizer disableWidth>
-      {({ height }) => (
-        <Table
-          width={width - 5}
-          height={height - HEADER_HEIGHT - 45} // some magical number that seems to work
-          key={`${feedSource.id}-${activeComponent}-table`}
-          disableHeader
-          headerHeight={20}
-          rowHeight={25}
-          style={{outline: 'none'}}
-          scrollToIndex={activeIndex}
-          sortBy={sort.key}
-          sortDirection={sort.direction}
-          rowClassName='noselect'
-          rowStyle={this._getRowStyle}
-          rowCount={list.size}
-          onRowClick={this._onRowClick}
-          rowGetter={this._getRow}>
-          <Column
-            label='Name'
-            dataKey='name'
-            className='small entity-list-row'
+      ? <AutoSizer disableWidth>
+        {({ height }) => (
+          <Table
+            width={width - 5}
+            // some magical number for the height that seems to work
+            height={height - HEADER_HEIGHT - 45}
+            key={`${feedSource.id}-${activeComponent}-table`}
+            disableHeader
+            headerHeight={20}
+            rowHeight={25}
             style={{outline: 'none'}}
-            width={width - 5} />
-          {/* Add hidden columns to allow for sorting of list */}
-          {list.size && Object.keys(list.get(0)).map(key => {
-            return (
-              <Column
-                key={key}
-                label={key}
-                dataKey={key}
-                style={{display: 'none'}}
-                width={0} />
-            )
-          })}
-        </Table>
-      )}
-    </AutoSizer>
-      : <div style={{marginTop: '20px'}} className='text-center'>
-        <Button
-          bsSize='small'
-          disabled={createDisabled}
-          onClick={this._onClickNew}>
-          <Icon type='plus' /> Create first {activeComponent === 'scheduleexception' ? 'exception' : activeComponent}
-        </Button>
-      </div>
+            scrollToIndex={activeIndex}
+            sortBy={sort.key}
+            sortDirection={sort.direction}
+            rowClassName='noselect'
+            rowStyle={this._getRowStyle}
+            rowCount={list.size}
+            onRowClick={this._onRowClick}
+            rowGetter={this._getRow}>
+            <Column
+              label='Name'
+              dataKey='name'
+              className='small entity-list-row'
+              style={{outline: 'none'}}
+              width={width - 5} />
+            {/* Add hidden columns to allow for sorting of list */}
+            {list.size && Object.keys(list.get(0)).map(key => {
+              return (
+                <Column
+                  key={key}
+                  label={key}
+                  dataKey={key}
+                  style={{display: 'none'}}
+                  width={0} />
+              )
+            })}
+          </Table>
+        )}
+      </AutoSizer>
+      : activeComponent === 'stop'
+        ? <div
+          style={{marginTop: '10px', marginRight: '5px', marginLeft: '5px'}}
+          className='lead text-center'>
+          <small>Right-click a location on map to create a new stop</small>
+        </div>
+        : <div style={{marginTop: '20px'}} className='text-center'>
+          <Button
+            bsSize='small'
+            disabled={createDisabled}
+            onClick={this._onClickNew}>
+            <Icon type='plus' />{' '}
+            Create first {componentToText(activeComponent)}
+          </Button>
+        </div>
     return (
       <div style={panelStyle}>
         <div style={headerStyle}>
@@ -207,7 +217,9 @@ export default class EntityList extends Component {
         <EntityListSecondaryActions {...this.props} />
         {!tableView
           ? entityList
-          : null // GtfsTable fully removed from repo, last available at fe29528569f5f64c23a49d2af0bd224f3d63d010
+          // GtfsTable fully removed from repo, last available at commit
+          // fe29528569f5f64c23a49d2af0bd224f3d63d010
+          : null
         }
       </div>
     )
diff --git a/lib/editor/components/EntityListButtons.js b/lib/editor/components/EntityListButtons.js
@@ -2,7 +2,7 @@ import Icon from '@conveyal/woonerf/components/icon'
 import React, {Component, PropTypes} from 'react'
 import { ButtonGroup, Tooltip, OverlayTrigger, Button } from 'react-bootstrap'
 
-import {entityIsNew} from '../util/objects'
+import {componentToText, entityIsNew} from '../util/objects'
 
 export default class EntityListButtons extends Component {
   static propTypes = {
@@ -42,11 +42,12 @@ export default class EntityListButtons extends Component {
       updateIndexes
     } = this.props
     let fromIndex, toIndex
+    const type = componentToText(activeComponent)
     if (activeEntity) {
       // Show modal and delete on confirmation
       showConfirmModal({
-        title: `Delete ${activeComponent}?`,
-        body: `Are you sure you want to delete this ${activeComponent}?`,
+        title: `Delete ${type}?`,
+        body: `Are you sure you want to delete this ${type}?`,
         onConfirm: () => {
           deleteEntity(feedSource.id, activeComponent, activeEntity.id)
           updateIndexes(fromIndex, toIndex)
@@ -55,8 +56,9 @@ export default class EntityListButtons extends Component {
       })
     } else {
       showConfirmModal({
-        title: `Delete ${+toIndex - +fromIndex} ${activeComponent}s?`,
-        body: `Are you sure you want to delete these ${toIndex - fromIndex} ${activeComponent}s?`,
+        // FIXME: fix plural component text
+        title: `Delete ${+toIndex - +fromIndex} ${type}s?`,
+        body: `Are you sure you want to delete these ${toIndex - fromIndex} ${type}s?`,
         onConfirm: () => {
           for (var i = 0; i < list.length; i++) {
             if (list[i].isSelected) {
diff --git a/lib/editor/util/objects.js b/lib/editor/util/objects.js
@@ -7,6 +7,15 @@ import snakeCaseKeys from 'snakecase-keys'
 
 import type {Entity} from '../../types'
 
+export function componentToText (component: string): string {
+  switch (component) {
+    case 'scheduleexception':
+      return 'exception'
+    default:
+      return component
+  }
+}
+
 export function entityIsNew (entity: Entity): boolean {
   return entity.id === ENTITY.NEW_ID || typeof entity.id === 'undefined'
 }
