You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
5.1 KiB
184 lines
5.1 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Redirect } from "react-router-dom"; |
|
import { |
|
Container, |
|
Form, |
|
Header, |
|
Input, |
|
Label, |
|
Message |
|
} from "semantic-ui-react"; |
|
import { |
|
clearPriceRequestError, |
|
clearPriceRequestSuccess, |
|
setFormPriceAmount |
|
} from "../../../actions/price/reducer.actions"; |
|
import { updatePriceRequest } from "../../../actions/price/saga.actions"; |
|
import Error from "../../Shared/Error"; |
|
|
|
class UpdatePriceForm extends Component { |
|
constructor(props) { |
|
super(props); |
|
|
|
// Get referenced employee |
|
const { selfUser } = props; |
|
const employeeUUID = this.props.match.params.providerUUID; |
|
const employees = ((selfUser || {}).client || {}).employees || []; |
|
const employee = |
|
employees.filter(employee => employee.uuid === employeeUUID)[0] || null; |
|
|
|
// Get referenced price |
|
const priceUUID = this.props.match.params.priceUUID; |
|
const price = |
|
(employee.prices || []).filter( |
|
price => price.uuid === priceUUID && !price.deleted |
|
)[0] || null; |
|
this.props.dispatch(setFormPriceAmount((price || {}).amount || "")); |
|
this.state = { |
|
price, |
|
employee |
|
}; |
|
} |
|
|
|
componentWillMount = () => { |
|
this.props.dispatch(clearPriceRequestError()); |
|
this.props.dispatch(clearPriceRequestSuccess()); |
|
}; |
|
|
|
changeAmount = event => { |
|
this.props.dispatch(setFormPriceAmount(event.target.value)); |
|
}; |
|
|
|
onSubmitPrice = event => { |
|
event.preventDefault(); |
|
const { amount } = this.props; |
|
const { price } = this.state; |
|
this.props.dispatch( |
|
updatePriceRequest({ uuid: (price || {}).uuid, amount }) |
|
); |
|
}; |
|
|
|
render() { |
|
const { |
|
isSendingPriceRequest, |
|
priceRequestError, |
|
priceRequestSuccess, |
|
amount, |
|
selfUser |
|
} = this.props; |
|
const { employee, price } = this.state; |
|
|
|
if (!selfUser.client) { |
|
return <Redirect to="/" />; |
|
} |
|
|
|
return ( |
|
<UpdatePriceFormView |
|
isSendingPriceRequest={isSendingPriceRequest} |
|
priceRequestError={priceRequestError} |
|
priceRequestSuccess={priceRequestSuccess} |
|
employee={employee} |
|
price={price} |
|
amount={amount} |
|
changeAmount={this.changeAmount} |
|
onSubmitPrice={this.onSubmitPrice} |
|
/> |
|
); |
|
} |
|
} |
|
|
|
const UpdatePriceFormView = ({ |
|
isSendingPriceRequest, |
|
priceRequestError, |
|
priceRequestSuccess, |
|
employee, |
|
price, |
|
amount, |
|
changeAmount, |
|
onSubmitPrice |
|
}) => ( |
|
<Container> |
|
<Header>Update Assigned Work</Header> |
|
{employee && ( |
|
<Message info> |
|
<Message.Header>Employee Information</Message.Header> |
|
<Message.List> |
|
<Message.Item>UUID: {employee.uuid}</Message.Item> |
|
<Message.Item> |
|
Provider Email: {(employee.provider || {}).email || "No Email!"} |
|
</Message.Item> |
|
<Message.Item> |
|
Provider Name:{" "} |
|
{`${(employee.provider || {}).first_name} ${ |
|
(employee.provider || {}).last_name |
|
}`.trim() || "No Name!"} |
|
</Message.Item> |
|
<Message.Item> |
|
Provider Phone Number:{" "} |
|
{`${((employee.provider || {}).userinfo || {}).phone_number || |
|
"No Number!"}`} |
|
</Message.Item> |
|
<Message.Item>Approved: {"" + employee.approved}</Message.Item> |
|
<Message.Item>Deleted: {"" + employee.deleted}</Message.Item> |
|
</Message.List> |
|
</Message> |
|
)} |
|
{!employee && ( |
|
<Message warning> |
|
<Message.Header>Invalid Employee</Message.Header> |
|
<p>No accessable employee exists for given UUID.</p> |
|
</Message> |
|
)} |
|
<Form |
|
loading={isSendingPriceRequest} |
|
onSubmit={onSubmitPrice} |
|
error={!!priceRequestError} |
|
success={!!priceRequestSuccess} |
|
> |
|
<Form.Field> |
|
<label>Work Type</label> |
|
<span> |
|
<Label |
|
circular |
|
empty |
|
style={{ |
|
backgroundColor: ((price || {}).work_type || {}).color || "#fff", |
|
borderColor: ((price || {}).work_type || {}).color || "#fff" |
|
}} |
|
/>{" "} |
|
{((price || {}).work_type || {}).label || "Unlabeled"} |
|
{((price || {}).work_type || {}).deleted && <span>Deleted!</span>} |
|
</span> |
|
</Form.Field> |
|
<Form.Field> |
|
<label>Hourly Rate</label> |
|
<Input |
|
labelPosition="left" |
|
type="" |
|
placeholder="Amount" |
|
onChange={changeAmount} |
|
value={amount} |
|
> |
|
<Label basic>$</Label> |
|
<input /> |
|
</Input> |
|
</Form.Field> |
|
<Error header="Update Price failed!" error={priceRequestError} /> |
|
<Message success> |
|
<Message.Header>Update Price successful!</Message.Header> |
|
<p>Price successfully created.</p> |
|
{!!priceRequestSuccess && ( |
|
<Redirect to="/user/profile/client/providers" /> |
|
)} |
|
</Message> |
|
<Form.Button>Update Price</Form.Button> |
|
</Form> |
|
</Container> |
|
); |
|
|
|
function mapStateToProps(state) { |
|
return { ...state.price, selfUser: state.user.selfUser }; |
|
} |
|
|
|
export default connect(mapStateToProps)(UpdatePriceForm);
|
|
|