Added provider filtering

src/actions/pShift/reducer.actions.js

@@ -7,6 +7,9 @@ import {
   SET_FORM_SHIFT_CHART,
   SET_PSHIFT_PAGE,
   SET_PSHIFT_APPROVAL_FILTER,
+  SET_PSHIFT_COMPLETED_FILTER,
+  SET_PSHIFT_CLIENT_FILTER,
+  SET_PSHIFT_WORKTYPE_FILTER,
   SET_CLEAR_PSHIFT_STATE
 } from "../../constants/pShift.constants";
 import { parseError } from "../common.actions";
@@ -63,7 +66,28 @@ export function setPShiftApprovalFilter(approvalFilter) {
   return {
     type: SET_PSHIFT_APPROVAL_FILTER,
     data: approvalFilter
+  };
 }
+
+export function setPShiftCompletedFilter(completedFilter) {
+  return {
+    type: SET_PSHIFT_COMPLETED_FILTER,
+    data: completedFilter
+  };
+}
+
+export function setPShiftClientFilter(clientFilter) {
+  return {
+    type: SET_PSHIFT_CLIENT_FILTER,
+    data: clientFilter
+  };
+}
+
+export function setPShiftWorkTypeFilter(workTypeFilter) {
+  return {
+    type: SET_PSHIFT_WORKTYPE_FILTER,
+    data: workTypeFilter
+  };
 }
 
 export function setClearPShiftState() {

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 />}

src/constants/pShift.constants.js

@@ -7,6 +7,9 @@ export const CLEAR_PSHIFT_REQUEST_SUCCESS = "CLEAR_PSHIFT_REQUEST_SUCCESS";
 export const SET_FORM_SHIFT_CHART = "SET_FORM_SHIFT_CHART";
 export const SET_PSHIFT_PAGE = "SET_PSHIFT_PAGE";
 export const SET_PSHIFT_APPROVAL_FILTER = "SET_PSHIFT_APPROVAL_FILTER";
+export const SET_PSHIFT_COMPLETED_FILTER = "SET_PSHIFT_COMPLETED_FILTER";
+export const SET_PSHIFT_CLIENT_FILTER = "SET_PSHIFT_CLIENT_FILTER";
+export const SET_PSHIFT_WORKTYPE_FILTER = "SET_PSHIFT_WORKTYPE_FILTER";
 export const SET_CLEAR_PSHIFT_STATE = "SET_CLEAR_PSHIFT_STATE";
 
 // Saga PShift Action Constants

src/reducers/pShiftReducer.js

@@ -7,6 +7,9 @@ import {
   SET_FORM_SHIFT_CHART,
   SET_PSHIFT_PAGE,
   SET_PSHIFT_APPROVAL_FILTER,
+  SET_PSHIFT_COMPLETED_FILTER,
+  SET_PSHIFT_CLIENT_FILTER,
+  SET_PSHIFT_WORKTYPE_FILTER,
   SET_CLEAR_PSHIFT_STATE
 } from "../constants/pShift.constants";
 
@@ -16,7 +19,10 @@ const initialState = {
   pShiftRequestSuccess: "",
   chart: "",
   page: 1,
-  approvalFilter: null
+  approvalFilter: null,
+  completedFilter: null,
+  clientFilter: null,
+  workTypeFilter: null
 };
 
 function pShiftReducer(state = initialState, action) {
@@ -61,11 +67,29 @@ function pShiftReducer(state = initialState, action) {
         ...state,
         approvalFilter: action.data
       };
+    case SET_PSHIFT_COMPLETED_FILTER:
+      return {
+        ...state,
+        completedFilter: action.data
+      };
+    case SET_PSHIFT_CLIENT_FILTER:
+      return {
+        ...state,
+        clientFilter: action.data
+      };
+    case SET_PSHIFT_WORKTYPE_FILTER:
+      return {
+        ...state,
+        workTypeFilter: action.data
+      };
     case SET_CLEAR_PSHIFT_STATE:
       return {
         ...initialState,
         page: state.page,
-        approvalFilter: state.approvalFilter
+        approvalFilter: state.approvalFilter,
+        completedFilter: state.completedFilter,
+        clientFilter: state.clientFilter,
+        workTypeFilter: state.workTypeFilter
       };
     default:
       return { ...state };