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);

7
client/src/pages/jobs-available/jobs-available.page.container.jsx
View File

@@ -11,12 +11,7 @@ export default function JobsAvailablePageContainer() {
const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
const { t } = useTranslation();
const estDataLazyLoad = useLazyQuery(
QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK,
{
fetchPolicy: "network-only"
}
);
const estDataLazyLoad = useLazyQuery(QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK);
useEffect(() => {
document.title = t("titles.jobsavailable");

34
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -16,20 +16,9 @@ import {
FaRegStickyNote,
FaShieldAlt
} from "react-icons/fa";
import { useHistory } from "react-router-dom";
//import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
//import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
//import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
//import JobsDetailFinancials from "../../components/jobs-detail-financial/jobs-detail-financial.component";
//import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
//import JobsDetailInsurance from "../../components/jobs-detail-insurance/jobs-detail-insurance.component";
//import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
//import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
//import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
//import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
//import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
import { useHistory, useLocation } from "react-router-dom";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import queryString from "query-string";
const JobsLinesContainer = lazy(() =>
import("../../components/job-detail-lines/job-lines.container")
);
@@ -84,14 +73,13 @@ export default function JobsDetailPage({
mutationConvertJob,
handleSubmit,
refetch,
scheduleModalState,
updateJobStatus,
tab
updateJobStatus
}) {
const { t } = useTranslation();
const [form] = Form.useForm();
const history = useHistory();
const search = queryString.parse(useLocation().search);
const formItemLayout = {
labelCol: {
xs: { span: 12 },
@@ -118,12 +106,7 @@ export default function JobsDetailPage({
<Suspense
fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
>
<ScheduleJobModalContainer
scheduleModalState={scheduleModalState}
jobId={job.id}
refetch={refetch}
/>
<ScheduleJobModalContainer />
<JobLineUpsertModalContainer />
<EnterInvoiceModalContainer />
@@ -168,14 +151,11 @@ export default function JobsDetailPage({
mutationConvertJob={mutationConvertJob}
refetch={refetch}
handleSubmit={handleSubmit}
scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus}
/>
<Tabs
defaultActiveKey={history.location.search.substring(1) || null}
onChange={key =>
history.replace({ ...history.location, search: `?${key}` })
}
defaultActiveKey={search.tab}
onChange={key => history.push({ search: `?tab=${key}` })}
>
<Tabs.TabPane
tab={

10
client/src/pages/jobs-detail/jobs-detail.page.container.jsx
View File

@@ -1,6 +1,6 @@
import { notification } from "antd";
import React, { useEffect, useState } from "react";
import { useMutation, useQuery } from "@apollo/react-hooks";
import { notification } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import AlertComponent from "../../components/alert/alert.component";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
@@ -8,11 +8,9 @@ import { CONVERT_JOB_TO_RO, GET_JOB_BY_PK, UPDATE_JOB, UPDATE_JOB_STATUS } from
import JobsDetailPage from "./jobs-detail.page.component";
function JobsDetailPageContainer({ match }) {
const { jobId, tab } = match.params;
const { jobId } = match.params;
const { t } = useTranslation();
const scheduleModalState = useState(false);
const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
@@ -55,9 +53,7 @@ function JobsDetailPageContainer({ match }) {
mutationConvertJob={mutationConvertJob}
mutationUpdateJob={mutationUpdateJob}
refetch={refetch}
scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus}
tab={tab}
/>
) : (
<AlertComponent message={t("jobs.errors.noaccess")} type="error" />

3
client/src/redux/modals/modals.reducer.js
View File

@@ -12,7 +12,8 @@ const INITIAL_STATE = {
jobLineEdit: { ...baseModal },
invoiceEnter: { ...baseModal },
courtesyCarReturn: { ...baseModal },
noteUpsert: { ...baseModal }
noteUpsert: { ...baseModal },
schedule: { ...baseModal }
};
const modalsReducer = (state = INITIAL_STATE, action) => {

5
client/src/redux/modals/modals.selectors.js
View File

@@ -21,3 +21,8 @@ export const selectNoteUpsert = createSelector(
[selectModals],
modals => modals.noteUpsert
);
export const selectSchedule = createSelector(
[selectModals],
modals => modals.schedule
);