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.
274 lines
7.6 KiB
274 lines
7.6 KiB
import { utc, duration, ISO_8601 } from "moment"; |
|
import React, { Component, Fragment } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Redirect } from "react-router-dom"; |
|
import { |
|
Button, |
|
Container, |
|
Header, |
|
Label, |
|
List, |
|
Loader, |
|
Message, |
|
TextArea, |
|
Form |
|
} from "semantic-ui-react"; |
|
import { |
|
setClearPShiftState, |
|
setFormShiftChart |
|
} from "../../../actions/pShift/reducer.actions"; |
|
import { |
|
getPShiftRequest, |
|
updatePShiftRequest |
|
} from "../../../actions/pShift/saga.actions"; |
|
import Error from "../../Shared/Error"; |
|
import { |
|
getEmployerFromPrice, |
|
getWorkTypeFromPrice, |
|
getPriceFromPrice |
|
} from "./ProviderShiftsShared"; |
|
import ShiftLabel from "../../Shared/ShiftLabel"; |
|
|
|
class ProviderShift extends Component { |
|
handleChangePShiftApproval = (uuid, approved) => { |
|
return () => { |
|
this.props.dispatch( |
|
updatePShiftRequest({ |
|
uuid, |
|
provider_approved: approved, |
|
action: "", |
|
chart: null, |
|
single: true |
|
}) |
|
); |
|
}; |
|
}; |
|
|
|
handleCheckInPShift = () => { |
|
const { pShiftRequestSuccess } = this.props; |
|
this.props.dispatch( |
|
updatePShiftRequest({ |
|
uuid: pShiftRequestSuccess.uuid, |
|
provider_approved: true, |
|
action: "checkin", |
|
chart: null, |
|
single: true |
|
}) |
|
); |
|
}; |
|
|
|
handleChangeChart = event => { |
|
this.props.dispatch(setFormShiftChart(event.target.value)); |
|
}; |
|
|
|
handleCheckOutPShift = () => { |
|
const { pShiftRequestSuccess, chart } = this.props; |
|
this.props.dispatch( |
|
updatePShiftRequest({ |
|
uuid: pShiftRequestSuccess.uuid, |
|
provider_approved: true, |
|
action: "checkout", |
|
chart, |
|
single: true |
|
}) |
|
); |
|
}; |
|
|
|
render() { |
|
const { |
|
isSendingPShiftRequest, |
|
pShiftRequestError, |
|
pShiftRequestSuccess, |
|
selfUser, |
|
chart |
|
} = this.props; |
|
|
|
if (!selfUser.provider) { |
|
return <Redirect to="/" />; |
|
} |
|
return ( |
|
<ProviderShiftFormView |
|
isSendingPShiftRequest={isSendingPShiftRequest} |
|
pShiftRequestError={pShiftRequestError} |
|
shift={pShiftRequestSuccess} |
|
chart={chart} |
|
user={selfUser} |
|
handleChangePShiftApproval={this.handleChangePShiftApproval} |
|
handleChangeChart={this.handleChangeChart} |
|
handleCheckInPShift={this.handleCheckInPShift} |
|
handleCheckOutPShift={this.handleCheckOutPShift} |
|
/> |
|
); |
|
} |
|
} |
|
|
|
const ProviderShiftFormView = ({ |
|
isSendingPShiftRequest, |
|
pShiftRequestError, |
|
shift, |
|
chart, |
|
user, |
|
handleChangeChart, |
|
handleChangePShiftApproval, |
|
handleCheckInPShift, |
|
handleCheckOutPShift |
|
}) => { |
|
const OLD_PEOPLE_TIME_FORMAT = "dddd, MMMM Do YYYY, h:mm a"; |
|
const employer = getEmployerFromPrice(shift.price, user) || {}; |
|
const client = employer.client || {}; |
|
const workType = getWorkTypeFromPrice(shift.price, user) || {}; |
|
const price = getPriceFromPrice(shift.price, user) || {}; |
|
const checkedIn = !!shift.actual_start && utc(shift.actual_start, ISO_8601); |
|
const checkedOut = !!shift.actual_end && utc(shift.actual_end, ISO_8601); |
|
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.provider_approved; |
|
const rejected = !shift.provider_approved && shift.provider_approved !== null; |
|
// const pending = shift.provider_approved === null; |
|
return ( |
|
<Container> |
|
<Header>Shift Details</Header> |
|
<Loader active={isSendingPShiftRequest} /> |
|
<ShiftLabel |
|
provider_approved={shift.provider_approved} |
|
client_approved_start={shift.approved_start} |
|
client_approved_end={shift.approved_end} |
|
/> |
|
<Label |
|
circular |
|
empty |
|
style={{ |
|
backgroundColor: workType.color, |
|
borderColor: workType.color |
|
}} |
|
/>{" "} |
|
{workType.label} |
|
<List bulleted> |
|
<List.Item> |
|
{"Scheduled for " + |
|
utc(shift.set_start, ISO_8601) |
|
.local(false) |
|
.format(OLD_PEOPLE_TIME_FORMAT)} |
|
</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> |
|
)} |
|
{!checkedIn && ( |
|
<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> |
|
)} |
|
{shift.approved_start && ( |
|
<Fragment> |
|
<strong>Client</strong> |
|
<List bulleted> |
|
<List.Item> |
|
{`Approved time start ${utc(shift.approved_start) |
|
.local(false) |
|
.format(OLD_PEOPLE_TIME_FORMAT)}`} |
|
</List.Item> |
|
<List.Item>{`Approved time end ${utc(shift.approved_end) |
|
.local(false) |
|
.format(OLD_PEOPLE_TIME_FORMAT)}`}</List.Item> |
|
</List> |
|
</Fragment> |
|
)} |
|
<strong>Provider</strong> |
|
<List bulleted> |
|
{!checkedIn && <List.Item>Pending Check In</List.Item>}{" "} |
|
{checkedIn && ( |
|
<List.Item> |
|
<strong>Checked In At:</strong>{" "} |
|
{checkedIn.local(false).format(OLD_PEOPLE_TIME_FORMAT)} |
|
</List.Item> |
|
)} |
|
{checkedOut && ( |
|
<List.Item> |
|
<strong>Checked Out At:</strong>{" "} |
|
{checkedOut.local(false).format(OLD_PEOPLE_TIME_FORMAT)} |
|
</List.Item> |
|
)} |
|
</List> |
|
{shift.chart && ( |
|
<Message> |
|
<Message.Header>Chart</Message.Header> |
|
{shift.chart} |
|
</Message> |
|
)} |
|
{!checkedIn && <Button onClick={handleCheckInPShift}>Check In</Button>} |
|
{checkedIn && |
|
!checkedOut && ( |
|
<Form onSubmit={handleCheckOutPShift}> |
|
<label>Chart</label> |
|
<TextArea |
|
value={chart} |
|
onChange={handleChangeChart} |
|
placeholder="Chart" |
|
/> |
|
<Button>Check Out</Button> |
|
</Form> |
|
)} |
|
<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);
|
|
|