client filters

src/actions/cShift/reducer.actions.js

@@ -13,6 +13,9 @@ import {
   SET_CSHIFT_UUID,
   SET_CSHIFT_PAGE,
   SET_CSHIFT_APPROVAL_FILTER,
+  SET_CSHIFT_COMPLETED_FILTER,
+  SET_CSHIFT_PROVIDER_FILTER,
+  SET_CSHIFT_WORKTYPE_FILTER,
   SET_CLEAR_CSHIFT_STATE
 } from "../../constants/cShift.constants";
 import { parseError } from "../common.actions";
@@ -131,6 +134,27 @@ export function setCShiftApprovalFilter(approvalFilter) {
   };
 }
 
+export function setCShiftCompletedFilter(completedFilter) {
+  return {
+    type: SET_CSHIFT_COMPLETED_FILTER,
+    data: completedFilter
+  };
+}
+
+export function setCShiftProviderFilter(providerFilter) {
+  return {
+    type: SET_CSHIFT_PROVIDER_FILTER,
+    data: providerFilter
+  };
+}
+
+export function setCShiftWorkTypeFilter(workTypeFilter) {
+  return {
+    type: SET_CSHIFT_WORKTYPE_FILTER,
+    data: workTypeFilter
+  };
+}
+
 export function setClearCShiftState() {
   return {
     type: SET_CLEAR_CSHIFT_STATE

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

src/constants/cShift.constants.js

@@ -13,6 +13,9 @@ export const SET_FORM_SHIFT_DATES = "SET_FORM_SHIFT_DATES";
 export const SET_CSHIFT_UUID = "SET_CSHIFT_UUID";
 export const SET_CSHIFT_PAGE = "SET_CSHIFT_PAGE";
 export const SET_CSHIFT_APPROVAL_FILTER = "SET_CSHIFT_APPROVAL_FILTER";
+export const SET_CSHIFT_COMPLETED_FILTER = "SET_CSHIFT_COMPLETED_FILTER";
+export const SET_CSHIFT_PROVIDER_FILTER = "SET_CSHIFT_PROVIDER_FILTER";
+export const SET_CSHIFT_WORKTYPE_FILTER = "SET_CSHIFT_WORKTYPE_FILTER";
 export const SET_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE";
 
 // Saga CShift Action Constants

src/reducers/cShiftReducer.js

@@ -13,6 +13,9 @@ import {
   SET_CSHIFT_UUID,
   SET_CSHIFT_PAGE,
   SET_CSHIFT_APPROVAL_FILTER,
+  SET_CSHIFT_COMPLETED_FILTER,
+  SET_CSHIFT_PROVIDER_FILTER,
+  SET_CSHIFT_WORKTYPE_FILTER,
   SET_CLEAR_CSHIFT_STATE
 } from "../constants/cShift.constants";
 
@@ -28,7 +31,10 @@ const initialState = {
   shiftDates: {}, // Dates, map of "YYYY-MM-DD" > moment instance
   cShiftUUID: "",
   page: 1,
-  approvalFilter: null
+  approvalFilter: null,
+  completedFilter: null,
+  providerFilter: null,
+  workTypeFilter: null
 };
 
 function cShiftReducer(state = initialState, action) {
@@ -103,11 +109,29 @@ function cShiftReducer(state = initialState, action) {
         ...state,
         approvalFilter: action.data
       };
+    case SET_CSHIFT_COMPLETED_FILTER:
+      return {
+        ...state,
+        completedFilter: action.data
+      };
+    case SET_CSHIFT_PROVIDER_FILTER:
+      return {
+        ...state,
+        providerFilter: action.data
+      };
+    case SET_CSHIFT_WORKTYPE_FILTER:
+      return {
+        ...state,
+        workTypeFilter: action.data
+      };
     case SET_CLEAR_CSHIFT_STATE:
       return {
         ...initialState,
         page: state.page,
-        approvalFilter: state.approvalFilter
+        approvalFilter: state.approvalFilter,
+        completedFilter: state.completedFilter,
+        providerFilter: state.providerFilter,
+        workTypeFilter: state.workTypeFilter
       };
     default:
       return state;