start table select component

Author: josh-willis-arcadis

gtfs.yml

@@ -233,12 +233,12 @@
       text: Not possible (2)
     columnWidth: 12
     helpContent: "The wheelchair_boarding field identifies whether wheelchair boardings are possible from the specified stop or station. The field can have the following values:"
-  - name: "stop_area_id"
-    required: false
-    inputType: GTFS_STOP_AREA
-    bulkEditEnabled: true
-    columnWidth: 12
-    helpContent: "The area_id field defines the area that this stop belongs to. This is used to group stops together in a logical way, such as all stops in a particular neighborhood or district. If this stop is not part of an area, leave this field blank."
+  # - name: "stop_area_id"
+  #   required: false
+  #   inputType: GTFS_STOP_AREA
+  #   bulkEditEnabled: true
+  #   columnWidth: 12
+  #   helpContent: "The area_id field defines the area that this stop belongs to. This is used to group stops together in a logical way, such as all stops in a particular neighborhood or district. If this stop is not part of an area, leave this field blank."
 
 - id: route
   name: routes.txt

lib/editor/components/EntityListSecondaryActions.js

@@ -4,10 +4,11 @@ import React, {Component} from 'react'
 import { Nav, NavItem } from 'react-bootstrap'
 
 import * as activeActions from '../actions/active'
-import VirtualizedEntitySelect from './VirtualizedEntitySelect'
-
 import type {Entity, Feed} from '../../types'
 
+import VirtualizedEntitySelect from './VirtualizedEntitySelect'
+import VirtualizedTableSelect from './VirtualizedTableSelect'
+
 type Props = {
   activeComponent: string,
   activeEntity: Entity,
@@ -97,6 +98,13 @@ export default class EntityListSecondaryActions extends Component<Props> {
     }
   }
 
