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

Most functionality is restored after antd upgrade. WIP on invoice enter screen.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-28 17:56:36 -08:00
parent 6e0d9da257
commit 8c54de9a9f
10 changed files with 128 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/allocations-assignment/allocations-assignment.component.jsx
View File

@@ -23,7 +23,6 @@ export default connect(
const { t } = useTranslation(); const { t } = useTranslation();
const onChange = e => { const onChange = e => {
console.log("e", e);
setAssignment({ ...assignment, employeeid: e }); setAssignment({ ...assignment, employeeid: e });
}; };

41
client/src/components/email-overlay/email-overlay.container.jsx
View File

@@ -1,4 +1,4 @@
import { Button, Modal, notification } from "antd"; import { Modal, notification } from "antd";
import axios from "axios"; import axios from "axios";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useLazyQuery } from "react-apollo"; import { useLazyQuery } from "react-apollo";
@@ -7,10 +7,7 @@ import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { toggleEmailOverlayVisible } from "../../redux/email/email.actions"; import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
import { import { selectEmailConfig, selectEmailVisible } from "../../redux/email/email.selectors.js";
selectEmailConfig,
selectEmailVisible
} from "../../redux/email/email.selectors.js";
import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import EmailOverlayComponent from "./email-overlay.component"; import EmailOverlayComponent from "./email-overlay.component";
@@ -89,24 +86,20 @@ export default connect(
}; };
return ( return (
<div> <Modal
<Modal destroyOnClose={true}
destroyOnClose={true} visible={modalVisible}
visible={modalVisible} width={"80%"}
width={"80%"} onOk={handleOk}
onOk={handleOk} onCancel={() => toggleEmailOverlayVisible()}
onCancel={() => toggleEmailOverlayVisible()} >
> <LoadingSpinner loading={loading}>
<LoadingSpinner loading={loading}> <EmailOverlayComponent
<EmailOverlayComponent handleConfigChange={handleConfigChange}
handleConfigChange={handleConfigChange} messageOptions={messageOptions}
messageOptions={messageOptions} handleHtmlChange={handleHtmlChange}
handleHtmlChange={handleHtmlChange} />
/> </LoadingSpinner>
</LoadingSpinner> </Modal>
</Modal>
<Button onClick={() => toggleEmailOverlayVisible()}>Show</Button>
</div>
); );
}); });

15
client/src/components/form-items-formatted/currency-form-item.component.jsx Normal file
View File

@@ -0,0 +1,15 @@
import { InputNumber } from "antd";
import React, { forwardRef } from "react";
function FormItemCurrency(props, ref) {
return (
<InputNumber
{...props}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
parser={value => value.replace(/\$\s?|(,*)/g, "")}
precision={2}
/>
);
}
export default forwardRef(FormItemCurrency);

56
client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
View File

