wip

src/components/FareAttributesForm.js

@@ -17,23 +17,12 @@ import {
   PaymentMethodChoices, TransferChoices
 } from '../constants/choices'
 import { getItemFromList, getAgencyAsyncSelect } from '../utils'
+import { AgencyOption } from './parts/SelectOptions'
 
 const StyledFareAttributesForm = styled.div`
 padding: 1rem;
 background: #fafafa;
-`;
-
-
-const AgencyOption = (props) => {
-  const { agency_id, name } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{agency_id}</code> {name}
-    </components.Option>
-  )
-}
-
-
+`
 
 class FareAttributesForm extends Component {
 
@@ -159,7 +148,7 @@ class FareAttributesForm extends Component {
                   let evt = {
                     target: {
                       name: 'agency',
-                      value: resp,
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }

src/components/FareList.js

@@ -120,8 +120,8 @@ class FareList extends Component {
             <div className="level-item has-text-centered">
               <div>
                 <p className="heading">Route ID</p>
-                <p className="title">
-                  {farerule.results[i].route_id || '-'}
+                <p>
+                  {farerule.results[i].route && farerule.results[i].route.route_id || '-'}
                 </p>
               </div>
             </div>

src/components/FareRulesForm.js

@@ -9,55 +9,28 @@ import {
   deleteFareRule
 } from '../actions/fare'
 import store from '../store'
-import Input from './parts/Input'
 import AsyncSelect from 'react-select/lib/Async'
-import { components } from 'react-select'
 import {
   getStopsAsyncSelect,
   getFareAttrAsyncSelect,
   getRouteAsyncSelect
 } from '../utils'
+import {
+  StopOption, FareAttrOption, RouteOption
+} from './parts/SelectOptions'
 
 const StyledFareRulesForm = styled.div`
 padding: 1rem;
 background: #fafafa;
-`;
-
-const StopOption = (props) => {
-  const { stop_id, name } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{stop_id}</code> {name}
-    </components.Option>
-  )
-}
-
-const FareAttrOption = (props) => {
-  const { fare_id, price, currency_type } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{fare_id}</code> {price} {currency_type}
-    </components.Option>
-  )
-}
-
-const RouteOption = (props) => {
-  const { route_id, short_name, long_name} = props.data
-  return (
-    <components.Option {...props}>
-      <code>{route_id}</code> {short_name}
-      <br/>{long_name}
-    </components.Option>
-  )
-}
+`
 
 
 class FareRulesForm extends Component {
 
   state = {
     id: null,
-    fare_id: "",
-    route_id: "", // optinal
+    fare: null,
+    route: null, // optinal
     origin_id: "",
     destination_id: "",
     contains_id: "",
@@ -127,7 +100,7 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'fare',
-                      value: resp,
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }
@@ -136,19 +109,19 @@ class FareRulesForm extends Component {
           </div>
 
           <div className="field">
-            <label className="label">Route</label>
+            <label className="label">Route <i>optional</i></label>
             <AsyncSelect
               cacheOptions={true}
               defaultOptions
-              defaultValue={one.route_id && {value: one.route_id, label: one.route_id}}
+              defaultValue={one.route && {value: one.route, label: one.route.route_id}}
               loadOptions={getRouteAsyncSelect}
               components={{ Option: RouteOption }}
               onChange={(resp, evt) => {
                 if (evt.action === 'select-option') {
                   let evt = {
                     target: {
-                      name: 'route_id',
-                      value: resp.route_id,
+                      name: 'route',
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }
@@ -169,7 +142,7 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'origin_id',
-                      value: resp.stop_id,
+                      value: resp.value.stop_id,
                     }}
                   this.handleChange(evt)
                 }
@@ -178,9 +151,10 @@ class FareRulesForm extends Component {
           </div>
 
           <div className="field">
-            <label className="label">Destination ID</label>
+            <label className="label">Destination ID (or IDs)</label>
             <AsyncSelect
-              cacheOptions={true}
+              isMulti
+              cacheOptions
               defaultOptions
               defaultValue={one.destination_id && {value: one.destination_id, label: one.destination_id}}
               loadOptions={getStopsAsyncSelect}
@@ -190,7 +164,7 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'destination_id',
-                      value: resp.stop_id,
+                      value: resp.map(el => el.value.stop_id),
                     }}
                   this.handleChange(evt)
                 }
@@ -199,8 +173,9 @@ class FareRulesForm extends Component {
           </div>
 
           <div className="field">
-            <label className="label">Contains ID</label>
+            <label className="label">Contains ID (or IDs)</label>
             <AsyncSelect
+              isMulti
               cacheOptions={true}
               defaultOptions
               defaultValue={one.contains_id && {value: one.contains_id, label: one.contains_id}}
@@ -211,13 +186,15 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'contains_id',
-                      value: resp.stop_id,
+                      value: resp.map(el => el.value.stop_id),
                     }}
                   this.handleChange(evt)
                 }
               }}
               />
           </div>
