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 }) => ( -
Schedule a Shift
+
Schedule Shifts
@@ -210,11 +245,26 @@ const ClientAddShiftFormView = ({ -