client filters

src/components/User/Client/ClientShifts.jsx

@@ -18,7 +18,10 @@ import {
 } from "semantic-ui-react";
 import {
   setCShiftPage,
-  setCShiftApprovalFilter
+  setCShiftApprovalFilter,
+  setCShiftCompletedFilter,
+  setCShiftProviderFilter,
+  setCShiftWorkTypeFilter
 } from "../../../actions/cShift/reducer.actions";
 import {
   getCShiftsRequest,
@@ -39,6 +42,9 @@ class ClientShifts extends Component {
       getCShiftsRequest({
         page: this.props.page,
         approved: this.props.approvalFilter,
+        completed: this.props.completedFilter,
+        manage: this.props.providerFilter,
+        work_type: this.props.workTypeFilter,
         page_size: this.state.pageSize
       })
     );
@@ -49,6 +55,8 @@ class ClientShifts extends Component {
       getCShiftsRequest({
         page: activePage,
         approved: this.props.approvalFilter,
+        manage: this.props.providerFilter,
+        work_type: this.props.workTypeFilter,
         page_size: this.state.pageSize
       })
     );
@@ -60,6 +68,9 @@ class ClientShifts extends Component {
       getCShiftsRequest({
         page: 1,
         approved: value,
+        completed: this.props.completedFilter,
+        manage: this.props.providerFilter,
+        work_type: this.props.workTypeFilter,
         page_size: this.state.pageSize
       })
     );
@@ -67,6 +78,51 @@ class ClientShifts extends Component {
     this.props.dispatch(setCShiftPage(1));
   };
 
+  handleChangeCompletedFilter = (event, { value }) => {
+    this.props.dispatch(
+      getCShiftsRequest({
+        page: 1,
+        approved: this.props.approvalFilter,
+        completed: value,
+        manage: this.props.providerFilter,
+        work_type: this.props.workTypeFilter,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setCShiftCompletedFilter(value));
+    this.props.dispatch(setCShiftPage(1));
+  };
+
+  handleChangeProviderFilter = (event, { value }) => {
+    this.props.dispatch(
+      getCShiftsRequest({
+        page: 1,
+        approved: this.props.approvalFilter,
+        completed: this.props.completedFilter,
+        manage: value,
+        work_type: this.props.workTypeFilter,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setCShiftProviderFilter(value));
+    this.props.dispatch(setCShiftPage(1));
+  };
+
+  handleChangeWorkTypeFilter = (event, {value}) => {
+    this.props.dispatch(
+      getCShiftsRequest({
+        page: 1,
+        approved: this.props.approvalFilter,
+        completed: this.props.completedFilter,
+        manage: this.props.manageFilter,
+        work_type: value,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setCShiftWorkTypeFilter(value));
+    this.props.dispatch(setCShiftPage(1));
+  }
+
   deleteCShift = uuid => {
     this.props.dispatch(deleteCShiftRequest(uuid));
   };
@@ -77,7 +133,10 @@ class ClientShifts extends Component {
       cShiftRequestSuccess,
       selfUser,
       page,
-      approvalFilter
+      approvalFilter,
+      completedFilter,
+      providerFilter,
+      workTypeFilter
     } = this.props;
     const { pageSize } = this.state;
     if (selfUser.client) {
@@ -87,10 +146,16 @@ class ClientShifts extends Component {
           cShiftRequestSuccess={cShiftRequestSuccess}
           page={page}
           approvalFilter={approvalFilter}
+          completedFilter={completedFilter}
+          providerFilter={providerFilter}
+          workTypeFilter={workTypeFilter}
           pageSize={pageSize}
           user={selfUser}
           handlePaginationChange={this.handlePaginationChange}
           handleChangeApprovalFilter={this.handleChangeApprovalFilter}
+          handleChangeCompletedFilter={this.handleChangeCompletedFilter}
+          handleChangeProviderFilter={this.handleChangeProviderFilter}
+          handleChangeWorkTypeFilter={this.handleChangeWorkTypeFilter}
           deleteCShift={this.deleteCShift}
         />
       );
@@ -110,9 +175,15 @@ const ClientShiftsView = ({
   user,
   page,
   approvalFilter,
+  completedFilter,
+  providerFilter,
+  workTypeFilter,
   pageSize,
   handlePaginationChange,
   handleChangeApprovalFilter,
+  handleChangeCompletedFilter,
+  handleChangeProviderFilter,
+  handleChangeWorkTypeFilter,
   deleteCShift
 }) => {
   const { count = 0, results = [] } = cShiftRequestSuccess;
@@ -122,6 +193,38 @@ const ClientShiftsView = ({
     { text: "Pending", value: "" },
     { text: "All", value: null }
   ];
+  const completedOptions = [
+    { text: "Completed", value: true },
+    { text: "Incomplete", value: false },
+    { text: "All", value: null }
+  ];
+  const manageOptions = (user.client.employees || []).map(employee => {
+    const name =
+      `${employee.provider.first_name} ${employee.provider.last_name}`.trim() ||
+      "No Name";
+    return {
+      text: `${name} <${employee.provider.email}>`,
+      value: employee.uuid
+    };
+  });
+  manageOptions.push({ text: `All`, value: null });
+  const workTypeOptions = (user.client.work_types || []).map(workType => {
+    return {
+      text: `${workType.label}`,
+      value: workType.uuid,
+      label: (
+        <Label
+          circular
+          empty
+          style={{
+            backgroundColor: workType.color,
+            borderColor: workType.color
+          }}
+        />
+      )
+    };
+  });
+  workTypeOptions.push({ text: `All`, value: null });
   const OLD_PEOPLE_TIME_FORMAT = "dddd, MMMM Do YYYY, h:mm a ";
   return (
     <Container>
@@ -139,7 +242,7 @@ const ClientShiftsView = ({
           </Button>
         </Segment>
         <Segment textAlign="right">
-          {"Filter by Approval: "}
+          {"Filter by Approval "}
           <Dropdown
             inline
             placeholder={approvalFilter === null ? `All` : `Pending`}
@@ -147,6 +250,30 @@ const ClientShiftsView = ({
             onChange={handleChangeApprovalFilter}
             value={approvalFilter}
           />
+          {" and Completed "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={completedOptions}
+            onChange={handleChangeCompletedFilter}
+            value={completedFilter}
+          />
+          {" and Provider "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={manageOptions}
+            onChange={handleChangeProviderFilter}
+            value={providerFilter}
+          />
+          {" and Work Type "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={workTypeOptions}
+            onChange={handleChangeWorkTypeFilter}
+            value={workTypeFilter}
+          />
         </Segment>
       </Segment.Group>
       {!!isSendingCShiftRequest && <Loader content="Loading" active />}