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

Majority of Dropdown Overlay Menu refactors.

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2023-12-29 13:26:37 -05:00
parent 79dce5d069
commit 07b46ed92b
32 changed files with 744 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
client/src/components/parts-order-modal/parts-order-modal-price-change.component.jsx
View File

@@ -1,97 +1,95 @@
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, InputNumber, Menu, Space } from "antd";
import {DownOutlined} from "@ant-design/icons";
import {Dropdown, InputNumber, Space} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function PartsOrderModalPriceChange({ form, field }) {
const { t } = useTranslation();
const menu = (
<Menu
onClick={({ key }) => {
if (key === "custom") return;
const values = form.getFieldsValue();
import {useTranslation} from "react-i18next";
const { parts_order_lines } = values;
export default function PartsOrderModalPriceChange({form, field}) {
const {t} = useTranslation();
const menu = {
items: [
{
key: "5",
label: t("parts_orders.labels.discount", {percent: "5%"}),
},
{
key: "10",
label: t("parts_orders.labels.discount", {percent: "10%"}),
},
{
key: "15",
label: t("parts_orders.labels.discount", {percent: "15%"}),
},
{
key: "20",
label: t("parts_orders.labels.discount", {percent: "20%"}),
},
{
key: "25",
label: t("parts_orders.labels.discount", {percent: "25%"}),
},
{
key: "custom",
label: (
<InputNumber
onClick={(e) => e.stopPropagation()}
addonAfter="%"
onKeyUp={(e) => {
if (e.key === "Enter") {
const values = form.getFieldsValue();
const {parts_order_lines} = values;
form.setFieldsValue({
parts_order_lines: {
data: parts_order_lines.data.map((p, idx) => {
if (idx !== field.name) return p;
return {
...p,
act_price: (p.act_price || 0) * ((100 - key) / 100),
};
}),
},
});
}}
items={[
{
key: "5",
label: t("parts_orders.labels.discount", { percent: "5%" }),
},
{
key: "10",
label: t("parts_orders.labels.discount", { percent: "10%" }),
},
{
key: "15",
label: t("parts_orders.labels.discount", { percent: "15%" }),
},
{
key: "20",
label: t("parts_orders.labels.discount", { percent: "20%" }),
},
{
key: "25",
label: t("parts_orders.labels.discount", { percent: "25%" }),
},
{
key: "custom",
label: (
<InputNumber
onClick={(e) => e.stopPropagation()}
addonAfter="%"
onKeyUp={(e) => {
if (e.key === "Enter") {
const values = form.getFieldsValue();
const { parts_order_lines } = values;
form.setFieldsValue({
parts_order_lines: {
data: parts_order_lines.data.map((p, idx) => {
form.setFieldsValue({
parts_order_lines: {
data: parts_order_lines.data.map((p, idx) => {
if (idx !== field.name) return p;
console.log(
p,
e.target.value,
(p.act_price || 0) *
((100 - (e.target.value || 0)) / 100)
);
return {
...p,
act_price:
(p.act_price || 0) *
((100 - (e.target.value || 0)) / 100),
};
}),
},
});
e.target.value = 0;
}
}}
min={0}
max={100}
/>
),
},
],
onClick: ({key}) => {
if (key === "custom") return;
const values = form.getFieldsValue();
const {parts_order_lines} = values;
form.setFieldsValue({
parts_order_lines: {
data: parts_order_lines.data.map((p, idx) => {
if (idx !== field.name) return p;
console.log(
p,
e.target.value,
(p.act_price || 0) *
((100 - (e.target.value || 0)) / 100)
);
return {
...p,
act_price:
(p.act_price || 0) *
((100 - (e.target.value || 0)) / 100),
...p,
act_price: (p.act_price || 0) * ((100 - key) / 100),
};
}),
},
});
e.target.value = 0;
}
}}
min={0}
max={100}
/>
),
},
]}
/>
);
return (
<Dropdown menu={menu} trigger="click">
<Space>
%
<DownOutlined />
</Space>
</Dropdown>
);
}),
},
});
}
};
return (
<Dropdown menu={menu} trigger="click">
<Space>
%
<DownOutlined/>
</Space>
</Dropdown>
);
}

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

@@ -39,16 +39,14 @@ export function PartsOrderModalComponent({bodyshop, vendorList, sendTypeState, i
form.setFieldsValue({comments: item.props.value});
};
const menu = (
<Menu
onClick={handleClick}
items={bodyshop.md_parts_order_comment.map((comment, idx) => ({
key: idx,
label: comment.label,
value: comment.comment,
}))}
/>
);
const menu = {
items: bodyshop.md_parts_order_comment.map((comment, idx) => ({
key: idx,
label: comment.label,
value: comment.comment,
})),
onClick: handleClick
};
return (
<div>