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) { |
export function getPShifts(params) { |
||||||
return get("/pshift/", params).then(resp => Promise.resolve(resp)); |
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