From 8d311d50707ac7b89f976e4cfc54ef09b0bff22b Mon Sep 17 00:00:00 2001 From: sipp11 Date: Tue, 16 Oct 2018 23:56:11 +0900 Subject: [PATCH] wip --- src/components/FareAttributesForm.js | 17 ++----- src/components/FareList.js | 4 +- src/components/FareRulesForm.js | 65 +++++++++------------------ src/components/StopForm.js | 16 ++----- src/components/parts/SelectOptions.js | 41 +++++++++++++++++ src/constants/Api.js | 4 +- src/reducers/farerule.js | 15 +++++-- src/utils/index.js | 11 ++--- 8 files changed, 90 insertions(+), 83 deletions(-) create mode 100644 src/components/parts/SelectOptions.js diff --git a/src/components/FareAttributesForm.js b/src/components/FareAttributesForm.js index c194738..f695782 100644 --- a/src/components/FareAttributesForm.js +++ b/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 ( - - {agency_id} {name} - - ) -} - - +` 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) } diff --git a/src/components/FareList.js b/src/components/FareList.js index 898f0c9..9ea1687 100644 --- a/src/components/FareList.js +++ b/src/components/FareList.js @@ -120,8 +120,8 @@ class FareList extends Component {

Route ID

-

- {farerule.results[i].route_id || '-'} +

+ {farerule.results[i].route && farerule.results[i].route.route_id || '-'}

diff --git a/src/components/FareRulesForm.js b/src/components/FareRulesForm.js index f05efe8..bb88530 100644 --- a/src/components/FareRulesForm.js +++ b/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 ( - - {stop_id} {name} - - ) -} - -const FareAttrOption = (props) => { - const { fare_id, price, currency_type } = props.data - return ( - - {fare_id} {price} {currency_type} - - ) -} - -const RouteOption = (props) => { - const { route_id, short_name, long_name} = props.data - return ( - - {route_id} {short_name} -
{long_name} - - ) -} +` 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 {
- + { 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 {
- + el.value.stop_id), }} this.handleChange(evt) } @@ -199,8 +173,9 @@ class FareRulesForm extends Component {
- + el.value.stop_id), }} this.handleChange(evt) } }} />
+ +

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

diff --git a/src/components/StopForm.js b/src/components/StopForm.js index ea4041c..f7d49f2 100644 --- a/src/components/StopForm.js +++ b/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 ( - - {stop_id} {name} - {stop_desc.length > 0 &&
{stop_desc}} - - ) -} // 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) } diff --git a/src/components/parts/SelectOptions.js b/src/components/parts/SelectOptions.js new file mode 100644 index 0000000..0fd903a --- /dev/null +++ b/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 ( + + {stop_id} {name} + {stop_desc.length > 0 &&
{stop_desc}} + + ) +} + +export const FareAttrOption = (props) => { + const { fare_id, price, currency_type } = props.data.value + return ( + + {fare_id} {price} {currency_type} + + ) +} + +export const RouteOption = (props) => { + const { route_id, short_name, long_name} = props.data.value + return ( + + {route_id} {short_name} +
{long_name} + + ) +} + +export const AgencyOption = (props) => { + const { agency_id, name } = props.data.value + return ( + + {agency_id} {name} + + ) +} diff --git a/src/constants/Api.js b/src/constants/Api.js index 4c9787b..a8ddabe 100644 --- a/src/constants/Api.js +++ b/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/' diff --git a/src/reducers/farerule.js b/src/reducers/farerule.js index 7421eee..187219b 100644 --- a/src/reducers/farerule.js +++ b/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) diff --git a/src/utils/index.js b/src/utils/index.js index 8e811cc..dd7ef70 100644 --- a/src/utils/index.js +++ b/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 }))) })