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,30 +52,41 @@ 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 ones = results.filter(ele => ele.id === +ruleID)
-    if (ones.length > 0) {
-      this.setState(ones[0])
+    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])
+      }
     }
   }
 
@@ -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,11 +112,12 @@ class FareRulesForm extends Component {
                     target: {
                       name: 'fare',
                       value: resp.value,
-                    }}
+                    }
+                  }
                   this.handleChange(evt)
                 }
               }}
-              />
+            />
           </div>
 
           <div className="field">
@@ -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,11 +134,12 @@ class FareRulesForm extends Component {
                     target: {
                       name: 'route',
                       value: resp.value,
-                    }}
+                    }
+                  }
                   this.handleChange(evt)
                 }
               }}
-              />
+            />
           </div>
 
           <div className="field">
@@ -134,64 +147,84 @@ 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>
 
           <div className="field">
             <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>
 
           <div className="field">
             <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>
 
           <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>
@@ -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(