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

BOD-8 #comment Fixed up part of the vendor edit page. Refetch of list still oustanding.

Browse Source
This commit is contained in:
Patrick Fic
2020-03-10 14:21:21 -07:00
parent 024ddc2737
commit 8cb6bc6a24
11 changed files with 294 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
bodyshop_translations.babel
View File

@@ -8363,6 +8363,27 @@
<folder_node> <folder_node>
<name>fields</name> <name>fields</name>
<children> <children>
<concept_node>
<name>am</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>
<concept_node> <concept_node>
<name>city</name> <name>city</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -8531,6 +8552,48 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>lkq</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>
<concept_node>
<name>make</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>
<concept_node> <concept_node>
<name>name</name> <name>name</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -8552,6 +8615,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>oem</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>
<concept_node> <concept_node>
<name>prompt_discount</name> <name>prompt_discount</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

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

@@ -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) => (
<span>
{record.oem_partno ? record.oem_partno : record.op_code_desc}
</span>
)
},
{
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) => (
<CurrencyFormatter>{record.db_price}</CurrencyFormatter>
)
},
{
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) => (
<CurrencyFormatter>{record.act_price}</CurrencyFormatter>
)
},
{
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) => (
<div>
<InvoiceAddLineButton
jobLine={record}
form={form}
discount={vendor ? vendor.discount : null}
disabled={vendor}
/>
</div>
)
}
];
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 (
<Table
{...formItemLayout}
size="small"
pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={lineData}
onChange={handleTableChange}
/>
);
}

283
client/src/components/vendors-form/vendors-form.component.jsx
View File

