diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 2e46c1f8b..7d2b6ffde 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -8363,6 +8363,27 @@ fields + + am + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + city false @@ -8531,6 +8552,48 @@ + + lkq + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + make + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + name false @@ -8552,6 +8615,27 @@ + + oem + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + prompt_discount false diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx deleted file mode 100644 index f23daa716..000000000 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx +++ /dev/null @@ -1,135 +0,0 @@ -import { Table } from "antd"; -import React, { useState } from "react"; -import { useTranslation } from "react-i18next"; -import CurrencyFormatter from "../../utils/CurrencyFormatter"; -import { alphaSort } from "../../utils/sorters"; -import InvoiceAddLineButton from "../invoice-add-line-button/invoice-add-line-button.component"; - -export default function InvoiceEnterModalTableComponent({ - lineData, - form, - vendor -}) { - const [state, setState] = useState({ - sortedInfo: {} - }); - const { t } = useTranslation(); - - const columns = [ - { - title: t("joblines.fields.line_desc"), - dataIndex: "line_desc", - key: "line_desc", - sorter: (a, b) => alphaSort(a.line_desc, b.line_desc), - sortOrder: - state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order, - ellipsis: true - }, - { - title: t("joblines.fields.oem_partno"), - dataIndex: "oem_partno", - key: "oem_partno", - sorter: (a, b) => - alphaSort( - a.oem_partno ? a.oem_partno : a.op_code_desc, - b.oem_partno ? b.oem_partno : b.op_code_desc - ), - sortOrder: - state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order, - ellipsis: true, - render: (text, record) => ( - - {record.oem_partno ? record.oem_partno : record.op_code_desc} - - ) - }, - { - title: t("joblines.fields.part_type"), - dataIndex: "part_type", - key: "part_type", - sorter: (a, b) => alphaSort(a.part_type, b.part_type), - sortOrder: - state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order - }, - { - title: t("joblines.fields.db_price"), - dataIndex: "db_price", - key: "db_price", - sorter: (a, b) => a.db_price - b.db_price, - sortOrder: - state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order, - render: (text, record) => ( - {record.db_price} - ) - }, - { - title: t("joblines.fields.act_price"), - dataIndex: "act_price", - key: "act_price", - sorter: (a, b) => a.act_price - b.act_price, - sortOrder: - state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order, - render: (text, record) => ( - {record.act_price} - ) - }, - { - title: t("joblines.fields.part_qty"), - dataIndex: "part_qty", - key: "part_qty", - sorter: (a, b) => a.part_qty - b.part_qty, - sortOrder: - state.sortedInfo.columnKey === "part_qty" && state.sortedInfo.order - }, - { - title: t("joblines.fields.mod_lb_hrs"), - dataIndex: "mod_lb_hrs", - key: "mod_lb_hrs", - sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs, - sortOrder: - state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order - }, - { - title: t("invoices.labels.actions"), - dataIndex: "actions", - key: "actions", - render: (text, record) => ( -
- -
- ) - } - ]; - - const handleTableChange = (pagination, filters, sorter) => { - setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); - }; - - const formItemLayout = { - labelCol: { - xs: { span: 12 }, - sm: { span: 5 } - }, - wrapperCol: { - xs: { span: 24 }, - sm: { span: 12 } - } - }; - - return ( - ({ ...item }))} - rowKey="id" - dataSource={lineData} - onChange={handleTableChange} - /> - ); -} diff --git a/client/src/components/vendors-form/vendors-form.component.jsx b/client/src/components/vendors-form/vendors-form.component.jsx index d28e89177..0823b661a 100644 --- a/client/src/components/vendors-form/vendors-form.component.jsx +++ b/client/src/components/vendors-form/vendors-form.component.jsx @@ -1,54 +1,18 @@ -import { Button, Checkbox, Col, Form, Input, InputNumber, Row } from "antd"; +import { Button, Form, Input, InputNumber, Switch, Select } from "antd"; import React from "react"; -import { MinusCircleOutlined, PlusCircleFilled } from "@ant-design/icons"; import { useTranslation } from "react-i18next"; import FormItemEmail from "../form-items-formatted/email-form-item.component"; -import ResetForm from "../form-items-formatted/reset-form-item.component"; -let id = 0; - -export default function VendorsFormComponent({ form, vendor, handleDelete }) { - const { - getFieldDecorator, - isFieldsTouched, - getFieldValue, - resetFields - } = form; - - getFieldDecorator("keys", { - initialValue: Array.isArray(vendor.favorite) ? vendor.favorite : [] - }); - - const remove = k => { - // can use data-binding to get - const keys = form.getFieldValue("keys"); - console.log("keys", keys); - // We need at least one passenger - if (keys.length === 1) { - return; - } - // can use data-binding to set - form.setFieldsValue({ - keys: keys.filter(key => key !== k) - }); - }; - - const add = props => { - console.log("props", props); - // can use data-binding to get - const keys = form.getFieldValue("keys"); - console.log("keys", keys); - const nextKeys = keys.concat(id++); - // can use data-binding to set - // important! notify form to detect changes - form.setFieldsValue({ - keys: nextKeys - }); - }; +import { DeleteFilled } from "@ant-design/icons"; +export default function VendorsFormComponent({ + form, + handleDelete, + responsibilityCenters +}) { const { t } = useTranslation(); + const { getFieldValue } = form; return (
- {isFieldsTouched() ? : null} @@ -56,130 +20,143 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) { {t("general.actions.delete")} - {getFieldValue("keys").map((k, index) => ( - - {getFieldDecorator(`favorite[${k}].make`, { - validateTrigger: ["onChange", "onBlur"] - })( - - )} - {getFieldValue("keys").length > 1 ? ( - remove(k)} - /> - ) : null} - - {getFieldDecorator(`favorite[${k}].type`, { - initialValue: null - })( - - -
- OEM - - - LKQ - - - AM - - - - )} - - - ))} - - - + + {(fields, { add, remove }) => { + return ( +
+ {fields.map((field, index) => ( + +
+ + + - - {getFieldDecorator("zip", { - initialValue: vendor.zip - })()} + +
+ + + + + + + + + +
+ + { + remove(field.name); + }} + /> +
+ + ))} + + + +
+ ); + }} + + + + - - {getFieldDecorator("terms", { - initialValue: vendor.terms - })()} + + - - {getFieldDecorator("taxid", { - initialValue: vendor.taxid - })()} + + - - {getFieldDecorator("street1", { - initialValue: vendor.street1 - })()} + + - - {getFieldDecorator("street2", { - initialValue: vendor.street2 - })()} + + - - {getFieldDecorator("state", { - initialValue: vendor.state - })()} + + - - {getFieldDecorator("prompt_discount", { - initialValue: vendor.prompt_discount - })()} + + - - {getFieldDecorator("name", { - initialValue: vendor.name - })()} + + - - {getFieldDecorator("email", { - initialValue: vendor.email, - rules: [ - { - type: "email", - message: t("general.validation.invalidemail") - } - ] - })()} + + - - {getFieldDecorator("due_date", { - initialValue: vendor.due_date - })()} + + - - {getFieldDecorator("display_name", { - initialValue: vendor.display_name - })()} + + - - {getFieldDecorator("discount", { - initialValue: vendor.discount - })()} + + - - {getFieldDecorator("country", { - initialValue: vendor.country - })()} + + - - {getFieldDecorator("cost_center", { - initialValue: vendor.cost_center, - rules: [{ required: true, message: t("general.validation.required") }] - })()} + + - - {getFieldDecorator("city", { - initialValue: vendor.city - })()} + + ); diff --git a/client/src/components/vendors-form/vendors-form.container.jsx b/client/src/components/vendors-form/vendors-form.container.jsx index f2911b937..f8f7069e7 100644 --- a/client/src/components/vendors-form/vendors-form.container.jsx +++ b/client/src/components/vendors-form/vendors-form.container.jsx @@ -1,5 +1,5 @@ import { Form, notification } from "antd"; -import React from "react"; +import React, { useEffect } from "react"; import { useMutation, useQuery } from "react-apollo"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -7,31 +7,31 @@ import { createStructuredSelector } from "reselect"; import { DELETE_VENDOR, INSERT_NEW_VENDOR, - UPDATE_VENDOR, - QUERY_VENDOR_BY_ID + QUERY_VENDOR_BY_ID, + UPDATE_VENDOR } from "../../graphql/vendors.queries"; import { selectBodyshop } from "../../redux/user/user.selectors"; -import VendorsFormComponent from "./vendors-form.component"; -import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import AlertComponent from "../alert/alert.component"; +import LoadingSpinner from "../loading-spinner/loading-spinner.component"; +import VendorsFormComponent from "./vendors-form.component"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -function VendorsFormContainer({ vendorId, refetch, bodyshop }) { +function VendorsFormContainer({ selectedVendor, refetch, bodyshop }) { const [form] = Form.useForm(); const { t } = useTranslation(); const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, { - variables: { id: vendorId }, + variables: { id: (selectedVendor && selectedVendor.id) || null }, fetchPolicy: "network-only", - skip: !vendorId + skip: !selectedVendor }); const [updateVendor] = useMutation(UPDATE_VENDOR); const [insertvendor] = useMutation(INSERT_NEW_VENDOR); const [deleteVendor] = useMutation(DELETE_VENDOR); const handleDelete = () => { - deleteVendor({ variables: { id: vendorId } }) + deleteVendor({ variables: { id: selectedVendor.id } }) .then(r => { notification["success"]({ message: t("vendors.successes.deleted") @@ -47,11 +47,10 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) { }; const handleFinish = values => { - delete values.keys; - if (vendorId) { + if (selectedVendor.id) { //It's a vendor to update. updateVendor({ - variables: { id: vendorId, vendor: values } + variables: { id: selectedVendor.id, vendor: values } }) .then(r => { notification["success"]({ @@ -64,6 +63,7 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) { notification["error"]({ message: t("vendors.errors.saving") }); + console.log("error", error); }); } else { //It's a new vendor to insert. @@ -85,15 +85,25 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) { } }; + useEffect(() => { + if (data) form.resetFields(); + }, [data, form]); + if (loading) return ; if (error) return ; return ( -
- {data ? ( + + {selectedVendor ? ( ) : ( t("vendors.labels.noneselected") diff --git a/client/src/components/vendors-list/vendors-list.component.jsx b/client/src/components/vendors-list/vendors-list.component.jsx index 6f3ef2452..ff801efab 100644 --- a/client/src/components/vendors-list/vendors-list.component.jsx +++ b/client/src/components/vendors-list/vendors-list.component.jsx @@ -1,4 +1,4 @@ -import { Input, Table, Button } from "antd"; +import { Button, Table } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { alphaSort } from "../../utils/sorters"; @@ -7,7 +7,6 @@ export default function VendorsListComponent({ setSelectedVendor, handleNewVendor, loading, - refetch, handleOnRowClick, vendors }) { @@ -56,47 +55,37 @@ export default function VendorsListComponent({ //TODO Implement search return ( -
-
{ - return ( -
- {" "} - { - console.log(value); - }} - enterButton - /> - -
- ); - }} - size="small" - pagination={{ position: "top" }} - columns={columns.map(item => ({ ...item }))} - rowKey="id" - onChange={handleTableChange} - dataSource={vendors} - rowSelection={{ - onSelect: record => { - setSelectedVendor(record); - }, - type: "radio", - selectedRowKeys: selectedVendor ? selectedVendor.id : null - }} - onRow={(record, rowIndex) => { - return { - onClick: event => { - handleOnRowClick(record); - } - }; - }} - /> - +
{ + return ( +
+ +
+ ); + }} + size="small" + pagination={{ position: "top" }} + columns={columns.map(item => ({ ...item }))} + rowKey="id" + onChange={handleTableChange} + dataSource={vendors} + rowSelection={{ + onSelect: record => { + setSelectedVendor(record); + }, + type: "radio", + selectedRowKeys: selectedVendor ? [selectedVendor.id] : null + }} + onRow={(record, rowIndex) => { + return { + onClick: event => { + handleOnRowClick(record); + } + }; + }} + /> ); } diff --git a/client/src/components/vendors-list/vendors-list.container.jsx b/client/src/components/vendors-list/vendors-list.container.jsx index c2a70bbee..eec49cd5f 100644 --- a/client/src/components/vendors-list/vendors-list.container.jsx +++ b/client/src/components/vendors-list/vendors-list.container.jsx @@ -6,10 +6,9 @@ import VendorsListComponent from "./vendors-list.component"; export default function VendorsListContainer({ selectedVendorState }) { const [selectedVendor, setSelectedVendor] = selectedVendorState; - const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS, { + const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, { fetchPolicy: "network-only" }); - const handleNewVendor = () => { setSelectedVendor({}); }; @@ -17,12 +16,10 @@ export default function VendorsListContainer({ selectedVendorState }) { const handleOnRowClick = record => { if (record) { setSelectedVendor(record); - return; - } - setSelectedVendor(null); + } else setSelectedVendor(null); }; - if (error) return ; + if (error) return ; return ( ); diff --git a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx index 551657fa8..551332b15 100644 --- a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx +++ b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx @@ -4,12 +4,11 @@ import VendorsFormContainer from "../../components/vendors-form/vendors-form.con export default function ShopVendorPageComponent({ selectedVendorState }) { //TODO Figure out how to handle the refresh list when saving form + return (
- +
); } diff --git a/client/src/pages/shop-vendor/shop-vendor.page.container.jsx b/client/src/pages/shop-vendor/shop-vendor.page.container.jsx index 9f9e5bfb6..abde71a2f 100644 --- a/client/src/pages/shop-vendor/shop-vendor.page.container.jsx +++ b/client/src/pages/shop-vendor/shop-vendor.page.container.jsx @@ -7,11 +7,12 @@ export default function ShopVendorPageContainer() { useEffect(() => { document.title = t("titles.shop_vendors"); }, [t]); - + const fetchState = useState(); const selectedVendorState = useState(); return ( -
- -
+ ); } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 43217eba2..5a5217e66 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -570,6 +570,7 @@ "saving": "Error encountered while saving vendor. " }, "fields": { + "am": "Aftermarket", "city": "City", "cost_center": "Cost Center", "country": "Country", @@ -578,7 +579,10 @@ "due_date": "Payment Due Date", "email": "Contact Email", "favorite": "Favorite?", + "lkq": "LKQ", + "make": "Make", "name": "Vendor Name", + "oem": "OEM", "prompt_discount": "Prompt Discount %", "state": "State/Province", "street1": "Street", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index ebea80080..724de8ac6 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -570,6 +570,7 @@ "saving": "Se encontró un error al guardar el proveedor." }, "fields": { + "am": "", "city": "ciudad", "cost_center": "Centro de costos", "country": "País", @@ -578,7 +579,10 @@ "due_date": "Fecha de vencimiento del pago", "email": "Email de contacto", "favorite": "¿Favorito?", + "lkq": "", + "make": "", "name": "Nombre del vendedor", + "oem": "", "prompt_discount": "Descuento pronto", "state": "Provincia del estado", "street1": "calle", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 86e0581cf..e089d22dc 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -570,6 +570,7 @@ "saving": "Erreur rencontrée lors de l'enregistrement du fournisseur." }, "fields": { + "am": "", "city": "Ville", "cost_center": "Centre de coûts", "country": "Pays", @@ -578,7 +579,10 @@ "due_date": "Date limite de paiement", "email": "Email du contact", "favorite": "Préféré?", + "lkq": "", + "make": "", "name": "Nom du vendeur", + "oem": "", "prompt_discount": "Remise rapide%", "state": "Etat / Province", "street1": "rue",