@@ -1,5 +1,5 @@
import { import {
AutoComplete, Select,
Button, Button,
DatePicker, DatePicker,
Form, Form,
@@ -20,10 +20,9 @@ export default function InvoiceEnterModalComponent({
handleCancel, handleCancel,
handleFinish, handleFinish,
handleRoAutoComplete,
handleRoSelect, handleRoSelect,
roAutoCompleteOptions, roAutoCompleteOptions,
handleVendorAutoComplete,
handleVendorSelect, handleVendorSelect,
vendorAutoCompleteOptions, vendorAutoCompleteOptions,
lineData, lineData,
@@ -48,7 +47,7 @@ export default function InvoiceEnterModalComponent({
width={"90%"} width={"90%"}
visible={visible} visible={visible}
okText={t("general.labels.save")} okText={t("general.labels.save")}
onOk={handleFinish} onOk={() => form.submit()}
okButtonProps={{ htmlType: "submit" }} okButtonProps={{ htmlType: "submit" }}
onCancel={handleCancel} onCancel={handleCancel}
> >
@@ -59,21 +58,31 @@ export default function InvoiceEnterModalComponent({
rules={[ rules={[
{ {
required: true, required: true,
pattern: new RegExp( message: t("general.validation.required")
"[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
),
message: t("invoices.errors.invalidro")
} }
]} ]}
> >
<AutoComplete <Select
options={roAutoCompleteOptions} showSearch
onSearch={handleRoAutoComplete}
autoFocus autoFocus
style={{ width: "300px" }} style={{ width: "300px" }}
onSelect={handleRoSelect} onSelect={handleRoSelect}
backfill >
/> {roAutoCompleteOptions
? roAutoCompleteOptions.map(o => (
<Select.Option
key={o.id}
value={o.ro_number ? o.ro_number : o.est_number}
>
{`${
o.ro_number ? o.ro_number : o.est_number
} | ${o.ownr_ln || ""} ${o.ownr_fn || ""} | ${o.vehicle
.v_model_yr || ""} ${o.vehicle.v_make_desc || ""} ${o
.vehicle.v_model_desc || ""}`}
</Select.Option>
))
: null}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("invoices.fields.vendor")} label={t("invoices.fields.vendor")}
@@ -81,20 +90,23 @@ export default function InvoiceEnterModalComponent({
rules={[ rules={[
{ {
required: true, required: true,
pattern: new RegExp( message: t("general.validation.required")
"[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
),
message: t("invoices.errors.invalidvendor")
} }
]} ]}
> >
<AutoComplete <Select
options={vendorAutoCompleteOptions} showSearch
onSelect={handleVendorSelect} onSelect={handleVendorSelect}
style={{ width: "300px" }} style={{ width: "300px" }}
onSearch={handleVendorAutoComplete} >
backfill {vendorAutoCompleteOptions
/> ? vendorAutoCompleteOptions.map(o => (
<Select.Option key={o.id} value={o.name}>
{o.name}
</Select.Option>
))
: null}
</Select>
</Form.Item> </Form.Item>
<Button onClick={() => resetFields()}> <Button onClick={() => resetFields()}>
{t("general.actions.reset")} {t("general.actions.reset")}

50
client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
View File

@@ -3,7 +3,7 @@ import { useLazyQuery, useQuery } from "react-apollo";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries"; import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries"; import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries"; import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions"; import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors"; import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
@@ -27,13 +27,11 @@ function InvoiceEnterModalContainer({
const linesState = useState([]); const linesState = useState([]);
const roSearchState = useState({ text: "", selectedId: null }); const roSearchState = useState({ text: "", selectedId: null });
const [roSearch, setRoSearch] = roSearchState; const [roSearch, setRoSearch] = roSearchState;
const handleRoAutoComplete = e => {
setRoSearch({ ...roSearch, text: e }); const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
};
const { data: RoAutoCompleteData } = useQuery(SEARCH_RO_AUTOCOMPLETE, {
fetchPolicy: "network-only", fetchPolicy: "network-only",
variables: { search: `%${roSearch.text}%` }, variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
skip: !roSearch.text || roSearch.text.length < 3 skip: !invoiceEnterModal.visible
}); });
const vendorSearchState = useState({ const vendorSearchState = useState({
@@ -41,15 +39,11 @@ function InvoiceEnterModalContainer({
selectedId: null selectedId: null
}); });
const [vendorSearch, setVendorSearch] = vendorSearchState; const [vendorSearch, setVendorSearch] = vendorSearchState;
const handleVendorAutoComplete = e => {
setVendorSearch({ ...vendorSearch, text: e });
};
const { data: VendorAutoCompleteData } = useQuery( const { data: VendorAutoCompleteData } = useQuery(
SEARCH_VENDOR_AUTOCOMPLETE, SEARCH_VENDOR_AUTOCOMPLETE,
{ {
fetchPolicy: "network-only", fetchPolicy: "network-only",
variables: { search: `%${vendorSearch.text}%` }, skip: !invoiceEnterModal.visible
skip: !vendorSearch.text || vendorSearch.text.length < 3
} }
); );
@@ -65,14 +59,15 @@ function InvoiceEnterModalContainer({
if (!called) loadLines(); if (!called) loadLines();
} }
const handleRoSelect = (value, obj) => { const handleRoSelect = (value, obj) => {
setRoSearch({ ...roSearch, selectedId: obj.id }); setRoSearch({ ...roSearch, selectedId: obj.key });
}; };
const handleVendorSelect = (value, obj) => { const handleVendorSelect = (value, obj) => {
setVendorSearch({ ...vendorSearch, selectedId: obj.id }); setVendorSearch({ ...vendorSearch, selectedId: obj.key });
}; };
const handleFinish = values => { const handleFinish = values => {
console.log("values", values);
alert("Closing this modal."); alert("Closing this modal.");
toggleModalVisible(); toggleModalVisible();
// if (!jobLineEditModal.context.id) { // if (!jobLineEditModal.context.id) {
@@ -131,34 +126,11 @@ function InvoiceEnterModalContainer({
invoice={invoiceEnterModal.context} invoice={invoiceEnterModal.context}
handleFinish={handleFinish} handleFinish={handleFinish}
handleCancel={handleCancel} handleCancel={handleCancel}
handleRoAutoComplete={handleRoAutoComplete}
handleRoSelect={handleRoSelect} handleRoSelect={handleRoSelect}
roAutoCompleteOptions={ roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
RoAutoCompleteData
? RoAutoCompleteData.jobs.reduce((acc, value) => {
acc.push({
id: value.id,
value: `${value.ro_number || ""} | ${value.ownr_ln ||
""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr ||
""} ${value.vehicle.v_make_desc || ""} ${value.vehicle
.v_model_desc || ""}`
});
return acc;
}, [])
: null
}
handleVendorAutoComplete={handleVendorAutoComplete}
handleVendorSelect={handleVendorSelect} handleVendorSelect={handleVendorSelect}
vendorAutoCompleteOptions={ vendorAutoCompleteOptions={
VendorAutoCompleteData VendorAutoCompleteData && VendorAutoCompleteData.vendors
? VendorAutoCompleteData.vendors.reduce((acc, value) => {
acc.push({
id: value.id,
value: `${value.name || ""}`
});
return acc;
}, [])
: null
} }
linesState={linesState} linesState={linesState}
lineData={lineData ? lineData.joblines : null} lineData={lineData ? lineData.joblines : null}

55
client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
View File

@@ -1,6 +1,7 @@
import { Form, Input, InputNumber, Modal } from "antd"; import { Form, Input, Modal } from "antd";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import InputCurrency from "../form-items-formatted/currency-form-item.component";
export default function JobLinesUpsertModalComponent({ export default function JobLinesUpsertModalComponent({
visible, visible,
@@ -14,27 +15,35 @@ export default function JobLinesUpsertModalComponent({
useEffect(() => { useEffect(() => {
form.resetFields(); form.resetFields();
}, [visible, form]); }, [visible, form]);
console.log("jobLine", jobLine);
return ( return (
<Modal <Form
title={ onFinish={handleFinish}
jobLine && jobLine.id initialValues={jobLine}
? t("joblines.labels.edit") autoComplete="off"
: t("joblines.labels.new") form={form}
}
visible={visible}
okText={t("general.labels.save")}
onOk={handleFinish}
forceRender={true}
onCancel={handleCancel}
> >
<Form <Modal
onFinish={handleFinish} title={
initialValues={jobLine} jobLine && jobLine.id
autoComplete={"off"} ? t("joblines.labels.edit")
form={form} : t("joblines.labels.new")
}
visible={visible}
okText={t("general.labels.save")}
onOk={() => form.submit()}
onCancel={handleCancel}
> >
<Form.Item label={t("joblines.fields.line_desc")} name="line_desc"> <Form.Item
label={t("joblines.fields.line_desc")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name="line_desc"
>
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno"> <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
@@ -53,12 +62,12 @@ export default function JobLinesUpsertModalComponent({
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.mod_lb_hrs")} name="mod_lb_hrs"> <Form.Item label={t("joblines.fields.mod_lb_hrs")} name="mod_lb_hrs">
<InputNumber /> <InputCurrency />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.act_price")} name="act_price"> <Form.Item label={t("joblines.fields.act_price")} name="act_price">
<InputNumber /> <InputCurrency />
</Form.Item> </Form.Item>
</Form> </Modal>
</Modal> </Form>
); );
} }

7
client/src/graphql/jobs.queries.js
View File

@@ -335,13 +335,14 @@ export const UPDATE_JOB_STATUS = gql`
} }
`; `;
export const SEARCH_RO_AUTOCOMPLETE = gql` export const ACTIVE_JOBS_FOR_AUTOCOMPLETE = gql`
query SEARCH_RO_AUTOCOMPLETE($search: String!) { query ACTIVE_JOBS_FOR_AUTOCOMPLETE($statuses: [String!]!) {
jobs(where: { ro_number: { _ilike: $search } }) { jobs(where: { status: { _in: $statuses } }) {
id id
ownr_fn ownr_fn
ownr_ln ownr_ln
ro_number ro_number
est_number
vehicle { vehicle {
id id
v_make_desc v_make_desc

4
client/src/graphql/vendors.queries.js
View File

@@ -78,8 +78,8 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
`; `;
export const SEARCH_VENDOR_AUTOCOMPLETE = gql` export const SEARCH_VENDOR_AUTOCOMPLETE = gql`
query SEARCH_VENDOR_AUTOCOMPLETE($search: String!) { query SEARCH_VENDOR_AUTOCOMPLETE {
vendors(where: { name: { _ilike: $search } }) { vendors {
name name
discount discount
id id

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

@@ -1,9 +1,20 @@
import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons"; import Icon, {
BarsOutlined,
CalendarFilled,
DollarCircleOutlined,
FileImageFilled,
ToolFilled
} from "@ant-design/icons";
import { Form, notification, Tabs } from "antd"; import { Form, notification, Tabs } from "antd";
import moment from "moment"; import moment from "moment";
import React, { lazy, Suspense } from "react"; import React, { lazy, Suspense } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa"; import {
FaHardHat,
FaInfo,
FaRegStickyNote,
FaShieldAlt
} from "react-icons/fa";
//import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container"; //import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
//import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component"; //import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
//import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component"; //import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
@@ -143,9 +154,6 @@ export default function JobsDetailPage({
date_exported: job.date_exported ? moment(job.date_exported) : null date_exported: job.date_exported ? moment(job.date_exported) : null
}} }}
> >
<Form.Item name="updated_at">
<input />
</Form.Item>
<JobsDetailHeader <JobsDetailHeader
job={job} job={job}
mutationConvertJob={mutationConvertJob} mutationConvertJob={mutationConvertJob}

3
client/src/pages/manage/manage.page.jsx
View File

@@ -8,7 +8,6 @@ import FooterComponent from "../../components/footer/footer.component";
import HeaderContainer from "../../components/header/header.container"; import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import "./manage.page.styles.scss"; import "./manage.page.styles.scss";
import Test from "../../components/_test/test.component";
const ManageRootPage = lazy(() => const ManageRootPage = lazy(() =>
import("../manage-root/manage-root.page.container") import("../manage-root/manage-root.page.container")
@@ -74,8 +73,6 @@ export default function Manage({ match }) {
<LoadingSpinner message={t("general.labels.loadingapp")} /> <LoadingSpinner message={t("general.labels.loadingapp")} />
} }
> >
DELETE THIS
<Test />
<EmailOverlayContainer /> <EmailOverlayContainer />
<Route exact path={`${match.path}`} component={ManageRootPage} /> <Route exact path={`${match.path}`} component={ManageRootPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} /> <Route exact path={`${match.path}/jobs`} component={JobsPage} />