@@ -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 React from "react";
import { MinusCircleOutlined, PlusCircleFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import FormItemEmail from "../form-items-formatted/email-form-item.component"; import FormItemEmail from "../form-items-formatted/email-form-item.component";
import ResetForm from "../form-items-formatted/reset-form-item.component"; import { DeleteFilled } from "@ant-design/icons";
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
});
};
export default function VendorsFormComponent({
form,
handleDelete,
responsibilityCenters
}) {
const { t } = useTranslation(); const { t } = useTranslation();
const { getFieldValue } = form;
return ( return (
<div> <div>
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
<Button htmlType="submit" type="primary"> <Button htmlType="submit" type="primary">
{t("general.actions.save")} {t("general.actions.save")}
</Button> </Button>
@@ -56,130 +20,143 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) {
{t("general.actions.delete")} {t("general.actions.delete")}
</Button> </Button>
{getFieldValue("keys").map((k, index) => ( <Form.List name="favorite">
<Form.Item required={false} key={k}> {(fields, { add, remove }) => {
{getFieldDecorator(`favorite[${k}].make`, { return (
validateTrigger: ["onChange", "onBlur"] <div>
})( {fields.map((field, index) => (
<Input <Form.Item key={field.key}>
placeholder="passenger name" <div style={{ display: "flex" }}>
style={{ width: "60%", marginRight: 8 }} <Form.Item
/> label={t("vendors.fields.make")}
)} key={`${index}make`}
{getFieldValue("keys").length > 1 ? ( name={[field.name, "make"]}
<MinusCircleOutlined rules={[
className="dynamic-delete-button" {
onClick={() => remove(k)} required: true,
/> message: t("general.validation.required")
) : null} }
<Form.Item label="Group"> ]}
{getFieldDecorator(`favorite[${k}].type`, { >
initialValue: null <Input />
})( </Form.Item>
<Checkbox.Group style={{ width: "100%" }}>
<Row>
<Col span={8}>
<Checkbox value="OEM">OEM</Checkbox>
</Col>
<Col span={8}>
<Checkbox value="LKQ">LKQ</Checkbox>
</Col>
<Col span={8}>
<Checkbox value="AM">AM</Checkbox>
</Col>
</Row>
</Checkbox.Group>
)}
</Form.Item>
</Form.Item>
))}
<Form.Item label={t("vendors.fields.favorite")}>
<Button type="dashed" onClick={add} style={{ width: "60%" }}>
<PlusCircleFilled /> Add field
</Button>
</Form.Item>
<Form.Item label={t("vendors.fields.zip")}> <Form.Item key={`${field.key}types`}>
{getFieldDecorator("zip", { <div style={{ display: "flex" }}>
initialValue: vendor.zip <Form.Item
})(<Input name="zip" />)} label={t("vendors.fields.oem")}
key={`${index}oem`}
name={[field.name, "type", "oem"]}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("vendors.fields.lkq")}
key={`${index}lkq`}
name={[field.name, "type", "lkq"]}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("vendors.fields.am")}
key={`${index}am`}
name={[field.name, "type", "am"]}
valuePropName="checked"
>
<Switch />
</Form.Item>
</div>
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("invoicelines.actions.newline")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.Item label={t("vendors.fields.zip")} name="zip">
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.terms")}> <Form.Item label={t("vendors.fields.terms")} name="terms">
{getFieldDecorator("terms", { <Input />
initialValue: vendor.terms
})(<Input name="terms" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.taxid")}> <Form.Item label={t("vendors.fields.taxid")} name="taxid">
{getFieldDecorator("taxid", { <Input />
initialValue: vendor.taxid
})(<Input name="taxid" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.street1")}> <Form.Item label={t("vendors.fields.street1")} name="street1">
{getFieldDecorator("street1", { <Input />
initialValue: vendor.street1
})(<Input name="street1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.street2")}> <Form.Item label={t("vendors.fields.street2")} name="street2">
{getFieldDecorator("street2", { <Input />
initialValue: vendor.street2
})(<Input name="street2" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.state")}> <Form.Item label={t("vendors.fields.state")} name="state">
{getFieldDecorator("state", { <Input />
initialValue: vendor.state
})(<Input name="state" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.prompt_discount")}> <Form.Item
{getFieldDecorator("prompt_discount", { label={t("vendors.fields.prompt_discount")}
initialValue: vendor.prompt_discount name="prompt_discount"
})(<InputNumber name="prompt_discount" />)} >
<InputNumber />
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.name")}> <Form.Item label={t("vendors.fields.name")} name="name">
{getFieldDecorator("name", { <Input />
initialValue: vendor.name
})(<Input name="name" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.email")}> <Form.Item
{getFieldDecorator("email", { label={t("vendors.fields.email")}
initialValue: vendor.email, rules={[
rules: [ {
{ type: "email",
type: "email", message: t("general.validation.invalidemail")
message: t("general.validation.invalidemail") }
} ]}
] name="email"
})(<FormItemEmail name="email" email={getFieldValue("email")} />)} >
<FormItemEmail email={getFieldValue("email")} />
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.due_date")}> <Form.Item label={t("vendors.fields.due_date")} name="due_date">
{getFieldDecorator("due_date", { <InputNumber />
initialValue: vendor.due_date
})(<InputNumber name="due_date" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.display_name")}> <Form.Item label={t("vendors.fields.display_name")} name="display_name">
{getFieldDecorator("display_name", { <Input />
initialValue: vendor.display_name
})(<Input name="display_name" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.discount")}> <Form.Item label={t("vendors.fields.discount")} name="discount">
{getFieldDecorator("discount", { <InputNumber />
initialValue: vendor.discount
})(<InputNumber name="discount" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.country")}> <Form.Item label={t("vendors.fields.country")} name="country">
{getFieldDecorator("country", { <Input />
initialValue: vendor.country
})(<Input name="country" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.cost_center")}> <Form.Item
{getFieldDecorator("cost_center", { label={t("vendors.fields.cost_center")}
initialValue: vendor.cost_center, rules={[{ required: true, message: t("general.validation.required") }]}
rules: [{ required: true, message: t("general.validation.required") }] name="cost_center"
})(<Input name="cost_center" />)} >
<Select style={{ width: "150px" }}>
{responsibilityCenters.costs.map(item => (
<Select.Option key={item}>{item}</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("vendors.fields.city")}> <Form.Item label={t("vendors.fields.city")} name="city">
{getFieldDecorator("city", { <Input />
initialValue: vendor.city
})(<Input name="city" />)}
</Form.Item> </Form.Item>
</div> </div>
); );

40
client/src/components/vendors-form/vendors-form.container.jsx
View File

@@ -1,5 +1,5 @@
import { Form, notification } from "antd"; import { Form, notification } from "antd";
import React from "react"; import React, { useEffect } from "react";
import { useMutation, useQuery } from "react-apollo"; import { useMutation, useQuery } from "react-apollo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -7,31 +7,31 @@ import { createStructuredSelector } from "reselect";
import { import {
DELETE_VENDOR, DELETE_VENDOR,
INSERT_NEW_VENDOR, INSERT_NEW_VENDOR,
UPDATE_VENDOR, QUERY_VENDOR_BY_ID,
QUERY_VENDOR_BY_ID UPDATE_VENDOR
} from "../../graphql/vendors.queries"; } from "../../graphql/vendors.queries";
import { selectBodyshop } from "../../redux/user/user.selectors"; 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 AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import VendorsFormComponent from "./vendors-form.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop
}); });
function VendorsFormContainer({ vendorId, refetch, bodyshop }) { function VendorsFormContainer({ selectedVendor, refetch, bodyshop }) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { t } = useTranslation(); const { t } = useTranslation();
const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, { const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
variables: { id: vendorId }, variables: { id: (selectedVendor && selectedVendor.id) || null },
fetchPolicy: "network-only", fetchPolicy: "network-only",
skip: !vendorId skip: !selectedVendor
}); });
const [updateVendor] = useMutation(UPDATE_VENDOR); const [updateVendor] = useMutation(UPDATE_VENDOR);
const [insertvendor] = useMutation(INSERT_NEW_VENDOR); const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
const [deleteVendor] = useMutation(DELETE_VENDOR); const [deleteVendor] = useMutation(DELETE_VENDOR);
const handleDelete = () => { const handleDelete = () => {
deleteVendor({ variables: { id: vendorId } }) deleteVendor({ variables: { id: selectedVendor.id } })
.then(r => { .then(r => {
notification["success"]({ notification["success"]({
message: t("vendors.successes.deleted") message: t("vendors.successes.deleted")
@@ -47,11 +47,10 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
}; };
const handleFinish = values => { const handleFinish = values => {
delete values.keys; if (selectedVendor.id) {
if (vendorId) {
//It's a vendor to update. //It's a vendor to update.
updateVendor({ updateVendor({
variables: { id: vendorId, vendor: values } variables: { id: selectedVendor.id, vendor: values }
}) })
.then(r => { .then(r => {
notification["success"]({ notification["success"]({
@@ -64,6 +63,7 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
notification["error"]({ notification["error"]({
message: t("vendors.errors.saving") message: t("vendors.errors.saving")
}); });
console.log("error", error);
}); });
} else { } else {
//It's a new vendor to insert. //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 <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<Form onFinish={handleFinish} form={form} autoComplete="new-password"> <Form
{data ? ( onFinish={handleFinish}
form={form}
autoComplete="new-password"
initialValues={data ? data.vendors_by_pk : null}
>
{selectedVendor ? (
<VendorsFormComponent <VendorsFormComponent
selec
form={form} form={form}
vendor={data ? data.vendors_by_pk : null}
handleDelete={handleDelete} handleDelete={handleDelete}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
/> />
) : ( ) : (
t("vendors.labels.noneselected") t("vendors.labels.noneselected")

77
client/src/components/vendors-list/vendors-list.component.jsx
View File

@@ -1,4 +1,4 @@
import { Input, Table, Button } from "antd"; import { Button, Table } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
@@ -7,7 +7,6 @@ export default function VendorsListComponent({
setSelectedVendor, setSelectedVendor,
handleNewVendor, handleNewVendor,
loading, loading,
refetch,
handleOnRowClick, handleOnRowClick,
vendors vendors
}) { }) {
@@ -56,47 +55,37 @@ export default function VendorsListComponent({
//TODO Implement search //TODO Implement search
return ( return (
<div> <Table
<Table loading={loading}
loading={loading} title={() => {
title={() => { return (
return ( <div>
<div> <Button onClick={handleNewVendor}>
{" "} {t("vendors.actions.new")}
<Input.Search </Button>
placeholder={t("general.labels.search")} </div>
onSearch={value => { );
console.log(value); }}
}} size="small"
enterButton pagination={{ position: "top" }}
/> columns={columns.map(item => ({ ...item }))}
<Button onClick={handleNewVendor}> rowKey="id"
{t("vendors.actions.new")} onChange={handleTableChange}
</Button> dataSource={vendors}
</div> rowSelection={{
); onSelect: record => {
}} setSelectedVendor(record);
size="small" },
pagination={{ position: "top" }} type: "radio",
columns={columns.map(item => ({ ...item }))} selectedRowKeys: selectedVendor ? [selectedVendor.id] : null
rowKey="id" }}
onChange={handleTableChange} onRow={(record, rowIndex) => {
dataSource={vendors} return {
rowSelection={{ onClick: event => {
onSelect: record => { handleOnRowClick(record);
setSelectedVendor(record); }
}, };
type: "radio", }}
selectedRowKeys: selectedVendor ? selectedVendor.id : null />
}}
onRow={(record, rowIndex) => {
return {
onClick: event => {
handleOnRowClick(record);
}
};
}}
/>
</div>
); );
} }

10
client/src/components/vendors-list/vendors-list.container.jsx
View File

@@ -6,10 +6,9 @@ import VendorsListComponent from "./vendors-list.component";
export default function VendorsListContainer({ selectedVendorState }) { export default function VendorsListContainer({ selectedVendorState }) {
const [selectedVendor, setSelectedVendor] = 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" fetchPolicy: "network-only"
}); });
const handleNewVendor = () => { const handleNewVendor = () => {
setSelectedVendor({}); setSelectedVendor({});
}; };
@@ -17,12 +16,10 @@ export default function VendorsListContainer({ selectedVendorState }) {
const handleOnRowClick = record => { const handleOnRowClick = record => {
if (record) { if (record) {
setSelectedVendor(record); setSelectedVendor(record);
return; } else setSelectedVendor(null);
}
setSelectedVendor(null);
}; };
if (error) return <AlertComponent message={error.message} type='error' />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<VendorsListComponent <VendorsListComponent
selectedVendor={selectedVendor} selectedVendor={selectedVendor}
@@ -30,7 +27,6 @@ export default function VendorsListContainer({ selectedVendorState }) {
handleNewVendor={handleNewVendor} handleNewVendor={handleNewVendor}
handleOnRowClick={handleOnRowClick} handleOnRowClick={handleOnRowClick}
loading={loading} loading={loading}
refetch={refetch}
vendors={data ? data.vendors : null} vendors={data ? data.vendors : null}
/> />
); );

5
client/src/pages/shop-vendor/shop-vendor.page.component.jsx generated
View File

@@ -4,12 +4,11 @@ import VendorsFormContainer from "../../components/vendors-form/vendors-form.con
export default function ShopVendorPageComponent({ selectedVendorState }) { export default function ShopVendorPageComponent({ selectedVendorState }) {
//TODO Figure out how to handle the refresh list when saving form //TODO Figure out how to handle the refresh list when saving form
return ( return (
<div> <div>
<VendorsListContainer selectedVendorState={selectedVendorState} /> <VendorsListContainer selectedVendorState={selectedVendorState} />
<VendorsFormContainer <VendorsFormContainer selectedVendor={selectedVendorState[0]} />
vendorId={selectedVendorState[0] ? selectedVendorState[0].id : null}
/>
</div> </div>
); );
} }

9
client/src/pages/shop-vendor/shop-vendor.page.container.jsx
View File

@@ -7,11 +7,12 @@ export default function ShopVendorPageContainer() {
useEffect(() => { useEffect(() => {
document.title = t("titles.shop_vendors"); document.title = t("titles.shop_vendors");
}, [t]); }, [t]);
const fetchState = useState();
const selectedVendorState = useState(); const selectedVendorState = useState();
return ( return (
<div> <ShopVendorPageComponent
<ShopVendorPageComponent selectedVendorState={selectedVendorState} /> selectedVendorState={selectedVendorState}
</div> fetchState={fetchState}
/>
); );
} }

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

@@ -570,6 +570,7 @@
"saving": "Error encountered while saving vendor. " "saving": "Error encountered while saving vendor. "
}, },
"fields": { "fields": {
"am": "Aftermarket",
"city": "City", "city": "City",
"cost_center": "Cost Center", "cost_center": "Cost Center",
"country": "Country", "country": "Country",
@@ -578,7 +579,10 @@
"due_date": "Payment Due Date", "due_date": "Payment Due Date",
"email": "Contact Email", "email": "Contact Email",
"favorite": "Favorite?", "favorite": "Favorite?",
"lkq": "LKQ",
"make": "Make",
"name": "Vendor Name", "name": "Vendor Name",
"oem": "OEM",
"prompt_discount": "Prompt Discount %", "prompt_discount": "Prompt Discount %",
"state": "State/Province", "state": "State/Province",
"street1": "Street", "street1": "Street",

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

@@ -570,6 +570,7 @@
"saving": "Se encontró un error al guardar el proveedor." "saving": "Se encontró un error al guardar el proveedor."
}, },
"fields": { "fields": {
"am": "",
"city": "ciudad", "city": "ciudad",
"cost_center": "Centro de costos", "cost_center": "Centro de costos",
"country": "País", "country": "País",
@@ -578,7 +579,10 @@
"due_date": "Fecha de vencimiento del pago", "due_date": "Fecha de vencimiento del pago",
"email": "Email de contacto", "email": "Email de contacto",
"favorite": "¿Favorito?", "favorite": "¿Favorito?",
"lkq": "",
"make": "",
"name": "Nombre del vendedor", "name": "Nombre del vendedor",
"oem": "",
"prompt_discount": "Descuento pronto", "prompt_discount": "Descuento pronto",
"state": "Provincia del estado", "state": "Provincia del estado",
"street1": "calle", "street1": "calle",

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

@@ -570,6 +570,7 @@
"saving": "Erreur rencontrée lors de l'enregistrement du fournisseur." "saving": "Erreur rencontrée lors de l'enregistrement du fournisseur."
}, },
"fields": { "fields": {
"am": "",
"city": "Ville", "city": "Ville",
"cost_center": "Centre de coûts", "cost_center": "Centre de coûts",
"country": "Pays", "country": "Pays",
@@ -578,7 +579,10 @@
"due_date": "Date limite de paiement", "due_date": "Date limite de paiement",
"email": "Email du contact", "email": "Email du contact",
"favorite": "Préféré?", "favorite": "Préféré?",
"lkq": "",
"make": "",
"name": "Nom du vendeur", "name": "Nom du vendeur",
"oem": "",
"prompt_discount": "Remise rapide%", "prompt_discount": "Remise rapide%",
"state": "Etat / Province", "state": "Etat / Province",
"street1": "rue", "street1": "rue",