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

13
client/src/components/chat-presets/chat-presets.component.jsx
View File

@@ -1,5 +1,5 @@
import { PlusCircleOutlined } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import { Dropdown } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -16,19 +16,16 @@ const mapDispatchToProps = (dispatch) => ({
});
export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
const menuItems = bodyshop.md_messaging_presets.map((i, idx) => ({
const items = bodyshop.md_messaging_presets.map((i, idx) => ({
key: idx,
label: i.label,
label: (i.label),
onClick: () => setMessage(i.text),
}));
const menu = (
<Menu items={menuItems} />
);
return (
<div className={className}>
<Dropdown trigger={["click"]} menu={menu}>
<Dropdown trigger={["click"]} menu={{items}}>
<PlusCircleOutlined />
</Dropdown>
</div>

7
client/src/components/contracts-rates-change-button/contracts-rates-change-button.component.jsx
View File

@@ -24,11 +24,8 @@ export function ContractsRatesChangeButton({ disabled, form, bodyshop }) {
value: i,
}));
const menu = (
<div>
<Menu onClick={handleClick} items={menuItems} />
</div>
);
const menu = {items: menuItems, onClick: handleClick}
return (
<Dropdown menu={menu} disabled={disabled}>

8
client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
View File

@@ -179,7 +179,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
)
: courtesycars;
const menuItems = [
const items = [
{
key: "courtesycar_inventory",
label: t("printcenter.courtesycarcontract.courtesy_car_inventory"),
@@ -205,11 +205,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Dropdown
trigger="click"
menu={
<Menu items={menuItems} />
}
<Dropdown trigger="click" menu={{items}}
>
<Button>{t("general.labels.print")}</Button>
</Dropdown>

6
client/src/components/dashboard-grid/dashboard-grid.component.jsx
View File

@@ -131,9 +131,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
disabled: existingLayoutKeys.includes(key),
}));
const addComponentOverlay = (
<Menu onClick={handleAddComponent} items={menuItems} />
);
const menu = {items: menuItems, onClick: handleAddComponent};
if (error) return <AlertComponent message={error.message} type="error" />;
@@ -145,7 +143,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Dropdown menu={addComponentOverlay} trigger={["click"]}>
<Dropdown menu={menu} trigger={["click"]}>
<Button>{t("dashboard.actions.addcomponent")}</Button>
</Dropdown>
</Space>

36
client/src/components/dms-post-form/dms-post-form.component.jsx
View File

@@ -291,25 +291,23 @@ export function DmsPostForm({bodyshop, socket, job, logsRef}) {
label={
<div>
{t("jobs.fields.dms.payer.controlnumber")}{" "}
<Dropdown
menu={<Menu
items={bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
key: idx,
label: key.name,
onClick: () => {
form.setFieldsValue({
payers: form.getFieldValue("payers").map((row, mapIndex) => {
if (index !== mapIndex) return row;
return {
...row,
controlnumber: key.controlnumber,
};
}),
});
},
}))}
/>}
>
<Dropdown menu={{
items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
key: idx,
label: key.name,
onClick: () => {
form.setFieldsValue({
payers: form.getFieldValue("payers").map((row, mapIndex) => {
if (index !== mapIndex) return row;
return {
...row,
controlnumber: key.controlnumber,
};
}),
});
},
}))
}}>
<a href=" #" onClick={(e) => e.preventDefault()}>
<DownOutlined/>
</a>

79
client/src/components/email-overlay/email-overlay.component.jsx
View File

