Files
bodyshop/client/src/components/parts-order-modal/parts-order-modal.component.jsx

106 lines
3.3 KiB
JavaScript

import { DeleteFilled } from "@ant-design/icons";
import { DatePicker, Form, Input, Radio } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function PartsOrderModalComponent({
vendorList,
sendTypeState
}) {
const [sendType, setSendType] = sendTypeState;
const { t } = useTranslation();
return (
<div>
<Form.Item
name="vendorid"
label={t("vendors.fields.name")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<VendorSearchSelect options={vendorList} />
</Form.Item>
<Form.Item
name="deliver_by"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
label={t("parts_orders.fields.deliver_by")}
>
<DatePicker />
</Form.Item>
{t("parts_orders.labels.inthisorder")}
<Form.List name={["parts_order_lines", "data"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}>
<Form.Item
label={t("parts_orders.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("parts_orders.fields.line_remarks")}
key={`${index}line_remarks`}
name={[field.name, "line_remarks"]}
>
<Input />
</Form.Item>
<Form.Item
label={t("parts_orders.fields.db_price")}
key={`${index}db_price`}
name={[field.name, "db_price"]}
>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("parts_orders.fields.act_price")}
key={`${index}act_price`}
name={[field.name, "act_price"]}
>
<CurrencyInput />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
</div>
);
}}
</Form.List>
<Radio.Group
defaultValue={sendType}
onChange={e => setSendType(e.target.value)}
>
<Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
<Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
</Radio.Group>
</div>
);
}