caremyway-client/src/components/User/Client/ClientShifts.jsx

234 lines
7.2 KiB
React
Raw Normal View History

2018-04-23 04:10:46 +00:00
import { utc, ISO_8601, duration } from "moment";
2018-04-18 19:05:56 +00:00
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
2018-04-23 00:23:43 +00:00
import {
Button,
Container,
Header,
Item,
Segment,
2018-04-23 03:07:50 +00:00
Pagination,
2018-04-23 04:10:46 +00:00
Popup,
Loader,
Label
2018-04-23 00:23:43 +00:00
} from "semantic-ui-react";
2018-04-23 04:10:46 +00:00
import {
getCShiftsRequest,
deleteCShiftRequest
} from "../../../actions/cShift/saga.actions";
import { getEmployeeFromPrice, getPriceFromPrice } from "./ClientShiftShared";
2018-04-18 19:05:56 +00:00
class ClientShifts extends Component {
2018-04-23 00:23:43 +00:00
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(
getCShiftsRequest({
page: this.state.page,
page_size: this.state.pageSize
})
);
};
handlePaginationChange = (event, { activePage }) => {
this.props.dispatch(
getCShiftsRequest({
page: activePage,
page_size: this.state.pageSize
})
);
this.setState({ page: activePage });
};
2018-04-23 04:10:46 +00:00
deleteCShift = uuid => {
this.props.dispatch(deleteCShiftRequest(uuid));
};
2018-04-18 19:05:56 +00:00
render() {
2018-04-23 00:23:43 +00:00
const {
isSendingCShiftRequest,
cShiftRequestSuccess,
selfUser
} = this.props;
const { page, pageSize } = this.state;
2018-04-18 19:05:56 +00:00
if (selfUser.client) {
2018-04-23 00:23:43 +00:00
return (
<ClientShiftsView
isSendingCShiftRequest={isSendingCShiftRequest}
cShiftRequestSuccess={cShiftRequestSuccess}
page={page}
pageSize={pageSize}
user={selfUser}
handlePaginationChange={this.handlePaginationChange}
2018-04-23 04:10:46 +00:00
deleteCShift={this.deleteCShift}
2018-04-23 00:23:43 +00:00
/>
);
2018-04-18 19:05:56 +00:00
} else {
return <Redirect to="/" />;
}
}
}
function mapStateToProps(state) {
2018-04-23 00:23:43 +00:00
return { ...state.cShift, selfUser: state.user.selfUser };
2018-04-18 19:05:56 +00:00
}
2018-04-23 00:23:43 +00:00
const ClientShiftsView = ({
isSendingCShiftRequest,
cShiftRequestSuccess,
user,
page,
pageSize,
2018-04-23 04:10:46 +00:00
handlePaginationChange,
deleteCShift
2018-04-23 00:23:43 +00:00
}) => {
const { count = 0, results = [] } = cShiftRequestSuccess;
return (
<Container>
<Header>Shifts</Header>
<Segment>
<Button
basic
color="green"
size="small"
as={Link}
to="/user/profile/client/add-shift"
>
Schedule a Shift
</Button>
</Segment>
2018-04-23 17:07:33 +00:00
{!!isSendingCShiftRequest && <Loader content="Loading" active />}
2018-04-23 00:23:43 +00:00
{!isSendingCShiftRequest &&
results.length > 0 && (
2018-04-23 03:07:50 +00:00
<Item.Group divided>
2018-04-23 04:10:46 +00:00
{results.map(result => {
2018-04-23 17:07:33 +00:00
const employee = getEmployeeFromPrice(result.price, user) || {};
const provider = employee.provider || {};
const price = getPriceFromPrice(result.price, user) || {};
2018-04-23 04:10:46 +00:00
const workType = price.work_type;
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 04:10:46 +00:00
if (min % 60) {
2018-04-23 17:07:33 +00:00
displayDuration = duration(
2018-04-23 04:10:46 +00:00
Math.floor(min / 60),
"hours"
).humanize();
2018-04-23 17:07:33 +00:00
displayDuration += ` and ${duration(
2018-04-23 04:10:46 +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 04:10:46 +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 04:10:46 +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 04:10:46 +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>
{`${provider.first_name} ${provider.last_name}`.trim() ||
"No Name!"}{" "}
<a href={"mailto:" + provider.email}>{provider.email}</a>
</Item.Description>
2018-04-23 04:10:46 +00:00
</Item.Content>
{result.actual_start === null && (
<Item.Extra>
<Button
primary
floated="right"
as={Link}
to={`/user/profile/client/edit-shift/${result.uuid}`}
>
Edit
</Button>
<Popup
content={
<div>
Are you sure you want to delete this shift?<br />
<Button
basic
color="red"
size="small"
onClick={() => deleteCShift(result.uuid)}
>
Confirm Deletion
</Button>
</div>
}
trigger={
<Button color="red" floated="right">
Delete
</Button>
}
on="click"
position="top right"
/>
</Item.Extra>
)}
</Item>
);
})}
2018-04-23 00:23:43 +00:00
</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>
);
};
2018-04-18 19:05:56 +00:00
export default connect(mapStateToProps)(ClientShifts);