@@ -1,5 +1,5 @@
import {UploadOutlined, UserAddOutlined} from "@ant-design/icons";
import {Button, Divider, Dropdown, Form, Input, Menu, Select, Space, Tabs, Upload,} from "antd";
import {Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload,} from "antd";
import _ from "lodash";
import React from "react";
import {useTranslation} from "react-i18next";
@@ -50,47 +50,40 @@ export function EmailOverlayComponent({
});
};
const menu = (
<Menu
onClick={handleClick}
items={[
...bodyshop.employees
.filter((e) => e.user_email)
.map((e, idx) => ({
key: idx,
label: `${e.first_name} ${e.last_name}`,
value: e.user_email,
})),
...bodyshop.md_to_emails.map((e, idx) => ({
key: idx + "group",
label: e.label,
value: e.emails,
})),
]}
/>
);
const menuCC = (
<div>
<Menu
onClick={handle_CC_Click}
items={[
...bodyshop.employees
.filter((e) => e.user_email)
.map((e, idx) => ({
key: idx,
label: `${e.first_name} ${e.last_name}`,
value: e.user_email,
})),
...bodyshop.md_to_emails.map((e, idx) => ({
key: idx + "group",
label: e.label,
value: e.emails,
})),
]}
/>
</div>
);
const emailsToMenu = {
items: [
...bodyshop.employees
.filter((e) => e.user_email)
.map((e, idx) => ({
key: idx,
label: `${e.first_name} ${e.last_name}`,
value: e.user_email,
})),
...bodyshop.md_to_emails.map((e, idx) => ({
key: idx + "group",
label: e.label,
value: e.emails,
})),
],
onClick: handleClick,
};
const menuCC = {
items: [
...bodyshop.employees
.filter((e) => e.user_email)
.map((e, idx) => ({
key: idx,
label: `${e.first_name} ${e.last_name}`,
value: e.user_email,
})),
...bodyshop.md_to_emails.map((e, idx) => ({
key: idx + "group",
label: e.label,
value: e.emails,
})),
],
onClick: handle_CC_Click,
};
return (
<div>
@@ -119,7 +112,7 @@ export function EmailOverlayComponent({
label={
<Space>
{t("emails.fields.to")}
<Dropdown menu={menu}>
<Dropdown menu={emailsToMenu}>
<a
className="ant-dropdown-link"
href=" #"

24
client/src/components/job-at-change/job-at-change.component.jsx
View File

@@ -4,7 +4,7 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { Dropdown, Menu, notification } from "antd";
import { Dropdown, notification } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -37,19 +37,19 @@ export function JobAltTransportChange({ bodyshop, job }) {
});
}
};
const menu = (
<Menu
selectedKeys={[job && job.alt_transport]}
onClick={onClick}
items={[
...(bodyshop.appt_alt_transport || []).map((alt) => ({
const menu = {
items: [
...(bodyshop.appt_alt_transport || []).map((alt) => ({
key: alt,
label: alt,
})),
{ key: "null", label: t("general.actions.clear") },
]}
/>
);
})),
{ key: "null", label: t("general.actions.clear") },
],
onClick: onClick,
defaultSelectedKeys: [job && job.alt_transport]
}
return (
<Dropdown menu={menu}>
<a href=" #" onClick={(e) => e.preventDefault()}>

32
client/src/components/job-at-change/schedule-event.color.component.jsx
View File

@@ -4,7 +4,7 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { Dropdown, Menu, notification } from "antd";
import { Dropdown, notification } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -44,21 +44,20 @@ export function ScheduleEventColor({ bodyshop, event }) {
bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
?.label;
const menu = (
<Menu
selectedKeys={[event.color]}
onClick={onClick}
items={[
...(bodyshop.appt_colors || []).map((color) => ({
key: color.color.hex,
label: color.label,
style: { color: color.color.hex },
})),
{ key: "divider", label: <hr />, disabled: true },
{ key: "null", label: t("general.actions.clear") },
]}
/>
);
const menu = {
defaultSelectedKeys: [event.color],
onClick: onClick,
items: [
...(bodyshop.appt_colors || []).map((color) => ({
key: color.color.hex,
label: color.label,
style: { color: color.color.hex },
})),
{ key: "divider", label: <hr />, disabled: true },
{ key: "null", label: t("general.actions.clear") },
]
};
return (
<Dropdown menu={menu}>
@@ -69,4 +68,5 @@ export function ScheduleEventColor({ bodyshop, event }) {
</Dropdown>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);

97
client/src/components/job-at-change/schedule-event.component.jsx
View File

@@ -5,7 +5,6 @@ import {
Dropdown,
Form,
Input,
Menu,
notification,
Popover,
Select,
@@ -185,58 +184,54 @@ export function ScheduleEventComponent({
) : null}
{event.job ? (
<Dropdown
menu={
<Menu
items={[
{
key: "email",
label: t("general.labels.email"),
disabled: event.arrived,
onClick: () => {
const Template = TemplateList("job").appointment_reminder;
GenerateDocument(
{
name: Template.key,
variables: { id: event.job.id },
},
{
to: event.job && event.job.ownr_ea,
subject: Template.subject,
},
"e",
event.job && event.job.id
menu={{items: [
{
key: "email",
label: t("general.labels.email"),
disabled: event.arrived,
onClick: () => {
const Template = TemplateList("job").appointment_reminder;
GenerateDocument(
{
name: Template.key,
variables: { id: event.job.id },
},
{
to: event.job && event.job.ownr_ea,
subject: Template.subject,
},
"e",
event.job && event.job.id
);
},
},
{
key: "sms",
label: t("general.labels.sms"),
disabled: event.arrived || !bodyshop.messagingservicesid,
onClick: () => {
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
if (p && p.isValid()) {
openChatByPhone({
phone_num: p.formatInternational(),
jobid: event.job.id,
});
setMessage(
t("appointments.labels.reminder", {
shopname: bodyshop.shopname,
date: dayjs(event.start).format("MM/DD/YYYY"),
time: dayjs(event.start).format("HH:mm a"),
})
);
},
setVisible(false);
} else {
notification["error"]({
message: t("messaging.error.invalidphone"),
});
}
},
{
key: "sms",
label: t("general.labels.sms"),
disabled: event.arrived || !bodyshop.messagingservicesid,
onClick: () => {
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
if (p && p.isValid()) {
openChatByPhone({
phone_num: p.formatInternational(),
jobid: event.job.id,
});
setMessage(
t("appointments.labels.reminder", {
shopname: bodyshop.shopname,
date: dayjs(event.start).format("MM/DD/YYYY"),
time: dayjs(event.start).format("HH:mm a"),
})
);
setVisible(false);
} else {
notification["error"]({
message: t("messaging.error.invalidphone"),
});
}
},
},
]}
/>
}
},
]}}
>
<Button>{t("appointments.actions.sendreminder")}</Button>
</Dropdown>

25
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -13,7 +13,6 @@ import {
Button,
Dropdown,
Input,
Menu,
Space,
Table,
Tag,
@@ -410,19 +409,17 @@ export function JobLinesComponent({
}
};
const markMenu = (
<Menu
onClick={handleMark}
items={[
{ key: "PAA", label: t("joblines.fields.part_types.PAA") },
{ key: "PAN", label: t("joblines.fields.part_types.PAN") },
{ key: "PAL", label: t("joblines.fields.part_types.PAL") },
{ key: "PAS", label: t("joblines.fields.part_types.PAS") },
{ key: "divider", label: <hr />, disabled: true },
{ key: "clear", label: t("general.labels.clear") },
]}
/>
);
const markMenu = {
onClick: handleMark,
items: [
{ key: "PAA", label: t("joblines.fields.part_types.PAA") },
{ key: "PAN", label: t("joblines.fields.part_types.PAN") },
{ key: "PAL", label: t("joblines.fields.part_types.PAL") },
{ key: "PAS", label: t("joblines.fields.part_types.PAS") },
{ key: "divider", label: <hr />, disabled: true },
{ key: "clear", label: t("general.labels.clear") },
]
}
return (
<div>

33
client/src/components/job-lines-preset-button/job-lines-preset-button.component.jsx
View File

@@ -1,5 +1,5 @@
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import { Dropdown } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -21,22 +21,21 @@ export function JoblinePresetButton({ bodyshop, form }) {
form.setFieldsValue(item);
};
const menu = (
<Menu
style={{
columnCount: Math.max(
Math.floor(bodyshop.md_jobline_presets.length / 15),
1
),
}}
items={bodyshop.md_jobline_presets.map((i, idx) => ({
key: idx,
label: i.label,
style: { breakInside: "avoid" },
onClick: () => handleSelect(i),
}))}
/>
);
const menu = {
items: bodyshop.md_jobline_presets.map((i, idx) => ({
key: idx,
label: i.label,
style: { breakInside: "avoid" },
onClick: () => handleSelect(i),
})),
style: {
columnCount: Math.max(
Math.floor(bodyshop.md_jobline_presets.length / 15),
1
),
},
}
return (
<div>

22
client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
View File

@@ -40,20 +40,18 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
});
};
const statusmenu = (
<Menu
onClick={(e) => {
updateJobStatus(e.key);
}}
items={bodyshop.md_ro_statuses.statuses.map((item) => ({
key: item,
label: item,
}))}
/>
);
const statusMenu = {
items: bodyshop.md_ro_statuses.statuses.map((item) => ({
key: item,
label: item,
})),
onClick: (e) => {
updateJobStatus(e.key);
},
}
return (
<Dropdown menu={statusmenu} trigger={["click"]} key="changestatus">
<Dropdown menu={statusMenu} trigger={["click"]} key="changestatus">
<Button shape="round">
<span>{job.status}</span>

44
client/src/components/jobs-change-status/jobs-change-status.component.jsx
View File

@@ -1,6 +1,6 @@
import { DownCircleFilled } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Button, Dropdown, Menu, notification } from "antd";
import { Button, Dropdown, notification } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -81,32 +81,28 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
}
}, [job, setAvailableStatuses, bodyshop]);
const statusmenu = (
<Menu
onClick={(e) => {
updateJobStatus(e.key);
}}
items={[
...availableStatuses.map((item) => ({
key: item,
label: item,
})),
...(job.converted
? [
{ key: "divider", label: <hr />, disabled: true },
...otherStages.map((item) => ({
key: item,
label: item,
})),
]
: []),
]}
/>
);
const statusMenu = {
items: [
...availableStatuses.map((item) => ({
key: item,
label: item,
})),
...(job.converted
? [
{ key: "divider", label: <hr />, disabled: true },
...otherStages.map((item) => ({
key: item,
label: item,
})),
]
: []),
],
onClick: (e) => updateJobStatus(e.key)
}
return (
<Dropdown
menu={statusmenu}
menu={statusMenu}
trigger={["click"]}
key="changestatus"
disabled={jobRO || !job.converted}

22
client/src/components/jobs-close-auto-allocate/jobs-close-auto-allocate.component.jsx
View File

@@ -1,4 +1,4 @@
import { Button, Dropdown, Menu } from "antd";
import { Button, Dropdown } from "antd";
import _ from "lodash";
import React from "react";
import { useTranslation } from "react-i18next";
@@ -62,19 +62,17 @@ export function JobsCloseAutoAllocate({ bodyshop, joblines, form, disabled }) {
);
};
const overlay = (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
<Menu
onClick={handleMenuClick}
items={bodyshop.md_responsibility_centers.dms_defaults.map((mapping) => ({
key: mapping.name,
label: mapping.name,
disabled: disabled,
}))}
/>
);
const menu = {
items: bodyshop.md_responsibility_centers.dms_defaults.map((mapping) => ({
key: mapping.name,
label: mapping.name,
disabled: disabled,
})),
onClick: handleMenuClick,
}
return bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber ? (
<Dropdown menu={overlay}>
<Dropdown menu={menu}>
<Button disabled={disabled}>{t("jobs.actions.dmsautoallocate")}</Button>
</Dropdown>
) : (

14
client/src/components/jobs-detail-change-estimator/jobs-detail-change-estimator.component.jsx
View File

@@ -1,5 +1,5 @@
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import { Dropdown } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -15,16 +15,14 @@ export function JobsDetailChangeEstimator({ disabled, form, bodyshop }) {
form.setFieldsValue(est);
};
const menu = (
<Menu
onClick={handleClick}
items={bodyshop.md_estimators.map((est, idx) => ({
const menu = {
items: bodyshop.md_estimators.map((est, idx) => ({
key: idx,
label: `${est.est_ct_fn} ${est.est_ct_ln}`,
value: est,
}))}
/>
);
})),
onClick: handleClick
}
return (
<Dropdown menu={menu} disabled={disabled}>

26
client/src/components/jobs-detail-change-filehandler/jobs-detail-change-filehandler.component.jsx
View File

@@ -15,20 +15,18 @@ export function JobsDetailChangeFilehandler({ disabled, form, bodyshop }) {
form.setFieldsValue(est);
};
const menu = (
<Menu
onClick={handleClick}
style={{
columnCount: Math.floor(bodyshop.md_filehandlers.length / 10) + 1,
}}
items={bodyshop.md_filehandlers.map((est, idx) => ({
key: idx,
label: `${est.ins_ct_fn} ${est.ins_ct_ln}`,
value: est,
style: { breakInside: "avoid" },
}))}
/>
);
const menu = {
items: bodyshop.md_filehandlers.map((est, idx) => ({
key: idx,
label: `${est.ins_ct_fn} ${est.ins_ct_ln}`,
value: est,
style: { breakInside: "avoid" },
})),
style: {
columnCount: Math.floor(bodyshop.md_filehandlers.length / 10) + 1,
},
onClick: handleClick
}
return (
<Dropdown menu={menu} disabled={disabled}>

20
client/src/components/jobs-detail-rates-change-button/jobs-detail-rates-change-button.component.jsx
View File

@@ -1,5 +1,5 @@
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import { Dropdown } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -18,16 +18,14 @@ export function JobsDetailRatesChangeButton({ disabled, form, bodyshop }) {
form.setFieldsValue({ ...rate, labor_rate_desc: rate.rate_label });
};
const menu = (
<Menu
onClick={handleClick}
items={bodyshop.md_labor_rates.map((rate, idx) => ({
key: idx,
label: rate.rate_label,
value: rate,
}))}
/>
);
const menu = {
items: bodyshop.md_labor_rates.map((rate, idx) => ({
key: idx,
label: rate.rate_label,
value: rate,
})),
onClick: handleClick
}
return (
<Dropdown menu={menu} disabled={disabled}>

79
client/src/components/notes-preset-button/notes-preset-button.component.jsx
View File

@@ -1,53 +1,52 @@
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import {DownOutlined} from "@ant-design/icons";
import {Dropdown} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {selectBodyshop} from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function NotesPresetButton({ bodyshop, form }) {
const { t } = useTranslation();
export function NotesPresetButton({bodyshop, form}) {
const {t} = useTranslation();
const handleSelect = (item) => {
form.setFieldsValue({ text: item.text });
};
const handleSelect = (item) => {
form.setFieldsValue({text: item.text});
};
const menu = (
<Menu
style={{
columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
}}
items={bodyshop.md_notes_presets.map((i, idx) => ({
key: idx,
label: i.label,
style: { breakInside: "avoid" },
onClick: () => handleSelect(i),
}))}
/>
);
return (
<div>
<Dropdown trigger={["click"]} menu={menu}>
<a
className="ant-dropdown-link"
href="# "
onClick={(e) => e.preventDefault()}
>
{t("messaging.labels.presets")} <DownOutlined />
</a>
</Dropdown>
</div>
);
const menu = {
items: bodyshop.md_notes_presets.map((i, idx) => ({
key: idx,
label: i.label,
style: {breakInside: "avoid"},
onClick: () => handleSelect(i),
})),
style: {
columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
},
}
return (
<div>
<Dropdown trigger={["click"]} menu={menu}>
<a
className="ant-dropdown-link"
href="# "
onClick={(e) => e.preventDefault()}
>
{t("messaging.labels.presets")} <DownOutlined/>
</a>
</Dropdown>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(NotesPresetButton);

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>

30
client/src/components/production-list-columns/production-list-columns.add.component.jsx
View File

@@ -47,21 +47,21 @@ export function ProductionColumnsComponent({
state: tableState,
activeStatuses: bodyshop.md_ro_statuses.active_statuses,
});
const menu = (
<Menu
onClick={handleAdd}
style={{
columnCount: Math.max(Math.floor(cols.length / 10), 1),
}}
items={cols
.filter((i) => !columnKeys.includes(i.key))
.map((item) => ({
key: item.key,
label: item.title,
style: { breakInside: "avoid" },
}))}
/>
);
const menu = {
items: cols
.filter((i) => !columnKeys.includes(i.key))
.map((item) => ({
key: item.key,
label: item.title,
style: { breakInside: "avoid" },
})),
style: {
columnCount: Math.max(Math.floor(cols.length / 10), 1),
},
onClick: handleAdd,
};
return (
<div>
<Dropdown menu={menu}>

30
client/src/components/production-list-columns/production-list-columns.alert.component.jsx
View File

@@ -1,6 +1,6 @@
import { ExclamationCircleFilled } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Dropdown, Menu } from "antd";
import { Dropdown } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -51,23 +51,21 @@ export function ProductionListColumnAlert({ record, insertAuditTrail }) {
});
};
const menu = {
items: [
{
key: "toggleAlert",
label: record.production_vars && record.production_vars.alert
? t("production.labels.alertoff")
: t("production.labels.alerton"),
onClick: handleAlertToggle,
},
]
};
return (
<Dropdown
menu={
<Menu
items={[
{
key: "toggleAlert",
label: record.production_vars && record.production_vars.alert
? t("production.labels.alertoff")
: t("production.labels.alerton"),
onClick: handleAlertToggle,
},
]}
/>
}
trigger={["contextMenu"]}
>
menu={menu} trigger={["contextMenu"]}>
<div
style={{
//width: "100%",

49
client/src/components/production-list-columns/production-list-columns.bodypriority.component.jsx
View File

@@ -29,33 +29,30 @@ export default function ProductionListColumnBodyPriority({ record }) {
});
};
const menu = {
items: [
{
key: "clearBodyPriority",
label: t("production.actions.bodypriority-clear"),
},
{
key: "set",
label: t("production.actions.bodypriority-set"),
children: new Array(15).fill().map((value, index) => ({
key: index + 1,
label: (
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
),
})),
},
],
onClick: handleSetBodyPriority
};
return (
<Dropdown
menu={
<Menu
onClick={handleSetBodyPriority}
items={[
{
key: "clearBodyPriority",
label: t("production.actions.bodypriority-clear"),
},
{
key: "set",
label: t("production.actions.bodypriority-set"),
children: new Array(15).fill().map((value, index) => ({
key: index + 1,
label: (
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
),
})),
},
]}
/>
}
trigger={["click"]}
>
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.bodypriority}
</div>

48
client/src/components/production-list-columns/production-list-columns.detailpriority.component.jsx
View File

@@ -29,33 +29,31 @@ export default function ProductionListColumnDetailPriority({ record }) {
});
};
const menu = {
items: [
{
key: "clearDetailPriority",
label: t("production.actions.detailpriority-clear"),
},
{
key: "set",
label: t("production.actions.detailpriority-set"),
children: new Array(15).fill().map((value, index) => ({
key: index + 1,
label: (
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
),
})),
},
],
onClick: handleSetDetailPriority
}
return (
<Dropdown
menu={
<Menu
onClick={handleSetDetailPriority}
items={[
{
key: "clearDetailPriority",
label: t("production.actions.detailpriority-clear"),
},
{
key: "set",
label: t("production.actions.detailpriority-set"),
children: new Array(15).fill().map((value, index) => ({
key: index + 1,
label: (
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
),
})),
},
]}
/>
}
trigger={["click"]}
>
menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.detailpriority}
</div>

51
client/src/components/production-list-columns/production-list-columns.paintpriority.component.jsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client";
import { Dropdown, Menu } from "antd";
import { Dropdown } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
@@ -29,33 +29,30 @@ export default function ProductionListColumnPaintPriority({ record }) {
});
};
const menu = {
items: [
{
key: "clearPaintPriority",
label: t("production.actions.paintpriority-clear"),
},
{
key: "set",
label: t("production.actions.paintpriority-set"),
children: new Array(15).fill().map((value, index) => ({
key: index + 1,
label: (
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
),
})),
},
],
onClick: handleSetPaintPriority
};
return (
<Dropdown
menu={
<Menu
onClick={handleSetPaintPriority}
items={[
{
key: "clearPaintPriority",
label: t("production.actions.paintpriority-clear"),
},
{
key: "set",
label: t("production.actions.paintpriority-set"),
children: new Array(15).fill().map((value, index) => ({
key: index + 1,
label: (
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
),
})),
},
]}
/>
}
trigger={["click"]}
>
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.paintpriority}
</div>

28
client/src/components/production-list-columns/production-list-columns.status.category.jsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client";
import { Dropdown, Menu, Spin } from "antd";
import { Dropdown, Spin } from "antd";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -36,20 +36,20 @@ export function ProductionListColumnCategory({ record, bodyshop }) {
setLoading(false);
};
const menu = {
items: bodyshop.md_categories.map((item) => ({
key: item,
label: item,
})),
onClick: handleSetStatus,
style: {
maxHeight: "200px",
overflowY: "auto",
}
};
return (
<Dropdown
menu={
<Menu
style={{ maxHeight: "200px", overflowY: "auto" }}
onClick={handleSetStatus}
items={bodyshop.md_categories.map((item) => ({
key: item,
label: item,
}))}
/>
}
trigger={["click"]}
>
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
{record.category}
{loading && <Spin />}

28
client/src/components/production-list-columns/production-list-columns.status.component.jsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client";
import { Dropdown, Menu, Spin } from "antd";
import { Dropdown, Spin } from "antd";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -45,20 +45,20 @@ export function ProductionListColumnStatus({
setLoading(false);
};
const menu = {
items: bodyshop.md_ro_statuses.production_statuses.map((item) => ({
key: item,
label: item,
})),
onClick: handleSetStatus,
style: {
maxHeight: "200px",
overflowY: "auto",
}
};
return (
<Dropdown
menu={
<Menu
style={{ maxHeight: "200px", overflowY: "auto" }}
onClick={handleSetStatus}
items={bodyshop.md_ro_statuses.production_statuses.map((item) => ({
key: item,
label: item,
}))}
/>
}
trigger={["click"]}
>
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
{record.status}
{loading && <Spin />}

89
client/src/components/production-list-table/production-list-print.component.jsx
View File

@@ -1,4 +1,4 @@
import { Button, Dropdown, Menu } from "antd";
import { Button, Dropdown } from "antd";
import React, { useState } from "react";
import { TemplateList } from "../../utils/TemplateConstants";
import { useTranslation } from "react-i18next";
@@ -28,58 +28,55 @@ export default connect(
export function ProductionListPrint({ bodyshop }) {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
return (
<Dropdown
trigger="click"
menu={
<Menu
onClick={async (e) => {
setLoading(true);
await GenerateDocument(
{
name: ProdTemplates[e.key].key,
// variables: { id: contract.id },
},
{},
"p"
);
setLoading(false);
}}
items={[
...Object.keys(ProdTemplates).map((key) => ({
key: key,
label: ProdTemplates[key].title,
})),
{
key: "production_by_technician_one",
label: t("reportcenter.templates.production_by_technician_one"),
children: bodyshop.employees
.filter((e) => e.active)
.map((e) => ({
const menu = {
items: [
...Object.keys(ProdTemplates).map((key) => ({
key: key,
label: ProdTemplates[key].title,
})),
{
key: "production_by_technician_one",
label: t("reportcenter.templates.production_by_technician_one"),
children: bodyshop.employees
.filter((e) => e.active)
.map((e) => ({
key: e.id,
label: `${e.first_name} ${e.last_name}`,
})),
},
{
key: "production_by_category_one",
label: t("reportcenter.templates.production_by_category_one"),
children: bodyshop.md_categories.map((e) => ({
})),
},
{
key: "production_by_category_one",
label: t("reportcenter.templates.production_by_category_one"),
children: bodyshop.md_categories.map((e) => ({
key: e,
label: e,
})),
},
{
key: "production_by_repair_status_one",
label: t("reportcenter.templates.production_by_repair_status_one"),
children: bodyshop.md_ro_statuses.production_statuses.map((e) => ({
})),
},
{
key: "production_by_repair_status_one",
label: t("reportcenter.templates.production_by_repair_status_one"),
children: bodyshop.md_ro_statuses.production_statuses.map((e) => ({
key: e,
label: e,
})),
})),
},
],
onClick: async (e) => {
setLoading(true);
await GenerateDocument(
{
name: ProdTemplates[e.key].key,
// variables: { id: contract.id },
},
]}
/>
}
>
{},
"p"
);
setLoading(false);
},
}
return (
<Dropdown trigger="click" menu={menu}>
<Button loading={loading}>{t("general.labels.print")}</Button>
</Dropdown>
);

47
client/src/components/production-list-table/production-list-table.component.jsx
View File

@@ -1,6 +1,6 @@
import {SyncOutlined} from "@ant-design/icons";
import {useSplitTreatments} from "@splitsoftware/splitio-react";
import {Button, Dropdown, Input, Menu, Space, Statistic, Table,} from "antd";
import {Button, Dropdown, Input, Space, Statistic, Table,} from "antd";
import {PageHeader} from "@ant-design/pro-layout";
import React, {useMemo, useState} from "react";
import ReactDragListView from "react-drag-listview";
@@ -28,10 +28,10 @@ export function ProductionListTable({loading, data, refetch, bodyshop, technicia
const [searchText, setSearchText] = useState("");
const { treatments: {Production_List_Status_Colors} } = useSplitTreatments({
const {treatments: {Production_List_Status_Colors}} = useSplitTreatments({
attributes: {},
names: ["Production_List_Status_Colors"],
splitKey: bodyshop.imexshopid,
splitKey: bodyshop.imexshopid,
});
@@ -105,25 +105,28 @@ export function ProductionListTable({loading, data, refetch, bodyshop, technicia
setColumns(nextColumns);
};
const headerItem = (col) => (
<Dropdown
className="prod-header-dropdown"
menu={
<Menu
onClick={removeColumn}
items={[
{
key: col.key,
label: t("production.actions.removecolumn"),
},
]}
/>
}
trigger={["contextMenu"]}
>
<span>{col.title}</span>
</Dropdown>
);
const headerItem = (col) => {
const menu = {
onClick: removeColumn,
items: [
{
key: col.key,
label: t("production.actions.removecolumn"),
},
]
}
return (
<Dropdown
className="prod-header-dropdown"
menu={menu}
trigger={["contextMenu"]}
>
<span>{col.title}</span>
</Dropdown>
)
};
const dataSource =
searchText === ""

22
client/src/components/schedule-block-day/schedule-block-day.component.jsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client";
import { Dropdown, Menu, notification } from "antd";
import { Dropdown, notification } from "antd";
import dayjs from "../../utils/day";
import React from "react";
import { useTranslation } from "react-i18next";
@@ -55,17 +55,15 @@ export function ScheduleBlockDay({
}
};
const menu = (
<Menu
onClick={handleMenu}
items={[
{
key: "block",
label: t("appointments.actions.block"),
},
]}
/>
);
const menu = {
items: [
{
key: "block",
label: t("appointments.actions.block"),
},
],
onClick: handleMenu,
}
return (
<Dropdown

144
client/src/components/shop-template-add/shop-template-add.component.jsx
View File

@@ -1,98 +1,88 @@
import { DownOutlined } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Dropdown, Menu } from "antd";
import {DownOutlined} from "@ant-design/icons";
import {useMutation} from "@apollo/client";
import {Dropdown} from "antd";
import queryString from "query-string";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useNavigate, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
INSERT_TEMPLATE,
QUERY_TEMPLATES_BY_NAME_FOR_DUPE,
} from "../../graphql/templates.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {useLocation, useNavigate} from "react-router-dom";
import {createStructuredSelector} from "reselect";
import {logImEXEvent} from "../../firebase/firebase.utils";
import {INSERT_TEMPLATE, QUERY_TEMPLATES_BY_NAME_FOR_DUPE,} from "../../graphql/templates.queries";
import {selectBodyshop} from "../../redux/user/user.selectors";
import client from "../../utils/GraphQLClient";
import { TemplateList } from "../../utils/TemplateConstants";
import {TemplateList} from "../../utils/TemplateConstants";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
});
export default connect(mapStateToProps, null)(ShopTemplateAddComponent);
export function ShopTemplateAddComponent({
bodyshop,
shopTemplateList,
refetch,
}) {
const { t } = useTranslation();
const search = queryString.parse(useLocation().search);
const history = useNavigate();
const [insertTemplate] = useMutation(INSERT_TEMPLATE);
export function ShopTemplateAddComponent({ bodyshop, shopTemplateList, refetch}) {
const {t} = useTranslation();
const search = queryString.parse(useLocation().search);
const history = useNavigate();
const [insertTemplate] = useMutation(INSERT_TEMPLATE);
const shopTemplateKeys = shopTemplateList.map((template) => template.name);
const availableTemplateKeys = Object.keys(TemplateList()).filter(
(tkey) => !shopTemplateKeys.includes(tkey)
);
const shopTemplateKeys = shopTemplateList.map((template) => template.name);
const availableTemplateKeys = Object.keys(TemplateList()).filter(
(tkey) => !shopTemplateKeys.includes(tkey)
);
const handleAdd = async (item) => {
logImEXEvent("shop_template_add");
const handleAdd = async (item) => {
logImEXEvent("shop_template_add");
const defaultTemplateData = await client.query({
query: QUERY_TEMPLATES_BY_NAME_FOR_DUPE,
variables: { name: item.key },
});
const defaultTemplateData = await client.query({
query: QUERY_TEMPLATES_BY_NAME_FOR_DUPE,
variables: {name: item.key},
});
const template = defaultTemplateData.data.templates.filter(
(t) => t.bodyshopid === null
)[0];
const template = defaultTemplateData.data.templates.filter(
(t) => t.bodyshopid === null
)[0];
const result = await insertTemplate({
variables: {
template: {
name: item.key,
bodyshopid: bodyshop.id,
jsontemplate: template && template.jsontemplate,
html: template && template.html,
query: template && template.query,
},
},
});
const result = await insertTemplate({
variables: {
template: {
name: item.key,
bodyshopid: bodyshop.id,
jsontemplate: template && template.jsontemplate,
html: template && template.html,
query: template && template.query,
},
},
});
const returningId = result.data.insert_templates.returning[0].id;
search.customTemplateId = returningId;
history({ search: queryString.stringify(search) });
if (!!refetch) refetch();
};
const TemplateListGenerated = TemplateList();
const menu = (
<Menu
onClick={handleAdd}
items={
availableTemplateKeys.length > 0
? availableTemplateKeys.map((tkey) => ({
key: tkey,
label: TemplateListGenerated[tkey].title,
const returningId = result.data.insert_templates.returning[0].id;
search.customTemplateId = returningId;
history({search: queryString.stringify(search)});
if (!!refetch) refetch();
};
const TemplateListGenerated = TemplateList();
const menu = {
onClick: handleAdd,
items: availableTemplateKeys.length > 0
? availableTemplateKeys.map((tkey) => ({
key: tkey,
label: TemplateListGenerated[tkey].title,
}))
: [
{
key: "no-templates",
label: t("bodyshop.labels.notemplatesavailable"),
disabled: true,
},
: [
{
key: "no-templates",
label: t("bodyshop.labels.notemplatesavailable"),
disabled: true,
},
]
}
/>
);
};
return (
<Dropdown menu={menu}>
return (
<Dropdown menu={menu}>
<span>
{t("bodyshop.actions.addtemplate")} <DownOutlined />
{t("bodyshop.actions.addtemplate")} <DownOutlined/>
</span>
</Dropdown>
);
</Dropdown>
);
}

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);