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.
248 lines
8.0 KiB
248 lines
8.0 KiB
import { utc, ISO_8601, duration } from "moment"; |
|
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Redirect, Link } from "react-router-dom"; |
|
import { |
|
Button, |
|
Container, |
|
Header, |
|
Item, |
|
Pagination, |
|
Loader, |
|
Label |
|
} from "semantic-ui-react"; |
|
import { |
|
getEmployerFromPrice, |
|
getPriceFromPrice |
|
} from "./ProviderShiftsShared"; |
|
import { |
|
getPShiftsRequest, |
|
updatePShiftRequest |
|
} from "../../../actions/pShift/saga.actions"; |
|
|
|
class ProviderShifts extends Component { |
|
constructor(props) { |
|
super(props); |
|
this.state = { |
|
page: 1, |
|
pageSize: 10 // client can't control this, but set here just in case |
|
}; |
|
} |
|
|
|
componentWillMount = () => { |
|
this.props.dispatch( |
|
getPShiftsRequest({ |
|
page: this.state.page, |
|
page_size: this.state.pageSize |
|
}) |
|
); |
|
}; |
|
|
|
handlePaginationChange = (event, { activePage }) => { |
|
this.props.dispatch( |
|
getPShiftsRequest({ |
|
page: activePage, |
|
page_size: this.state.pageSize |
|
}) |
|
); |
|
this.setState({ page: activePage }); |
|
}; |
|
|
|
handleChangePShiftApproval = (uuid, approved) => { |
|
return () => { |
|
this.props.dispatch( |
|
updatePShiftRequest({ uuid, approved, action: "", chart: null }) |
|
); |
|
}; |
|
}; |
|
|
|
render() { |
|
const { |
|
isSendingPShiftRequest, |
|
pShiftRequestSuccess, |
|
selfUser |
|
} = this.props; |
|
const { page, pageSize } = this.state; |
|
if (selfUser.provider) { |
|
return ( |
|
<ProviderShiftsView |
|
isSendingPShiftRequest={isSendingPShiftRequest} |
|
pShiftRequestSuccess={pShiftRequestSuccess} |
|
page={page} |
|
pageSize={pageSize} |
|
user={selfUser} |
|
handlePaginationChange={this.handlePaginationChange} |
|
handleChangePShiftApproval={this.handleChangePShiftApproval} |
|
/> |
|
); |
|
} else { |
|
return <Redirect to="/" />; |
|
} |
|
} |
|
} |
|
|
|
function mapStateToProps(state) { |
|
return { ...state.pShift, selfUser: state.user.selfUser }; |
|
} |
|
|
|
const ProviderShiftsView = ({ |
|
isSendingPShiftRequest, |
|
pShiftRequestSuccess, |
|
user, |
|
page, |
|
pageSize, |
|
handlePaginationChange, |
|
handleChangePShiftApproval |
|
}) => { |
|
const { count = 0, results = [] } = pShiftRequestSuccess; |
|
return ( |
|
<Container> |
|
<Header>Shifts</Header> |
|
{!!isSendingPShiftRequest && <Loader content="Loading" active />} |
|
{!isSendingPShiftRequest && |
|
results.length > 0 && ( |
|
<Item.Group divided> |
|
{results.map(result => { |
|
const employer = getEmployerFromPrice(result.price, user) || {}; |
|
const client = employer.client || {}; |
|
const price = getPriceFromPrice(result.price, user) || {}; |
|
const workType = price.work_type || {}; |
|
const checkedIn = |
|
!!result.actual_start && utc(result.actual_start, ISO_8601); |
|
const checkedOut = |
|
!!result.actual_end && utc(result.actual_end, ISO_8601); |
|
const min = duration( |
|
utc(result.set_end, ISO_8601) - utc(result.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 = !!result.approved; |
|
const rejected = !result.approved && result.approved !== null; |
|
const pending = result.approved === null; |
|
return ( |
|
<Item key={result.uuid}> |
|
<Item.Content> |
|
<Item.Header> |
|
<Label |
|
circular |
|
empty |
|
style={{ |
|
backgroundColor: workType.color, |
|
borderColor: workType.color |
|
}} |
|
/> |
|
{workType.label} |
|
</Item.Header> |
|
<Item.Extra> |
|
<Label |
|
color={approved ? "green" : rejected ? "red" : "grey"} |
|
tag |
|
size="small" |
|
> |
|
{approved && "Approved"} |
|
{pending && "Approval Pending"} |
|
{rejected && "Rejected"} |
|
</Label> |
|
</Item.Extra> |
|
<Item.Meta> |
|
{"At " + |
|
utc(result.set_start, ISO_8601) |
|
.local(false) |
|
.format("dddd, MMMM Do YYYY, h:mm a Z")} |
|
</Item.Meta> |
|
<Item.Meta>{displayDuration}</Item.Meta> |
|
<Item.Meta>{`Rate $${price.amount}/hour`}</Item.Meta> |
|
{/* <Item.Description>{result.description}</Item.Description> */} |
|
{/* <code>{JSON.stringify(result, null, 2)}</code> */} |
|
<Item.Description> |
|
{`${client.first_name} ${client.last_name}`.trim() || |
|
"No Name!"}{" "} |
|
<a href={"mailto:" + client.email}>{client.email}</a> |
|
</Item.Description> |
|
{checkedIn && ( |
|
<Item.Meta> |
|
{"Checked in at: " + |
|
checkedIn |
|
.local(false) |
|
.format("dddd, MMMM Do YYYY, h:mm a Z")} |
|
</Item.Meta> |
|
)} |
|
{checkedOut && ( |
|
<Item.Meta> |
|
{"Checked out at: " + |
|
checkedOut |
|
.local(false) |
|
.format("dddd, MMMM Do YYYY, h:mm a Z")} |
|
</Item.Meta> |
|
)} |
|
</Item.Content> |
|
<Item.Extra> |
|
{!checkedIn && ( |
|
<Button.Group floated="right"> |
|
{!approved && ( |
|
<Button |
|
color="green" |
|
onClick={handleChangePShiftApproval( |
|
result.uuid, |
|
true |
|
)} |
|
> |
|
Approve |
|
</Button> |
|
)} |
|
{!rejected && ( |
|
<Button |
|
color="red" |
|
onClick={handleChangePShiftApproval( |
|
result.uuid, |
|
false |
|
)} |
|
> |
|
Reject |
|
</Button> |
|
)} |
|
</Button.Group> |
|
)} |
|
<Button |
|
floated="right" |
|
as={Link} |
|
to={`/user/profile/provider/shifts/${result.uuid}`} |
|
> |
|
Details{approved && !checkedIn && " & Check In"} |
|
{approved && checkedIn && !checkedOut && " & Check Out"} |
|
</Button> |
|
</Item.Extra> |
|
</Item> |
|
); |
|
})} |
|
</Item.Group> |
|
)} |
|
<div style={{ textAlign: "center" }}> |
|
<Pagination |
|
activePage={page} |
|
onPageChange={handlePaginationChange} |
|
totalPages={Math.ceil(count / pageSize)} |
|
boundaryRange={1} |
|
siblingRange={1} |
|
size="mini" |
|
firstItem={undefined} |
|
lastItem={undefined} |
|
prevItem={null} |
|
nextItem={null} |
|
/> |
|
</div> |
|
</Container> |
|
); |
|
}; |
|
|
|
export default connect(mapStateToProps)(ProviderShifts);
|
|
|