working employee and price selector

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 && (