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

Refactored to use invoice form for modal + detail edit page. BOD-634

Browse Source
This commit is contained in:
Patrick Fic
2020-05-05 11:03:31 -07:00
parent fbf49c70d8
commit 9238018022
9 changed files with 260 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx
View File

@@ -1,136 +0,0 @@
import { DatePicker, Form, Input, Switch, Tag } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import InvoiceEnterModalLinesComponent from "../invoice-enter-modal/invoice-enter-modal.lines.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
export default function InvoiceDetailEditComponent({
form,
roAutoCompleteOptions,
loadLines,
lineData,
responsibilityCenters,
}) {
const { t } = useTranslation();
const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
const { getFieldsValue } = form;
const calculateTotals = () => {
setAmounts({
invoiceTotal: getFieldsValue().total || 0,
enteredTotal: getFieldsValue("invoicelines").invoicelines
? getFieldsValue("invoicelines").invoicelines.reduce(
(acc, value) =>
acc + (value && value.actual_cost ? value.actual_cost : 0),
0
)
: 0,
});
};
return (
<div>
<div style={{ display: "flex" }}>
<Form.Item
name="jobid"
label={t("invoices.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<JobSearchSelect
options={roAutoCompleteOptions}
onBlur={() => {
if (form.getFieldValue("jobid") !== null) {
//loadLines({ variables: { id: form.getFieldValue("jobid") } });
}
}}
/>
</Form.Item>
</div>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoices.fields.invoice_number")}
name="invoice_number"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoices.fields.date")}
name="date"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}
name="is_credit_memo"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("invoices.fields.total")}
name="total"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput />
</Form.Item>
</div>
<InvoiceEnterModalLinesComponent
lineData={lineData}
discount={0.1} //TODO Derive the actual discount from the vendor.
form={form}
responsibilityCenters={responsibilityCenters}
calculateTotals={calculateTotals}
/>
<Form.Item name="upload" label="Upload">
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
</Form.Item>
{t("invoicelines.labels.entered")}
<CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
{amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
<Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
) : (
<Tag color="red">
{t("invoicelines.labels.unreconciled")}:
<CurrencyFormatter>
{amounts.invoiceTotal - amounts.enteredTotal}
</CurrencyFormatter>
</Tag>
)}
<button
onClick={() => {
//console.log(form.getFieldsValue());
form.resetFields();
}}
>
a
</button>
</div>
);
}

38
client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
View File

@@ -8,12 +8,10 @@ import { connect } from "react-redux";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries"; import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries";
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import InvoiceFormContainer from "../invoice-form/invoice-form.container";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -29,35 +27,19 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
skip: !!!search.invoiceid, skip: !!!search.invoiceid,
}); });
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
fetchPolicy: "network-only",
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
});
const {
loading: linesLoading,
data: lineData,
refetch: loadLines,
} = useQuery(GET_JOB_LINES_TO_ENTER_INVOICE, {
variables: { id: data && data.invoices_by_pk.jobid },
fetchPolicy: "network-only",
skip: !!!(data && data.invoices_by_pk.id),
});
const handleFinish = (values) => { const handleFinish = (values) => {
console.log("values", values); console.log("values", values);
}; };
useEffect(() => { useEffect(() => {
// if (data) { if (search.invoiceid) {
// loadLines(); form.resetFields();
// if (lineData) //form.resetFields(); }
// } }, [form, search.invoiceid]);
}, [data, lineData]);
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<LoadingSkeleton loading={loading || linesLoading}> <LoadingSkeleton loading={loading}>
<Form <Form
form={form} form={form}
onFinish={handleFinish} onFinish={handleFinish}
@@ -78,13 +60,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
: {} : {}
} }
> >
<InvoiceDetailEditComponent <InvoiceFormContainer form={form} hideVendor />
form={form}
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
loadLines={loadLines}
lineData={lineData ? lineData.joblines : null}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
/>
</Form> </Form>
</LoadingSkeleton> </LoadingSkeleton>
); );

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