+
+          <p>When having multiple destinations or contains, multiple fare rule records will be created automatically. Nothing differs from adding multiple records manually, it only saves time. !! only works with CREATE, UPDATE will throw 500</p>
         </div>
 
         <div className="field is-grouped">

src/components/StopForm.js

@@ -16,21 +16,13 @@ import {
   StopLocationTypes, StopWheelChairInfo
 } from '../constants/choices'
 import { getItemFromList, getStopsAsyncSelect } from '../utils'
+import { StopOption } from './parts/SelectOptions'
 
 const StyledStopForm = styled.div`
 padding: 1rem;
 background: #fafafa;
 `
 
-const Option = (props) => {
-  const { stop_id, name, stop_desc } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{stop_id}</code> {name}
-      {stop_desc.length > 0 && <small><br />{stop_desc}</small>}
-    </components.Option>
-  )
-}
 
 // TODO: need to deal with shapes
 
@@ -278,13 +270,13 @@ class StopForm extends Component {
               defaultOptions
               defaultValue={null}
               loadOptions={getStopsAsyncSelect}
-              components={{ Option }}
-              onChange={(item, evt) => {
+              components={{ Option: StopOption }}
+              onChange={(resp, evt) => {
                 if (evt.action === 'select-option') {
                   let evt = {
                     target: {
                       name: 'mergeWith',
-                      value: item,
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }

src/components/parts/SelectOptions.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { components } from 'react-select'
+
+
+export const StopOption = (props) => {
+  const { stop_id, name, stop_desc } = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{stop_id}</code> {name}
+      {stop_desc.length > 0 && <small><br />{stop_desc}</small>}
+    </components.Option>
+  )
+}
+
+export const FareAttrOption = (props) => {
+  const { fare_id, price, currency_type } = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{fare_id}</code> {price} {currency_type}
+    </components.Option>
+  )
+}
+
+export const RouteOption = (props) => {
+  const { route_id, short_name, long_name} = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{route_id}</code> {short_name}
+      <br/>{long_name}
+    </components.Option>
+  )
+}
+
+export const AgencyOption = (props) => {
+  const { agency_id, name } = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{agency_id}</code> {name}
+    </components.Option>
+  )
+}

src/constants/Api.js

@@ -1,6 +1,6 @@
 
-// export const URL = process.env.API_URL || '//localhost:8000'
-export const URL = process.env.API_URL || 'https://api.goth.app'
+export const URL = process.env.API_URL || '//localhost:8000'
+// export const URL = process.env.API_URL || 'https://api.goth.app'
 export const API_PREFIX = process.env.API_PREFIX || '/v1'
 export const API_URL = `${URL}${API_PREFIX}`
 export const LOGIN = '/api-token-auth/'

src/reducers/farerule.js

@@ -45,14 +45,21 @@ const fareRule = (state = fareRuleInitState, action) => {
         ]
       }
     case FARERULE_CREATE:
+      let r
+      /* check if it's array by
+        - action.payload instanceof Array
+        - Array.isArray(action.payload)
+      */
+      if (Array.isArray(action.payload)) {
+        r = [...state.results, ...action.payload]
+      } else {
+        r = [...state.results, action.payload]
+      }
       return {
         ...state,
         fetching: false,
         count: state.count + 1,
-        results: [
-          ...state.results,
-          action.payload,
-        ]
+        results: r,
       }
     case FARERULE_DELETE:
       const deleteInd = state.results.findIndex(ele => ele.id === action.meta.id)

src/utils/index.js

@@ -2,6 +2,7 @@ import { CancelToken } from 'axios'
 import { apiClient } from './ApiClient'
 import polyUtil from 'polyline-encoded'
 
+
 export const decodeGeoJson = (encodedOne) => {
   if (typeof encodedOne.coordinates === "string")
     encodedOne.coordinates = polyUtil.decode(encodedOne.coordinates)
@@ -34,8 +35,8 @@ export const getStopsAsyncSelect = (inputValue, callback) => {
   apiClient(`/stop/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
-        label: i.name
+        value: {...i},
+        label: `${i.stop_id}-${i.name}`
       })))
     })
 }
@@ -52,7 +53,7 @@ export const getFareAttrAsyncSelect = (inputValue, callback) => {
   apiClient(`/fare-attribute/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
+        value: {...i},
         label: i.fare_id
       })))
     })
@@ -70,7 +71,7 @@ export const getRouteAsyncSelect = (inputValue, callback) => {
   apiClient(`/route/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
+        value: {...i},
         label: i.route_id
       })))
     })
@@ -88,7 +89,7 @@ export const getAgencyAsyncSelect = (inputValue, callback) => {
   apiClient(`/agency/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
+        value: {...i},
         label: i.name
       })))
     })