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

21
bodyshop_translations.babel
View File

@@ -4977,6 +4977,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>selectdate</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>unknown</name>
<definition_loaded>false</definition_loaded>

1
client/package.json
View File

@@ -30,6 +30,7 @@
"react-apollo": "^3.1.5",
"react-barcode": "^1.4.0",
"react-big-calendar": "^0.24.6",
"react-datepicker": "^2.16.0",
"react-dom": "^16.13.1",
"react-drag-listview": "^0.1.6",
"react-ga": "^2.7.0",

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>

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

@@ -142,30 +142,6 @@ export function JobsDetailPage({
initialValues={{
...job,
loss_date: job.loss_date ? moment(job.loss_date) : null,
date_estimated: job.date_estimated
? moment(job.date_estimated)
: null,
date_open: job.date_open ? moment(job.date_open) : null,
date_scheduled: job.date_scheduled
? moment(job.date_scheduled)
: null,
scheduled_in: job.scheduled_in ? moment(job.scheduled_in) : null,
actual_in: job.actual_in ? moment(job.actual_in) : null,
scheduled_completion: job.scheduled_completion
? moment(job.scheduled_completion)
: null,
actual_completion: job.actual_completion
? moment(job.actual_completion)
: null,
scheduled_delivery: job.scheduled_delivery
? moment(job.scheduled_delivery)
: null,
actual_delivery: job.actual_delivery
? moment(job.actual_delivery)
: null,
date_invoiced: job.date_invoiced ? moment(job.date_invoiced) : null,
date_closed: job.date_closed ? moment(job.date_closed) : null,
date_exported: job.date_exported ? moment(job.date_exported) : null,
}}>
<JobsDetailHeader
job={job}

4
client/src/redux/user/user.sagas.js
View File

@@ -111,7 +111,7 @@ export function* setInstanceIdSaga({ payload: uid }) {
});
yield put(setLocalFingerprint(fingerprint));
yield delay(5000);
yield delay(5 * 60 * 1000);
yield put(checkInstanceId(uid));
} catch (error) {
console.log("error", error);
@@ -131,7 +131,7 @@ export function* checkInstanceIdSaga({ payload: uid }) {
let fingerprint = yield select((state) => state.user.fingerprint);
if (snapshot.data().fingerprint === fingerprint) {
yield delay(30000);
yield delay(5 * 60 * 1000);
yield put(checkInstanceId(uid));
} else {
console.log("ERROR: Fingerprints do not match. Conflict detected.");

1
client/src/translations/en_us/common.json
View File

@@ -333,6 +333,7 @@
"no": "No",
"out": "Out",
"search": "Search...",
"selectdate": "Select date",
"unknown": "Unknown",
"yes": "Yes"
},

1
client/src/translations/es/common.json
View File

@@ -333,6 +333,7 @@
"no": "",
"out": "Afuera",
"search": "Buscar...",
"selectdate": "",
"unknown": "Desconocido",
"yes": ""
},

1
client/src/translations/fr/common.json
View File

@@ -333,6 +333,7 @@
"no": "",
"out": "En dehors",
"search": "Chercher...",
"selectdate": "",
"unknown": "Inconnu",
"yes": ""
},

58
client/yarn.lock
View File

@@ -4327,6 +4327,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-context@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
dependencies:
gud "^1.0.0"
warning "^4.0.3"
cross-spawn@7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
@@ -4723,6 +4731,11 @@ date-arithmetic@^4.0.1:
resolved "https://registry.yarnpkg.com/date-arithmetic/-/date-arithmetic-4.1.0.tgz#e5d6434e9deb71f79760a37b729e4a515e730ddf"
integrity sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==
date-fns@^2.0.1:
version "2.14.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4766,7 +4779,7 @@ deep-diff@^0.3.5:
resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=
deep-equal@^1.0.1:
deep-equal@^1.0.1, deep-equal@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -6339,6 +6352,11 @@ growly@^1.3.0:
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
gzip-size@5.1.1, gzip-size@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -9554,7 +9572,7 @@ pnp-webpack-plugin@1.6.4:
dependencies:
ts-pnp "^1.1.6"
popper.js@^1.15.0:
popper.js@^1.14.4, popper.js@^1.15.0:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -10979,6 +10997,17 @@ react-click-outside@tj/react-click-outside:
version "1.1.1"
resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"
react-datepicker@^2.16.0:
version "2.16.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-2.16.0.tgz#6bd68de94f5fb38c8f6a4370f3c612837c700e4e"
integrity sha512-TvcmSY27rn0JKvuJuIXNNS+niGQNdgtuG/CsBttVYhPOA9KmSw7c2PvQBPVEvzkyV+QPNJ8jN/KVJNj9uvopqA==
dependencies:
classnames "^2.2.6"
date-fns "^2.0.1"
prop-types "^15.7.2"
react-onclickoutside "^6.9.0"
react-popper "^1.3.4"
react-dev-utils@^10.2.1:
version "10.2.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -11139,6 +11168,11 @@ react-number-format@^4.4.1:
dependencies:
prop-types "^15.7.2"
react-onclickoutside@^6.9.0:
version "6.9.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
react-overlays@^2.0.0-0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-2.1.1.tgz#ffe2090c4a10da6b8947a1c7b1a67d0457648a0d"
@@ -11163,6 +11197,19 @@ react-popopo@^2.1.9:
react-dom ">= 16.3"
styled-components ">= 4.0"
react-popper@^1.3.4:
version "1.3.7"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
dependencies:
"@babel/runtime" "^7.1.2"
create-react-context "^0.3.0"
deep-equal "^1.1.1"
popper.js "^1.14.4"
prop-types "^15.6.1"
typed-styles "^0.0.7"
warning "^4.0.2"
react-prop-toggle@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz#8b0b7e74653606b1427cfcf6c4eaa9198330568e"
@@ -13178,6 +13225,11 @@ type@^2.0.0:
resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
typed-styles@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -13471,7 +13523,7 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
warning@^4.0.1, warning@^4.0.3, warning@~4.0.3:
warning@^4.0.1, warning@^4.0.2, warning@^4.0.3, warning@~4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==