From 49f6cfa8c15df7bbae55be934757260feba8c9fa Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Tue, 22 Sep 2020 14:23:27 -0700 Subject: [PATCH] Updating styling on parts and invoicing modals BOD-404 --- bodyshop_translations.babel | 42 ++ .../invoice-enter-modal.container.jsx | 1 + .../invoice-form/invoice-form.component.jsx | 31 +- .../invoice-form.lines.component.jsx | 378 +++++++++--------- .../invoice-form/invoice-form.styles.scss | 72 ++-- .../invoice-line-search-select.component.jsx | 16 +- .../job-detail-lines/job-lines.component.jsx | 6 +- .../job-search-select.component.jsx | 2 +- .../layout-form-row.component.jsx | 11 +- .../parts-order-modal.component.jsx | 148 +++---- .../parts-order-modal.container.jsx | 21 +- .../schedule-job-modal.container.jsx | 2 +- .../vendor-search-select.component.jsx | 28 +- client/src/translations/en_us/common.json | 2 + client/src/translations/es/common.json | 2 + client/src/translations/fr/common.json | 2 + 16 files changed, 431 insertions(+), 333 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index d3354b19e..1f71ebb37 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -9789,6 +9789,27 @@ fields + + allpartslocation + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + date false @@ -10109,6 +10130,27 @@ + + invoice_lines + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + invoice_total false diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx index b18890b50..a487f8b7a 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx @@ -160,6 +160,7 @@ function InvoiceEnterModalContainer({
{ setEnterAgain(false); diff --git a/client/src/components/invoice-form/invoice-form.component.jsx b/client/src/components/invoice-form/invoice-form.component.jsx index e3b145bd6..f52694f54 100644 --- a/client/src/components/invoice-form/invoice-form.component.jsx +++ b/client/src/components/invoice-form/invoice-form.component.jsx @@ -1,4 +1,14 @@ -import { Button, Form, Input, Select, Statistic, Switch, Upload } from "antd"; +import { + Button, + Form, + Input, + Select, + Space, + Statistic, + Switch, + Typography, + Upload, +} from "antd"; import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -8,6 +18,7 @@ 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 LayoutFormRow from "../layout-form-row/layout-form-row.component"; import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component"; import InvoiceFormLines from "./invoice-form.lines.component"; import "./invoice-form.styles.scss"; @@ -54,8 +65,8 @@ export function InvoiceFormComponent({ }, [form, setDiscount, vendorAutoCompleteOptions, loadLines]); return ( -
-
+
+ -
-
+ + + -
+ + + {t("invoices.labels.invoice_lines")} + -
+ -
+ {form.getFieldValue("is_credit_memo") ? ( {fields.map((field, index) => ( -
- - { - setFieldsValue({ - invoicelines: getFieldsValue([ - "invoicelines", - ]).invoicelines.map((item, idx) => { - if (idx === index) { - return { - ...item, - line_desc: opt.line_desc, - quantity: opt.part_qty || 1, - actual_price: opt.cost, - cost_center: opt.part_type - ? responsibilityCenters.defaults.costs[ - opt.part_type - ] || null - : null, - }; - } - return item; - }), - }); +
+
+ + + { + setFieldsValue({ + invoicelines: getFieldsValue([ + "invoicelines", + ]).invoicelines.map((item, idx) => { + if (idx === index) { + return { + ...item, + line_desc: opt.line_desc, + quantity: opt.part_qty || 1, + actual_price: opt.cost, + cost_center: opt.part_type + ? responsibilityCenters.defaults.costs[ + opt.part_type + ] || null + : null, + }; + } + return item; + }), + }); + }} + /> + + + + + + + + + + { + 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; + }), + }); + }} + /> + + + + + + {() => { + const line = getFieldsValue(["invoicelines"]) + .invoicelines[index]; + if (!!!line) return null; + const lineDiscount = ( + 1 - + Math.round( + (line.actual_cost / line.actual_price) * 100 + ) / + 100 + ).toPrecision(2); + + if (lineDiscount - discount === 0) return
; + return ; + }} + + + + + + + + + + + + + + + + { + remove(field.name); }} /> - - - - - - - - - - { - 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; - }), - }); - }} - /> - - - - - - {() => { - const line = getFieldsValue(["invoicelines"]) - .invoicelines[index]; - if (!!!line) return null; - const lineDiscount = ( - 1 - - Math.round( - (line.actual_cost / line.actual_price) * 100 - ) / - 100 - ).toPrecision(2); - - if (lineDiscount - discount === 0) return null; - return ; - }} - - - - - - - - - - - - - - { - remove(field.name); - }} - /> - +
+
))} diff --git a/client/src/components/invoice-form/invoice-form.styles.scss b/client/src/components/invoice-form/invoice-form.styles.scss index c5c2c5055..e0e15d463 100644 --- a/client/src/components/invoice-form/invoice-form.styles.scss +++ b/client/src/components/invoice-form/invoice-form.styles.scss @@ -1,40 +1,40 @@ -.invoice-form-wrapper { - display: flex; - flex-direction: column; - justify-content: left; -} +// .invoice-form-wrapper { +// display: flex; +// flex-direction: column; +// justify-content: left; +// } -.invoice-form-totals { - display: flex; - justify-content: space-around; - align-items: flex-start; - flex-wrap: wrap; - & > * { - padding: 5px; - } -} +// .invoice-form-totals { +// display: flex; +// justify-content: space-around; +// align-items: flex-start; +// flex-wrap: wrap; +// & > * { +// padding: 5px; +// } +// } -.invoice-form-invoice-details { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - & > * { - padding: 5px; - } -} +// .invoice-form-invoice-details { +// display: flex; +// align-items: flex-start; +// flex-wrap: wrap; +// & > * { +// padding: 5px; +// } +// } -.invoice-form-lines-wrapper { - border: 3px ridge rgba(28, 110, 164, 0.24); - border-radius: 4px; -} +// .invoice-form-lines-wrapper { +// border: 3px ridge rgba(28, 110, 164, 0.24); +// border-radius: 4px; +// } -.invoice-form-line { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-content: space-around; - border-bottom: 2px dashed rgba(7, 7, 7, 0.4); - F & > * { - margin: 5px; - } -} +// .invoice-form-line { +// display: flex; +// flex-wrap: wrap; +// align-items: flex-start; +// justify-content: space-around; +// border-bottom: 2px dashed rgba(7, 7, 7, 0.4); +// F & > * { +// margin: 5px; +// } +// } diff --git a/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx b/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx index b30c47682..9af3378cf 100644 --- a/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx +++ b/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx @@ -25,7 +25,7 @@ const InvoiceLineSearchSelect = ( autoFocus value={option} style={{ - width: 300, + width: "100%", }} onChange={setOption} optionFilterProp="line_desc" @@ -48,12 +48,18 @@ const InvoiceLineSearchSelect = ( {item.line_desc} - {item.oem_partno} + {item.oem_partno ? ( + {item.oem_partno} + ) : null} - - {item.act_price || 0} - + {item.act_price ? ( + + + {item.act_price || 0} + + + ) : null} diff --git a/client/src/components/job-detail-lines/job-lines.component.jsx b/client/src/components/job-detail-lines/job-lines.component.jsx index 9b59aeb77..0c62fbad8 100644 --- a/client/src/components/job-detail-lines/job-lines.component.jsx +++ b/client/src/components/job-detail-lines/job-lines.component.jsx @@ -315,7 +315,7 @@ export function JobLinesComponent({ setPartsOrderContext({ actions: { refetch: refetch }, context: { - jobId: job.jobId, + jobId: job.id, linesToOrder: selectedLines, }, }); @@ -348,7 +348,7 @@ export function JobLinesComponent({ onClick={() => { setJobLineEditContext({ actions: { refetch: refetch }, - context: { jobid: job.jobId }, + context: { jobid: job.id }, }); }} > @@ -372,7 +372,7 @@ export function JobLinesComponent({ {record.parts_order_lines.map((item) => (
{item.parts_order.order_number || ""} diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx index 5f2bb2718..6d3605dd6 100644 --- a/client/src/components/job-search-select/job-search-select.component.jsx +++ b/client/src/components/job-search-select/job-search-select.component.jsx @@ -64,7 +64,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => { autoFocus value={option} style={{ - width: 300, + width: "100%", }} filterOption={false} onSearch={handleSearch} diff --git a/client/src/components/layout-form-row/layout-form-row.component.jsx b/client/src/components/layout-form-row/layout-form-row.component.jsx index 53f2c694a..94b1b1aa1 100644 --- a/client/src/components/layout-form-row/layout-form-row.component.jsx +++ b/client/src/components/layout-form-row/layout-form-row.component.jsx @@ -2,7 +2,12 @@ import React from "react"; import { Row, Col, Typography } from "antd"; import "./layout-form-row.styles.scss"; -export default function LayoutFormRow({ header, children, grow = false }) { +export default function LayoutFormRow({ + header, + children, + grow = false, + ...restProps +}) { if (!!!children.length) { //We have only one element. It's going to get the whole thing. return ( @@ -20,7 +25,7 @@ export default function LayoutFormRow({ header, children, grow = false }) { if (spanOverride) return { span: spanOverride }; return { xs: { - span: 24, + span: !grow ? 24 : Math.max(12, 24 / children.length), }, sm: { span: !grow ? 12 : Math.max(12, 24 / children.length), @@ -38,7 +43,7 @@ export default function LayoutFormRow({ header, children, grow = false }) { }; return ( -
+
{header ? {header} : null} {children.map( diff --git a/client/src/components/parts-order-modal/parts-order-modal.component.jsx b/client/src/components/parts-order-modal/parts-order-modal.component.jsx index a2a87d24d..61a4718c5 100644 --- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx +++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx @@ -1,11 +1,12 @@ import { DeleteFilled } from "@ant-design/icons"; -import { Form, Input, InputNumber, Radio } from "antd"; +import { Form, Input, InputNumber, Radio, Typography } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; 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"; import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component"; +import LayoutFormRow from "../layout-form-row/layout-form-row.component"; +import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component"; export default function PartsOrderModalComponent({ vendorList, @@ -19,85 +20,84 @@ export default function PartsOrderModalComponent({ return (
- - - - - - - {t("parts_orders.labels.inthisorder")} - + + + + + + + + + + {t("parts_orders.labels.inthisorder")} + {(fields, { add, remove, move }) => { return (
{fields.map((field, index) => ( -
- - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + { remove(field.name); }} diff --git a/client/src/components/parts-order-modal/parts-order-modal.container.jsx b/client/src/components/parts-order-modal/parts-order-modal.container.jsx index c372734a9..5cc2f91c9 100644 --- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx +++ b/client/src/components/parts-order-modal/parts-order-modal.container.jsx @@ -223,21 +223,24 @@ export function PartsOrderModalContainer({ forceRender > {error ? : null} - - + + {loading ? ( + + ) : ( - - + )} + ); } diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx index c929fcd86..7c2da5541 100644 --- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx +++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx @@ -52,7 +52,7 @@ export function ScheduleJobModalContainer({ const [updateJobStatus] = useMutation(UPDATE_JOBS); useEffect(() => { - form.resetFields(); + if (job) form.resetFields(); }, [job, form]); const { t } = useTranslation(); diff --git a/client/src/components/vendor-search-select/vendor-search-select.component.jsx b/client/src/components/vendor-search-select/vendor-search-select.component.jsx index 93a08215d..36137ae42 100644 --- a/client/src/components/vendor-search-select/vendor-search-select.component.jsx +++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx @@ -1,4 +1,4 @@ -import { Select, Tag } from "antd"; +import { Col, Row, Select, Tag } from "antd"; import React, { useEffect, useState, forwardRef } from "react"; import { HeartOutlined } from "@ant-design/icons"; const { Option } = Select; @@ -30,7 +30,7 @@ const VendorSearchSelect = ( showSearch value={option} style={{ - width: 300, + width: "100%", }} onChange={setOption} optionFilterProp="name" @@ -45,21 +45,27 @@ const VendorSearchSelect = ( name={o.name} discount={o.discount} > -
- {o.name} - {`${o.discount * 100}%`} - -
+ + {o.name} + + + + + {`${o.discount * 100}%`} + + )) : null} {options ? options.map((o) => ( )) : null} diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 7e603c673..16151e396 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -652,6 +652,7 @@ "validation": "Please ensure all fields are entered correctly. " }, "fields": { + "allpartslocation": "Parts Bin", "date": "Invoice Date", "federal_tax_rate": "Federal Tax Rate", "invoice_number": "Invoice Number", @@ -669,6 +670,7 @@ "entered_total": "Total of Entered Lines", "enteringcreditmemo": "You are entering a credit memo. Please ensure you are also entering positive values.", "federal_tax": "Federal Tax", + "invoice_lines": "Invoice Lines", "invoice_total": "Invoice Total Amount", "invoices": "Invoices", "local_tax": "Local Tax", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 61bc64028..bc3976e79 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -652,6 +652,7 @@ "validation": "" }, "fields": { + "allpartslocation": "", "date": "", "federal_tax_rate": "", "invoice_number": "", @@ -669,6 +670,7 @@ "entered_total": "", "enteringcreditmemo": "", "federal_tax": "", + "invoice_lines": "", "invoice_total": "", "invoices": "", "local_tax": "", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 49c4c93c3..d45ae6765 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -652,6 +652,7 @@ "validation": "" }, "fields": { + "allpartslocation": "", "date": "", "federal_tax_rate": "", "invoice_number": "", @@ -669,6 +670,7 @@ "entered_total": "", "enteringcreditmemo": "", "federal_tax": "", + "invoice_lines": "", "invoice_total": "", "invoices": "", "local_tax": "",