@@ -1,61 +1,27 @@
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks"; import { useMutation } from "@apollo/react-hooks";
import { Form, Modal, notification, Button } from "antd"; import { Button, Form, Modal, notification } from "antd";
import React, { useState, useEffect } from "react"; import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries"; import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.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";
import { selectBodyshop } from "../../redux/user/user.selectors"; import InvoiceFormContainer from "../invoice-form/invoice-form.container";
import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
invoiceEnterModal: selectInvoiceEnterModal, invoiceEnterModal: selectInvoiceEnterModal,
bodyshop: selectBodyshop,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")), toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
}); });
function InvoiceEnterModalContainer({ function InvoiceEnterModalContainer({ invoiceEnterModal, toggleModalVisible }) {
invoiceEnterModal,
toggleModalVisible,
bodyshop,
setInvoiceEnterContext,
}) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { t } = useTranslation(); const { t } = useTranslation();
const [enterAgain, setEnterAgain] = useState(false); const [enterAgain, setEnterAgain] = useState(false);
const [insertInvoice] = useMutation(INSERT_NEW_INVOICE); const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
fetchPolicy: "network-only",
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
skip: !invoiceEnterModal.visible,
});
const { data: VendorAutoCompleteData } = useQuery(
SEARCH_VENDOR_AUTOCOMPLETE,
{
fetchPolicy: "network-only",
skip: !invoiceEnterModal.visible,
}
);
const [loadLines, { data: lineData }] = useLazyQuery(
GET_JOB_LINES_TO_ENTER_INVOICE,
{
fetchPolicy: "network-only",
}
);
const handleFinish = (values) => { const handleFinish = (values) => {
insertInvoice({ insertInvoice({
variables: { variables: {
@@ -107,11 +73,7 @@ function InvoiceEnterModalContainer({
return ( return (
<Modal <Modal
title={ title={t("invoices.labels.new")}
invoiceEnterModal.context && invoiceEnterModal.context.id
? t("invoices.labels.edit")
: t("invoices.labels.new")
}
width={"90%"} width={"90%"}
visible={invoiceEnterModal.visible} visible={invoiceEnterModal.visible}
okText={t("general.actions.save")} okText={t("general.actions.save")}
@@ -153,16 +115,7 @@ function InvoiceEnterModalContainer({
null, null,
}} }}
> >
<InvoiceEnterModalComponent <InvoiceFormContainer form={form} />
form={form}
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
vendorAutoCompleteOptions={
VendorAutoCompleteData && VendorAutoCompleteData.vendors
}
loadLines={loadLines}
lineData={lineData ? lineData.joblines : null}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
/>
</Form> </Form>
</Modal> </Modal>
); );

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

@@ -1,172 +0,0 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
export default function InvoiceEnterModalLinesComponent({
lineData,
discount,
form,
responsibilityCenters,
calculateTotals,
}) {
const { t } = useTranslation();
const { setFieldsValue, getFieldsValue } = form;
console.log("calculateTotals", calculateTotals);
return (
<div>
<Form.List name="invoicelines">
{(fields, { add, remove }) => {
console.log("fields", fields);
return (
<div>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoicelines.fields.jobline")}
key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InvoiceLineSearchSelect
options={lineData}
onBlur={null}
onSelect={(value, opt) => {
setFieldsValue({
invoicelines: getFieldsValue([
"invoicelines",
]).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults[
opt.part_type
] || null
: null,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoicelines.fields.actual")}
key={`${index}actual_price`}
name={[field.name, "actual_price"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput
onBlur={(e) => {
setFieldsValue({
invoicelines: getFieldsValue(
"invoicelines"
).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
actual_cost: !!item.actual_cost
? item.actual_cost
: parseFloat(e.target.value) *
(1 - discount),
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.actual_cost")}
key={`${index}actual_cost`}
name={[field.name, "actual_cost"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput
onBlur={() => {
calculateTotals();
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.cost_center")}
key={`${index}cost_center`}
name={[field.name, "cost_center"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select style={{ width: "150px" }}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
calculateTotals();
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("invoicelines.actions.newline")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
</div>
);
}

43
client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx → client/src/components/invoice-form/invoice-form.component.jsx
View File

@@ -1,38 +1,25 @@
import { DatePicker, Form, Input, Switch, Tag } from "antd"; import { DatePicker, Form, Input, Switch } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import DocumentsUploadContainer from "../documents-upload/documents-upload.container"; import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
import CurrencyInput from "../form-items-formatted/currency-form-item.component"; import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component"; import JobSearchSelect from "../job-search-select/job-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component"; import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component"; import InvoiceFormLines from "./invoice-form.lines.component";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
export default function InvoiceEnterModalComponent({ export default function InvoiceFormComponent({
form, form,
roAutoCompleteOptions, roAutoCompleteOptions,
vendorAutoCompleteOptions, vendorAutoCompleteOptions,
lineData, lineData,
responsibilityCenters, responsibilityCenters,
loadLines, loadLines,
hideVendor,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [discount, setDiscount] = useState(0); const [discount, setDiscount] = useState(0);
const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
const { getFieldsValue } = form;
const calculateTotals = () => {
setAmounts({
invoiceTotal: getFieldsValue().total || 0,
enteredTotal: getFieldsValue("invoicelines").invoicelines
? getFieldsValue("invoicelines").invoicelines.reduce(
(acc, value) =>
acc + (value && value.actual_cost ? value.actual_cost : 0),
0
)
: 0,
});
};
const handleVendorSelect = (props, opt) => { const handleVendorSelect = (props, opt) => {
setDiscount(opt.discount); setDiscount(opt.discount);
}; };
@@ -62,6 +49,7 @@ export default function InvoiceEnterModalComponent({
<Form.Item <Form.Item
label={t("invoices.fields.vendor")} label={t("invoices.fields.vendor")}
name="vendorid" name="vendorid"
style={{ display: hideVendor ? "none" : null }}
rules={[ rules={[
{ {
required: true, required: true,
@@ -120,12 +108,11 @@ export default function InvoiceEnterModalComponent({
<CurrencyInput /> <CurrencyInput />
</Form.Item> </Form.Item>
</div> </div>
<InvoiceEnterModalLinesComponent <InvoiceFormLines
lineData={lineData} lineData={lineData}
discount={discount} discount={discount}
form={form} form={form}
responsibilityCenters={responsibilityCenters} responsibilityCenters={responsibilityCenters}
calculateTotals={calculateTotals}
/> />
<Form.Item name="upload" label="Upload"> <Form.Item name="upload" label="Upload">
@@ -137,22 +124,8 @@ export default function InvoiceEnterModalComponent({
console.log(form.getFieldsValue()); console.log(form.getFieldsValue());
}} }}
> >
a Get Field Values
</button> </button>
{t("invoicelines.labels.entered")}
<CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
{amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
<Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
) : (
<Tag color="red">
{t("invoicelines.labels.unreconciled")}:
<CurrencyFormatter>
{amounts.invoiceTotal - amounts.enteredTotal}
</CurrencyFormatter>
</Tag>
)}
</div> </div>
); );
} }

40
client/src/components/invoice-form/invoice-form.container.jsx Normal file
View File

@@ -0,0 +1,40 @@
import { useLazyQuery, useQuery } from "@apollo/react-hooks";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import InvoiceFormComponent from "./invoice-form.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function InvoiceFormContainer({ bodyshop, form, hideVendor }) {
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
});
const { data: VendorAutoCompleteData } = useQuery(SEARCH_VENDOR_AUTOCOMPLETE);
const [loadLines, { data: lineData }] = useLazyQuery(
GET_JOB_LINES_TO_ENTER_INVOICE
);
return (
<InvoiceFormComponent
form={form}
hideVendor={hideVendor}
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
vendorAutoCompleteOptions={
VendorAutoCompleteData && VendorAutoCompleteData.vendors
}
loadLines={loadLines}
lineData={lineData ? lineData.joblines : null}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
/>
);
}
export default connect(mapStateToProps, null)(InvoiceFormContainer);

162
client/src/components/invoice-form/invoice-form.lines.component.jsx Normal file
View File

@@ -0,0 +1,162 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
export default function InvoiceEnterModalLinesComponent({
lineData,
discount,
form,
responsibilityCenters,
}) {
const { t } = useTranslation();
const { setFieldsValue, getFieldsValue } = form;
return (
<Form.List name="invoicelines">
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoicelines.fields.jobline")}
key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InvoiceLineSearchSelect
options={lineData}
onBlur={null}
onSelect={(value, opt) => {
setFieldsValue({
invoicelines: getFieldsValue([
"invoicelines",
]).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults[
opt.part_type
] || null
: null,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoicelines.fields.actual")}
key={`${index}actual_price`}
name={[field.name, "actual_price"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput
onBlur={(e) => {
setFieldsValue({
invoicelines: getFieldsValue(
"invoicelines"
).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
actual_cost: !!item.actual_cost
? item.actual_cost
: parseFloat(e.target.value) * (1 - discount),
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.actual_cost")}
key={`${index}actual_cost`}
name={[field.name, "actual_cost"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("invoicelines.fields.cost_center")}
key={`${index}cost_center`}
name={[field.name, "cost_center"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select style={{ width: "150px" }}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "50%" }}
>
{t("invoicelines.actions.newline")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
);
}

48
client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
View File

@@ -9,41 +9,49 @@ import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util"; import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
import DuplicateJob from "./jobs-detail-header-actions.duplicate.util"; import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language)) //setUserLanguage: language => dispatch(setUserLanguage(language))
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
}); });
export function JobsDetailHeaderActions({ job, bodyshop, refetch }) { export function JobsDetailHeaderActions({
job,
bodyshop,
refetch,
setInvoiceEnterContext,
}) {
const { t } = useTranslation(); const { t } = useTranslation();
const client = useApolloClient(); const client = useApolloClient();
const history = useHistory(); const history = useHistory();
const statusmenu = ( const statusmenu = (
<Menu key='popovermenu'> <Menu key="popovermenu">
<Menu.Item key='cccontract'> <Menu.Item key="cccontract">
<Link <Link
to={{ to={{
pathname: "/manage/courtesycars/contracts/new", pathname: "/manage/courtesycars/contracts/new",
state: { jobId: job.id }, state: { jobId: job.id },
}}> }}
>
{t("menus.jobsactions.newcccontract")} {t("menus.jobsactions.newcccontract")}
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
key='addtoproduction' key="addtoproduction"
disabled={!!!job.converted || !!job.inproduction} disabled={!!!job.converted || !!job.inproduction}
onClick={() => AddToProduction(client, job.id, refetch)}> onClick={() => AddToProduction(client, job.id, refetch)}
>
{t("jobs.actions.addtoproduction")} {t("jobs.actions.addtoproduction")}
</Menu.Item> </Menu.Item>
<Menu.Item key='duplicatejob'> <Menu.Item key="duplicatejob">
<Popconfirm <Popconfirm
title={t("jobs.labels.duplicateconfirm")} title={t("jobs.labels.duplicateconfirm")}
okText='Yes' okText="Yes"
cancelText='No' cancelText="No"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onConfirm={() => onConfirm={() =>
DuplicateJob( DuplicateJob(
@@ -55,14 +63,28 @@ export function JobsDetailHeaderActions({ job, bodyshop, refetch }) {
} }
) )
} }
getPopupContainer={(trigger) => trigger.parentNode}> getPopupContainer={(trigger) => trigger.parentNode}
>
{t("menus.jobsactions.duplicate")} {t("menus.jobsactions.duplicate")}
</Popconfirm> </Popconfirm>
</Menu.Item> </Menu.Item>
<Menu.Item
key="postinvoices"
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: refetch },
context: {
job: job,
},
});
}}
>
{t("jobs.actions.postInvoices")}
</Menu.Item>
</Menu> </Menu>
); );
return ( return (
<Dropdown overlay={statusmenu} key='changestatus'> <Dropdown overlay={statusmenu} key="changestatus">
<Button> <Button>
{t("general.labels.actions")} <DownCircleFilled /> {t("general.labels.actions")} <DownCircleFilled />
</Button> </Button>

1
client/src/graphql/invoices.queries.js
View File

@@ -89,6 +89,7 @@ export const QUERY_INVOICE_BY_PK = gql`
jobid jobid
total total
updated_at updated_at
vendorid
vendor { vendor {
id id
name name