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

import { DeleteFilled, WarningFilled } from "@ant-design/icons";
import { Divider, Form, Input, InputNumber, Radio, Space, Tag } 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 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,
  sendTypeState,
  isReturn,
  preferredMake,
  job,
}) {
  const [sendType, setSendType] = sendTypeState;

  const { t } = useTranslation();

  return (
    <div>
      <Form.Item name="returnfrombill" style={{ display: "none" }}>
        <Input />
      </Form.Item>
      <LayoutFormRow grow noDivider>
        <Form.Item
          name="vendorid"
          label={t("vendors.fields.name")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <VendorSearchSelect
            options={vendorList}
            disabled={isReturn}
            preferredMake={preferredMake}
          />
        </Form.Item>
        <Form.Item
          name="deliver_by"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          label={t("parts_orders.fields.deliver_by")}
        >
          <FormDatePicker onlyFuture />
        </Form.Item>
        {job && job.special_coverage_policy && (
          <Tag color="tomato">
            <Space>
              <WarningFilled />
              <span>{t("jobs.labels.specialcoveragepolicy")}</span>
            </Space>
          </Tag>
        )}
      </LayoutFormRow>
      <Divider orientation="left">
        {t("parts_orders.labels.inthisorder")}
      </Divider>
      <Form.List name={["parts_order_lines", "data"]}>
        {(fields, { add, remove, move }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Form.Item required={false} key={field.key}>
                  <LayoutFormRow grow noDivider>
                    <Form.Item
                      //span={8}
                      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.quantity")}
                      key={`${index}quantity`}
                      name={[field.name, "quantity"]}
                      rules={[
                        {
                          required: true,
                          //message: t("general.validation.required"),
                        },
                      ]}
                    >
                      <InputNumber />
                    </Form.Item>
                    <Form.Item
                      label={t("parts_orders.fields.act_price")}
                      key={`${index}act_price`}
                      name={[field.name, "act_price"]}
                    >
                      <CurrencyInput />
                    </Form.Item>
                    {isReturn && (
                      <Form.Item
                        label={t("parts_orders.fields.cost")}
                        key={`${index}cost`}
                        name={[field.name, "cost"]}
                      >
                        <CurrencyInput />
                      </Form.Item>
                    )}

                    <Space wrap align="center">
                      <div>
                        <DeleteFilled
                          style={{ margin: "1rem" }}
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                      </div>
                      <FormListMoveArrows
                        move={move}
                        index={index}
                        total={fields.length}
                      />
                    </Space>
                  </LayoutFormRow>
                </Form.Item>
              ))}
            </div>
          );
        }}
      </Form.List>
      <Form.Item name="comments" label={t("parts_orders.fields.comments")}>
        <Input.TextArea rows={3} />
      </Form.Item>
      <Radio.Group
        defaultValue={sendType}
        onChange={(e) => setSendType(e.target.value)}
      >
        <Radio value={"none"}>{t("general.labels.none")}</Radio>
        <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
        <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
      </Radio.Group>
    </div>
  );
}