|
|
|
@ -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 ( |
|
|
|
|
<ClientAddShiftFormView |
|
|
|
|
user={selfUser} |
|
|
|
@ -127,10 +154,14 @@ class ClientAddShiftForm extends Component { |
|
|
|
|
priceUUID={priceUUID} |
|
|
|
|
startTime={startTime} |
|
|
|
|
duration={duration} |
|
|
|
|
note={note} |
|
|
|
|
selectedShiftDates={selectedShiftDates} |
|
|
|
|
changeSelectedEmployee={this.changeSelectedEmployee} |
|
|
|
|
changeSelectedPrice={this.changeSelectedPrice} |
|
|
|
|
changeShiftStartTime={this.changeShiftStartTime} |
|
|
|
|
changeShiftDuration={this.changeShiftDuration} |
|
|
|
|
changeShiftNote={this.changeShiftNote} |
|
|
|
|
handleSelectDate={this.handleSelectDate} |
|
|
|
|
/> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
@ -148,13 +179,17 @@ const ClientAddShiftFormView = ({ |
|
|
|
|
priceUUID, |
|
|
|
|
startTime, |
|
|
|
|
duration, |
|
|
|
|
note, |
|
|
|
|
selectedShiftDates, |
|
|
|
|
changeSelectedEmployee, |
|
|
|
|
changeSelectedPrice, |
|
|
|
|
changeShiftStartTime, |
|
|
|
|
changeShiftDuration |
|
|
|
|
changeShiftDuration, |
|
|
|
|
changeShiftNote, |
|
|
|
|
handleSelectDate |
|
|
|
|
}) => ( |
|
|
|
|
<Container> |
|
|
|
|
<Header>Schedule a Shift</Header> |
|
|
|
|
<Header>Schedule Shifts</Header> |
|
|
|
|
<Form> |
|
|
|
|
<Form.Group widths="equal"> |
|
|
|
|
<Form.Field> |
|
|
|
@ -210,11 +245,26 @@ const ClientAddShiftFormView = ({ |
|
|
|
|
</Form.Group> |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Note</label> |
|
|
|
|
<TextArea placeholder="Employee notes" /> |
|
|
|
|
<TextArea |
|
|
|
|
placeholder="Employee notes" |
|
|
|
|
value={note} |
|
|
|
|
onChange={changeShiftNote} |
|
|
|
|
/> |
|
|
|
|
</Form.Field> |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Days</label> |
|
|
|
|
<TextArea placeholder="Date Picker" /> |
|
|
|
|
<Form.Field style={{ textAlign: "center" }}> |
|
|
|
|
<label>Dates</label> |
|
|
|
|
<DatePicker |
|
|
|
|
inline |
|
|
|
|
onSelect={handleSelectDate} |
|
|
|
|
highlightDates={selectedShiftDates} |
|
|
|
|
monthsShown={2} |
|
|
|
|
// https://github.com/Hacker0x01/react-datepicker/pull/1360 |
|
|
|
|
peekNextMonth={false} // this is broken? Fixed in PR 1360 |
|
|
|
|
minDate={utc(new Date()).add(1, "day")} |
|
|
|
|
maxDate={utc(new Date()) |
|
|
|
|
.add(1, "month") |
|
|
|
|
.endOf("month")} |
|
|
|
|
/> |
|
|
|
|
</Form.Field> |
|
|
|
|
<Form.Button>Schedule Shift</Form.Button> |
|
|
|
|
</Form> |
|
|
|
|