Working provider check in & check out

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

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

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>
+      {!checkedIn && (
-        {!approved && (
+        <Button.Group>
-          <Button
+          {!approved && (
-            color="green"
+            <Button
-            onClick={handleChangePShiftApproval(shift.uuid, true)}
+              color="green"
-          >
+              onClick={handleChangePShiftApproval(shift.uuid, true)}
-            Approve
+            >
-          </Button>
+              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>
+        )}
+        {checkedOut && (
+          <List.Item>
+            <strong>Checked Out At:</strong>{" "}
+            {checkedOut.local(false).format("dddd, MMMM Do YYYY, h:mm a Z")}
+          </List.Item>
         )}
-        {!rejected && (
+      </List>
-          <Button
+      {shift.chart && (
-            color="red"
+        <Message>
-            onClick={handleChangePShiftApproval(shift.uuid, false)}
+          <Message.Header>Chart</Message.Header>
-          >
+          {shift.chart}
-            Reject
+        </Message>
-          </Button>
+      )}
+      {!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>
         )}
-      </Button.Group>
+      <Error error={pShiftRequestError} />
-      <Error error={pShiftRequestError}/>
     </Container>
   );
 };

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"
+                    <Button
-                        as={Link}
+                      floated="right"
-                        to={`/user/profile/provider/shifts/${result.uuid}`}
+                      as={Link}
-                      >
+                      to={`/user/profile/provider/shifts/${result.uuid}`}
-                        Details &amp; Check In
+                    >
-                      </Button>
+                      Details{approved && !checkedIn && " & Check In"}
-                    </Item.Extra>
+                      {approved && checkedIn && !checkedOut && " & Check Out"}
-                  </Item.Content>
+                    </Button>
+                  </Item.Extra>
                 </Item>
               );
             })}

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

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

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