98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
import moment from "moment";
|
|
import queryString from "query-string";
|
|
import React from "react";
|
|
import { Calendar, momentLocalizer } from "react-big-calendar";
|
|
import { connect } from "react-redux";
|
|
import { useHistory, useLocation } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import Event from "../schedule-event/schedule-event.container";
|
|
import HeaderComponent from "./schedule-calendar-header.component";
|
|
import "./schedule-calendar.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const localizer = momentLocalizer(moment);
|
|
export function ScheduleCalendarWrapperComponent({
|
|
bodyshop,
|
|
data,
|
|
refetch,
|
|
defaultView,
|
|
setDateRangeCallback,
|
|
date,
|
|
...otherProps
|
|
}) {
|
|
const search = queryString.parse(useLocation().search);
|
|
const history = useHistory();
|
|
|
|
const handleEventPropStyles = (event, start, end, isSelected) => {
|
|
// if (!!!bodyshop.ssbuckets) {
|
|
// return {};
|
|
// }
|
|
// const defaultEventColor = "#3174ad";
|
|
// const jobHrs = result.jobs_by_pk.jobhrs.aggregate.sum.mod_lb_hrs;
|
|
// const JobBucket = bodyshop.ssbuckets.filter(
|
|
// (bucket) =>
|
|
// bucket.gte <= jobHrs && (!!bucket.lt ? bucket.lt > jobHrs : true)
|
|
// )[0];
|
|
|
|
return {
|
|
...(event.color
|
|
? {
|
|
style: {
|
|
backgroundColor:
|
|
event.color && event.color.hex ? event.color.hex : event.color,
|
|
},
|
|
}
|
|
: {}),
|
|
className: `${event.arrived ? "imex-event-arrived" : ""} ${
|
|
event.block ? "imex-event-block" : ""
|
|
}`,
|
|
};
|
|
};
|
|
|
|
const selectedDate = new Date(date || moment(search.date) || Date.now());
|
|
|
|
return (
|
|
<Calendar
|
|
events={data}
|
|
defaultView={search.view || defaultView || "week"}
|
|
date={selectedDate}
|
|
onNavigate={(date, view, action) => {
|
|
search.date = date.toISOString().substr(0, 10);
|
|
history.push({ search: queryString.stringify(search) });
|
|
}}
|
|
onRangeChange={(start, end) => {
|
|
if (setDateRangeCallback) setDateRangeCallback({ start, end });
|
|
}}
|
|
onView={(view) => {
|
|
search.view = view;
|
|
history.push({ search: queryString.stringify(search) });
|
|
}}
|
|
step={30}
|
|
timeslots={1}
|
|
showMultiDayTimes
|
|
localizer={localizer}
|
|
min={
|
|
bodyshop.schedule_start_time
|
|
? new Date(bodyshop.schedule_start_time)
|
|
: new Date("2020-01-01T06:00:00")
|
|
}
|
|
max={
|
|
bodyshop.schedule_end_time
|
|
? new Date(bodyshop.schedule_end_time)
|
|
: new Date("2020-01-01T20:00:00")
|
|
}
|
|
eventPropGetter={handleEventPropStyles}
|
|
components={{
|
|
event: (e) => Event({ event: e.event, refetch: refetch }),
|
|
header: HeaderComponent,
|
|
}}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ScheduleCalendarWrapperComponent);
|