|
|
|
@ -1,3 +1,4 @@ |
|
|
|
|
import { utc, ISO_8601, duration } from "moment"; |
|
|
|
|
import React, { Component } from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { Redirect, Link } from "react-router-dom"; |
|
|
|
@ -8,9 +9,15 @@ import { |
|
|
|
|
Item, |
|
|
|
|
Segment, |
|
|
|
|
Pagination, |
|
|
|
|
Loader |
|
|
|
|
Popup, |
|
|
|
|
Loader, |
|
|
|
|
Label |
|
|
|
|
} from "semantic-ui-react"; |
|
|
|
|
import { getCShiftsRequest } from "../../../actions/cShift/saga.actions"; |
|
|
|
|
import { |
|
|
|
|
getCShiftsRequest, |
|
|
|
|
deleteCShiftRequest |
|
|
|
|
} from "../../../actions/cShift/saga.actions"; |
|
|
|
|
import { getEmployeeFromPrice, getPriceFromPrice } from "./ClientShiftShared"; |
|
|
|
|
|
|
|
|
|
class ClientShifts extends Component { |
|
|
|
|
constructor(props) { |
|
|
|
@ -40,6 +47,10 @@ class ClientShifts extends Component { |
|
|
|
|
this.setState({ page: activePage }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
deleteCShift = uuid => { |
|
|
|
|
this.props.dispatch(deleteCShiftRequest(uuid)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const { |
|
|
|
|
isSendingCShiftRequest, |
|
|
|
@ -56,6 +67,7 @@ class ClientShifts extends Component { |
|
|
|
|
pageSize={pageSize} |
|
|
|
|
user={selfUser} |
|
|
|
|
handlePaginationChange={this.handlePaginationChange} |
|
|
|
|
deleteCShift={this.deleteCShift} |
|
|
|
|
/> |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
@ -74,7 +86,8 @@ const ClientShiftsView = ({ |
|
|
|
|
user, |
|
|
|
|
page, |
|
|
|
|
pageSize, |
|
|
|
|
handlePaginationChange |
|
|
|
|
handlePaginationChange, |
|
|
|
|
deleteCShift |
|
|
|
|
}) => { |
|
|
|
|
const { count = 0, results = [] } = cShiftRequestSuccess; |
|
|
|
|
|
|
|
|
@ -96,27 +109,95 @@ const ClientShiftsView = ({ |
|
|
|
|
{!isSendingCShiftRequest && |
|
|
|
|
results.length > 0 && ( |
|
|
|
|
<Item.Group divided> |
|
|
|
|
{results.map(result => ( |
|
|
|
|
<Item key={result.uuid}> |
|
|
|
|
<Item.Content> |
|
|
|
|
<Item.Header content={result.uuid} /> |
|
|
|
|
<code>{JSON.stringify(result, null, 2)}</code> |
|
|
|
|
</Item.Content> |
|
|
|
|
<Item.Extra> |
|
|
|
|
<Button |
|
|
|
|
primary |
|
|
|
|
floated="right" |
|
|
|
|
as={Link} |
|
|
|
|
to={`/user/profile/client/edit-shift/${result.uuid}`} |
|
|
|
|
> |
|
|
|
|
Edit |
|
|
|
|
</Button> |
|
|
|
|
<Button color="red" floated="right"> |
|
|
|
|
Delete |
|
|
|
|
</Button> |
|
|
|
|
</Item.Extra> |
|
|
|
|
</Item> |
|
|
|
|
))} |
|
|
|
|
{results.map(result => { |
|
|
|
|
const employee = getEmployeeFromPrice(result.price, user); |
|
|
|
|
const price = getPriceFromPrice(result.price, user); |
|
|
|
|
const workType = price.work_type; |
|
|
|
|
const min = duration( |
|
|
|
|
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601), |
|
|
|
|
"milliseconds" |
|
|
|
|
).as("minutes"); |
|
|
|
|
let displayText = duration(min, "minutes").humanize(); |
|
|
|
|
if (min % 60) { |
|
|
|
|
displayText = duration( |
|
|
|
|
Math.floor(min / 60), |
|
|
|
|
"hours" |
|
|
|
|
).humanize(); |
|
|
|
|
displayText += ` and ${duration( |
|
|
|
|
min % 60, |
|
|
|
|
"minutes" |
|
|
|
|
).humanize()}`; |
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
<Item key={result.uuid}> |
|
|
|
|
<Item.Content> |
|
|
|
|
<Item.Header> |
|
|
|
|
<Label |
|
|
|
|
circular |
|
|
|
|
empty |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: workType.color, |
|
|
|
|
borderColor: workType.color |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
{workType.label} |
|
|
|
|
</Item.Header> |
|
|
|
|
<Item.Meta> |
|
|
|
|
{"At " + |
|
|
|
|
utc(result.set_start, ISO_8601) |
|
|
|
|
.local(false) |
|
|
|
|
.format("dddd, MMMM Do YYYY, h:mm a Z") + |
|
|
|
|
"; for " + |
|
|
|
|
displayText + |
|
|
|
|
"; rate $" + |
|
|
|
|
price.amount + |
|
|
|
|
"/hour"} |
|
|
|
|
</Item.Meta> |
|
|
|
|
<Item.Description>{result.description}</Item.Description> |
|
|
|
|
<code>{JSON.stringify(result, null, 2)}</code> |
|
|
|
|
<Item.Meta> |
|
|
|
|
<a href={"mailto:" + employee.provider.email}> |
|
|
|
|
{employee.provider.email} |
|
|
|
|
</a> |
|
|
|
|
</Item.Meta> |
|
|
|
|
</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> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</Item.Group> |
|
|
|
|
)} |
|
|
|
|
<div style={{ textAlign: "center" }}> |
|
|
|
|