diff --git a/src/actions/cShift/reducer.actions.js b/src/actions/cShift/reducer.actions.js index 61cbf2b..b9b6a1a 100644 --- a/src/actions/cShift/reducer.actions.js +++ b/src/actions/cShift/reducer.actions.js @@ -11,6 +11,8 @@ import { SET_FORM_SHIFT_NOTE, SET_FORM_SHIFT_DATES, SET_CSHIFT_UUID, + SET_CSHIFT_PAGE, + SET_CSHIFT_APPROVAL_FILTER, SET_CLEAR_CSHIFT_STATE } from "../../constants/cShift.constants"; import { parseError } from "../common.actions"; @@ -115,6 +117,20 @@ export function setCShiftUUID(uuid) { }; } +export function setCShiftPage(page) { + return { + type: SET_CSHIFT_PAGE, + data: page + }; +} + +export function setCShiftApprovalFilter(approvalFilter) { + return { + type: SET_CSHIFT_APPROVAL_FILTER, + data: approvalFilter + }; +} + export function setClearCShiftState() { return { type: SET_CLEAR_CSHIFT_STATE diff --git a/src/actions/pShift/reducer.actions.js b/src/actions/pShift/reducer.actions.js index dabbc9c..7787329 100644 --- a/src/actions/pShift/reducer.actions.js +++ b/src/actions/pShift/reducer.actions.js @@ -5,6 +5,8 @@ import { CLEAR_PSHIFT_REQUEST_ERROR, CLEAR_PSHIFT_REQUEST_SUCCESS, SET_FORM_SHIFT_CHART, + SET_PSHIFT_PAGE, + SET_PSHIFT_APPROVAL_FILTER, SET_CLEAR_PSHIFT_STATE } from "../../constants/pShift.constants"; import { parseError } from "../common.actions"; @@ -50,6 +52,20 @@ export function setFormShiftChart(chart) { }; } +export function setPShiftPage(page) { + return { + type: SET_PSHIFT_PAGE, + data: page + }; +} + +export function setPShiftApprovalFilter(approvalFilter) { + return { + type: SET_PSHIFT_APPROVAL_FILTER, + data: approvalFilter + } +} + export function setClearPShiftState() { return { type: SET_CLEAR_PSHIFT_STATE diff --git a/src/components/User/Client/ClientShifts.jsx b/src/components/User/Client/ClientShifts.jsx index cd007c4..5d42ca4 100644 --- a/src/components/User/Client/ClientShifts.jsx +++ b/src/components/User/Client/ClientShifts.jsx @@ -5,6 +5,7 @@ import { Redirect, Link } from "react-router-dom"; import { Button, Container, + Dropdown, Header, Item, Segment, @@ -15,6 +16,10 @@ import { List, Message } from "semantic-ui-react"; +import { + setCShiftPage, + setCShiftApprovalFilter +} from "../../../actions/cShift/reducer.actions"; import { getCShiftsRequest, deleteCShiftRequest @@ -25,7 +30,6 @@ class ClientShifts extends Component { constructor(props) { super(props); this.state = { - page: 1, pageSize: 10 // client can't control this, but set here just in case }; } @@ -33,7 +37,8 @@ class ClientShifts extends Component { componentWillMount = () => { this.props.dispatch( getCShiftsRequest({ - page: this.state.page, + page: this.props.page, + approved: this.props.approvalFilter, page_size: this.state.pageSize }) ); @@ -43,10 +48,23 @@ class ClientShifts extends Component { this.props.dispatch( getCShiftsRequest({ page: activePage, + approved: this.props.approvalFilter, page_size: this.state.pageSize }) ); - this.setState({ page: activePage }); + this.props.dispatch(setCShiftPage(activePage)); + }; + + handleChangeApprovalFilter = (event, { value }) => { + this.props.dispatch( + getCShiftsRequest({ + page: 1, + approved: value, + page_size: this.state.pageSize + }) + ); + this.props.dispatch(setCShiftApprovalFilter(value)); + this.props.dispatch(setCShiftPage(1)); }; deleteCShift = uuid => { @@ -57,18 +75,22 @@ class ClientShifts extends Component { const { isSendingCShiftRequest, cShiftRequestSuccess, - selfUser + selfUser, + page, + approvalFilter } = this.props; - const { page, pageSize } = this.state; + const { pageSize } = this.state; if (selfUser.client) { return ( ); @@ -87,26 +109,44 @@ const ClientShiftsView = ({ cShiftRequestSuccess, user, page, + approvalFilter, pageSize, handlePaginationChange, + handleChangeApprovalFilter, deleteCShift }) => { const { count = 0, results = [] } = cShiftRequestSuccess; - + const approvedOptions = [ + { text: "Approved", value: true }, + { text: "Rejected", value: false }, + { text: "All", value: null } + ]; return (
Shifts
- - - + + + + + + {"Filter by Approval: "} + + + {!!isSendingCShiftRequest && } {!isSendingCShiftRequest && results.length > 0 && ( diff --git a/src/components/User/Provider/ProviderShifts.jsx b/src/components/User/Provider/ProviderShifts.jsx index bee4e43..81b0c88 100644 --- a/src/components/User/Provider/ProviderShifts.jsx +++ b/src/components/User/Provider/ProviderShifts.jsx @@ -5,8 +5,10 @@ import { Redirect, Link } from "react-router-dom"; import { Button, Container, + Dropdown, Header, Item, + Segment, Pagination, Loader, Label @@ -15,6 +17,10 @@ import { getEmployerFromPrice, getPriceFromPrice } from "./ProviderShiftsShared"; +import { + setPShiftPage, + setPShiftApprovalFilter +} from "../../../actions/pShift/reducer.actions"; import { getPShiftsRequest, updatePShiftRequest @@ -24,7 +30,6 @@ class ProviderShifts extends Component { constructor(props) { super(props); this.state = { - page: 1, pageSize: 10 // client can't control this, but set here just in case }; } @@ -32,7 +37,8 @@ class ProviderShifts extends Component { componentWillMount = () => { this.props.dispatch( getPShiftsRequest({ - page: this.state.page, + page: this.props.page, + approved: this.props.approvalFilter, page_size: this.state.pageSize }) ); @@ -42,10 +48,23 @@ class ProviderShifts extends Component { this.props.dispatch( getPShiftsRequest({ page: activePage, + approved: this.props.approvalFilter, + page_size: this.state.pageSize + }) + ); + this.props.dispatch(setPShiftPage(activePage)); + }; + + handleChangeApprovalFilter = (event, { value }) => { + this.props.dispatch( + getPShiftsRequest({ + page: 1, + approved: value, page_size: this.state.pageSize }) ); - this.setState({ page: activePage }); + this.props.dispatch(setPShiftApprovalFilter(value)); + this.props.dispatch(setPShiftPage(1)); }; handleChangePShiftApproval = (uuid, approved) => { @@ -60,17 +79,21 @@ class ProviderShifts extends Component { const { isSendingPShiftRequest, pShiftRequestSuccess, - selfUser + selfUser, + page, + approvalFilter } = this.props; - const { page, pageSize } = this.state; + const { pageSize } = this.state; if (selfUser.provider) { return ( @@ -90,14 +113,33 @@ const ProviderShiftsView = ({ pShiftRequestSuccess, user, page, + approvalFilter, pageSize, + handleChangeApprovalFilter, handlePaginationChange, handleChangePShiftApproval }) => { const { count = 0, results = [] } = pShiftRequestSuccess; + const approvedOptions = [ + { text: "Approved", value: true }, + { text: "Rejected", value: false }, + { text: "All", value: null } + ]; return (
Shifts
+ + + {"Filter by Approval: "} + + + {!!isSendingPShiftRequest && } {!isSendingPShiftRequest && results.length > 0 && ( diff --git a/src/constants/cShift.constants.js b/src/constants/cShift.constants.js index 987281d..246b4fc 100644 --- a/src/constants/cShift.constants.js +++ b/src/constants/cShift.constants.js @@ -11,6 +11,8 @@ export const SET_FORM_SHIFT_DURATION = "SET_FORM_SHIFT_DURATION"; export const SET_FORM_SHIFT_NOTE = "SET_FORM_SHIFT_NOTE"; 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_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE"; // Saga CShift Action Constants diff --git a/src/constants/pShift.constants.js b/src/constants/pShift.constants.js index 42952dc..bdd4077 100644 --- a/src/constants/pShift.constants.js +++ b/src/constants/pShift.constants.js @@ -5,6 +5,8 @@ export const CLEAR_PSHIFT_REQUEST_ERROR = "CLEAR_PSHIFT_REQUEST_ERROR"; export const SET_PSHIFT_REQUEST_SUCCESS = "SET_PSHIFT_REQUEST_SUCCESS"; 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_CLEAR_PSHIFT_STATE = "SET_CLEAR_PSHIFT_STATE"; // Saga PShift Action Constants diff --git a/src/reducers/cShiftReducer.js b/src/reducers/cShiftReducer.js index b53e653..1c3c860 100644 --- a/src/reducers/cShiftReducer.js +++ b/src/reducers/cShiftReducer.js @@ -11,6 +11,8 @@ import { SET_FORM_SHIFT_NOTE, SET_FORM_SHIFT_DATES, SET_CSHIFT_UUID, + SET_CSHIFT_PAGE, + SET_CSHIFT_APPROVAL_FILTER, SET_CLEAR_CSHIFT_STATE } from "../constants/cShift.constants"; @@ -24,7 +26,9 @@ const initialState = { duration: "", // Duration of shift in minutes note: "", // Optional note shiftDates: {}, // Dates, map of "YYYY-MM-DD" > moment instance - cShiftUUID: "" + cShiftUUID: "", + page: 1, + approvalFilter: null }; function cShiftReducer(state = initialState, action) { @@ -89,9 +93,21 @@ function cShiftReducer(state = initialState, action) { ...state, cShiftUUID: action.data }; + case SET_CSHIFT_PAGE: + return { + ...state, + page: action.data + }; + case SET_CSHIFT_APPROVAL_FILTER: + return { + ...state, + approvalFilter: action.data + }; case SET_CLEAR_CSHIFT_STATE: return { - ...initialState + ...initialState, + page: state.page, + approvalFilter: state.approvalFilter }; default: return state; diff --git a/src/reducers/pShiftReducer.js b/src/reducers/pShiftReducer.js index 4afff73..1976c5d 100644 --- a/src/reducers/pShiftReducer.js +++ b/src/reducers/pShiftReducer.js @@ -5,6 +5,8 @@ import { CLEAR_PSHIFT_REQUEST_ERROR, CLEAR_PSHIFT_REQUEST_SUCCESS, SET_FORM_SHIFT_CHART, + SET_PSHIFT_PAGE, + SET_PSHIFT_APPROVAL_FILTER, SET_CLEAR_PSHIFT_STATE } from "../constants/pShift.constants"; @@ -12,7 +14,9 @@ const initialState = { isSendingPShiftRequest: false, pShiftRequestError: "", pShiftRequestSuccess: "", - chart: "" + chart: "", + page: 1, + approvalFilter: null }; function pShiftReducer(state = initialState, action) { @@ -47,9 +51,21 @@ function pShiftReducer(state = initialState, action) { ...state, chart: action.data }; + case SET_PSHIFT_PAGE: + return { + ...state, + page: action.data + }; + case SET_PSHIFT_APPROVAL_FILTER: + return { + ...state, + approvalFilter: action.data + }; case SET_CLEAR_PSHIFT_STATE: return { - ...initialState + ...initialState, + page: state.page, + approvalFilter: state.approvalFilter }; default: return { ...state };