|
|
|
|
@ -1,4 +1,6 @@ |
|
|
|
|
import { duration } from "moment"; |
|
|
|
|
import React, { Component } from "react"; |
|
|
|
|
import DatePicker from "react-datepicker"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { Redirect } from "react-router-dom"; |
|
|
|
|
import { |
|
|
|
|
@ -6,24 +8,38 @@ import { |
|
|
|
|
Dropdown, |
|
|
|
|
Form, |
|
|
|
|
Header, |
|
|
|
|
Input, |
|
|
|
|
Label, |
|
|
|
|
TextArea |
|
|
|
|
} from "semantic-ui-react"; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
clearCShiftRequestError, |
|
|
|
|
clearCShiftRequestSuccess, |
|
|
|
|
setFormEmployeeUUID, |
|
|
|
|
setFormPriceUUID |
|
|
|
|
setFormPriceUUID, |
|
|
|
|
setFormShiftStartTime, |
|
|
|
|
setFormShiftDuration, |
|
|
|
|
setClearCshiftState |
|
|
|
|
} from "../../../actions/cShift/reducer.actions"; |
|
|
|
|
|
|
|
|
|
import "react-datepicker/dist/react-datepicker.css"; |
|
|
|
|
import "./shiftStartTimeOverrides.css"; |
|
|
|
|
|
|
|
|
|
const CShiftDurationOptions = []; |
|
|
|
|
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(); |
|
|
|
|
} |
|
|
|
|
CShiftDurationOptions.push({ |
|
|
|
|
key: min, |
|
|
|
|
value: min, |
|
|
|
|
text: displayText |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
class ClientAddShiftForm extends Component { |
|
|
|
|
componentWillMount = () => { |
|
|
|
|
this.props.dispatch(clearCShiftRequestError()); |
|
|
|
|
this.props.dispatch(clearCShiftRequestSuccess()); |
|
|
|
|
this.props.dispatch(setFormEmployeeUUID("")); |
|
|
|
|
this.props.dispatch(setFormPriceUUID("")); |
|
|
|
|
this.props.dispatch(setClearCshiftState()); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
changeSelectedEmployee = (e, { value }) => { |
|
|
|
|
@ -37,8 +53,26 @@ class ClientAddShiftForm extends Component { |
|
|
|
|
this.props.dispatch(setFormPriceUUID(value)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* change handler for shift start time selector. |
|
|
|
|
* @param date - instance of moment |
|
|
|
|
*/ |
|
|
|
|
changeShiftStartTime = date => { |
|
|
|
|
this.props.dispatch(setFormShiftStartTime(date)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
changeShiftDuration = (e, { value }) => { |
|
|
|
|
this.props.dispatch(setFormShiftDuration(value)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const { selfUser, employeeUUID, priceUUID } = this.props; |
|
|
|
|
const { |
|
|
|
|
selfUser, |
|
|
|
|
employeeUUID, |
|
|
|
|
priceUUID, |
|
|
|
|
startTime, |
|
|
|
|
duration |
|
|
|
|
} = this.props; |
|
|
|
|
|
|
|
|
|
if (!selfUser.client) { |
|
|
|
|
return <Redirect to="/" />; |
|
|
|
|
@ -51,6 +85,7 @@ class ClientAddShiftForm extends Component { |
|
|
|
|
value: uuid, |
|
|
|
|
text: provider.email |
|
|
|
|
})); |
|
|
|
|
|
|
|
|
|
const priceChoices = []; |
|
|
|
|
if (employeeUUID) { |
|
|
|
|
const employee = selfUser.client.employees.find(emp => { |
|
|
|
|
@ -90,8 +125,12 @@ class ClientAddShiftForm extends Component { |
|
|
|
|
priceChoices={priceChoices} |
|
|
|
|
employeeUUID={employeeUUID} |
|
|
|
|
priceUUID={priceUUID} |
|
|
|
|
startTime={startTime} |
|
|
|
|
duration={duration} |
|
|
|
|
changeSelectedEmployee={this.changeSelectedEmployee} |
|
|
|
|
changeSelectedPrice={this.changeSelectedPrice} |
|
|
|
|
changeShiftStartTime={this.changeShiftStartTime} |
|
|
|
|
changeShiftDuration={this.changeShiftDuration} |
|
|
|
|
/> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
@ -107,8 +146,12 @@ const ClientAddShiftFormView = ({ |
|
|
|
|
priceChoices, |
|
|
|
|
employeeUUID, |
|
|
|
|
priceUUID, |
|
|
|
|
startTime, |
|
|
|
|
duration, |
|
|
|
|
changeSelectedEmployee, |
|
|
|
|
changeSelectedPrice |
|
|
|
|
changeSelectedPrice, |
|
|
|
|
changeShiftStartTime, |
|
|
|
|
changeShiftDuration |
|
|
|
|
}) => ( |
|
|
|
|
<Container> |
|
|
|
|
<Header>Schedule a Shift</Header> |
|
|
|
|
@ -117,40 +160,52 @@ const ClientAddShiftFormView = ({ |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Employee</label> |
|
|
|
|
<Dropdown |
|
|
|
|
onChange={changeSelectedEmployee} |
|
|
|
|
options={employeeChoices} |
|
|
|
|
placeholder="Select employee" |
|
|
|
|
openOnFocus |
|
|
|
|
closeOnBlur |
|
|
|
|
selection |
|
|
|
|
fluid |
|
|
|
|
search |
|
|
|
|
options={employeeChoices} |
|
|
|
|
noResultsMessage="No approved employees found." |
|
|
|
|
onChange={changeSelectedEmployee} |
|
|
|
|
value={employeeUUID} |
|
|
|
|
/> |
|
|
|
|
</Form.Field> |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Price</label> |
|
|
|
|
<Dropdown |
|
|
|
|
onChange={changeSelectedPrice} |
|
|
|
|
options={priceChoices} |
|
|
|
|
placeholder="Select price" |
|
|
|
|
openOnFocus |
|
|
|
|
closeOnBlur |
|
|
|
|
selection |
|
|
|
|
fluid |
|
|
|
|
search |
|
|
|
|
options={priceChoices} |
|
|
|
|
noResultsMessage="No prices for given employee." |
|
|
|
|
onChange={changeSelectedPrice} |
|
|
|
|
value={priceUUID} |
|
|
|
|
/> |
|
|
|
|
</Form.Field> |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Time</label> |
|
|
|
|
<Input placeholder="Time" type="text" /> |
|
|
|
|
<label>Shift Start Time</label> |
|
|
|
|
<DatePicker |
|
|
|
|
selected={startTime} |
|
|
|
|
onChange={changeShiftStartTime} |
|
|
|
|
showTimeSelect |
|
|
|
|
showTimeSelectOnly |
|
|
|
|
timeIntervals={30} |
|
|
|
|
dateFormat="LT Z" |
|
|
|
|
timeFormat="hh:mm" |
|
|
|
|
placeholderText="Select shift start time" |
|
|
|
|
/> |
|
|
|
|
</Form.Field> |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Duration</label> |
|
|
|
|
<Input placeholder="Duration" type="text" /> |
|
|
|
|
<label>Shift Duration</label> |
|
|
|
|
<Dropdown |
|
|
|
|
onChange={changeShiftDuration} |
|
|
|
|
options={CShiftDurationOptions} |
|
|
|
|
placeholder="Select duration" |
|
|
|
|
selection |
|
|
|
|
fluid |
|
|
|
|
value={duration} |
|
|
|
|
/> |
|
|
|
|
</Form.Field> |
|
|
|
|
</Form.Group> |
|
|
|
|
<Form.Field> |
|
|
|
|
|
Alexander Wong
6 years ago