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

Replaced date time pickers with another compoent to better choose time. BOD-122

Browse Source
This commit is contained in:
Patrick Fic
2020-05-22 10:24:54 -07:00
parent 19eceae2b9
commit d8c159cde0
12 changed files with 159 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/form-date-time-picker/form-date-time-picker.component.jsx Normal file
View File

@@ -0,0 +1,33 @@
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useTranslation } from "react-i18next";
//To be used as a form element only.
const DateTimePicker = ({ value, onChange, onBlur }) => {
const { t } = useTranslation();
const handleChange = (value) => {
if (onChange) {
onChange(value);
}
};
return (
<DatePicker
className='ant-picker ant-picker-input'
data-lpignore='true'
selected={value ? new Date(value) : null}
onChange={handleChange}
showTimeSelect
timeIntervals={5}
onBlur={onBlur}
isClearable
placeholderText={t("general.labels.selectdate")}
dateFormat='MMMM d, yyyy h:mm aa'
/>
);
};
export default DateTimePicker;

5
client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx
View File

@@ -12,6 +12,7 @@ import { createStructuredSelector } from "reselect";
import { useHistory } from "react-router-dom";
import queryString from "query-string";
import { useLocation } from "react-router-dom";
import DateTimePicker from '../../../form-date-time-picker/form-date-time-picker.component'
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -102,12 +103,12 @@ export function JobIntakeForm({ formItems, bodyshop }) {
message: t("general.validation.required"),
},
]}>
<DatePicker />
<DateTimePicker />
</Form.Item>
<Form.Item
name='scheduledDelivery'
label={t("jobs.fields.scheduled_delivery")}>
<DatePicker />
<DateTimePicker />
</Form.Item>
<Button htmlType='submit'>{t("general.actions.submit")}</Button>
</Form>

69
client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
View File

@@ -1,78 +1,61 @@
import { DatePicker, Form } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
export default function JobsDetailDatesComponent({ job }) {
const { t } = useTranslation();
// initialValue: job.loss_date ? moment(job.loss_date) : null
// initialValue: job.date_estimated ? moment(job.date_estimated) : null
// initialValue: job.date_open ? moment(job.date_open) : null
// initialValue: job.date_scheduled ? moment(job.date_scheduled) : null
// initialValue: job.scheduled_in ? moment(job.scheduled_in) : null
// initialValue: job.actual_in ? moment(job.actual_in) : null
// initialValue: job.scheduled_completion ? moment(job.scheduled_completion) : null
// initialValue: job.actual_completion ? moment(job.actual_completion) : null
// initialValue: job.scheduled_delivery ? moment(job.scheduled_delivery) : null
// initialValue: job.actual_delivery ? moment(job.actual_delivery) : null
// initialValue: job.date_invoiced ? moment(job.date_invoiced) : null
// initialValue: job.date_closed ? moment(job.date_closed) : null
// initialValue: job.date_exported ? moment(job.date_exported) : null
return (
<div>
<Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
<Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
<DatePicker />
</Form.Item>
CAA # seems not correct based on field mapping Class seems not correct
based on field mapping
<Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
<DatePicker />
<Form.Item label={t("jobs.fields.date_estimated")} name='date_estimated'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_open")} name="date_open">
<DatePicker />
<Form.Item label={t("jobs.fields.date_open")} name='date_open'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
<DatePicker />
<Form.Item label={t("jobs.fields.date_scheduled")} name='date_scheduled'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
<DatePicker />
<Form.Item label={t("jobs.fields.scheduled_in")} name='scheduled_in'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
<DatePicker />
<Form.Item label={t("jobs.fields.actual_in")} name='actual_in'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.scheduled_completion")}
name="scheduled_completion"
>
<DatePicker />
name='scheduled_completion'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.actual_completion")}
name="actual_completion"
>
<DatePicker />
name='actual_completion'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.scheduled_delivery")}
name="scheduled_delivery"
>
<DatePicker />
name='scheduled_delivery'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.actual_delivery")}
name="actual_delivery"
>
<DatePicker />
name='actual_delivery'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
<DatePicker />
<Form.Item label={t("jobs.fields.date_invoiced")} name='date_invoiced'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_closed")} name="date_closed">
<DatePicker />
<Form.Item label={t("jobs.fields.date_closed")} name='date_closed'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
<DatePicker />
<Form.Item label={t("jobs.fields.date_exported")} name='date_exported'>
<DateTimePicker />
</Form.Item>
</div>
);

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

@@ -3,40 +3,35 @@ 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";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
export default function ScheduleJobModalComponent({
existingAppointments,
appData,
setAppData,
formData,
setFormData
setFormData,
}) {
const { t } = useTranslation();
//TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
return (
<Row>
<Col span={14}>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="SMART Scheduling" key="auto">
<Tabs defaultActiveKey='1'>
<Tabs.TabPane tab='SMART Scheduling' key='auto'>
Automatic Job Selection.
</Tabs.TabPane>
<Tabs.TabPane tab="Manual Scheduling" key="manual">
<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 });
}}
/>
<div style={{height: "300px"}}>
<DateTimePicker
value={appData.start}
onChange={(e) => {
setAppData({ ...appData, start: e });
}}
/>
</div>
</Row>
</Tabs.TabPane>
</Tabs>
@@ -48,10 +43,9 @@ export default function ScheduleJobModalComponent({
}
<Checkbox
defaultChecked={formData.notifyCustomer}
onChange={e =>
onChange={(e) =>
setFormData({ ...formData, notifyCustomer: e.target.checked })
}
>
}>
{t("jobs.labels.appointmentconfirmation")}
</Checkbox>
</Col>