wip

src/components/FareAttributesDetail.js

@@ -115,6 +115,9 @@ class FareAttributesDetail extends Component {
     return (
       <div>
         {this.renderItem(ones[0])}
+        <Link className="link is-info" to={`/fare/rules/new?fareattr=${ones[0].id}`}>
+          <i className="fas fa-plus" /> New fare rule
+        </Link>
         {farerule.results.map(ele => <FareRulesOne item={ele} />)}
       </div>
     )

src/components/FareRulesForm.js

@@ -52,32 +52,43 @@ class FareRulesForm extends Component {
 
   handleSubmit() {
     const { id } = this.state
-    let body = {...this.state}
+    let body = { ...this.state }
     delete body.id
     if (id !== null) {
       store.dispatch(updateFareRule(id, body))
     } else {
       store.dispatch(createFareRule(body))
     }
-    this.setState({justSubmit: true})
+    this.setState({ justSubmit: true })
   }
 
   handleDelete() {
     const { id } = this.state
     store.dispatch(deleteFareRule(id))
-    this.setState({justSubmit: true})
+    this.setState({ justSubmit: true })
   }
 
   componentWillMount() {
     const { props } = this
     const { ruleID } = props.match.params
     const { results } = props.farerule
-
+    const { search } = props.location
+    if (ruleID === undefined) {
+      // this is for create form
+      if (search.indexOf("?fareattr=") > -1) {
+        const fa = search.split("=")
+        const fat = props.fareattrItems.filter(ele => ele.id === +fa[1])
+        if (fat.length === 1)
+          this.setState({ fare: fat[0] })
+      }
+    } else {
+      // get state ready for edit form
       const ones = results.filter(ele => ele.id === +ruleID)
       if (ones.length > 0) {
         this.setState(ones[0])
       }
     }
+  }
 
   renderForm() {
     const one = this.state
@@ -92,7 +103,7 @@ class FareRulesForm extends Component {
             <AsyncSelect
               cacheOptions={true}
               defaultOptions
-              defaultValue={one.fare && {...one.fare, label: one.fare.fare_id}}
+              defaultValue={one.fare && { ...one.fare, label: one.fare.fare_id }}
               loadOptions={getFareAttrAsyncSelect}
               components={{ Option: FareAttrOption }}
               onChange={(resp, evt) => {
@@ -101,7 +112,8 @@ class FareRulesForm extends Component {
                     target: {
                       name: 'fare',
                       value: resp.value,
-                    }}
+                    }
+                  }
                   this.handleChange(evt)
                 }
               }}
@@ -113,7 +125,7 @@ class FareRulesForm extends Component {
             <AsyncSelect
               cacheOptions={true}
               defaultOptions
-              defaultValue={one.route && {value: one.route, label: one.route.route_id}}
+              defaultValue={one.route && { value: one.route, label: one.route.route_id }}
               loadOptions={getRouteAsyncSelect}
               components={{ Option: RouteOption }}
               onChange={(resp, evt) => {
@@ -122,7 +134,8 @@ class FareRulesForm extends Component {
                     target: {
                       name: 'route',
                       value: resp.value,
-                    }}
+                    }
+                  }
                   this.handleChange(evt)
                 }
               }}
@@ -134,18 +147,24 @@ class FareRulesForm extends Component {
             <AsyncSelect
               cacheOptions={true}
               defaultOptions
-              defaultValue={one.origin_id && {value: one.origin_id, label: one.origin_id}}
+              defaultValue={one.origin_id && { value: one.origin_id, label: one.origin_id }}
               loadOptions={getStopsAsyncSelect}
               components={{ Option: StopOption }}
               onChange={(resp, evt) => {
+                let result
+                const fieldName = 'origin_id'
                 if (evt.action === 'select-option') {
-                  let evt = {
+                  result = {
                     target: {
-                      name: 'origin_id',
+                      name: fieldName,
                       value: resp.value.stop_id,
-                    }}
-                  this.handleChange(evt)
                     }
+                  }
+                } else if (evt.action === 'clear') {
+                  result = { target: { name: fieldName, value: '' } }
+                }
+                if (result !== undefined)
+                  this.handleChange(result)
               }}
             />
           </div>
@@ -154,20 +173,27 @@ class FareRulesForm extends Component {
             <label className="label">Destination ID (or IDs)</label>
             <AsyncSelect
               isMulti
+              isClearable
               cacheOptions
               defaultOptions
-              defaultValue={one.destination_id && {value: one.destination_id, label: one.destination_id}}
+              defaultValue={one.destination_id && { value: one.destination_id, label: one.destination_id }}
               loadOptions={getStopsAsyncSelect}
               components={{ Option: StopOption }}
               onChange={(resp, evt) => {
+                let result
+                const fieldName = 'destination_id'
                 if (evt.action === 'select-option') {
-                  let evt = {
+                  result = {
                     target: {
-                      name: 'destination_id',
+                      name: fieldName,
                       value: resp.map(el => el.value.stop_id),
-                    }}
-                  this.handleChange(evt)
                     }
+                  }
+                } else if (evt.action === 'clear') {
+                  result = { target: { name: fieldName, value: '' } }
+                }
+                if (result !== undefined)
+                  this.handleChange(result)
               }}
             />
           </div>
@@ -176,20 +202,27 @@ class FareRulesForm extends Component {
             <label className="label">Contains ID (or IDs)</label>
             <AsyncSelect
               isMulti
+              isClearable
               cacheOptions={true}
               defaultOptions
-              defaultValue={one.contains_id && {value: one.contains_id, label: one.contains_id}}
+              defaultValue={one.contains_id && { value: one.contains_id, label: one.contains_id }}
               loadOptions={getStopsAsyncSelect}
               components={{ Option: StopOption }}
               onChange={(resp, evt) => {
+                let result
+                const fieldName = 'contains_id'
                 if (evt.action === 'select-option') {
-                  let evt = {
+                  result = {
                     target: {
-                      name: 'contains_id',
+                      name: fieldName,
                       value: resp.map(el => el.value.stop_id),
-                    }}
-                  this.handleChange(evt)
                     }
+                  }
+                } else if (evt.action === 'clear') {
+                  result = { target: { name: fieldName, value: '' } }
+                }
+                if (result !== undefined)
+                  this.handleChange(result)
               }}
             />
           </div>
@@ -218,20 +251,20 @@ class FareRulesForm extends Component {
     )
   }
 
-  render () {
+  render() {
     const one = this.state
     const { fetching } = this.props.farerule
     // redirect to view page if no data
-    const { attribID } = this.props.match.params
+    const { ruleID } = this.props.match.params
     // this is a create form
-    if (attribID === undefined) {
+    if (ruleID === undefined) {
       if (one.justSubmit === true && !fetching) {
         return <Redirect to={`/fare`} />
       }
       return this.renderForm()
     }
 
-    if (one.id === null && attribID.length > 0)
+    if (one.id === null && ruleID.length > 0)
       return <Redirect to={`/fare`} />
 
     // redirect to fare list if submitted
@@ -246,6 +279,7 @@ class FareRulesForm extends Component {
 
 const mapStateToProps = state => ({
   farerule: state.farerule,
+  fareattrItems: state.fareattr.results,
 })
 
 const connectFareRulesForm = connect(