Alexander Wong
6 years ago
parent
0fc6ac31f5
commit
805f20e040
10 changed files with 389 additions and 47 deletions
@ -1,5 +1,13 @@ |
||||
import { get } from "./baseApi"; |
||||
import { get, put } from "./baseApi"; |
||||
|
||||
export function getPShifts(params) { |
||||
return get("/pshift/", params).then(resp => Promise.resolve(resp)); |
||||
} |
||||
|
||||
export function getPShift(uuid) { |
||||
return get(`/pshift/${uuid}/`).then(resp => Promise.resolve(resp)); |
||||
} |
||||
|
||||
export function updatePShift(uuid, params) { |
||||
return put(`/pshift/${uuid}/`, params).then(resp => Promise.resolve(resp)); |
||||
} |
||||
|
||||
@ -0,0 +1,174 @@ |
||||
import { utc, duration, ISO_8601 } from "moment"; |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Redirect } from "react-router-dom"; |
||||
import { |
||||
Button, |
||||
Container, |
||||
Header, |
||||
Label, |
||||
List, |
||||
Loader, |
||||
Message |
||||
} from "semantic-ui-react"; |
||||
import { setClearPShiftState } from "../../../actions/pShift/reducer.actions"; |
||||
import { |
||||
getPShiftRequest, |
||||
updatePShiftRequest |
||||
} from "../../../actions/pShift/saga.actions"; |
||||
import Error from "../../Shared/Error"; |
||||
import { |
||||
getEmployerFromPrice, |
||||
getWorkTypeFromPrice, |
||||
getPriceFromPrice |
||||
} from "./ProviderShiftsShared"; |
||||
|
||||
class ProviderShift extends Component { |
||||
handleChangePShiftApproval = (uuid, approved) => { |
||||
return () => { |
||||
this.props.dispatch( |
||||
updatePShiftRequest({ |
||||
uuid, |
||||
approved, |
||||
action: "", |
||||
chart: null, |
||||
single: true |
||||
}) |
||||
); |
||||
}; |
||||
}; |
||||
|
||||
render() { |
||||
const { |
||||
isSendingPShiftRequest, |
||||
pShiftRequestError, |
||||
pShiftRequestSuccess, |
||||
selfUser |
||||
} = this.props; |
||||
|
||||
if (!selfUser.provider) { |
||||
return <Redirect to="/" />; |
||||
} |
||||
return ( |
||||
<ProviderShiftFormView |
||||
isSendingPShiftRequest={isSendingPShiftRequest} |
||||
pShiftRequestError={pShiftRequestError} |
||||
shift={pShiftRequestSuccess} |
||||
user={selfUser} |
||||
handleChangePShiftApproval={this.handleChangePShiftApproval} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const ProviderShiftFormView = ({ |
||||
isSendingPShiftRequest, |
||||
pShiftRequestError, |
||||
shift, |
||||
user, |
||||
handleChangePShiftApproval |
||||
}) => { |
||||
const employer = getEmployerFromPrice(shift.price, user) || {}; |
||||
const client = employer.client || {}; |
||||
const workType = getWorkTypeFromPrice(shift.price, user) || {}; |
||||
const price = getPriceFromPrice(shift.price, user) || {}; |
||||
const min = duration( |
||||
utc(shift.set_end, ISO_8601) - utc(shift.set_start, ISO_8601), |
||||
"milliseconds" |
||||
).as("minutes"); |
||||
let displayDuration = duration(min, "minutes").humanize(); |
||||
if (min % 60) { |
||||
displayDuration = duration(Math.floor(min / 60), "hours").humanize(); |
||||
displayDuration += ` and ${duration(min % 60, "minutes").humanize()}`; |
||||
} |
||||
const approved = !!shift.approved; |
||||
const rejected = !shift.approved && shift.approved !== null; |
||||
const pending = shift.approved === null; |
||||
return ( |
||||
<Container> |
||||
<Header>Shift Details</Header> |
||||
<Loader active={isSendingPShiftRequest} /> |
||||
<Label color={approved ? "green" : rejected ? "red" : "grey"} tag size="small"> |
||||
{approved && "Approved"} |
||||
{pending && "Approval Pending"} |
||||
{rejected && "Rejected"} |
||||
</Label> |
||||
<Label |
||||
circular |
||||
empty |
||||
style={{ |
||||
backgroundColor: workType.color, |
||||
borderColor: workType.color |
||||
}} |
||||
/>{" "} |
||||
{workType.label} |
||||
<List bulleted> |
||||
<List.Item> |
||||
{"Scheduled at " + |
||||
utc(shift.set_start, ISO_8601) |
||||
.local(false) |
||||
.format("dddd, MMMM Do YYYY, h:mm a Z")} |
||||
</List.Item> |
||||
<List.Item>{displayDuration}</List.Item> |
||||
<List.Item>{`Rate $${price.amount}/hour`}</List.Item> |
||||
<List.Item> |
||||
<strong>Employer/Client:</strong>{" "} |
||||
{`${client.first_name} ${client.last_name}`.trim() || "No Name!"}{" "} |
||||
<a href={"mailto:" + client.email}>{client.email}</a> |
||||
</List.Item> |
||||
</List> |
||||
{shift.description && ( |
||||
<Message> |
||||
<Message.Header>Description</Message.Header> |
||||
<p>{shift.description}</p> |
||||
</Message> |
||||
)} |
||||
<Button.Group> |
||||
{!approved && ( |
||||
<Button |
||||
color="green" |
||||
onClick={handleChangePShiftApproval(shift.uuid, true)} |
||||
> |
||||
Approve |
||||
</Button> |
||||
)} |
||||
{!rejected && ( |
||||
<Button |
||||
color="red" |
||||
onClick={handleChangePShiftApproval(shift.uuid, false)} |
||||
> |
||||
Reject |
||||
</Button> |
||||
)} |
||||
</Button.Group> |
||||
<Error error={pShiftRequestError}/> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.pShift, selfUser: state.user.selfUser }; |
||||
} |
||||
|
||||
class ProviderShiftWrapper extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.props.dispatch(setClearPShiftState()); |
||||
this.props.dispatch( |
||||
getPShiftRequest({ uuid: this.props.match.params.shiftUUID }) |
||||
); |
||||
} |
||||
|
||||
render() { |
||||
const { pShiftRequestSuccess, pShiftRequestError } = this.props; |
||||
if (pShiftRequestSuccess.uuid) { |
||||
return <ProviderShift {...this.props} />; |
||||
} else if (!pShiftRequestError) { |
||||
return <Loader active />; |
||||
} else { |
||||
return <Error error={pShiftRequestError} />; |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToProps)(ProviderShiftWrapper); |
||||
Loading…
Reference in new issue