edit and delete stop_area_ids with new component

Author: josh-willis-arcadis

lib/editor/components/EditorInput.js

@@ -70,6 +70,7 @@ export default class EditorInput extends React.Component<Props> {
       onChange,
       updateActiveGtfsEntity
     } = this.props
+    console.log('processing field change::::', field.name, val)
     onChange && onChange(val)
     updateActiveGtfsEntity && activeEntity && updateActiveGtfsEntity({
       component: activeComponent,
@@ -111,6 +112,7 @@ export default class EditorInput extends React.Component<Props> {
     }
   }
 
+  /* eslint-disable complexity */
   render () {
     const {
       activeEntity,
@@ -423,16 +425,22 @@ export default class EditorInput extends React.Component<Props> {
       case 'GTFS_STOP_AREA':
         const areas = getTableById(tableData, 'area')
         const stops = getTableById(tableData, 'stop')
+        let stopAreaIds: Array<string> = []
+        if (activeComponent === 'stop' &&
+            activeEntity &&
+            activeEntity.stop_area_ids &&
+            typeof activeEntity.stop_area_ids === 'string') {
+          stopAreaIds = activeEntity.stop_area_ids.split('§').filter(Boolean)
+        }
         return (
           <FormGroup {...formProps}>
             {basicLabel}
             <StopAreasSelector
-              clearable
-              onChange={this._onSelectChange}
-              currentValue={currentValue}
+              currentValue={stopAreaIds}
               areas={areas}
               stops={stops}
-              processFieldChange={this._processFieldChange} />
+              processFieldChange={this._processFieldChange}
+            />
           </FormGroup>
         )
       default:

lib/editor/components/StopAreasSelector.js

@@ -5,35 +5,41 @@ import React, { useState } from 'react'
 import Icon from '@conveyal/woonerf/components/icon'
 import { Button } from 'react-bootstrap'
 
-import type { GtfsStop } from '../../types'
+import type { GtfsArea, GtfsStop } from '../../types'
 
 import VirtualizedEntitySelect from './VirtualizedEntitySelect'
 
 type Props = {
+  areas: Array<GtfsArea>,
   currentValue: Array<string> | string,
   processFieldChange: (val: any) => void,
   stops: Array<GtfsStop>
 }
 
-const StopAreasSelector = ({ currentValue, processFieldChange, stops }: Props) => {
+const StopAreasSelector = ({ currentValue, areas, processFieldChange, stops }: Props) => {
   const [dropdownShowing, setDropdownShowing] = useState(false)
-  const getStationOrLocationName =
-    (haltId) => {
+  const getStopOrAreaName =
+    (entityId) => {
       const entity =
-        stops.find((stop) => stop.stop_id === haltId)
-      const name = entity && entity.stop_name ? entity.stop_name : ''
-      const codeOrId = entity && entity.stop_code ? entity.stop_code : haltId
-      return `${name} (${codeOrId})`
+        stops.find((stop) => stop.stop_id === entityId) ||
+        areas.find((area) => area.area_id === entityId)
+      // const name = entity && (entity.stop_name || entity.area_name) ? (entity.stop_name || entity.area_name) : ''
+      const codeOrId = entity && entity.stop_code ? entity.stop_code : entityId
+      return `todo?! (${codeOrId})`
     }
 
-  const deleteHalt = (haltId) => {
+  const deleteEntity = (entityId) => {
+    console.log('deleting entity', entityId)
     if (typeof currentValue === 'string') return
 
-    processFieldChange(
-      currentValue.filter(id => id !== haltId)
-    )
+    // Filter out the entityId and join remaining items with ';'
+    const filtered = currentValue.filter(id => id !== entityId)
+    const newValue = filtered.length > 1 ? filtered.join(';') : (filtered[0] || '')
+    processFieldChange(newValue)
   }
 
+  console.log('currentValue:::::::', currentValue)
+
   return (
     <>
       <div style={{
@@ -45,37 +51,37 @@ const StopAreasSelector = ({ currentValue, processFieldChange, stops }: Props) =
         {currentValue && typeof currentValue !== 'string' &&
           currentValue.map((l) => (
             <React.Fragment key={l}>
-              <span>{getStationOrLocationName(l)}</span>
-              <Button bsSize='small' bsStyle='danger' style={{padding: '0 2px', margin: '0 1ch'}} onClick={() => deleteHalt(l)}>
+              <span>{getStopOrAreaName(l)}</span>
+              <Button bsSize='small' bsStyle='danger' style={{padding: '0 2px', margin: '0 1ch'}} onClick={() => deleteEntity(l)}>
                 <Icon type='trash' />
               </Button>
             </React.Fragment>
           ))}
       </div>
-      {!dropdownShowing && !(stops.length === 0) && <Button
+      {!dropdownShowing && !(areas.length === 0) && <Button
         block
         bsSize='small'
         onClick={() => setDropdownShowing(true)}
       >
-        <Icon type='plus' /> Add stop or location by name
+        <Icon type='plus' /> Add stop or area by name
       </Button>}
       {dropdownShowing && <VirtualizedEntitySelect
-        component={'stop or location'}
-        entityKey={'stop_or_location_id'}
+        component={'stop or area'}
+        entityKey={'stop_or_area_id'}
         entities={[
-          ...stops
+          ...areas
           // $FlowFixMe Flow struggles with union types
-        ].filter((stopOrLocation: GtfsStop) => {
+        ].filter((stopOrArea: GtfsStop | GtfsArea) => {
           return !currentValue || !currentValue.includes(
             // $FlowFixMe making this flow compatible would introduce a lot of unneeded code
-            stopOrLocation.stop_id || stopOrLocation.location_id
+            stopOrArea.stop_id || stopOrArea.area_id
           )
         })}
         onChange={(change) => {
-          processFieldChange([
-            ...(currentValue || []),
-            change.entity.stop_id || change.entity.location_id
-          ])
+          const selectedId = change.entity.stop_id || change.entity.area_id
+          const valuesArray = Array.isArray(currentValue) ? currentValue : (currentValue ? [currentValue] : [])
+          const newValue = [...valuesArray, selectedId].filter(Boolean).join('§')
+          processFieldChange(newValue)
           setDropdownShowing(false)
         }}
       />}

lib/types/index.js

@@ -646,6 +646,15 @@ export type Pattern = {|
   useFrequency: boolean
 |}
 
+export type FareRule = {
+  contains_id: ?string,
+  destination_id: ?string,
+  fare_id: string,
+  id: number,
+  origin_id: ?string,
+  route_id: ?string
+}
+
 export type GtfsAgency = {|
   agency_branding_url: string,
   agency_email: string,
@@ -660,14 +669,10 @@ export type GtfsAgency = {|
   id: number
 |}
 
-export type FareRule = {
-  contains_id: ?string,
-  destination_id: ?string,
-  fare_id: string,
-  id: number,
-  origin_id: ?string,
-  route_id: ?string
-}
+export type GtfsArea = {|
+  area_id: string,
+  area_name: ?string
+|}
 
 export type GtfsFare = {|
   agency_id: ?string,
@@ -748,6 +753,7 @@ export type GtfsStop = {|
   parent_station?: ?string,
   pickupType?: ?number,
   stopId?: string,
+  stop_area_ids?: ?string,
   stop_code?: ?string,
   stop_desc?: string,
   stop_id: string,