108 lines
3.3 KiB
JavaScript
108 lines
3.3 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 "../job-at-change/schedule-event.container";
|
|
import HeaderComponent from "./schedule-calendar-header.component";
|
|
import "./schedule-calendar.styles.scss";
|
|
import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
|
|
import { selectProblemJobs } from "../../redux/application/application.selectors";
|
|
import { Alert } from "antd";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
problemJobs: selectProblemJobs,
|
|
});
|
|
const localizer = momentLocalizer(moment);
|
|
export function ScheduleCalendarWrapperComponent({
|
|
bodyshop,
|
|
problemJobs,
|
|
data,
|
|
refetch,
|
|
defaultView,
|
|
setDateRangeCallback,
|
|
date,
|
|
...otherProps
|
|
}) {
|
|
const search = queryString.parse(useLocation().search);
|
|
const history = useHistory();
|
|
|
|
const handleEventPropStyles = (event, start, end, isSelected) => {
|
|
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 (
|
|
<>
|
|
<JobDetailCards />
|
|
{problemJobs &&
|
|
problemJobs.map((problem) => (
|
|
<Alert
|
|
key={problem.id}
|
|
type="error"
|
|
message={`${problem.ro_number} has a data consistency issue. It has been exlcuded for scheduling purposes. CODE: ${problem.code}`}
|
|
/>
|
|
))}
|
|
|
|
<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={15}
|
|
// 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({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
|
|
header: (p) => (
|
|
<HeaderComponent {...p} events={data} refetch={refetch} />
|
|
),
|
|
}}
|
|
{...otherProps}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ScheduleCalendarWrapperComponent);
|