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

Added config provider with default small text. Replcaed all datepicker components to add proper format. BOD-166 BOD-246

Browse Source
This commit is contained in:
Patrick Fic
2020-08-04 15:52:57 -07:00
parent 8590767e33
commit bdba1a2132
31 changed files with 329 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bodyshop_translations.babel
View File

@@ -17452,6 +17452,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>receiveinvoice</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>
</children>
</folder_node>
<folder_node>

15
client/src/App/App.container.jsx
View File

@@ -15,6 +15,11 @@ import GlobalLoadingBar from "../components/global-loading-bar/global-loading-ba
import { auth } from "../firebase/firebase.utils";
import errorLink from "../graphql/apollo-error-handling";
import App from "./App";
import { ConfigProvider } from "antd";
import enLocale from "antd/es/locale/en_US";
import moment from "moment";
moment.locale("en-US");
if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
@@ -124,8 +129,14 @@ export const client = new ApolloClient({
export default function AppContainer() {
return (
<ApolloProvider client={client}>
<GlobalLoadingBar />
<App />
<ConfigProvider
componentSize="small"
input={{ autoComplete: "new-password" }}
locale={enLocale}
>
<GlobalLoadingBar />
<App />
</ConfigProvider>
</ApolloProvider>
);
}

17
client/src/components/_test/test.component.jsx
View File

@@ -1,6 +1,6 @@
import {
PaymentRequestButtonElement,
useStripe,
useStripe
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
@@ -9,8 +9,6 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { TemplateList } from "../../utils/TemplateConstants";
import { Input, InputNumber, Popover } from "antd";
import { isInteger } from "lodash";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -20,8 +18,6 @@ const mapDispatchToProps = (dispatch) => ({
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
});
function Test({ bodyshop, setEmailOptions }) {
const stripe = useStripe();
@@ -48,18 +44,17 @@ function Test({ bodyshop, setEmailOptions }) {
// var details = {
// total: { label: "", amount: { currency: "CAD", value: "0.00" } },
// };
// new PaymentRequest(
// [{ supportedMethods: ["basic-card"] }],
// {}
// // details
// ).show();
new PaymentRequest(
[{ supportedMethods: ["basic-card"] }],
{}
// details
).show();
}
});
}
}, [stripe]);
if (paymentRequest) {
return (
<div style={{ height: "300px" }}>
<PaymentRequestButtonElement options={{ paymentRequest }} />

14
client/src/components/contract-form/contract-form.component.jsx
View File

@@ -1,11 +1,11 @@
import { DatePicker, Form, Input, InputNumber } from "antd";
import { Form, Input, InputNumber } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import InputPhone from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function ContractFormComponent({ form }) {
const { t } = useTranslation();
return (
@@ -36,7 +36,7 @@ export default function ContractFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.scheduledreturn")}
@@ -48,13 +48,13 @@ export default function ContractFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.actualreturn")}
name="actualreturn"
>
<DatePicker />
<FormDatePicker />
</Form.Item>
</LayoutFormRow>
@@ -98,7 +98,7 @@ export default function ContractFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlst")}
@@ -212,7 +212,7 @@ export default function ContractFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
</LayoutFormRow>

2
client/src/components/contract-status-select/contract-status-select.component.jsx
View File

@@ -14,7 +14,7 @@ const ContractStatusComponent = (
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
return (
<Select

15
client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
View File

@@ -1,8 +1,9 @@
import { Button, DatePicker, Form, Input, InputNumber } from "antd";
import { Button, Form, Input, InputNumber } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
import FormDatePicker from '../form-date-picker/form-date-picker.component';
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
@@ -98,7 +99,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
label={t("courtesycars.fields.purchasedate")}
name="purchasedate"
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("courtesycars.fields.servicestartdate")}
@@ -110,13 +111,13 @@ export default function CourtesyCarCreateFormComponent({ form }) {
label={t("courtesycars.fields.serviceenddate")}
name="serviceenddate"
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("courtesycars.fields.leaseenddate")}
name="leaseenddate"
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("courtesycars.fields.status")}
@@ -152,7 +153,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item label={t("courtesycars.fields.damage")} name="damage">
<Input />
@@ -182,7 +183,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("courtesycars.fields.insuranceexpires")}
@@ -194,7 +195,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
<CurrencyInput />

2
client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
View File

@@ -10,7 +10,7 @@ const CourtesyCarFuelComponent = ({ value = 100, onChange }, ref) => {
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
const marks = {
0: {

5
client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.component.jsx
View File

@@ -1,7 +1,8 @@
import { Form, DatePicker, InputNumber } from "antd";
import { Form, InputNumber } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
import FormDatePicker from '../form-date-picker/form-date-picker.component';
export default function CourtesyCarReturnModalComponent() {
const { t } = useTranslation();
@@ -18,7 +19,7 @@ export default function CourtesyCarReturnModalComponent() {
}
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.kmend")}

2
client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
View File

@@ -14,7 +14,7 @@ const CourtesyCarStatusComponent = (
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
return (
<Select

5
client/src/components/employee-search-select/employee-search-select.component.jsx
View File

@@ -1,7 +1,6 @@
import { Select, Tag } from "antd";
import React, { useEffect, useState, forwardRef } from "react";
import React, { forwardRef, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
const { Option } = Select;
//To be used as a form element only.
@@ -15,7 +14,7 @@ const EmployeeSearchSelect = (
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
return (
<Select

16
client/src/components/form-date-picker/form-date-picker.component.jsx
View File

@@ -1,12 +1,11 @@
import React, { forwardRef, useEffect } from "react";
import { DatePicker } from "antd";
import { useTranslation } from "react-i18next";
import moment from "moment";
import React, { forwardRef } from "react";
//To be used as a form element only.
const CustomDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
const { t } = useTranslation();
const dateFormat = "MM/DD/YYYY";
const FormDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
const handleChange = (newDate) => {
if (value !== newDate && onChange) {
onChange(newDate);
@@ -23,9 +22,14 @@ const CustomDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
return (
<div onKeyDown={handleKeyDown}>
<DatePicker value={value} onChange={handleChange} {...restProps} />
<DatePicker
value={value}
onChange={handleChange}
format={dateFormat}
{...restProps}
/>
</div>
);
};
export default forwardRef(CustomDatePicker);
export default forwardRef(FormDatePicker);

2
client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
View File

@@ -50,7 +50,7 @@ const FormInputNUmberCalculator = (
useEffect(() => {
if (value !== formValue && formOnChange) formOnChange(value);
}, [formOnChange, value]);
}, [formOnChange, formValue, value]);
useEffect(() => {
if (history.length > 2) {

13
client/src/components/invoice-form/invoice-form.component.jsx
View File

@@ -1,15 +1,8 @@
import {
Button,
DatePicker,
Form,
Input,
Statistic,
Switch,
Upload,
} from "antd";
import { Button, Form, Input, Statistic, Switch, Upload } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
@@ -113,7 +106,7 @@ export default function InvoiceFormComponent({
},
]}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}

16
client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx
View File

@@ -16,7 +16,7 @@ const InvoiceLineSearchSelect = (
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
return (
<Select
@@ -28,9 +28,10 @@ const InvoiceLineSearchSelect = (
width: 300,
}}
onChange={setOption}
optionFilterProp='line_desc'
optionFilterProp="line_desc"
onBlur={onBlur}
onSelect={onSelect}>
onSelect={onSelect}
>
<Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
{t("invoicelines.labels.other")}
</Select.Option>
@@ -42,14 +43,15 @@ const InvoiceLineSearchSelect = (
cost={item.act_price ? item.act_price : 0}
part_type={item.part_type}
line_desc={item.line_desc}
part_qty={item.part_qty}>
<Row justify='center' align='middle'>
part_qty={item.part_qty}
>
<Row justify="center" align="middle">
<Col span={12}>{item.line_desc}</Col>
<Col span={8}>
<Tag color='blue'>{item.oem_partno}</Tag>
<Tag color="blue">{item.oem_partno}</Tag>
</Col>
<Col span={4}>
<Tag color='green'>
<Tag color="green">
<CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
</Tag>
</Col>

37
client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
View File

@@ -1,18 +1,11 @@
import { useMutation } from "@apollo/react-hooks";
import {
Button,
Card,
DatePicker,
Form,
InputNumber,
notification,
Popover,
} from "antd";
import { Button, Card, Form, InputNumber, notification, Popover } from "antd";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { INSERT_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { INSERT_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
const { t } = useTranslation();
@@ -49,44 +42,48 @@ export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
<div>
<Form
form={form}
layout='vertical'
layout="vertical"
onFinish={handleFinish}
initialValues={{}}>
initialValues={{}}
>
<Form.Item
label={t("scoreboard.fields.date")}
name='date'
name="date"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
]}
>
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("scoreboard.fields.bodyhrs")}
name='bodyhrs'
name="bodyhrs"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<InputNumber precision={1} />
</Form.Item>
<Form.Item
label={t("scoreboard.fields.painthrs")}
name='painthrs'
name="painthrs"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<InputNumber precision={1} />
</Form.Item>
<Button type='primary' htmlType='submit'>
<Button type="primary" htmlType="submit">
{t("general.actions.save")}
</Button>
</Form>

7
client/src/components/job-search-select/job-search-select.component.jsx
View File

@@ -14,7 +14,7 @@ const JobSearchSelect = (
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
return (
<Select
@@ -28,8 +28,9 @@ const JobSearchSelect = (
}}
loading={loading}
onChange={setOption}
optionFilterProp='children'
onBlur={onBlur}>
optionFilterProp="children"
onBlur={onBlur}
>
{options
? options.map((o) => (
<Option key={o.id} value={o.id}>

5
client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
View File

@@ -1,6 +1,7 @@
import { Collapse, Form, Input, InputNumber, Switch, DatePicker } from "antd";
import { Collapse, Form, Input, InputNumber, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormDatePicker from '../form-date-picker/form-date-picker.component';
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -30,7 +31,7 @@ export default function JobsCreateJobsInfo({ form }) {
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
<DatePicker />
<FormDatePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_co_nm")} name='ins_co_nm'>
<Input />

70
client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx
View File

@@ -1,7 +1,8 @@
import { DatePicker, Form, Input, Checkbox } from "antd";
import { Checkbox, Form, Input } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function JobsCreateVehicleInfoNewComponent() {
@@ -22,10 +23,11 @@ export default function JobsCreateVehicleInfoNewComponent() {
selectedid: null,
},
});
}}>
}}
>
{t("jobs.labels.create.newvehicle")}
</Checkbox>
<LayoutFormRow header={t("vehicles.forms.detail")} grow>
<Form.Item
label={t("vehicles.fields.v_vin")}
@@ -35,7 +37,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
@@ -48,7 +51,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
@@ -59,7 +63,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
@@ -73,7 +78,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
@@ -84,7 +90,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
@@ -98,7 +105,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
@@ -109,7 +117,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
required: state.vehicle.new,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
@@ -117,72 +126,84 @@ export default function JobsCreateVehicleInfoNewComponent() {
<LayoutFormRow header={t("vehicles.forms.misc")} grow>
<Form.Item
label={t("vehicles.fields.v_type")}
name={["vehicle", "data", "v_type"]}>
name={["vehicle", "data", "v_type"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_trimcode")}
name={["vehicle", "data", "v_trimcode"]}>
name={["vehicle", "data", "v_trimcode"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item
label={t("vehicles.fields.v_tone")}
name={["vehicle", "data", "v_tone"]}>
name={["vehicle", "data", "v_tone"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_bstyle")}
name={["vehicle", "data", "v_bstyle"]}>
name={["vehicle", "data", "v_bstyle"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item
label={t("vehicles.fields.v_stage")}
name={["vehicle", "data", "v_stage"]}>
name={["vehicle", "data", "v_stage"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_prod_dt")}
name={["vehicle", "data", "v_prod_dt"]}>
<DatePicker disabled={!state.vehicle.new} />
name={["vehicle", "data", "v_prod_dt"]}
>
<FormDatePicker disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item
label={t("vehicles.fields.v_paint_codes")}
name={["vehicle", "data", "v_paint_codes"]}>
name={["vehicle", "data", "v_paint_codes"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_options")}
name={["vehicle", "data", "v_options"]}>
name={["vehicle", "data", "v_options"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item
label={t("vehicles.fields.trim_color")}
name={["vehicle", "data", "trim_color"]}>
name={["vehicle", "data", "trim_color"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_mldgcode")}
name={["vehicle", "data", "v_mldgcode"]}>
name={["vehicle", "data", "v_mldgcode"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item
label={t("vehicles.fields.v_makecode")}
name={["vehicle", "data", "v_makecode"]}>
name={["vehicle", "data", "v_makecode"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_engine")}
name={["vehicle", "data", "v_engine"]}>
name={["vehicle", "data", "v_engine"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>
@@ -190,7 +211,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
<LayoutFormRow grow>
<Form.Item
label={t("vehicles.fields.v_cond")}
name={["vehicle", "data", "v_cond"]}>
name={["vehicle", "data", "v_cond"]}
>
<Input disabled={!state.vehicle.new} />
</Form.Item>
</LayoutFormRow>

13
client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
View File

@@ -1,15 +1,14 @@
import { Col, Form, Input, Row, Divider, Select } from "antd";
import { Col, Divider, Form, Row, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobTotalsTable from "../job-totals-table/job-totals-table.component";
import FormRow from "../layout-form-row/layout-form-row.component";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import FieldInputNumberCalculator from "../field-input-number-calculator/field-input-number-calculator.component";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobTotalsTable from "../job-totals-table/job-totals-table.component";
import FormRow from "../layout-form-row/layout-form-row.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,

63
client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx
View File

@@ -1,6 +1,7 @@
import { DatePicker, Form, Input } from "antd";
import { Form, Input } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import Car from "../job-damage-visual/job-damage-visual.component";
@@ -13,47 +14,48 @@ export default function JobsDetailInsurance({ job, form }) {
return (
<div>
<FormRow header={t("jobs.forms.inscoinfo")}>
<Form.Item label={t("jobs.fields.ins_co_id")} name='ins_co_id'>
<Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_co_nm")} name='ins_co_nm'>
<Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_addr1")} name='ins_addr1'>
<Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_city")} name='ins_city'>
<Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'>
<Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_fn")} name='ins_ct_fn'>
<Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ph1")} name='ins_ph1'>
<Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
<FormItemPhone customInput={Input} />
</Form.Item>
<Form.Item
label={t("jobs.fields.ins_ea")}
name='ins_ea'
name="ins_ea"
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}>
]}
>
<FormItemEmail email={getFieldValue("ins_ea")} />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.claiminfo")}>
<Form.Item label={t("jobs.fields.clm_no")} name='clm_no'>
<Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.policy_no")} name='policy_no'>
<Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.regie_number")} name='regie_number'>
<Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
<Input />
</Form.Item>
</FormRow>
@@ -68,60 +70,65 @@ export default function JobsDetailInsurance({ job, form }) {
t("jobs.errors.nodamage")
)}
</div>
<Form.Item label={t("jobs.fields.loss_desc")} name='loss_desc'>
<Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
<DatePicker />
<Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
<FormDatePicker />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.appraiserinfo")}>
<Form.Item label={t("jobs.fields.est_co_nm")} name='est_co_nm'>
<Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ct_fn")} name='est_ct_fn'>
<Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ct_ln")} name='est_ct_ln'>
<Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ph1")} name='est_ph1'>
<Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.est_ea")}
name='est_ea'
name="est_ea"
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}>
]}
>
<FormItemEmail email={getFieldValue("est_ea")} />
</Form.Item>
</FormRow>
<FormRow header='TODO: TO BE PLACED'>
<Form.Item label={t("jobs.fields.pay_date")} name='pay_date'>
<FormRow header="TODO: TO BE PLACED">
<Form.Item label={t("jobs.fields.pay_date")} name="pay_date">
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.selling_dealer")}
name='selling_dealer'>
name="selling_dealer"
>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.servicing_dealer")}
name='servicing_dealer'>
name="servicing_dealer"
>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.selling_dealer_contact")}
name='selling_dealer_contact'>
name="selling_dealer_contact"
>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.servicing_dealer_contact")}
name='servicing_dealer_contact'>
name="servicing_dealer_contact"
>
<Input />
</Form.Item>
TODO: Adding servicing/selling dealer contact info?

1
client/src/components/notes-preset-button/notes-preset-button.component.jsx
View File

@@ -4,7 +4,6 @@ import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setMessage } from "../../redux/messaging/messaging.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({

11
client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx
View File

@@ -1,12 +1,13 @@
import { useMutation } from "@apollo/react-hooks";
import { Button, notification, Popover } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, notification, DatePicker, Popover } from "antd";
import { useMutation } from "@apollo/react-hooks";
import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -74,7 +75,7 @@ export function PartsOrderLineBackorderButton({
const popContent = (
<div>
<DatePicker onChange={(e) => setEta(e)} />
<FormDatePicker onChange={(e) => setEta(e)} />
<Button type="primary" disabled={eta === null} onClick={handleSave}>
{t("parts_orders.actions.backordered")}
</Button>

3
client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
View File

@@ -209,11 +209,10 @@ export function PartsOrderListTableComponent({
];
return (
<div>
<div style={{ margin: ".5rem" }}>
<Table
size="small"
scroll={{ x: "50%", y: "40rem" }}
pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns}
rowKey="id"
dataSource={record.parts_order_lines}

10
client/src/components/parts-order-modal/parts-order-modal.component.jsx
View File

@@ -1,13 +1,15 @@
import { DeleteFilled } from "@ant-design/icons";
import { DatePicker, Form, Input, Radio, InputNumber } from "antd";
import { Form, Input, InputNumber, Radio } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
export default function PartsOrderModalComponent({
vendorList,
sendTypeState,
isReturn
isReturn,
}) {
const [sendType, setSendType] = sendTypeState;
@@ -37,7 +39,7 @@ export default function PartsOrderModalComponent({
]}
label={t("parts_orders.fields.deliver_by")}
>
<DatePicker />
<FormDatePicker />
</Form.Item>
{t("parts_orders.labels.inthisorder")}

70
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -1,18 +1,11 @@
import {
Button,
DatePicker,
Form,
Input,
InputNumber,
Select,
Switch,
} from "antd";
import { Button, Form, Input, InputNumber, Select, Switch } from "antd";
import moment from "moment";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -47,95 +40,105 @@ export function ShopEmployeesFormComponent({
termination_date: selectedEmployee.termination_date
? moment(selectedEmployee.termination_date)
: null,
}}>
<Button type='primary' htmlType='submit'>
}}
>
<Button type="primary" htmlType="submit">
{t("general.actions.save")}
</Button>
<Form.Item
name='first_name'
name="first_name"
label={t("employees.fields.first_name")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.last_name")}
name='last_name'
name="last_name"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
name='employee_number'
name="employee_number"
label={t("employees.fields.employee_number")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.pin")}
name='pin'
name="pin"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.active")}
valuePropName='checked'
name='active'>
valuePropName="checked"
name="active"
>
<Switch />
</Form.Item>
<Form.Item
label={t("employees.fields.flat_rate")}
name='flat_rate'
valuePropName='checked'>
name="flat_rate"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
name='hire_date'
name="hire_date"
label={t("employees.fields.hire_date")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
]}
>
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("employees.fields.termination_date")}
name='termination_date'>
<DatePicker />
name="termination_date"
>
<FormDatePicker />
</Form.Item>
{
//TODO Make this a picklist.
}
<Form.Item
label={t("employees.fields.cost_center")}
name='cost_center'
name="cost_center"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Select>
{bodyshop.md_responsibility_centers.costs.map((c) => (
<Select.Option key={c.name} value={c.name}>
@@ -146,16 +149,17 @@ export function ShopEmployeesFormComponent({
</Form.Item>
<Form.Item
label={t("employees.fields.base_rate")}
name='base_rate'
name="base_rate"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<InputNumber />
</Form.Item>
<Form.Item label={t("employees.fields.user_email")} name='user_email'>
<Form.Item label={t("employees.fields.user_email")} name="user_email">
<Input />
</Form.Item>
</Form>

43
client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
View File

@@ -1,7 +1,8 @@
import { DatePicker, Form, InputNumber, Input, Select } from "antd";
import { Form, Input, InputNumber, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
@@ -19,14 +20,15 @@ export default function TimeTicketModalComponent({
<div>
<div style={{ display: "flex" }}>
<Form.Item
name='jobid'
name="jobid"
label={t("timetickets.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<JobSearchSelect
options={roAutoCompleteOptions}
onBlur={() => {
@@ -39,14 +41,15 @@ export default function TimeTicketModalComponent({
/>
</Form.Item>
<Form.Item
name='employeeid'
name="employeeid"
label={t("timetickets.fields.employee")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<EmployeeSearchSelect options={employeeAutoCompleteOptions} />
</Form.Item>
</div>
@@ -54,65 +57,71 @@ export default function TimeTicketModalComponent({
<div style={{ display: "flex" }}>
<Form.Item
label={t("timetickets.fields.date")}
name='date'
name="date"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
]}
>
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("timetickets.fields.productivehrs")}
name='productivehrs'
name="productivehrs"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<InputNumber min={0} precision={1} />
</Form.Item>
<Form.Item
label={t("timetickets.fields.actualhrs")}
name='actualhrs'
name="actualhrs"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<InputNumber min={0} precision={1} />
</Form.Item>
<Form.Item
name='cost_center'
name="cost_center"
label={t("timetickets.fields.cost_center")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Select
style={{ width: "150px" }}
onChange={() => {
console.log("Changed.");
}}>
}}
>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item.name}>{item.name}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name='ciecacode'
name="ciecacode"
label={t("timetickets.fields.ciecacode")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input disabled />
</Form.Item>
</div>

80
client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx
View File

@@ -1,6 +1,7 @@
import { Button, DatePicker, Form, Input, InputNumber } from "antd";
import { Button, Form, Input, InputNumber } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -9,15 +10,16 @@ export default function VehicleDetailFormComponent({ form }) {
return (
<div>
<div className='imex-flex-row imex-flex-row__flex-space-around'>
<div className="imex-flex-row imex-flex-row__flex-space-around">
<Button
className='imex-flex-row__margin-large'
type='primary'
key='submit'
htmlType='submit'>
className="imex-flex-row__margin-large"
type="primary"
key="submit"
htmlType="submit"
>
{t("general.actions.save")}
</Button>
<div className='imex-flex-row__grow imex-flex-row__margin-large'>
<div className="imex-flex-row__grow imex-flex-row__margin-large">
<FormFieldsChanged form={form} />
</div>
</div>
@@ -25,57 +27,62 @@ export default function VehicleDetailFormComponent({ form }) {
<LayoutFormRow header={t("vehicles.forms.detail")}>
<Form.Item
label={t("vehicles.fields.v_model_yr")}
name='v_model_yr'
name="v_model_yr"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<InputNumber precision={0} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_make_desc")}
name='v_make_desc'
name="v_make_desc"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_model_desc")}
name='v_model_desc'
name="v_model_desc"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_color")}
name='v_color'
name="v_color"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_vin")}
name='v_vin'
name="v_vin"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
</LayoutFormRow>
@@ -83,75 +90,78 @@ export default function VehicleDetailFormComponent({ form }) {
<LayoutFormRow header={t("vehicles.forms.registration")}>
<Form.Item
label={t("vehicles.fields.plate_st")}
name='plate_st'
name="plate_st"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.plate_no")}
name='plate_no'
name="plate_no"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("vehicles.forms.misc")}>
<Form.Item label={t("vehicles.fields.v_type")} name='v_type'>
<Form.Item label={t("vehicles.fields.v_type")} name="v_type">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_trimcode")} name='v_trimcode'>
<Form.Item label={t("vehicles.fields.v_trimcode")} name="v_trimcode">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_tone")} name='v_tone'>
<Form.Item label={t("vehicles.fields.v_tone")} name="v_tone">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_bstyle")} name='v_bstyle'>
<Form.Item label={t("vehicles.fields.v_bstyle")} name="v_bstyle">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_stage")} name='v_stage'>
<Form.Item label={t("vehicles.fields.v_stage")} name="v_stage">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_prod_dt")} name='v_prod_dt'>
<DatePicker />
<Form.Item label={t("vehicles.fields.v_prod_dt")} name="v_prod_dt">
<FormDatePicker />
</Form.Item>
{
//TODO Add handling for paint code json
}
<Form.Item
label={t("vehicles.fields.v_paint_codes")}
name='v_paint_codes'>
name="v_paint_codes"
>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_options")} name='v_options'>
<Form.Item label={t("vehicles.fields.v_options")} name="v_options">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.trim_color")} name='trim_color'>
<Form.Item label={t("vehicles.fields.trim_color")} name="trim_color">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_mldgcode")} name='v_mldgcode'>
<Form.Item label={t("vehicles.fields.v_mldgcode")} name="v_mldgcode">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_makecode")} name='v_makecode'>
<Form.Item label={t("vehicles.fields.v_makecode")} name="v_makecode">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_engine")} name='v_engine'>
<Form.Item label={t("vehicles.fields.v_engine")} name="v_engine">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_cond")} name='v_cond'>
<Form.Item label={t("vehicles.fields.v_cond")} name="v_cond">
<Input />
</Form.Item>
</LayoutFormRow>

9
client/src/components/vendor-search-select/vendor-search-select.component.jsx
View File

@@ -14,7 +14,7 @@ const VendorSearchSelect = (
if (value !== option && onChange) {
onChange(option);
}
}, [option, onChange]);
}, [value, option, onChange]);
return (
<Select
@@ -25,15 +25,16 @@ const VendorSearchSelect = (
width: 300,
}}
onChange={setOption}
optionFilterProp='name'
optionFilterProp="name"
onSelect={onSelect}
disabled={disabled || false}>
disabled={disabled || false}
>
{options
? options.map((o) => (
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
<div style={{ display: "flex" }}>
{o.name}
<Tag color='green'>{`${o.discount * 100}%`}</Tag>
<Tag color="green">{`${o.discount * 100}%`}</Tag>
</div>
</Option>
))

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

@@ -1067,7 +1067,8 @@
"parts_orders": {
"actions": {
"backordered": "Backordered",
"receive": "Receive"
"receive": "Receive",
"receiveinvoice": "Receive Invoice"
},
"errors": {
"backordering": "Error backordering part {{message}}.",

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

@@ -1067,7 +1067,8 @@
"parts_orders": {
"actions": {
"backordered": "",
"receive": ""
"receive": "",
"receiveinvoice": ""
},
"errors": {
"backordering": "",

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

@@ -1067,7 +1067,8 @@
"parts_orders": {
"actions": {
"backordered": "",
"receive": ""
"receive": "",
"receiveinvoice": ""
},
"errors": {
"backordering": "",