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

IO-1222 Add preview to schedule view.

Browse Source
This commit is contained in:
Patrick Fic
2021-06-28 13:38:09 -07:00
parent f744acd131
commit 4b7bbe686a
7 changed files with 87 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ 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";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -45,45 +46,48 @@ export function ScheduleCalendarWrapperComponent({
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={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}
/>
<>
<JobDetailCards />
<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}
/>
</>
);
}