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

BOD-61 Fixed invoice enter modal to simplify + follow new modal pattern.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-02 11:05:04 -07:00
parent b93bb293e9
commit 53a567d65f
6 changed files with 278 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,176 +1,116 @@
import {
Button,
DatePicker,
Form,
Input,
Modal,
Select,
Switch,
Tag
} from "antd";
import React from "react";
import { DatePicker, Form, Input, Switch } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
export default function InvoiceEnterModalComponent({
visible,
invoice,
handleCancel,
handleFinish,
handleRoSelect,
form,
roAutoCompleteOptions,
handleVendorSelect,
vendorAutoCompleteOptions,
lineData,
vendor,
job,
responsibilityCenters
responsibilityCenters,
loadLines
}) {
const { t } = useTranslation();
const [form] = Form.useForm();
const { resetFields } = form;
const [discount, setDiscount] = useState(0);
const handleVendorSelect = (props, opt) => {
setDiscount(opt.discount);
};
return (
<Form onFinish={handleFinish} autoComplete={"off"} form={form}>
<Modal
title={
invoice && invoice.id
? t("invoices.labels.edit")
: t("invoices.labels.new")
}
width={"90%"}
visible={visible}
okText={t("general.actions.save")}
onOk={() => form.submit()}
okButtonProps={{ htmlType: "submit" }}
onCancel={handleCancel}
>
<div style={{ display: "flex" }}>
<Form.Item
name="jobid"
label={t("invoices.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required")
<div>
<div style={{ display: "flex" }}>
<Form.Item
name="jobid"
label={t("invoices.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<JobSearchSelect
options={roAutoCompleteOptions}
onBlur={() => {
if (form.getFieldValue("jobid") !== null) {
loadLines({ variables: { id: form.getFieldValue("jobid") } });
}
]}
>
<Select
showSearch
defaultValue={
job ? (job.ro_number ? job.ro_number : job.est_number) : null
}
autoFocus
defaultOpen
style={{ width: "300px" }}
onSelect={handleRoSelect}
>
{roAutoCompleteOptions
? roAutoCompleteOptions.map(o => (
<Select.Option
key={o.id}
value={o.ro_number ? o.ro_number : o.est_number}
>
{`${
o.ro_number ? o.ro_number : o.est_number
} | ${o.ownr_ln || ""} ${o.ownr_fn ||
""} | ${o.v_model_yr || ""} ${o.v_make_desc ||
""} ${o.v_model_desc || ""}`}
</Select.Option>
))
: null}
</Select>
</Form.Item>
<Form.Item
label={t("invoices.fields.vendor")}
name="vendorid"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Select
showSearch
onSelect={handleVendorSelect}
style={{ width: "300px" }}
>
{vendorAutoCompleteOptions
? vendorAutoCompleteOptions.map(o => (
<Select.Option key={o.id} value={o.name}>
<div style={{ display: "flex" }}>
{o.name}
<Tag color="green">{`${o.discount * 100}%`}</Tag>
</div>
</Select.Option>
))
: null}
</Select>
</Form.Item>
<Button onClick={() => resetFields()}>
{t("general.actions.reset")}
</Button>
</div>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoices.fields.invoice_number")}
name="invoice_number"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoices.fields.date")}
name="date"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}
name="is_credit_memo"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("invoices.fields.total")}
name="total"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<CurrencyInput />
</Form.Item>
</div>
<InvoiceEnterModalLinesComponent
lineData={lineData}
discount={vendor && vendor.discount}
form={form}
responsibilityCenters={responsibilityCenters}
/>
<Button onClick={() => console.log(form.getFieldsValue())}>
Field Values
</Button>
</Modal>
</Form>
}}
/>
</Form.Item>
<Form.Item
label={t("invoices.fields.vendor")}
name="vendorid"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<VendorSearchSelect
options={vendorAutoCompleteOptions}
onSelect={handleVendorSelect}
/>
</Form.Item>
</div>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoices.fields.invoice_number")}
name="invoice_number"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoices.fields.date")}
name="date"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}
name="is_credit_memo"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("invoices.fields.total")}
name="total"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<CurrencyInput />
</Form.Item>
</div>
<InvoiceEnterModalLinesComponent
lineData={lineData}
discount={discount}
form={form}
responsibilityCenters={responsibilityCenters}
/>
</div>
);
}