Added provider filtering

src/components/User/Provider/ProviderShifts.jsx

@@ -19,7 +19,10 @@ import {
 } from "./ProviderShiftsShared";
 import {
   setPShiftPage,
-  setPShiftApprovalFilter
+  setPShiftApprovalFilter,
+  setPShiftCompletedFilter,
+  setPShiftClientFilter,
+  setPShiftWorkTypeFilter
 } from "../../../actions/pShift/reducer.actions";
 import {
   getPShiftsRequest,
@@ -39,6 +42,9 @@ class ProviderShifts extends Component {
       getPShiftsRequest({
         page: this.props.page,
         approved: this.props.approvalFilter,
+        completed: this.props.completedFilter,
+        manage: this.props.clientFilter,
+        work_type: this.props.workTypeFilter,
         page_size: this.state.pageSize
       })
     );
@@ -49,6 +55,9 @@ class ProviderShifts extends Component {
       getPShiftsRequest({
         page: activePage,
         approved: this.props.approvalFilter,
+        completed: this.props.completedFilter,
+        manage: this.props.clientFilter,
+        work_type: this.props.workTypeFilter,
         page_size: this.state.pageSize
       })
     );
@@ -60,6 +69,9 @@ class ProviderShifts extends Component {
       getPShiftsRequest({
         page: 1,
         approved: value,
+        completed: this.props.completedFilter,
+        manage: this.props.clientFilter,
+        work_type: this.props.workTypeFilter,
         page_size: this.state.pageSize
       })
     );
@@ -67,6 +79,51 @@ class ProviderShifts extends Component {
     this.props.dispatch(setPShiftPage(1));
   };
 
+  handleChangeCompletedFilter = (event, { value }) => {
+    this.props.dispatch(
+      getPShiftsRequest({
+        page: 1,
+        approved: this.props.approvalFilter,
+        completed: value,
+        manage: this.props.clientFilter,
+        work_type: this.props.workTypeFilter,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setPShiftCompletedFilter(value));
+    this.props.dispatch(setPShiftPage(1));
+  };
+
+  handleChangeClientFilter = (event, { value }) => {
+    this.props.dispatch(
+      getPShiftsRequest({
+        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(setPShiftClientFilter(value));
+    this.props.dispatch(setPShiftPage(1));
+  };
+
+  handleChangeWorkTypeFilter = (event, { value }) => {
+    this.props.dispatch(
+      getPShiftsRequest({
+        page: 1,
+        approved: this.props.approvalFilter,
+        completed: this.props.completedFilter,
+        manage: this.props.clientFilter,
+        work_type: value,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setPShiftWorkTypeFilter(value));
+    this.props.dispatch(setPShiftPage(1));
+  };
+
   handleChangePShiftApproval = (uuid, approved) => {
     return () => {
       this.props.dispatch(
@@ -81,7 +138,10 @@ class ProviderShifts extends Component {
       pShiftRequestSuccess,
       selfUser,
       page,
-      approvalFilter
+      approvalFilter,
+      completedFilter,
+      clientFilter,
+      workTypeFilter
     } = this.props;
     const { pageSize } = this.state;
     if (selfUser.provider) {
@@ -91,10 +151,16 @@ class ProviderShifts extends Component {
           pShiftRequestSuccess={pShiftRequestSuccess}
           page={page}
           approvalFilter={approvalFilter}
+          completedFilter={completedFilter}
+          clientFilter={clientFilter}
+          workTypeFilter={workTypeFilter}
           pageSize={pageSize}
           user={selfUser}
-          handleChangeApprovalFilter={this.handleChangeApprovalFilter}
           handlePaginationChange={this.handlePaginationChange}
+          handleChangeApprovalFilter={this.handleChangeApprovalFilter}
+          handleChangeCompletedFilter={this.handleChangeCompletedFilter}
+          handleChangeClientFilter={this.handleChangeClientFilter}
+          handleChangeWorkTypeFilter={this.handleChangeWorkTypeFilter}
           handleChangePShiftApproval={this.handleChangePShiftApproval}
         />
       );
@@ -114,9 +180,15 @@ const ProviderShiftsView = ({
   user,
   page,
   approvalFilter,
+  completedFilter,
+  clientFilter,
+  workTypeFilter,
   pageSize,
-  handleChangeApprovalFilter,
   handlePaginationChange,
+  handleChangeApprovalFilter,
+  handleChangeCompletedFilter,
+  handleChangeClientFilter,
+  handleChangeWorkTypeFilter,
   handleChangePShiftApproval
 }) => {
   const OLD_PEOPLE_TIME_FORMAT = "dddd, MMMM Do YYYY, h:mm a";
@@ -127,12 +199,52 @@ const ProviderShiftsView = ({
     { text: "Pending", value: "" },
     { text: "All", value: null }
   ];
+  const completedOptions = [
+    { text: "Completed", value: true },
+    { text: "Incomplete", value: false },
+    { text: "All", value: null }
+  ];
+  const manageOptions = (user.provider.employers || []).map(employer => {
+    const name =
+      `${employer.client.first_name} ${employer.client.last_name}`.trim() ||
+      "No Name";
+    return {
+      text: `${name} <${employer.client.email}>`,
+      value: employer.uuid
+    };
+  });
+  manageOptions.push({ text: `All`, value: null });
+  const workTypeMultiOptions = [];
+  (user.provider.employers || []).forEach(employer => {
+    (employer.prices || []).forEach(price => {
+      workTypeMultiOptions.push({
+        value: price.work_type.uuid,
+        text: price.work_type.label,
+        label: (
+          <Label
+            circular
+            empty
+            style={{
+              backgroundColor: price.work_type.color,
+              borderColor: price.work_type.color
+            }}
+          />
+        )
+      });
+    });
+  });
+  workTypeMultiOptions.push({ text: `All`, value: null });
+  // dedup
+  const seen = new Set();
+  const workTypeOptions = workTypeMultiOptions.filter(option => {
+    return seen.has(option.value) ? false : seen.add(option.value);
+  });
   return (
     <Container>
       <Header>Shifts</Header>
       <Segment.Group horizontal>
         <Segment>
-          {"Filter by Approval: "}
+          {"Filter by Approval "}
           <Dropdown
             inline
             placeholder={approvalFilter === null ? `All` : `Pending`}
@@ -140,6 +252,30 @@ const ProviderShiftsView = ({
             onChange={handleChangeApprovalFilter}
             value={approvalFilter}
           />
+          {" and Completed "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={completedOptions}
+            onChange={handleChangeCompletedFilter}
+            value={completedFilter}
+          />
+          {" and Client "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={manageOptions}
+            onChange={handleChangeClientFilter}
+            value={clientFilter}
+          />
+          {" and Work Type "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={workTypeOptions}
+            onChange={handleChangeWorkTypeFilter}
+            value={workTypeFilter}
+          />
         </Segment>
       </Segment.Group>
       {!!isSendingPShiftRequest && <Loader content="Loading" active />}