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

CLEANUP Schedule modal now using redux. Deleted manual schedule modal. To be incorporated into generic.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-02 12:37:15 -07:00
parent 828ca721db
commit 7254622f52
12 changed files with 177 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -24,24 +24,25 @@ import BarcodePopup from "../barcode-popup/barcode-popup.component";
import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = dispatch => ({
setScheduleContext: context =>
dispatch(setModalContext({ context: context, modal: "schedule" }))
});
export default connect(
mapStateToProps,
null
)(function JobsDetailHeader({
export function JobsDetailHeader({
job,
mutationConvertJob,
refetch,
scheduleModalState,
bodyshop,
updateJobStatus
updateJobStatus,
setScheduleContext
}) {
const { t } = useTranslation();
const setscheduleModalVisible = scheduleModalState[1];
const tombstoneTitle = (
<div>
@@ -74,7 +75,12 @@ export default connect(
<Button
//TODO Enabled logic based on status.
onClick={() => {
setscheduleModalVisible(true);
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: job.id
}
});
}}
>
{t("jobs.actions.schedule")}
@@ -163,4 +169,6 @@ export default connect(
</Descriptions>
</PageHeader>
);
});
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailHeader);

67
client/src/components/schedule-appointment-modal/schedule-appointment-modal.component.jsx
View File

@@ -1,67 +0,0 @@
import { Checkbox, Col, DatePicker, Modal, Row, TimePicker, Input } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
export default function ScheduleJobModalComponent({
appData,
setAppData,
formData,
setFormData,
...props
}) {
const { t } = useTranslation();
//TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
return (
<Modal
{...props}
width={"80%"}
maskClosable={false}
destroyOnClose={true}
okButtonProps={{ disabled: appData.start ? false : true }}
>
<Row>
<Col span={14}>
<Row>
Manual Job Selection Scheduled Time
<Input
placeholder={t("appointments.fields.title")}
onChange={e => {
setAppData({ ...appData, title: e.target.value });
}}
/>
<DatePicker
value={appData.start}
onChange={e => {
setAppData({ ...appData, start: e });
}}
/>
<TimePicker
value={appData.start}
format={"HH:mm"}
minuteStep={15}
onChange={e => {
setAppData({ ...appData, start: e });
}}
/>
</Row>
{
//TODO Build out notifications.
}
<Checkbox
defaultChecked={formData.notifyCustomer}
onChange={e =>
setFormData({ ...formData, notifyCustomer: e.target.checked })
}
>
{t("jobs.labels.appointmentconfirmation")}
</Checkbox>
</Col>
<Col span={10}>
<ScheduleDayViewContainer day={appData.start} />
</Col>
</Row>
</Modal>
);
}

74
client/src/components/schedule-appointment-modal/schedule-appointment-modal.container.jsx
View File

@@ -1,74 +0,0 @@
import { notification } from "antd";
import moment from "moment";
import React, { useState } from "react";
import { useMutation } from "@apollo/react-hooks";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_APPOINTMENT } from "../../graphql/appointments.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ScheduleAppointmentModalComponent from "./schedule-appointment-modal.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export default connect(
mapStateToProps,
null
)(function ScheduleAppointmentModalContainer({
scheduleModalState,
jobId,
bodyshop,
refetch
}) {
const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
const [appData, setAppData] = useState({
jobid: jobId,
bodyshopid: bodyshop.id,
isintake: false,
start: null
});
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
const [formData, setFormData] = useState({ notifyCustomer: false });
const { t } = useTranslation();
return (
<ScheduleAppointmentModalComponent
appData={appData}
setAppData={setAppData}
formData={formData}
setFormData={setFormData}
//Spreadable Modal Props
visible={scheduleModalVisible}
onCancel={() => setscheduleModalVisible(false)}
onOk={() => {
//TODO Customize the amount of minutes it will add.
insertAppointment({
variables: {
app: { ...appData, end: moment(appData.start).add(60, "minutes") }
}
})
.then(r => {
notification["success"]({
message: t("appointments.successes.created")
});
if (formData.notifyCustomer) {
//TODO Implement customer reminder on scheduling.
alert("Chosed to notify the customer somehow!");
}
setscheduleModalVisible(false);
if (refetch) refetch();
})
.catch(error => {
notification["error"]({
message: t("appointments.errors.saving", {
message: error.message
})
});
});
}}
/>
);
});

