Dave Richer
@@ -1,161 +1,161 @@
|
||||
import dayjs from "../../utils/day";
|
||||
import queryString from "query-string";
|
||||
import React from "react";
|
||||
import { Calendar, dayjsLocalizer } from "react-big-calendar";
|
||||
import { connect } from "react-redux";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import {Calendar, dayjsLocalizer} from "react-big-calendar";
|
||||
import {connect} from "react-redux";
|
||||
import {Link, useLocation, useNavigate} 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 {selectProblemJobs} from "../../redux/application/application.selectors";
|
||||
import {Alert, Collapse, Space} from "antd";
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import {Trans, useTranslation} from "react-i18next";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
problemJobs: selectProblemJobs,
|
||||
bodyshop: selectBodyshop,
|
||||
problemJobs: selectProblemJobs,
|
||||
});
|
||||
const localizer = dayjsLocalizer(dayjs);
|
||||
|
||||
export function ScheduleCalendarWrapperComponent({
|
||||
bodyshop,
|
||||
problemJobs,
|
||||
data,
|
||||
refetch,
|
||||
defaultView,
|
||||
setDateRangeCallback,
|
||||
date,
|
||||
...otherProps
|
||||
}) {
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const history = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const handleEventPropStyles = (event, start, end, isSelected) => {
|
||||
return {
|
||||
...(event.color && !((search.view || defaultView) === "agenda")
|
||||
? {
|
||||
style: {
|
||||
backgroundColor:
|
||||
event.color && event.color.hex ? event.color.hex : event.color,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
className: `${event.arrived ? "imex-event-arrived" : ""} ${
|
||||
event.block ? "imex-event-block" : ""
|
||||
}`,
|
||||
bodyshop,
|
||||
problemJobs,
|
||||
data,
|
||||
refetch,
|
||||
defaultView,
|
||||
setDateRangeCallback,
|
||||
date,
|
||||
...otherProps
|
||||
}) {
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const history = useNavigate();
|
||||
const {t} = useTranslation();
|
||||
const handleEventPropStyles = (event, start, end, isSelected) => {
|
||||
return {
|
||||
...(event.color && !((search.view || defaultView) === "agenda")
|
||||
? {
|
||||
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 || dayjs(search.date) || Date.now());
|
||||
const selectedDate = new Date(date || dayjs(search.date) || Date.now());
|
||||
|
||||
return (
|
||||
<>
|
||||
<JobDetailCards />
|
||||
{problemJobs && problemJobs.length > 2 ? (
|
||||
<Collapse style={{marginBottom: '5px'}}>
|
||||
<Collapse.Panel
|
||||
key="1"
|
||||
header={
|
||||
<span style={{ color: "tomato" }}>
|
||||
return (
|
||||
<>
|
||||
<JobDetailCards/>
|
||||
{problemJobs && problemJobs.length > 2 ? (
|
||||
<Collapse style={{marginBottom: '5px'}}>
|
||||
<Collapse.Panel
|
||||
key="1"
|
||||
header={
|
||||
<span style={{color: "tomato"}}>
|
||||
{t("appointments.labels.severalerrorsfound")}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
{problemJobs.map((problem) => (
|
||||
<Alert
|
||||
key={problem.id}
|
||||
type="error"
|
||||
message={
|
||||
<Trans
|
||||
i18nKey="appointments.labels.dataconsistency"
|
||||
components={[
|
||||
<Link
|
||||
to={`/manage/jobs/${problem.id}`}
|
||||
target="_blank"
|
||||
/>,
|
||||
]}
|
||||
values={{
|
||||
ro_number: problem.ro_number,
|
||||
code: problem.code,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Space direction="vertical" style={{width: '100%'}}>
|
||||
{problemJobs.map((problem) => (
|
||||
<Alert
|
||||
key={problem.id}
|
||||
type="error"
|
||||
message={
|
||||
<Trans
|
||||
i18nKey="appointments.labels.dataconsistency"
|
||||
components={[
|
||||
<Link
|
||||
to={`/manage/jobs/${problem.id}`}
|
||||
target="_blank"
|
||||
/>,
|
||||
]}
|
||||
values={{
|
||||
ro_number: problem.ro_number,
|
||||
code: problem.code,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Space>
|
||||
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
) : (
|
||||
<Space direction="vertical" style={{ width: '100%', marginBottom: '5px' }}>
|
||||
{
|
||||
problemJobs.map((problem) => (
|
||||
<Alert
|
||||
key={problem.id}
|
||||
type="error"
|
||||
message={
|
||||
<Trans
|
||||
i18nKey="appointments.labels.dataconsistency"
|
||||
components={[
|
||||
<Link to={`/manage/jobs/${problem.id}`} target="_blank"/>,
|
||||
]}
|
||||
values={{
|
||||
ro_number: problem.ro_number,
|
||||
code: problem.code,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Space>
|
||||
)}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
) : (
|
||||
<Space direction="vertical" style={{width: '100%', marginBottom: '5px'}}>
|
||||
{
|
||||
problemJobs.map((problem) => (
|
||||
<Alert
|
||||
key={problem.id}
|
||||
type="error"
|
||||
message={
|
||||
<Trans
|
||||
i18nKey="appointments.labels.dataconsistency"
|
||||
components={[
|
||||
<Link to={`/manage/jobs/${problem.id}`} target="_blank"/>,
|
||||
]}
|
||||
values={{
|
||||
ro_number: problem.ro_number,
|
||||
code: problem.code,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Space>
|
||||
)}
|
||||
|
||||
<Calendar
|
||||
events={data}
|
||||
defaultView={search.view || defaultView || "week"}
|
||||
date={selectedDate}
|
||||
onNavigate={(date, view, action) => {
|
||||
search.date = date.toISOString().substr(0, 10);
|
||||
history({ search: queryString.stringify(search) });
|
||||
}}
|
||||
onRangeChange={(start, end) => {
|
||||
if (setDateRangeCallback) setDateRangeCallback({ start, end });
|
||||
}}
|
||||
onView={(view) => {
|
||||
search.view = view;
|
||||
history({ 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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
<Calendar
|
||||
events={data}
|
||||
defaultView={search.view || defaultView || "week"}
|
||||
date={selectedDate}
|
||||
onNavigate={(date, view, action) => {
|
||||
search.date = date.toISOString().substr(0, 10);
|
||||
history({search: queryString.stringify(search)});
|
||||
}}
|
||||
onRangeChange={(start, end) => {
|
||||
if (setDateRangeCallback) setDateRangeCallback({start, end});
|
||||
}}
|
||||
onView={(view) => {
|
||||
search.view = view;
|
||||
history({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);
|
||||
|
||||
Reference in New Issue
Block a user