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

Updating styling on parts and invoicing modals BOD-404

Browse Source
This commit is contained in:
Patrick Fic
2020-09-22 14:23:27 -07:00
parent 43490bbcba
commit 49f6cfa8c1
16 changed files with 431 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
client/src/components/parts-order-modal/parts-order-modal.component.jsx
View File

@@ -1,11 +1,12 @@
import { DeleteFilled } from "@ant-design/icons";
import { Form, Input, InputNumber, Radio } from "antd";
import { Form, Input, InputNumber, Radio, Typography } 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 VendorSearchSelect from "../vendor-search-select/vendor-search-select.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,
@@ -19,85 +20,84 @@ export default function PartsOrderModalComponent({
return (
<div>
<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 />
</Form.Item>
{t("parts_orders.labels.inthisorder")}
<LayoutFormRow>
<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 />
</Form.Item>
</LayoutFormRow>
<Typography.Title level={4}>
{t("parts_orders.labels.inthisorder")}
</Typography.Title>
<Form.List name={["parts_order_lines", "data"]}>
{(fields, { add, remove, move }) => {
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>
<Form.Item
label={t("parts_orders.fields.quantity")}
key={`${index}quantity`}
name={[field.name, "quantity"]}
>
<InputNumber />
</Form.Item>
<div style={{ display: "flex", alignItems: "center" }}>
<LayoutFormRow grow style={{ flex: 1 }}>
<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.act_price")}
key={`${index}act_price`}
name={[field.name, "act_price"]}
>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("parts_orders.fields.quantity")}
key={`${index}quantity`}
name={[field.name, "quantity"]}
>
<InputNumber />
</Form.Item>
</LayoutFormRow>
<DeleteFilled
style={{ margin: "1rem" }}
onClick={() => {
remove(field.name);
}}

21
client/src/components/parts-order-modal/parts-order-modal.container.jsx
View File

@@ -223,21 +223,24 @@ export function PartsOrderModalContainer({
forceRender
>
{error ? <AlertComponent message={error.message} type="error" /> : null}
<LoadingSpinner loading={loading}>
<Form
form={form}
autoComplete="no"
onFinish={handleFinish}
initialValues={initialValues}
>
<Form
form={form}
layout="vertical"
autoComplete="no"
onFinish={handleFinish}
initialValues={initialValues}
>
{loading ? (
<LoadingSpinner />
) : (
<PartsOrderModalComponent
vendorList={(data && data.vendors) || []}
sendTypeState={sendTypeState}
isReturn={isReturn}
preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
/>
</Form>
</LoadingSpinner>
)}
</Form>
</Modal>
);
}