Working delete shifts functionality

src/components/User/Client/ClientAddShiftForm.jsx

@@ -162,7 +162,7 @@ class ClientAddShiftForm extends Component {
         priceUUID={priceUUID}
         startTime={startTime}
         duration={duration}
-        note={note}
+        note={note || ""}
         selectedShiftDates={selectedShiftDates}
         changeSelectedEmployee={this.changeSelectedEmployee}
         changeSelectedPrice={this.changeSelectedPrice}

src/components/User/Client/ClientEditShiftForm.jsx

@@ -111,7 +111,6 @@ class ClientEditShiftForm extends Component {
         description: note ? note : undefined
       });
     }
-    console.log({ ...postRequestBodies[0], uuid: cShiftUUID })
     this.props.dispatch(
       editCShiftRequest({ ...postRequestBodies[0], uuid: cShiftUUID })
     );
@@ -196,7 +195,7 @@ class ClientEditShiftForm extends Component {
         priceUUID={priceUUID}
         startTime={startTime}
         duration={duration}
-        note={note}
+        note={note || ""}
         selectedShiftDates={selectedShiftDates}
         changeSelectedEmployee={this.changeSelectedEmployee}
         changeSelectedPrice={this.changeSelectedPrice}

src/components/User/Client/ClientShiftFormView.jsx

@@ -72,6 +72,7 @@ export const ClientShiftFormView = ({
             selection
             fluid
             search
+            disabled={!!isEditing}
             noResultsMessage="No approved employees found."
             value={employeeUUID}
           />
@@ -85,7 +86,7 @@ export const ClientShiftFormView = ({
             selection
             fluid
             search
-            disabled={!employeeUUID}
+            disabled={!employeeUUID || !!isEditing}
             noResultsMessage="No prices for given employee."
             value={priceUUID}
           />
@@ -99,7 +100,7 @@ export const ClientShiftFormView = ({
             showTimeSelectOnly
             timeIntervals={30}
             dateFormat="LT Z"
-            timeFormat="hh:mm"
+            timeFormat="h:mm a"
             placeholderText="Select shift start time"
           />
         </Form.Field>

src/components/User/Client/ClientShiftShared.js

@@ -11,3 +11,29 @@ export const getEmployeeFromPrice = (priceUUID, selfUser) => {
   });
   return matchEmployee;
 };
+
+export const getWorkTypeFromPrice = (priceUUID, selfUser) => {
+  const employees = selfUser && selfUser.client && selfUser.client.employees;
+  let matchWorkType = null;
+  employees.forEach(employee => {
+    employee.prices.forEach(price => {
+      if (price.uuid === priceUUID) {
+        matchWorkType = price.work_type;
+      }
+    });
+  });
+  return matchWorkType;
+};
+
+export const getPriceFromPrice = (priceUUID, selfUser) => {
+  const employees = selfUser && selfUser.client && selfUser.client.employees;
+  let matchPrice = null;
+  employees.forEach(employee => {
+    employee.prices.forEach(price => {
+      if (price.uuid === priceUUID) {
+        matchPrice = price;
+      }
+    });
+  });
+  return matchPrice;
+};

src/components/User/Client/ClientShifts.jsx

@@ -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" }}>