34
client/src/components/schedule-calendar/schedule-calendar.component.jsx
View File

@@ -1,15 +1,23 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
//import "react-big-calendar/lib/css/react-big-calendar.css";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import { Button } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import ScheduleAppointmentModalContainer from "../schedule-appointment-modal/schedule-appointment-modal.container";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
export default function ScheduleCalendarComponent({
const mapDispatchToProps = dispatch => ({
setScheduleContext: context =>
dispatch(setModalContext({ context: context, modal: "schedule" }))
});
export function ScheduleCalendarComponent({
data,
refetch,
scheduleModalState
setScheduleContext
}) {
const { t } = useTranslation();
@@ -25,17 +33,18 @@ export default function ScheduleCalendarComponent({
<Button
onClick={() => {
scheduleModalState[1](true);
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: null
}
});
}}
>
{t("appointments.actions.new")}
</Button>
<ScheduleAppointmentModalContainer
scheduleModalState={scheduleModalState}
jobId={null}
refetch={refetch}
/>
<ScheduleModal />
<ScheduleCalendarWrapperComponent
data={data}
@@ -45,3 +54,4 @@ export default function ScheduleCalendarComponent({
</div>
);
}
export default connect(null, mapDispatchToProps)(ScheduleCalendarComponent);

13
client/src/components/schedule-calendar/schedule-calendar.container.jsx
View File

@@ -1,18 +1,14 @@
import React, { useState } from "react";
import { useQuery } from "@apollo/react-hooks";
import ScheduleCalendarComponent from "./schedule-calendar.component";
import React from "react";
import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ScheduleCalendarComponent from "./schedule-calendar.component";
export default function ScheduleCalendarContainer() {
const { loading, error, data, refetch } = useQuery(
QUERY_ALL_ACTIVE_APPOINTMENTS,
{
fetchPolicy: "network-only"
}
QUERY_ALL_ACTIVE_APPOINTMENTS
);
const scheduleModalState = useState(false);
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
@@ -28,7 +24,6 @@ export default function ScheduleCalendarContainer() {
return (
<ScheduleCalendarComponent
scheduleModalState={scheduleModalState}
refetch={refetch}
data={data ? normalizedData : null}
/>

103
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -1,74 +1,63 @@
import { Checkbox, Col, DatePicker, Modal, Row, Tabs, TimePicker } from "antd";
import { Checkbox, Col, DatePicker, Row, Tabs, TimePicker } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
export default function ScheduleJobModalComponent({
existingAppointments,
appData,
setAppData,
formData,
setFormData,
...props
setFormData
}) {
const { t } = useTranslation();
//TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
return (
<Modal
{...props}
width={"80%"}
maskClosable={false}
destroyOnClose={true}
okButtonProps={{ disabled: appData.start ? false : true }}
>
<Row>
<Col span={14}>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="SMART Scheduling" key="auto">
Automatic Job Selection.
</Tabs.TabPane>
<Tabs.TabPane tab="Manual Scheduling" key="manual">
<Row>
Manual Job Selection Scheduled Time
<DatePicker
value={appData.start}
onChange={e => {
setAppData({ ...appData, start: e });
}}
/>
<TimePicker
value={appData.start}
format={"HH:mm"}
minuteStep={15}
onChange={e => {
setAppData({ ...appData, start: e });
}}
/>
</Row>
</Tabs.TabPane>
</Tabs>
<ScheduleExistingAppointmentsList
existingAppointments={existingAppointments}
/>
{
//TODO Build out notifications.
<Row>
<Col span={14}>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="SMART Scheduling" key="auto">
Automatic Job Selection.
</Tabs.TabPane>
<Tabs.TabPane tab="Manual Scheduling" key="manual">
<Row>
Manual Job Selection Scheduled Time
<DatePicker
value={appData.start}
onChange={e => {
setAppData({ ...appData, start: e });
}}
/>
<TimePicker
value={appData.start}
format={"HH:mm"}
minuteStep={15}
onChange={e => {
setAppData({ ...appData, start: e });
}}
/>
</Row>
</Tabs.TabPane>
</Tabs>
<ScheduleExistingAppointmentsList
existingAppointments={existingAppointments}
/>
{
//TODO Build out notifications.
}
<Checkbox
defaultChecked={formData.notifyCustomer}
onChange={e =>
setFormData({ ...formData, notifyCustomer: e.target.checked })
}
<Checkbox
defaultChecked={formData.notifyCustomer}
onChange={e =>
setFormData({ ...formData, notifyCustomer: e.target.checked })
}
>
{t("jobs.labels.appointmentconfirmation")}
</Checkbox>
</Col>
<Col span={10}>
<ScheduleDayViewContainer day={appData.start} />
</Col>
</Row>
</Modal>
>
{t("jobs.labels.appointmentconfirmation")}
</Checkbox>
</Col>
<Col span={10}>
<ScheduleDayViewContainer day={appData.start} />
</Col>
</Row>
);
}

121
client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
View File

@@ -6,28 +6,32 @@ import {
QUERY_APPOINTMENTS_BY_JOBID
} from "../../graphql/appointments.queries";
import moment from "moment";
import { notification } from "antd";
import { notification, Modal } from "antd";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { selectSchedule } from "../../redux/modals/modals.selectors";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
bodyshop: selectBodyshop,
scheduleModal: selectSchedule
});
export default connect(
mapStateToProps,
null
)(function ScheduleJobModalContainer({
scheduleModalState,
jobId,
const mapDispatchToProps = dispatch => ({
toggleModalVisible: () => dispatch(toggleModalVisible("schedule"))
});
export function ScheduleJobModalContainer({
scheduleModal,
bodyshop,
refetch
toggleModalVisible
}) {
const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
const { visible, context, actions } = scheduleModal;
const { jobId } = context;
const { refetch } = actions;
const [appData, setAppData] = useState({
jobid: jobId,
start: null,
@@ -46,48 +50,61 @@ export default connect(
const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
variables: { jobid: jobId },
fetchPolicy: "network-only",
skip: !scheduleModalVisible
skip: !visible
});
return (
<ScheduleJobModalComponent
existingAppointments={existingAppointments}
appData={appData}
setAppData={setAppData}
formData={formData}
setFormData={setFormData}
//Spreadable Modal Props
visible={scheduleModalVisible}
onCancel={() => setscheduleModalVisible(false)}
onOk={() => {
//TODO Customize the amount of minutes it will add.
insertAppointment({
variables: {
app: { ...appData, end: moment(appData.start).add(60, "minutes") }
}
})
.then(r => {
updateJobStatus().then(r => {
notification["success"]({
message: t("appointments.successes.created")
});
if (formData.notifyCustomer) {
//TODO Implement customer reminder on scheduling.
alert("Chosed to notify the customer somehow!");
}
setscheduleModalVisible(false);
if (refetch) refetch();
});
})
.catch(error => {
notification["error"]({
message: t("appointments.errors.saving", {
message: error.message
})
});
//TODO Customize the amount of minutes it will add.
const handleOk = () => {
insertAppointment({
variables: {
app: { ...appData, end: moment(appData.start).add(60, "minutes") }
}
})
.then(r => {
updateJobStatus().then(r => {
notification["success"]({
message: t("appointments.successes.created")
});
}}
/>
if (formData.notifyCustomer) {
//TODO Implement customer reminder on scheduling.
alert("Chosed to notify the customer somehow!");
}
toggleModalVisible();
if (refetch) refetch();
});
})
.catch(error => {
notification["error"]({
message: t("appointments.errors.saving", {
message: error.message
})
});
});
};
return (
<Modal
visible={visible}
onCancel={() => toggleModalVisible()}
onOk={handleOk}
width={"90%"}
maskClosable={false}
destroyOnClose
okButtonProps={{ disabled: appData.start ? false : true }}
>
<ScheduleJobModalComponent
existingAppointments={existingAppointments}
appData={appData}
setAppData={setAppData}
formData={formData}
setFormData={setFormData}
/>
</Modal>
);
});
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScheduleJobModalContainer);