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);
|