diff --git a/src/actions/cShift/reducer.actions.js b/src/actions/cShift/reducer.actions.js
index 8cf090f..e9f895f 100644
--- a/src/actions/cShift/reducer.actions.js
+++ b/src/actions/cShift/reducer.actions.js
@@ -6,9 +6,11 @@ import {
CLEAR_CSHIFT_REQUEST_SUCCESS,
SET_FORM_EMPLOYEE_UUID,
SET_FORM_PRICE_UUID,
- SET_CLEAR_CSHIFT_STATE,
SET_FORM_SHIFT_START_TIME,
- SET_FORM_SHIFT_DURATION
+ SET_FORM_SHIFT_DURATION,
+ SET_FORM_SHIFT_NOTE,
+ SET_FORM_SHIFT_DATES,
+ SET_CLEAR_CSHIFT_STATE
} from "../../constants/cShift.constants";
import { parseError } from "../common.actions";
@@ -74,6 +76,20 @@ export function setFormShiftDuration(duration) {
};
}
+export function setFormShiftNote(note) {
+ return {
+ type: SET_FORM_SHIFT_NOTE,
+ data: note
+ };
+}
+
+export function setFormShiftDates(dates) {
+ return {
+ type: SET_FORM_SHIFT_DATES,
+ data: dates
+ };
+}
+
export function setClearCshiftState() {
return {
type: SET_CLEAR_CSHIFT_STATE
diff --git a/src/components/User/Client/ClientAddShiftForm.jsx b/src/components/User/Client/ClientAddShiftForm.jsx
index 68c811a..ef409d9 100644
--- a/src/components/User/Client/ClientAddShiftForm.jsx
+++ b/src/components/User/Client/ClientAddShiftForm.jsx
@@ -1,4 +1,4 @@
-import { duration } from "moment";
+import { duration, utc } from "moment";
import React, { Component } from "react";
import DatePicker from "react-datepicker";
import { connect } from "react-redux";
@@ -17,7 +17,9 @@ import {
setFormPriceUUID,
setFormShiftStartTime,
setFormShiftDuration,
- setClearCshiftState
+ setFormShiftNote,
+ setClearCshiftState,
+ setFormShiftDates
} from "../../../actions/cShift/reducer.actions";
import "react-datepicker/dist/react-datepicker.css";
@@ -28,7 +30,7 @@ for (let min = 60; min <= 480; min += 30) {
let displayText = duration(min, "minutes").humanize();
if (min % 60) {
displayText = duration(Math.floor(min / 60), "hours").humanize();
- displayText += ", " + duration(min % 60, "minutes").humanize();
+ displayText += ` and ${duration(min % 60, "minutes").humanize()}`;
}
CShiftDurationOptions.push({
key: min,
@@ -55,23 +57,44 @@ class ClientAddShiftForm extends Component {
/**
* change handler for shift start time selector.
- * @param date - instance of moment
+ * @param momentTime - instance of moment (but we only care about the time)
*/
- changeShiftStartTime = date => {
- this.props.dispatch(setFormShiftStartTime(date));
+ changeShiftStartTime = momentTime => {
+ this.props.dispatch(setFormShiftStartTime(momentTime));
};
changeShiftDuration = (e, { value }) => {
this.props.dispatch(setFormShiftDuration(value));
};
+ changeShiftNote = event => {
+ this.props.dispatch(setFormShiftNote(event.target.value));
+ };
+
+ /**
+ * change handler for shift date selector
+ * @param momentDate - instance of moment (but we only care about the day)
+ */
+ handleSelectDate = momentDate => {
+ const shiftDatesCopy = { ...this.props.shiftDates };
+ const key = momentDate.format("YYYY-MM-DD");
+ if (shiftDatesCopy.hasOwnProperty(key)) {
+ delete shiftDatesCopy[key];
+ } else {
+ shiftDatesCopy[key] = momentDate;
+ }
+ this.props.dispatch(setFormShiftDates(shiftDatesCopy));
+ };
+
render() {
const {
selfUser,
employeeUUID,
priceUUID,
startTime,
- duration
+ duration,
+ note,
+ shiftDates
} = this.props;
if (!selfUser.client) {
@@ -118,6 +141,10 @@ class ClientAddShiftForm extends Component {
}))
);
}
+
+ const selectedShiftDates = Object.keys(shiftDates).map(
+ key => shiftDates[key]
+ );
return (
);
}
@@ -148,13 +179,17 @@ const ClientAddShiftFormView = ({
priceUUID,
startTime,
duration,
+ note,
+ selectedShiftDates,
changeSelectedEmployee,
changeSelectedPrice,
changeShiftStartTime,
- changeShiftDuration
+ changeShiftDuration,
+ changeShiftNote,
+ handleSelectDate
}) => (
-
+
@@ -210,11 +245,26 @@ const ClientAddShiftFormView = ({
-
+
-
-
-
+
+
+
Schedule Shift
diff --git a/src/components/User/Client/shiftStartTimeOverrides.css b/src/components/User/Client/shiftStartTimeOverrides.css
index a0a5bbc..d220f7d 100644
--- a/src/components/User/Client/shiftStartTimeOverrides.css
+++ b/src/components/User/Client/shiftStartTimeOverrides.css
@@ -19,7 +19,7 @@
padding-right: 0;
}
-/* next two required because datepicker ignores fluid anyways */
+/* next two required because datepicker input ignores fluid anyways */
#root
> div
> div:nth-child(2)
@@ -46,3 +46,17 @@
> div {
width: 100%;
}
+
+/* required so the inline two months view still looks decent on mobile */
+@media only screen and (max-width: 470px) {
+ #root
+ > div
+ > div:nth-child(2)
+ > div:nth-child(1)
+ > div
+ > form
+ > div:nth-child(3)
+ > div {
+ width: min-content;
+ }
+}
diff --git a/src/constants/cShift.constants.js b/src/constants/cShift.constants.js
index 69e185c..547dbfd 100644
--- a/src/constants/cShift.constants.js
+++ b/src/constants/cShift.constants.js
@@ -6,9 +6,10 @@ export const SET_CSHIFT_REQUEST_SUCCESS = "SET_CSHIFT_REQUEST_SUCCESS";
export const CLEAR_CSHIFT_REQUEST_SUCCESS = "CLEAR_CSHIFT_REQUEST_SUCCESS";
export const SET_FORM_EMPLOYEE_UUID = "SET_FORM_EMPLOYEE_UUID";
export const SET_FORM_PRICE_UUID = "SET_FORM_PRICE_UUID";
-export const SET_FORM_SHIFT_START_TIME = "SET_FORM_SHIFT_START_TIME"
+export const SET_FORM_SHIFT_START_TIME = "SET_FORM_SHIFT_START_TIME";
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_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE";
// Saga CShift Action Constants
diff --git a/src/reducers/cShiftReducer.js b/src/reducers/cShiftReducer.js
index 3425df1..497d1a0 100644
--- a/src/reducers/cShiftReducer.js
+++ b/src/reducers/cShiftReducer.js
@@ -8,6 +8,8 @@ import {
SET_FORM_PRICE_UUID,
SET_FORM_SHIFT_START_TIME,
SET_FORM_SHIFT_DURATION,
+ SET_FORM_SHIFT_NOTE,
+ SET_FORM_SHIFT_DATES,
SET_CLEAR_CSHIFT_STATE
} from "../constants/cShift.constants";
@@ -15,10 +17,12 @@ const initialState = {
isSendingCShiftRequest: false,
cShiftRequestError: "",
cShiftRequestSuccess: "",
- employeeUUID: "",
- priceUUID: "",
- startTime: null,
- duration: 60
+ employeeUUID: "", // Which employee
+ priceUUID: "", // Which price
+ startTime: null, // When does the shift begin? moment instance
+ duration: "", // Duration of shift in minutes
+ note: "", // Optional note
+ shiftDates: {} // Dates, map of "YYYY-MM-DD" > moment instance
};
function cShiftReducer(state = initialState, action) {
@@ -68,6 +72,16 @@ function cShiftReducer(state = initialState, action) {
...state,
duration: action.data
};
+ case SET_FORM_SHIFT_NOTE:
+ return {
+ ...state,
+ note: action.data
+ };
+ case SET_FORM_SHIFT_DATES:
+ return {
+ ...state,
+ shiftDates: action.data
+ };
case SET_CLEAR_CSHIFT_STATE:
return {
...initialState