+  _onTableSelect = (option: any) => {
+    console.log('onTableSelect::::::', option)
+    if (this.props.activeComponent !== option.value) {
+      this.props.setActiveEntity(this.props.feedSource.id, option.value)
+    }
+  }
+
   render () {
     const {
       activeComponent,
@@ -135,6 +143,27 @@ export default class EntityListSecondaryActions extends Component<Props> {
             entities={entities}
             onChange={this._onChangeEntity} />
         )
+      case 'fareproduct':
+      case 'faremedia':
+      case 'faretransferrule':
+      case 'farelegrule':
+      case 'area':
+        console.log('entities::::::', entities)
+        const faresv2Tables = [
+          'faremedia',
+          'fareproduct',
+          'faretransferrule',
+          'farelegrule',
+          'area'
+        ]
+        return (
+          <VirtualizedTableSelect
+            value={activeEntity && activeEntity.id}
+            optionRenderer={this._optionRenderer}
+            component={activeComponent}
+            entities={faresv2Tables}
+            onChange={this._onTableSelect} />
+        )
       default:
         return null
     }

lib/editor/components/VirtualizedTableSelect.js

@@ -0,0 +1,124 @@
+// @flow
+
+import React, {Component} from 'react'
+import VirtualizedSelect from 'react-virtualized-select'
+
+// FARE-TODO: clean up this file!!!!
+// import {getEntityName} from '../util/gtfs'
+
+import type {Entity, Style} from '../../types'
+
+export type EntityOption = {
+  entity: Entity,
+  label: string,
+  value: string
+}
+
+type Props = {
+  clearable?: boolean,
+  component: string,
+  entities: Array<any>,
+  // entityKey: string,
+  onChange: any => void,
+  optionRenderer?: Function,
+  style?: Style,
+  value?: any
+}
+
+type State = {
+  options: Array<any>,
+  value: any
+}
+
+export default class VirtualizedEntitySelect extends Component<Props, State> {
+  static defaultProps = {
+    clearable: true
+    // entityKey: 'id'
+  }
+
+  componentWillMount () {
+    this.setState({
+      value: this.props.value,
+      options: []
+    })
+  }
+
+  /**
+   * This component can hold a large number of options, so its
+   * shouldComponentUpdate method checks only for changes in state (i.e., the
+   * selected value) and a change in length of its entities.
+   */
+  // shouldComponentUpdate (nextProps, nextState) {
+  //   if (nextState.value !== this.state.value || this.state.options.length !== nextState.options.length) {
+  //     return true
+  //   }
+  //   const nextEntities = nextProps.entities || []
+  //   const currentEntities = this.props.entities || []
+  //   if (nextEntities.length !== currentEntities.length) {
+  //     console.log('entities length changed', nextEntities, currentEntities)
+  //     return true
+  //   }
+  //   return false
+  // }
+
+  componentWillReceiveProps (nextProps: Props) {
+    if (this.state.value !== nextProps.value && typeof this.props.value !== 'undefined') {
+      this.setState({value: nextProps.value})
+    }
+  }
+
+  _onChange = (value: any) => {
+    const {onChange} = this.props
+    this.setState({value})
+    onChange && onChange(value)
+  }
+
+  _entityToOption = (entity: any) => {
+    // const {entityKey} = this.props
+    return {
+      value: entity,
+      label: entity,
+      entity
+    }
+  }
+
+  render () {
+    const {
+      clearable,
+      component,
+      entities,
+      optionRenderer,
+      style
+    } = this.props
+    const {value} = this.state
+    let disabled = false
+    let placeholder = `Select ${component}...`
+    let options = []
+    if (entities.length > 30000) {
+      console.warn(`Entity list too large (count=${entities.length}). Disabling entity selector.`)
+      disabled = true
+      placeholder = 'Selector disabled. List is too large.'
+    } else {
+      options = entities
+        .filter(e => {
+          if (e.id < 0) {
+            console.warn(`Entity has a negative id, which indicates an unsaved entity that should not be selectable. Filtering out of selector.`, e)
+            return false
+          } else return e
+        })
+        .map(this._entityToOption)
+    }
+    return (
+      <VirtualizedSelect
+        placeholder={placeholder}
+        options={options}
+        searchable
+        disabled={disabled}
+        clearable={clearable}
+        onChange={this._onChange}
+        value={value}
+        style={style}
+        optionRenderer={optionRenderer} />
+    )
+  }
+}

lib/editor/util/ui.js

@@ -77,16 +77,17 @@ export const GTFS_ICONS = [
   {
     id: 'fareproduct',
     tableName: 'fareproduct',
-    icon: 'shopping-cart',
+    icon: 'money',
     addable: true,
-    title: 'FARE PRODUCT TEST TITLE',
-    label: 'V2: Products'
+    title: 'Fares (v2)',
+    label: 'Fares (v2)'
   },
   {
     id: 'faremedia',
     tableName: 'faremedia',
     icon: 'id-card',
     addable: true,
+    hideSidebar: true,
     title: 'FARE MEDIA TEST TITLE',
     label: 'V2: Media'
   },
@@ -95,6 +96,7 @@ export const GTFS_ICONS = [
     tableName: 'faretransferrule',
     icon: 'link',
     addable: true,
+    hideSidebar: true,
     title: 'FARE TRANSFER RULE TEST TITLE',
     label: 'V2: Transfer Rules'
   },
@@ -103,6 +105,7 @@ export const GTFS_ICONS = [
     tableName: 'farelegrule',
     icon: 'book',
     addable: true,
+    hideSidebar: true,
     title: 'FARE LEG RULE TEST TITLE',
     label: 'V2: Leg Rules'
   },
@@ -111,8 +114,18 @@ export const GTFS_ICONS = [
     tableName: 'area',
     icon: 'map',
     addable: true,
+    hideSidebar: true,
     title: 'AREAS TEST TITLE',
     label: 'V2: Areas'
+  },
+  {
+    id: 'stoparea',
+    tableName: 'stoparea',
+    icon: 'map-marker',
+    addable: true,
+    hideSidebar: true,
+    title: 'STOP AREAS TEST TITLE',
+    label: 'V2: Stop Areas'
   }
 ]