Working provider check in & check out

2018-04-23 12:19:14 -06:00 · 2018-04-23 12:19:14 -06:00 · 4c639db50f
commit 4c639db50f
parent 805f20e040
7 changed files with 201 additions and 36 deletions
--- a/src/actions/pShift/reducer.actions.js
+++ b/src/actions/pShift/reducer.actions.js
@ -4,6 +4,7 @@ import {
  SET_PSHIFT_REQUEST_ERROR,
  CLEAR_PSHIFT_REQUEST_ERROR,
  CLEAR_PSHIFT_REQUEST_SUCCESS,
+  SET_FORM_SHIFT_CHART,
  SET_CLEAR_PSHIFT_STATE
 } from "../../constants/pShift.constants";
 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() {
  return {
    type: SET_CLEAR_PSHIFT_STATE
--- a/src/components/User/Client/ClientShifts.jsx
+++ b/src/components/User/Client/ClientShifts.jsx
@ -11,7 +11,9 @@ import {
  Pagination,
  Popup,
  Loader,
-  Label
+  Label,
+  List,
+  Message
 } from "semantic-ui-react";
 import {
  getCShiftsRequest,
@ -114,6 +116,10 @@ const ClientShiftsView = ({
              const provider = employee.provider || {};
              const price = getPriceFromPrice(result.price, user) || {};
              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(
                utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
                "milliseconds"
@ -173,7 +179,7 @@ const ClientShiftsView = ({
                      <a href={"mailto:" + provider.email}>{provider.email}</a>
                    </Item.Description>
                  </Item.Content>
-                  {result.actual_start === null && (
+                  {!checkedIn && (
                    <Item.Extra>
                      <Button
                        primary
@ -207,6 +213,38 @@ const ClientShiftsView = ({
                      />
                    </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>
              );
            })}
--- a/src/components/User/Provider/ProviderShift.jsx
+++ b/src/components/User/Provider/ProviderShift.jsx
@ -9,9 +9,14 @@ import {
  Label,
  List,
  Loader,
-  Message
+  Message,
+  TextArea,
+  Form
 } from "semantic-ui-react";
-import { setClearPShiftState } from "../../../actions/pShift/reducer.actions";
+import {
+  setClearPShiftState,
+  setFormShiftChart
+} from "../../../actions/pShift/reducer.actions";
 import {
  getPShiftRequest,
  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() {
    const {
      isSendingPShiftRequest,
      pShiftRequestError,
      pShiftRequestSuccess,
-      selfUser
+      selfUser,
+      chart
    } = this.props;

    if (!selfUser.provider) {
@ -54,8 +90,12 @@ class ProviderShift extends Component {
        isSendingPShiftRequest={isSendingPShiftRequest}
        pShiftRequestError={pShiftRequestError}
        shift={pShiftRequestSuccess}
+        chart={chart}
        user={selfUser}
        handleChangePShiftApproval={this.handleChangePShiftApproval}
+        handleChangeChart={this.handleChangeChart}
+        handleCheckInPShift={this.handleCheckInPShift}
+        handleCheckOutPShift={this.handleCheckOutPShift}
      />
    );
  }
@ -65,13 +105,19 @@ const ProviderShiftFormView = ({
  isSendingPShiftRequest,
  pShiftRequestError,
  shift,
+  chart,
  user,
-  handleChangePShiftApproval
+  handleChangeChart,
+  handleChangePShiftApproval,
+  handleCheckInPShift,
+  handleCheckOutPShift
 }) => {
  const employer = getEmployerFromPrice(shift.price, user) || {};
  const client = employer.client || {};
  const workType = getWorkTypeFromPrice(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(
    utc(shift.set_end, ISO_8601) - utc(shift.set_start, ISO_8601),
    "milliseconds"
@ -88,7 +134,11 @@ const ProviderShiftFormView = ({
    <Container>
      <Header>Shift Details</Header>
      <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"}
        {pending && "Approval Pending"}
        {rejected && "Rejected"}
@ -123,25 +173,61 @@ const ProviderShiftFormView = ({
          <p>{shift.description}</p>
        </Message>
      )}
-      <Button.Group>
-        {!approved && (
-          <Button
-            color="green"
-            onClick={handleChangePShiftApproval(shift.uuid, true)}
-          >
-            Approve
-          </Button>
+      {!checkedIn && (
+        <Button.Group>
+          {!approved && (
+            <Button
+              color="green"
+              onClick={handleChangePShiftApproval(shift.uuid, true)}
+            >
+              Approve
+            </Button>
+          )}
+          {!rejected && (
+            <Button
+              color="red"
+              onClick={handleChangePShiftApproval(shift.uuid, false)}
+            >
+              Reject
+            </Button>
+          )}
+        </Button.Group>
+      )}
+      <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>
        )}
-        {!rejected && (
-          <Button
-            color="red"
-            onClick={handleChangePShiftApproval(shift.uuid, false)}
-          >
-            Reject
-          </Button>
+        {checkedOut && (
+          <List.Item>
+            <strong>Checked Out At:</strong>{" "}
+            {checkedOut.local(false).format("dddd, MMMM Do YYYY, h:mm a Z")}
+          </List.Item>
        )}
-      </Button.Group>
-      <Error error={pShiftRequestError}/>
+      </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>
  );
 };
--- a/src/components/User/Provider/ProviderShifts.jsx
+++ b/src/components/User/Provider/ProviderShifts.jsx
@ -107,6 +107,10 @@ const ProviderShiftsView = ({
              const client = employer.client || {};
              const price = getPriceFromPrice(result.price, user) || {};
              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(
                utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
                "milliseconds"
@ -165,7 +169,25 @@ const ProviderShiftsView = ({
                        "No Name!"}{" "}
                      <a href={"mailto:" + client.email}>{client.email}</a>
                    </Item.Description>
-                    <Item.Extra>
+                    {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 && (
                      <Button.Group floated="right">
                        {!approved && (
                          <Button
@ -190,15 +212,16 @@ const ProviderShiftsView = ({
                          </Button>
                        )}
                      </Button.Group>
-                      <Button
-                        floated="right"
-                        as={Link}
-                        to={`/user/profile/provider/shifts/${result.uuid}`}
-                      >
-                        Details &amp; Check In
-                      </Button>
-                    </Item.Extra>
-                  </Item.Content>
+                    )}
+                    <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>
                </Item>
              );
            })}
--- a/src/constants/pShift.constants.js
+++ b/src/constants/pShift.constants.js
@ -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 SET_PSHIFT_REQUEST_SUCCESS = "SET_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";

 // Saga PShift Action Constants
--- a/src/reducers/pShiftReducer.js
+++ b/src/reducers/pShiftReducer.js
@ -4,13 +4,15 @@ import {
  SET_PSHIFT_REQUEST_SUCCESS,
  CLEAR_PSHIFT_REQUEST_ERROR,
  CLEAR_PSHIFT_REQUEST_SUCCESS,
+  SET_FORM_SHIFT_CHART,
  SET_CLEAR_PSHIFT_STATE
 } from "../constants/pShift.constants";

 const initialState = {
  isSendingPShiftRequest: false,
  pShiftRequestError: "",
-  pShiftRequestSuccess: ""
+  pShiftRequestSuccess: "",
+  chart: ""
 };

 function pShiftReducer(state = initialState, action) {
@ -40,6 +42,11 @@ function pShiftReducer(state = initialState, action) {
        ...state,
        pShiftRequestSuccess: ""
      };
+    case SET_FORM_SHIFT_CHART:
+      return {
+        ...state,
+        chart: action.data
+      };
    case SET_CLEAR_PSHIFT_STATE:
      return {
        ...initialState
--- a/src/sagas/pShift.sagas.js
+++ b/src/sagas/pShift.sagas.js
@ -67,7 +67,9 @@ export function* getPShiftFlow(request) {
 }

 export function* updatePShiftFlow(request) {
-  yield effects.put(clearPShiftRequestSuccess());
+  if (!request.data.single) {
+    yield effects.put(clearPShiftRequestSuccess());
+  }
  yield effects.put(clearPShiftRequestError());
  const wasSuccessful = yield effects.call(updatePShiftCall, request.data);
  if (wasSuccessful) {