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

228
client/src/pages/contract-detail/contract-detail.page.component.jsx
View File

@@ -1,136 +1,118 @@
import {
Button,
Col,
Dropdown,
Form,
Menu,
Row,
Space,
Typography,
} from "antd";
import {Button, Col, Dropdown, Form, Row, Space, Typography,} from "antd";
import {PageHeader} from "@ant-design/pro-layout";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
import ContractCourtesyCarBlock from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
import ContractCourtesyCarBlock
from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
import { setModalContext } from "../../redux/modals/modals.actions";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import {setModalContext} from "../../redux/modals/modals.actions";
import {GenerateDocument} from "../../utils/RenderTemplate";
import {TemplateList} from "../../utils/TemplateConstants";
const mapDispatchToProps = (dispatch) => ({
setCourtesyCarReturnModalContext: (context) =>
dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" })),
setCourtesyCarReturnModalContext: (context) =>
dispatch(setModalContext({context: context, modal: "courtesyCarReturn"})),
});
export function ContractDetailPage({
contract,
job,
courtesyCar,
setCourtesyCarReturnModalContext,
refetch,
form,
saveLoading,
}) {
const { t } = useTranslation();
return (
<div>
<Row align="middle">
<Typography.Title></Typography.Title>
</Row>
<PageHeader
title={t("contracts.labels.agreement", {
agreement_num: contract && contract.agreementnumber,
status: t(contract && contract.status),
})}
extra={
<Form.Item shouldUpdate>
{() => {
return (
<Space>
<Button
type="primary"
htmlType="submit"
loading={saveLoading}
>
{t("general.actions.save")}
</Button>
<Button
disabled={
!!!contract ||
(contract && contract.status !== "contracts.status.out")
}
onClick={() => {
setCourtesyCarReturnModalContext({
actions: { refetch },
context: {
contractId: contract.id,
courtesyCarId: courtesyCar.id,
},
});
}}
>
{t("courtesycars.actions.return")}
</Button>
<Dropdown
trigger="click"
menu={
<Menu
onClick={(e) => {
GenerateDocument(
{
name: TemplateList("courtesycarcontract")[e.key].key,
variables: { id: contract.id },
},
{},
"p"
);
}}
items={[
{
key: "courtesy_car_contract",
label: t("contracts.actions.printcontract"),
},
{
key: "courtesy_car_terms",
label: t("printcenter.courtesycarcontract.courtesy_car_terms"),
},
{
key: "courtesy_car_impound",
label: t("printcenter.courtesycarcontract.courtesy_car_impound"),
},
]}
/>
}
>
<Button>{t("general.labels.print")}</Button>
</Dropdown>
export function ContractDetailPage({contract, job, courtesyCar, setCourtesyCarReturnModalContext, refetch, form, saveLoading}) {
const {t} = useTranslation();
return (
<div>
<Row align="middle">
<Typography.Title></Typography.Title>
</Row>
<PageHeader
title={t("contracts.labels.agreement", {
agreement_num: contract && contract.agreementnumber,
status: t(contract && contract.status),
})}
extra={
<Form.Item shouldUpdate>
{() => {
const menu = {
onClick: (e) => {
GenerateDocument(
{
name: TemplateList("courtesycarcontract")[e.key].key,
variables: {id: contract.id},
},
{},
"p"
);
},
items: [
{
key: "courtesy_car_contract",
label: t("contracts.actions.printcontract"),
},
{
key: "courtesy_car_terms",
label: t("printcenter.courtesycarcontract.courtesy_car_terms"),
},
{
key: "courtesy_car_impound",
label: t("printcenter.courtesycarcontract.courtesy_car_impound"),
},
]
};
<ContractConvertToRo
contract={contract}
disabled={form.isFieldsTouched()}
/>
</Space>
);
}}
</Form.Item>
}
/>
<Row gutter={[16, 16]}>
<Col sm={24} md={12}>
<ContractJobBlock job={job} />
</Col>
<Col sm={24} md={12}>
<ContractCourtesyCarBlock courtesyCar={courtesyCar} />
</Col>
<Col span={24}>
<ContractFormComponent form={form} />
</Col>
</Row>
</div>
);
return (
<Space>
<Button
type="primary"
htmlType="submit"
loading={saveLoading}
>
{t("general.actions.save")}
</Button>
<Button
disabled={
!!!contract ||
(contract && contract.status !== "contracts.status.out")
}
onClick={() => {
setCourtesyCarReturnModalContext({
actions: {refetch},
context: {
contractId: contract.id,
courtesyCarId: courtesyCar.id,
},
});
}}
>
{t("courtesycars.actions.return")}
</Button>
<Dropdown trigger="click" menu={menu}>
<Button>{t("general.labels.print")}</Button>
</Dropdown>
<ContractConvertToRo
contract={contract}
disabled={form.isFieldsTouched()}
/>
</Space>
);
}}
</Form.Item>
}
/>
<Row gutter={[16, 16]}>
<Col sm={24} md={12}>
<ContractJobBlock job={job}/>
</Col>
<Col sm={24} md={12}>
<ContractCourtesyCarBlock courtesyCar={courtesyCar}/>
</Col>
<Col span={24}>
<ContractFormComponent form={form}/>
</Col>
</Row>
</div>
);
}
export default connect(null, mapDispatchToProps)(ContractDetailPage);