working employee and price selector

src/actions/cShift/reducer.actions.js

@@ -0,0 +1,65 @@
+import {
+  IS_SENDING_CSHIFT_REQUEST,
+  SET_CSHIFT_REQUEST_ERROR,
+  CLEAR_CSHIFT_REQUEST_ERROR,
+  SET_CSHIFT_REQUEST_SUCCESS,
+  CLEAR_CSHIFT_REQUEST_SUCCESS,
+  SET_FORM_EMPLOYEE_UUID,
+  SET_FORM_PRICE_UUID,
+  SET_CLEAR_CSHIFT_STATE
+} from "../../constants/cShift.constants";
+import { parseError } from "../common.actions";
+
+export function isSendingCShiftRequest(sendingRequest) {
+  return {
+    type: IS_SENDING_CSHIFT_REQUEST,
+    data: sendingRequest
+  };
+}
+
+export function setCShiftRequestError(exception) {
+  let error = parseError(exception);
+  return {
+    type: SET_CSHIFT_REQUEST_ERROR,
+    data: error
+  };
+}
+
+export function clearCShiftRequestError() {
+  return {
+    type: CLEAR_CSHIFT_REQUEST_ERROR
+  };
+}
+
+export function setCShiftRequestSuccess(response) {
+  return {
+    type: SET_CSHIFT_REQUEST_SUCCESS,
+    data: response.detail || response
+  };
+}
+
+export function clearCShiftRequestSuccess() {
+  return {
+    type: CLEAR_CSHIFT_REQUEST_SUCCESS
+  };
+}
+
+export function setFormEmployeeUUID(uuid) {
+  return {
+    type: SET_FORM_EMPLOYEE_UUID,
+    data: uuid
+  };
+}
+
+export function setFormPriceUUID(uuid) {
+  return {
+    type: SET_FORM_PRICE_UUID,
+    data: uuid
+  };
+}
+
+export function setClearCshiftState() {
+  return {
+    type: SET_CLEAR_CSHIFT_STATE
+  };
+}

src/components/User/Client/ClientAddShiftForm.jsx

@@ -7,41 +7,109 @@ import {
   Form,
   Header,
   Input,
+  Label,
   TextArea
 } from "semantic-ui-react";
 
