Working provider check in & check out
This commit is contained in:
parent
805f20e040
commit
4c639db50f
|
@ -4,6 +4,7 @@ import {
|
||||||
SET_PSHIFT_REQUEST_ERROR,
|
SET_PSHIFT_REQUEST_ERROR,
|
||||||
CLEAR_PSHIFT_REQUEST_ERROR,
|
CLEAR_PSHIFT_REQUEST_ERROR,
|
||||||
CLEAR_PSHIFT_REQUEST_SUCCESS,
|
CLEAR_PSHIFT_REQUEST_SUCCESS,
|
||||||
|
SET_FORM_SHIFT_CHART,
|
||||||
SET_CLEAR_PSHIFT_STATE
|
SET_CLEAR_PSHIFT_STATE
|
||||||
} from "../../constants/pShift.constants";
|
} from "../../constants/pShift.constants";
|
||||||
import { parseError } from "../common.actions";
|
import { parseError } from "../common.actions";
|
||||||
|
@ -42,6 +43,13 @@ export function clearPShiftRequestSuccess() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function setFormShiftChart(chart) {
|
||||||
|
return {
|
||||||
|
type: SET_FORM_SHIFT_CHART,
|
||||||
|
data: chart
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function setClearPShiftState() {
|
export function setClearPShiftState() {
|
||||||
return {
|
return {
|
||||||
type: SET_CLEAR_PSHIFT_STATE
|
type: SET_CLEAR_PSHIFT_STATE
|
||||||
|
|
|
@ -11,7 +11,9 @@ import {
|
||||||
Pagination,
|
Pagination,
|
||||||
Popup,
|
Popup,
|
||||||
Loader,
|
Loader,
|
||||||
Label
|
Label,
|
||||||
|
List,
|
||||||
|
Message
|
||||||
} from "semantic-ui-react";
|
} from "semantic-ui-react";
|
||||||
import {
|
import {
|
||||||
getCShiftsRequest,
|
getCShiftsRequest,
|
||||||
|
@ -114,6 +116,10 @@ const ClientShiftsView = ({
|
||||||
const provider = employee.provider || {};
|
const provider = employee.provider || {};
|
||||||
const price = getPriceFromPrice(result.price, user) || {};
|
const price = getPriceFromPrice(result.price, user) || {};
|
||||||
const workType = price.work_type;
|
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(
|
const min = duration(
|
||||||
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
|
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
|
||||||
"milliseconds"
|
"milliseconds"
|
||||||
|
@ -173,7 +179,7 @@ const ClientShiftsView = ({
|
||||||
<a href={"mailto:" + provider.email}>{provider.email}</a>
|
<a href={"mailto:" + provider.email}>{provider.email}</a>
|
||||||
</Item.Description>
|
</Item.Description>
|
||||||
</Item.Content>
|
</Item.Content>
|
||||||
{result.actual_start === null && (
|
{!checkedIn && (
|
||||||
<Item.Extra>
|
<Item.Extra>
|
||||||
<Button
|
<Button
|
||||||
primary
|
primary
|
||||||
|
@ -207,6 +213,38 @@ const ClientShiftsView = ({
|
||||||
/>
|
/>
|
||||||
</Item.Extra>
|
</Item.Extra>
|
||||||
)}
|
)}
|
||||||
|
{checkedIn && (
|
||||||
|
<Item.Content>
|
||||||
|
<Item.Description>
|
||||||
|
{result.description && (
|
||||||
|
<Message>{result.description}</Message>
|
||||||
|
)}
|
||||||
|
<strong>Provider</strong>
|
||||||
|
<List bulleted>
|
||||||
|
<List.Item>
|
||||||
|
{"Checked in at " +
|
||||||
|
checkedIn
|
||||||
|
.local(false)
|
||||||
|
.format("dddd, MMMM Do YYYY, h:mm a Z")}
|
||||||
|
</List.Item>
|
||||||
|
{checkedOut && (
|
||||||
|
<List.Item>
|
||||||
|
{"Checked out at " +
|
||||||
|
checkedOut
|
||||||
|
.local(false)
|
||||||
|
.format("dddd, MMMM Do YYYY, h:mm a Z")}
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
</List>
|
||||||
|
{result.chart && (
|
||||||
|
<Message>
|
||||||
|
<Message.Header>Chart</Message.Header>
|
||||||
|
{result.chart}
|
||||||
|
</Message>
|
||||||
|
)}
|
||||||
|
</Item.Description>
|
||||||
|
</Item.Content>
|
||||||
|
)}
|
||||||
</Item>
|
</Item>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -9,9 +9,14 @@ import {
|
||||||
Label,
|
Label,
|
||||||
List,
|
List,
|
||||||
Loader,
|
Loader,
|
||||||
Message
|
Message,
|
||||||
|
TextArea,
|
||||||
|
Form
|
||||||
} from "semantic-ui-react";
|
} from "semantic-ui-react";
|
||||||
import { setClearPShiftState } from "../../../actions/pShift/reducer.actions";
|
import {
|
||||||
|
setClearPShiftState,
|
||||||
|
setFormShiftChart
|
||||||
|
} from "../../../actions/pShift/reducer.actions";
|
||||||
import {
|
import {
|
||||||
getPShiftRequest,
|
getPShiftRequest,
|
||||||
updatePShiftRequest
|
updatePShiftRequest
|
||||||
|
@ -38,12 +43,43 @@ class ProviderShift extends Component {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleCheckInPShift = () => {
|
||||||
|
const { pShiftRequestSuccess } = this.props;
|
||||||
|
this.props.dispatch(
|
||||||
|
updatePShiftRequest({
|
||||||
|
uuid: pShiftRequestSuccess.uuid,
|
||||||
|
approved: true,
|
||||||
|
action: "checkin",
|
||||||
|
chart: null,
|
||||||
|
single: true
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangeChart = event => {
|
||||||
|
this.props.dispatch(setFormShiftChart(event.target.value));
|
||||||
|
};
|
||||||
|
|
||||||
|
handleCheckOutPShift = () => {
|
||||||
|
const { pShiftRequestSuccess, chart } = this.props;
|
||||||
|
this.props.dispatch(
|
||||||
|
updatePShiftRequest({
|
||||||
|
uuid: pShiftRequestSuccess.uuid,
|
||||||
|
approved: true,
|
||||||
|
action: "checkout",
|
||||||
|
chart,
|
||||||
|
single: true
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
isSendingPShiftRequest,
|
isSendingPShiftRequest,
|
||||||
pShiftRequestError,
|
pShiftRequestError,
|
||||||
pShiftRequestSuccess,
|
pShiftRequestSuccess,
|
||||||
selfUser
|
selfUser,
|
||||||
|
chart
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (!selfUser.provider) {
|
if (!selfUser.provider) {
|
||||||
|
@ -54,8 +90,12 @@ class ProviderShift extends Component {
|
||||||
isSendingPShiftRequest={isSendingPShiftRequest}
|
isSendingPShiftRequest={isSendingPShiftRequest}
|
||||||
pShiftRequestError={pShiftRequestError}
|
pShiftRequestError={pShiftRequestError}
|
||||||
shift={pShiftRequestSuccess}
|
shift={pShiftRequestSuccess}
|
||||||
|
chart={chart}
|
||||||
user={selfUser}
|
user={selfUser}
|
||||||
handleChangePShiftApproval={this.handleChangePShiftApproval}
|
handleChangePShiftApproval={this.handleChangePShiftApproval}
|
||||||
|
handleChangeChart={this.handleChangeChart}
|
||||||
|
handleCheckInPShift={this.handleCheckInPShift}
|
||||||
|
handleCheckOutPShift={this.handleCheckOutPShift}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -65,13 +105,19 @@ const ProviderShiftFormView = ({
|
||||||
isSendingPShiftRequest,
|
isSendingPShiftRequest,
|
||||||
pShiftRequestError,
|
pShiftRequestError,
|
||||||
shift,
|
shift,
|
||||||
|
chart,
|
||||||
user,
|
user,
|
||||||
handleChangePShiftApproval
|
handleChangeChart,
|
||||||
|
handleChangePShiftApproval,
|
||||||
|
handleCheckInPShift,
|
||||||
|
handleCheckOutPShift
|
||||||
}) => {
|
}) => {
|
||||||
const employer = getEmployerFromPrice(shift.price, user) || {};
|
const employer = getEmployerFromPrice(shift.price, user) || {};
|
||||||
const client = employer.client || {};
|
const client = employer.client || {};
|
||||||
const workType = getWorkTypeFromPrice(shift.price, user) || {};
|
const workType = getWorkTypeFromPrice(shift.price, user) || {};
|
||||||
const price = getPriceFromPrice(shift.price, user) || {};
|
const price = getPriceFromPrice(shift.price, user) || {};
|
||||||
|
const checkedIn = !!shift.actual_start && utc(shift.actual_start, ISO_8601);
|
||||||
|
const checkedOut = !!shift.actual_end && utc(shift.actual_end, ISO_8601);
|
||||||
const min = duration(
|
const min = duration(
|
||||||
utc(shift.set_end, ISO_8601) - utc(shift.set_start, ISO_8601),
|
utc(shift.set_end, ISO_8601) - utc(shift.set_start, ISO_8601),
|
||||||
"milliseconds"
|
"milliseconds"
|
||||||
|
@ -88,7 +134,11 @@ const ProviderShiftFormView = ({
|
||||||
<Container>
|
<Container>
|
||||||
<Header>Shift Details</Header>
|
<Header>Shift Details</Header>
|
||||||
<Loader active={isSendingPShiftRequest} />
|
<Loader active={isSendingPShiftRequest} />
|
||||||
<Label color={approved ? "green" : rejected ? "red" : "grey"} tag size="small">
|
<Label
|
||||||
|
color={approved ? "green" : rejected ? "red" : "grey"}
|
||||||
|
tag
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
{approved && "Approved"}
|
{approved && "Approved"}
|
||||||
{pending && "Approval Pending"}
|
{pending && "Approval Pending"}
|
||||||
{rejected && "Rejected"}
|
{rejected && "Rejected"}
|
||||||
|
@ -123,6 +173,7 @@ const ProviderShiftFormView = ({
|
||||||
<p>{shift.description}</p>
|
<p>{shift.description}</p>
|
||||||
</Message>
|
</Message>
|
||||||
)}
|
)}
|
||||||
|
{!checkedIn && (
|
||||||
<Button.Group>
|
<Button.Group>
|
||||||
{!approved && (
|
{!approved && (
|
||||||
<Button
|
<Button
|
||||||
|
@ -141,7 +192,42 @@ const ProviderShiftFormView = ({
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</Button.Group>
|
</Button.Group>
|
||||||
<Error error={pShiftRequestError}/>
|
)}
|
||||||
|
<List bulleted>
|
||||||
|
{!checkedIn && <List.Item>Pending Check In</List.Item>}{" "}
|
||||||
|
{checkedIn && (
|
||||||
|
<List.Item>
|
||||||
|
<strong>Checked In At:</strong>{" "}
|
||||||
|
{checkedIn.local(false).format("dddd, MMMM Do YYYY, h:mm a Z")}
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
{checkedOut && (
|
||||||
|
<List.Item>
|
||||||
|
<strong>Checked Out At:</strong>{" "}
|
||||||
|
{checkedOut.local(false).format("dddd, MMMM Do YYYY, h:mm a Z")}
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
</List>
|
||||||
|
{shift.chart && (
|
||||||
|
<Message>
|
||||||
|
<Message.Header>Chart</Message.Header>
|
||||||
|
{shift.chart}
|
||||||
|
</Message>
|
||||||
|
)}
|
||||||
|
{!checkedIn && <Button onClick={handleCheckInPShift}>Check In</Button>}
|
||||||
|
{checkedIn &&
|
||||||
|
!checkedOut && (
|
||||||
|
<Form onSubmit={handleCheckOutPShift}>
|
||||||
|
<label>Chart</label>
|
||||||
|
<TextArea
|
||||||
|
value={chart}
|
||||||
|
onChange={handleChangeChart}
|
||||||
|
placeholder="Chart"
|
||||||
|
/>
|
||||||
|
<Button>Check Out</Button>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
<Error error={pShiftRequestError} />
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -107,6 +107,10 @@ const ProviderShiftsView = ({
|
||||||
const client = employer.client || {};
|
const client = employer.client || {};
|
||||||
const price = getPriceFromPrice(result.price, user) || {};
|
const price = getPriceFromPrice(result.price, user) || {};
|
||||||
const workType = price.work_type || {};
|
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(
|
const min = duration(
|
||||||
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
|
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
|
||||||
"milliseconds"
|
"milliseconds"
|
||||||
|
@ -165,7 +169,25 @@ const ProviderShiftsView = ({
|
||||||
"No Name!"}{" "}
|
"No Name!"}{" "}
|
||||||
<a href={"mailto:" + client.email}>{client.email}</a>
|
<a href={"mailto:" + client.email}>{client.email}</a>
|
||||||
</Item.Description>
|
</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>
|
<Item.Extra>
|
||||||
|
{!checkedIn && (
|
||||||
<Button.Group floated="right">
|
<Button.Group floated="right">
|
||||||
{!approved && (
|
{!approved && (
|
||||||
<Button
|
<Button
|
||||||
|
@ -190,15 +212,16 @@ const ProviderShiftsView = ({
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</Button.Group>
|
</Button.Group>
|
||||||
|
)}
|
||||||
<Button
|
<Button
|
||||||
floated="right"
|
floated="right"
|
||||||
as={Link}
|
as={Link}
|
||||||
to={`/user/profile/provider/shifts/${result.uuid}`}
|
to={`/user/profile/provider/shifts/${result.uuid}`}
|
||||||
>
|
>
|
||||||
Details & Check In
|
Details{approved && !checkedIn && " & Check In"}
|
||||||
|
{approved && checkedIn && !checkedOut && " & Check Out"}
|
||||||
</Button>
|
</Button>
|
||||||
</Item.Extra>
|
</Item.Extra>
|
||||||
</Item.Content>
|
|
||||||
</Item>
|
</Item>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -4,6 +4,7 @@ export const SET_PSHIFT_REQUEST_ERROR = "SET_PSHIFT_REQUEST_ERROR";
|
||||||
export const CLEAR_PSHIFT_REQUEST_ERROR = "CLEAR_PSHIFT_REQUEST_ERROR";
|
export const CLEAR_PSHIFT_REQUEST_ERROR = "CLEAR_PSHIFT_REQUEST_ERROR";
|
||||||
export const SET_PSHIFT_REQUEST_SUCCESS = "SET_PSHIFT_REQUEST_SUCCESS";
|
export const SET_PSHIFT_REQUEST_SUCCESS = "SET_PSHIFT_REQUEST_SUCCESS";
|
||||||
export const CLEAR_PSHIFT_REQUEST_SUCCESS = "CLEAR_PSHIFT_REQUEST_SUCCESS";
|
export const CLEAR_PSHIFT_REQUEST_SUCCESS = "CLEAR_PSHIFT_REQUEST_SUCCESS";
|
||||||
|
export const SET_FORM_SHIFT_CHART = "SET_FORM_SHIFT_CHART";
|
||||||
export const SET_CLEAR_PSHIFT_STATE = "SET_CLEAR_PSHIFT_STATE";
|
export const SET_CLEAR_PSHIFT_STATE = "SET_CLEAR_PSHIFT_STATE";
|
||||||
|
|
||||||
// Saga PShift Action Constants
|
// Saga PShift Action Constants
|
||||||
|
|
|
@ -4,13 +4,15 @@ import {
|
||||||
SET_PSHIFT_REQUEST_SUCCESS,
|
SET_PSHIFT_REQUEST_SUCCESS,
|
||||||
CLEAR_PSHIFT_REQUEST_ERROR,
|
CLEAR_PSHIFT_REQUEST_ERROR,
|
||||||
CLEAR_PSHIFT_REQUEST_SUCCESS,
|
CLEAR_PSHIFT_REQUEST_SUCCESS,
|
||||||
|
SET_FORM_SHIFT_CHART,
|
||||||
SET_CLEAR_PSHIFT_STATE
|
SET_CLEAR_PSHIFT_STATE
|
||||||
} from "../constants/pShift.constants";
|
} from "../constants/pShift.constants";
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
isSendingPShiftRequest: false,
|
isSendingPShiftRequest: false,
|
||||||
pShiftRequestError: "",
|
pShiftRequestError: "",
|
||||||
pShiftRequestSuccess: ""
|
pShiftRequestSuccess: "",
|
||||||
|
chart: ""
|
||||||
};
|
};
|
||||||
|
|
||||||
function pShiftReducer(state = initialState, action) {
|
function pShiftReducer(state = initialState, action) {
|
||||||
|
@ -40,6 +42,11 @@ function pShiftReducer(state = initialState, action) {
|
||||||
...state,
|
...state,
|
||||||
pShiftRequestSuccess: ""
|
pShiftRequestSuccess: ""
|
||||||
};
|
};
|
||||||
|
case SET_FORM_SHIFT_CHART:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
chart: action.data
|
||||||
|
};
|
||||||
case SET_CLEAR_PSHIFT_STATE:
|
case SET_CLEAR_PSHIFT_STATE:
|
||||||
return {
|
return {
|
||||||
...initialState
|
...initialState
|
||||||
|
|
|
@ -67,7 +67,9 @@ export function* getPShiftFlow(request) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function* updatePShiftFlow(request) {
|
export function* updatePShiftFlow(request) {
|
||||||
|
if (!request.data.single) {
|
||||||
yield effects.put(clearPShiftRequestSuccess());
|
yield effects.put(clearPShiftRequestSuccess());
|
||||||
|
}
|
||||||
yield effects.put(clearPShiftRequestError());
|
yield effects.put(clearPShiftRequestError());
|
||||||
const wasSuccessful = yield effects.call(updatePShiftCall, request.data);
|
const wasSuccessful = yield effects.call(updatePShiftCall, request.data);
|
||||||
if (wasSuccessful) {
|
if (wasSuccessful) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user