admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIrst round of changes for Instance Manger & Pro Manager

Browse Source
This commit is contained in:
Patrick Fic
2024-02-16 14:01:39 -07:00
parent 3e44458f5c
commit af7ff2d8b5
36 changed files with 1068 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js
View File

@@ -16,6 +16,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
import InstanceRenderMgr from '../../utils/instanceRenderMgr'
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -200,18 +201,22 @@ export function ScheduleCalendarHeaderComponent({
};
return (
<div className="imex-calendar-load">
<ScheduleBlockDay
alreadyBlocked={isDayBlocked.length > 0}
date={date}
refetch={refetch}
>
<div style={{color: isShopOpen(date) ? "" : "tomato"}}>
{label}
{calculating ? <LoadingSkeleton/> : LoadComponent}
</div>
</ScheduleBlockDay>
</div>
<div className="imex-calendar-load">
<ScheduleBlockDay
alreadyBlocked={isDayBlocked.length > 0}
date={date}
refetch={refetch}
>
<div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
{label}
{InstanceRenderMgr({
imex: calculating ? <LoadingSkeleton /> : LoadComponent,
rome: "USE_IMEX",
promanager: <></>,
})}
</div>
</ScheduleBlockDay>
</div>
);
}

290
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
View File

@@ -1,161 +1,171 @@
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 {Link, useLocation, useNavigate} 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 {Alert, Collapse, Space} from "antd";
import {Trans, useTranslation} from "react-i18next";
import { selectProblemJobs } from "../../redux/application/application.selectors";
import { Alert, Collapse, Space } from "antd";
import { Trans, useTranslation } from "react-i18next";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
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"}}>
{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>
</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,
}}
/>
}
/>
))
}
return (
<>
<JobDetailCards />
{InstanceRenderManager({
imex:
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>
)}
</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}
/>
</>
);
rome: "USE_IMEX",
promanager: <span />,
})}
<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);