+import {
+  clearCShiftRequestError,
+  clearCShiftRequestSuccess,
+  setFormEmployeeUUID,
+  setFormPriceUUID
+} from "../../../actions/cShift/reducer.actions";
+
 class ClientAddShiftForm extends Component {
+  componentWillMount = () => {
+    this.props.dispatch(clearCShiftRequestError());
+    this.props.dispatch(clearCShiftRequestSuccess());
+    this.props.dispatch(setFormEmployeeUUID(""));
+    this.props.dispatch(setFormPriceUUID(""));
+  };
+
+  changeSelectedEmployee = (e, { value }) => {
+    if (value !== this.props.employeeUUID) {
+      this.props.dispatch(setFormPriceUUID(""));
+    }
+    this.props.dispatch(setFormEmployeeUUID(value));
+  };
+
+  changeSelectedPrice = (e, { value }) => {
+    this.props.dispatch(setFormPriceUUID(value));
+  };
+
   render() {
-    const { selfUser } = this.props;
+    const { selfUser, employeeUUID, priceUUID } = this.props;
 
     if (!selfUser.client) {
       return <Redirect to="/" />;
     }
 
     const employeeChoices = selfUser.client.employees
-      .filter(employee => !employee.deleted)
-      .map((val, idx, arr) => ({
-        key: val.uuid,
-        value: val.uuid,
-        text: val.provider.email
+      .filter(employee => !employee.deleted && !!employee.approved)
+      .map(({ uuid, provider }) => ({
+        key: uuid,
+        value: uuid,
+        text: provider.email
       }));
-
-    const priceChoices = selfUser.client;
-
+    const priceChoices = [];
+    if (employeeUUID) {
+      const employee = selfUser.client.employees.find(emp => {
+        return emp && emp.uuid === employeeUUID;
+      });
+      priceChoices.push(
+        ...employee.prices
+          .filter(price => !price.deleted)
+          .map(({ amount, uuid, work_type }) => ({
+            key: uuid,
+            value: uuid,
+            text: work_type.label,
+            content: (
+              <Header>
+                <Label
+                  circular
+                  empty
+                  style={{
+                    backgroundColor: work_type.color,
+                    borderColor: work_type.color
+                  }}
+                />
+                {work_type.label}
+                <Header.Subheader
+                  style={{ paddingLeft: "2em" }}
+                  content={`Hourly Rate: ${amount}`}
+                />
+              </Header>
+            )
+          }))
+      );
+    }
     return (
       <ClientAddShiftFormView
         user={selfUser}
         employeeChoices={employeeChoices}
+        priceChoices={priceChoices}
+        employeeUUID={employeeUUID}
+        priceUUID={priceUUID}
+        changeSelectedEmployee={this.changeSelectedEmployee}
+        changeSelectedPrice={this.changeSelectedPrice}
       />
     );
   }
 }
 
 function mapStateToProps(state) {
-  return { ...state.employee, selfUser: state.user.selfUser };
+  return { ...state.cShift, selfUser: state.user.selfUser };
 }
 
-const ClientAddShiftFormView = ({ employeeChoices, user }) => (
+const ClientAddShiftFormView = ({
+  user,
+  employeeChoices,
+  priceChoices,
+  employeeUUID,
+  priceUUID,
+  changeSelectedEmployee,
+  changeSelectedPrice
+}) => (
   <Container>
     <Header>Schedule a Shift</Header>
     <Form>
@@ -50,13 +118,31 @@ const ClientAddShiftFormView = ({ employeeChoices, user }) => (
           <label>Employee</label>
           <Dropdown
             placeholder="Select employee"
+            openOnFocus
+            closeOnBlur
             selection
+            fluid
+            search
             options={employeeChoices}
+            noResultsMessage="No approved employees found."
+            onChange={changeSelectedEmployee}
+            value={employeeUUID}
           />
         </Form.Field>
         <Form.Field>
           <label>Price</label>
-          <Input placeholder="Price" type="text" />
+          <Dropdown
+            placeholder="Select price"
+            openOnFocus
+            closeOnBlur
+            selection
+            fluid
+            search
+            options={priceChoices}
+            noResultsMessage="No prices for given employee."
+            onChange={changeSelectedPrice}
+            value={priceUUID}
+          />
         </Form.Field>
         <Form.Field>
           <label>Time</label>

src/components/User/Client/ClientProviders.jsx

@@ -83,6 +83,14 @@ const ClientProvidersView = ({ user, deleteEmployee, deletePrice }) => (
                     <Card.Description>
                       {employee.provider.userinfo && (
                         <List>
+                          {employee.provider.email && (
+                            <List.Item>
+                              Email:{" "}
+                              <a href={`mailto:${employee.provider.email}`}>
+                                {employee.provider.email}
+                              </a>
+                            </List.Item>
+                          )}
                           {employee.provider.userinfo.phone_number && (
                             <List.Item>
                               Phone Number:{" "}
@@ -99,12 +107,16 @@ const ClientProvidersView = ({ user, deleteEmployee, deletePrice }) => (
                   color={
                     employee.approved === null
                       ? "grey"
-                      : !!employee.approved ? "green" : "red"
+                      : !!employee.approved
+                        ? "green"
+                        : "red"
                   }
                 >
                   {employee.approved === null
                     ? "Pending"
-                    : !!employee.approved ? "Approved" : "Ended"}
+                    : !!employee.approved
+                      ? "Approved"
+                      : "Ended"}
                 </Label>
               </Card.Content>
               {employee.approved && (

src/components/User/Provider/ProviderClients.jsx

@@ -65,6 +65,14 @@ const ProviderClientsView = ({ user, updateEmployer }) => (
                     <Card.Description>
                       {employer.client.userinfo && (
                         <List>
+                          {employer.client.email && (
+                            <List.Item>
+                              Email:{" "}
+                              <a href={`mailto:${employer.client.email}`}>
+                                {employer.client.email}
+                              </a>
+                            </List.Item>
+                          )}
                           {employer.client.userinfo.phone_number && (
                             <List.Item>
                               Phone Number:{" "}
@@ -81,12 +89,16 @@ const ProviderClientsView = ({ user, updateEmployer }) => (
                   color={
                     employer.approved === null
                       ? "grey"
-                      : !!employer.approved ? "green" : "red"
+                      : !!employer.approved
+                        ? "green"
+                        : "red"
                   }
                 >
                   {employer.approved === null
                     ? "Pending"
-                    : !!employer.approved ? "Approved" : "Ended"}
+                    : !!employer.approved
+                      ? "Approved"
+                      : "Ended"}
                 </Label>
               </Card.Content>
               {employer.approved && (

src/constants/cShift.constants.js

@@ -0,0 +1,13 @@
+// Reducer CShift Action Constants
+export const IS_SENDING_CSHIFT_REQUEST = "IS_SENDING_CSHIFT_REQUEST";
+export const SET_CSHIFT_REQUEST_ERROR = "SET_CSHIFT_REQUEST_ERROR";
+export const CLEAR_CSHIFT_REQUEST_ERROR = "CLEAR_CSHIFT_REQUEST_ERROR";
+export const SET_CSHIFT_REQUEST_SUCCESS = "SET_CSHIFT_REQUEST_SUCCESS";
+export const CLEAR_CSHIFT_REQUEST_SUCCESS = "CLEAR_CSHIFT_REQUEST_SUCCESS";
+export const SET_FORM_EMPLOYEE_UUID = "SET_FORM_EMPLOYEE_UUID";
+export const SET_FORM_PRICE_UUID = "SET_FORM_PRICE_UUID";
+
+export const SET_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE";
+
+// Saga CShift Action Constants
+export const CREATE_MULTIPLE_CSHIFT_REQUEST = "CREATE_MULTIPLE_CSHIFT_REQUEST";

src/reducers/cShiftReducer.js

@@ -0,0 +1,66 @@
+import {
+  IS_SENDING_CSHIFT_REQUEST,
+  SET_CSHIFT_REQUEST_ERROR,
+  CLEAR_CSHIFT_REQUEST_ERROR,
+  SET_CSHIFT_REQUEST_SUCCESS,
+  CLEAR_CSHIFT_REQUEST_SUCCESS,
+  SET_FORM_EMPLOYEE_UUID,
+  SET_FORM_PRICE_UUID,
+  SET_CLEAR_CSHIFT_STATE
+} from "../constants/cShift.constants";
+
+const initialState = {
+  isSendingCShiftRequest: false,
+  cShiftRequestError: "",
+  cShiftRequestSuccess: "",
+  employeeUUID: "",
+  priceUUID: ""
+};
+
+function cShiftReducer(state = initialState, action) {
+  switch (action.type) {
+    case IS_SENDING_CSHIFT_REQUEST:
+      return {
+        ...state,
+        isSendingCShiftRequest: action.data
+      };
+    case SET_CSHIFT_REQUEST_ERROR:
+      return {
+        ...state,
+        cShiftRequestError: action.data
+      };
+    case CLEAR_CSHIFT_REQUEST_ERROR:
+      return {
+        ...state,
+        cShiftRequestError: ""
+      };
+    case SET_CSHIFT_REQUEST_SUCCESS:
+      return {
+        ...state,
+        cShiftRequestSuccess: action.data
+      };
+    case CLEAR_CSHIFT_REQUEST_SUCCESS:
+      return {
+        ...state,
+        cShiftRequestSuccess: ""
+      };
+    case SET_FORM_EMPLOYEE_UUID:
+      return {
+        ...state,
+        employeeUUID: action.data
+      };
+    case SET_FORM_PRICE_UUID:
+      return {
+        ...state,
+        priceUUID: action.data
+      };
+    case SET_CLEAR_CSHIFT_STATE:
+      return {
+        ...initialState
+      };
+    default:
+      return state;
+  }
+}
+
+export default cShiftReducer;

src/reducers/index.js

@@ -5,6 +5,7 @@ import worktypeReducer from "./worktypeReducer";
 import employeeReducer from "./employeeReducer";
 // import employerReducer from "./employerReducer"; // unused
 import priceReducer from "./priceReducer";
+import cShiftReducer from "./cShiftReducer";
 
 const reducer = combineReducers({
   auth: authReducer,
@@ -12,7 +13,8 @@ const reducer = combineReducers({
   worktype: worktypeReducer,
   employee: employeeReducer,
   // employer: employerReducer // unused
-  price: priceReducer
+  price: priceReducer,
+  cShift: cShiftReducer
 });
 
 export default reducer;