caremyway-client/src/components/User/Provider/ProviderShifts.jsx

249 lines
8.0 KiB
React
Raw Normal View History

2018-04-23 05:04:09 +00:00
import { utc, ISO_8601, duration } from "moment";
import React, { Component } from "react";
import { connect } from "react-redux";
2018-04-23 17:07:33 +00:00
import { Redirect, Link } from "react-router-dom";
2018-04-23 05:04:09 +00:00
import {
2018-04-23 17:07:33 +00:00
Button,
2018-04-23 05:04:09 +00:00
Container,
Header,
Item,
Pagination,
Loader,
Label
} from "semantic-ui-react";
import {
getEmployerFromPrice,
getPriceFromPrice
} from "./ProviderShiftsShared";
2018-04-23 17:07:33 +00:00
import {
getPShiftsRequest,
updatePShiftRequest
} from "../../../actions/pShift/saga.actions";
2018-04-23 05:04:09 +00:00
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 });
};
2018-04-23 17:07:33 +00:00
handleChangePShiftApproval = (uuid, approved) => {
return () => {
this.props.dispatch(
updatePShiftRequest({ uuid, approved, action: "", chart: null })
);
};
};
2018-04-23 05:04:09 +00:00
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}
2018-04-23 17:07:33 +00:00
handleChangePShiftApproval={this.handleChangePShiftApproval}
2018-04-23 05:04:09 +00:00
/>
);
} else {
return <Redirect to="/" />;
}
}
}
function mapStateToProps(state) {
return { ...state.pShift, selfUser: state.user.selfUser };
}
const ProviderShiftsView = ({
isSendingPShiftRequest,
pShiftRequestSuccess,
user,
page,
pageSize,
2018-04-23 17:07:33 +00:00
handlePaginationChange,
handleChangePShiftApproval
2018-04-23 05:04:09 +00:00
}) => {
const { count = 0, results = [] } = pShiftRequestSuccess;
return (
<Container>
<Header>Shifts</Header>
2018-04-23 17:07:33 +00:00
{!!isSendingPShiftRequest && <Loader content="Loading" active />}
2018-04-23 05:04:09 +00:00
{!isSendingPShiftRequest &&
results.length > 0 && (
<Item.Group divided>
{results.map(result => {
2018-04-23 17:07:33 +00:00
const employer = getEmployerFromPrice(result.price, user) || {};
const client = employer.client || {};
const price = getPriceFromPrice(result.price, user) || {};
const workType = price.work_type || {};
2018-04-23 18:19:14 +00:00
const checkedIn =
!!result.actual_start && utc(result.actual_start, ISO_8601);
const checkedOut =
!!result.actual_end && utc(result.actual_end, ISO_8601);
2018-04-23 05:04:09 +00:00
const min = duration(
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
"milliseconds"
).as("minutes");
2018-04-23 17:07:33 +00:00
let displayDuration = duration(min, "minutes").humanize();
2018-04-23 05:04:09 +00:00
if (min % 60) {
2018-04-23 17:07:33 +00:00
displayDuration = duration(
2018-04-23 05:04:09 +00:00
Math.floor(min / 60),
"hours"
).humanize();
2018-04-23 17:07:33 +00:00
displayDuration += ` and ${duration(
2018-04-23 05:04:09 +00:00
min % 60,
"minutes"
).humanize()}`;
}
2018-04-23 17:07:33 +00:00
const approved = !!result.approved;
const rejected = !result.approved && result.approved !== null;
const pending = result.approved === null;
2018-04-23 05:04:09 +00:00
return (
<Item key={result.uuid}>
<Item.Content>
<Item.Header>
<Label
circular
empty
style={{
backgroundColor: workType.color,
borderColor: workType.color
}}
/>
{workType.label}
</Item.Header>
2018-04-23 17:07:33 +00:00
<Item.Extra>
<Label
color={approved ? "green" : rejected ? "red" : "grey"}
tag
size="small"
>
{approved && "Approved"}
{pending && "Approval Pending"}
{rejected && "Rejected"}
</Label>
</Item.Extra>
2018-04-23 05:04:09 +00:00
<Item.Meta>
{"At " +
utc(result.set_start, ISO_8601)
.local(false)
2018-04-23 17:07:33 +00:00
.format("dddd, MMMM Do YYYY, h:mm a Z")}
2018-04-23 05:04:09 +00:00
</Item.Meta>
2018-04-23 17:07:33 +00:00
<Item.Meta>{displayDuration}</Item.Meta>
<Item.Meta>{`Rate $${price.amount}/hour`}</Item.Meta>
{/* <Item.Description>{result.description}</Item.Description> */}
2018-04-23 05:04:09 +00:00
{/* <code>{JSON.stringify(result, null, 2)}</code> */}
2018-04-23 17:07:33 +00:00
<Item.Description>
{`${client.first_name} ${client.last_name}`.trim() ||
"No Name!"}{" "}
<a href={"mailto:" + client.email}>{client.email}</a>
</Item.Description>
2018-04-23 18:19:14 +00:00
{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 && (
2018-04-23 17:07:33 +00:00
<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>
2018-04-23 18:19:14 +00:00
)}
<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>
2018-04-23 05:04:09 +00:00
</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);