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>

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

@@ -291,9 +291,8 @@ 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) => ({
<Dropdown menu={{
items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
key: idx,
label: key.name,
onClick: () => {
@@ -307,9 +306,8 @@ export function DmsPostForm({bodyshop, socket, job, logsRef}) {
}),
});
},
}))}
/>}
>
}))
}}>
<a href=" #" onClick={(e) => e.preventDefault()}>
<DownOutlined/>
</a>

31
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,10 +50,8 @@ export function EmailOverlayComponent({
});
};
const menu = (
<Menu
onClick={handleClick}
items={[
const emailsToMenu = {
items: [
...bodyshop.employees
.filter((e) => e.user_email)
.map((e, idx) => ({
@@ -66,15 +64,11 @@ export function EmailOverlayComponent({
label: e.label,
value: e.emails,
})),
]}
/>
);
const menuCC = (
<div>
<Menu
onClick={handle_CC_Click}
items={[
],
onClick: handleClick,
};
const menuCC = {
items: [
...bodyshop.employees
.filter((e) => e.user_email)
.map((e, idx) => ({
@@ -87,10 +81,9 @@ export function EmailOverlayComponent({
label: e.label,
value: e.emails,
})),
]}
/>
</div>
);
],
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=" #"

18
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={[
const menu = {
items: [
...(bodyshop.appt_alt_transport || []).map((alt) => ({
key: alt,
label: alt,
})),
{ key: "null", label: t("general.actions.clear") },
]}
/>
);
],
onClick: onClick,
defaultSelectedKeys: [job && job.alt_transport]
}
return (
<Dropdown menu={menu}>
<a href=" #" onClick={(e) => e.preventDefault()}>

18
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,11 +44,11 @@ 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={[
const menu = {
defaultSelectedKeys: [event.color],
onClick: onClick,
items: [
...(bodyshop.appt_colors || []).map((color) => ({
key: color.color.hex,
label: color.label,
@@ -56,9 +56,8 @@ export function ScheduleEventColor({ bodyshop, event }) {
})),
{ 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);

9
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,9 +184,7 @@ export function ScheduleEventComponent({
) : null}
{event.job ? (
<Dropdown
menu={
<Menu
items={[
menu={{items: [
{
key: "email",
label: t("general.labels.email"),
@@ -234,9 +231,7 @@ export function ScheduleEventComponent({
}
},
},
]}
/>
}
]}}
>
<Button>{t("appointments.actions.sendreminder")}</Button>
</Dropdown>

13
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={[
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>

25
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) => ({
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>

18
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) => ({
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>

18
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,12 +81,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
}
}, [job, setAvailableStatuses, bodyshop]);
const statusmenu = (
<Menu
onClick={(e) => {
updateJobStatus(e.key);
}}
items={[
const statusMenu = {
items: [
...availableStatuses.map((item) => ({
key: item,
label: item,
@@ -100,13 +96,13 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
})),
]
: []),
]}
/>
);
],
onClick: (e) => updateJobStatus(e.key)
}
return (
<Dropdown
menu={statusmenu}
menu={statusMenu}
trigger={["click"]}
key="changestatus"
disabled={jobRO || !job.converted}

16
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) => ({
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}>

18
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) => ({
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}>

14
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) => ({
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}>

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

@@ -1,10 +1,10 @@
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
@@ -14,26 +14,25 @@ const mapDispatchToProps = (dispatch) => ({
//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 });
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) => ({
const menu = {
items: bodyshop.md_notes_presets.map((i, idx) => ({
key: idx,
label: i.label,
style: { breakInside: "avoid" },
style: {breakInside: "avoid"},
onClick: () => handleSelect(i),
}))}
/>
);
})),
style: {
columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
},
}
return (
<div>
@@ -43,7 +42,7 @@ export function NotesPresetButton({ bodyshop, form }) {
href="# "
onClick={(e) => e.preventDefault()}
>
{t("messaging.labels.presets")} <DownOutlined />
{t("messaging.labels.presets")} <DownOutlined/>
</a>
</Dropdown>
</div>

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

@@ -1,49 +1,31 @@
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;
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={[
export default function PartsOrderModalPriceChange({form, field}) {
const {t} = useTranslation();
const menu = {
items: [
{
key: "5",
label: t("parts_orders.labels.discount", { percent: "5%" }),
label: t("parts_orders.labels.discount", {percent: "5%"}),
},
{
key: "10",
label: t("parts_orders.labels.discount", { percent: "10%" }),
label: t("parts_orders.labels.discount", {percent: "10%"}),
},
{
key: "15",
label: t("parts_orders.labels.discount", { percent: "15%" }),
label: t("parts_orders.labels.discount", {percent: "15%"}),
},
{
key: "20",
label: t("parts_orders.labels.discount", { percent: "20%" }),
label: t("parts_orders.labels.discount", {percent: "20%"}),
},
{
key: "25",
label: t("parts_orders.labels.discount", { percent: "25%" }),
label: t("parts_orders.labels.discount", {percent: "25%"}),
},
{
key: "custom",
@@ -54,7 +36,7 @@ export default function PartsOrderModalPriceChange({ form, field }) {
onKeyUp={(e) => {
if (e.key === "Enter") {
const values = form.getFieldsValue();
const { parts_order_lines } = values;
const {parts_order_lines} = values;
form.setFieldsValue({
parts_order_lines: {
@@ -83,14 +65,30 @@ export default function PartsOrderModalPriceChange({ form, field }) {
/>
),
},
]}
/>
);
],
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;
return {
...p,
act_price: (p.act_price || 0) * ((100 - key) / 100),
};
}),
},
});
}
};
return (
<Dropdown menu={menu} trigger="click">
<Space>
%
<DownOutlined />
<DownOutlined/>
</Space>
</Dropdown>
);

12
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) => ({
const menu = {
items: bodyshop.md_parts_order_comment.map((comment, idx) => ({
key: idx,
label: comment.label,
value: comment.comment,
}))}
/>
);
})),
onClick: handleClick
};
return (
<div>

20
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
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}>

20
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,11 +51,8 @@ export function ProductionListColumnAlert({ record, insertAuditTrail }) {
});
};
return (
<Dropdown
menu={
<Menu
items={[
const menu = {
items: [
{
key: "toggleAlert",
label: record.production_vars && record.production_vars.alert
@@ -63,11 +60,12 @@ export function ProductionListColumnAlert({ record, insertAuditTrail }) {
: t("production.labels.alerton"),
onClick: handleAlertToggle,
},
]}
/>
}
trigger={["contextMenu"]}
>
]
};
return (
<Dropdown
menu={menu} trigger={["contextMenu"]}>
<div
style={{
//width: "100%",

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

@@ -29,12 +29,8 @@ export default function ProductionListColumnBodyPriority({ record }) {
});
};
return (
<Dropdown
menu={
<Menu
onClick={handleSetBodyPriority}
items={[
const menu = {
items: [
{
key: "clearBodyPriority",
label: t("production.actions.bodypriority-clear"),
@@ -51,11 +47,12 @@ export default function ProductionListColumnBodyPriority({ record }) {
),
})),
},
]}
/>
}
trigger={["click"]}
>
],
onClick: handleSetBodyPriority
};
return (
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.bodypriority}
</div>

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

@@ -29,12 +29,8 @@ export default function ProductionListColumnDetailPriority({ record }) {
});
};
return (
<Dropdown
menu={
<Menu
onClick={handleSetDetailPriority}
items={[
const menu = {
items: [
{
key: "clearDetailPriority",
label: t("production.actions.detailpriority-clear"),
@@ -51,11 +47,13 @@ export default function ProductionListColumnDetailPriority({ record }) {
),
})),
},
]}
/>
],
onClick: handleSetDetailPriority
}
trigger={["click"]}
>
return (
<Dropdown
menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.detailpriority}
</div>

21
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,12 +29,8 @@ export default function ProductionListColumnPaintPriority({ record }) {
});
};
return (
<Dropdown
menu={
<Menu
onClick={handleSetPaintPriority}
items={[
const menu = {
items: [
{
key: "clearPaintPriority",
label: t("production.actions.paintpriority-clear"),
@@ -51,11 +47,12 @@ export default function ProductionListColumnPaintPriority({ record }) {
),
})),
},
]}
/>
}
trigger={["click"]}
>
],
onClick: handleSetPaintPriority
};
return (
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.paintpriority}
</div>

24
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);
};
return (
<Dropdown
menu={
<Menu
style={{ maxHeight: "200px", overflowY: "auto" }}
onClick={handleSetStatus}
items={bodyshop.md_categories.map((item) => ({
const menu = {
items: bodyshop.md_categories.map((item) => ({
key: item,
label: item,
}))}
/>
})),
onClick: handleSetStatus,
style: {
maxHeight: "200px",
overflowY: "auto",
}
trigger={["click"]}
>
};
return (
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
{record.category}
{loading && <Spin />}

24
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);
};
return (
<Dropdown
menu={
<Menu
style={{ maxHeight: "200px", overflowY: "auto" }}
onClick={handleSetStatus}
items={bodyshop.md_ro_statuses.production_statuses.map((item) => ({
const menu = {
items: bodyshop.md_ro_statuses.production_statuses.map((item) => ({
key: item,
label: item,
}))}
/>
})),
onClick: handleSetStatus,
style: {
maxHeight: "200px",
overflowY: "auto",
}
trigger={["click"]}
>
};
return (
<Dropdown menu={menu} trigger={["click"]}>
<div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
{record.status}
{loading && <Spin />}

41
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,24 +28,8 @@ 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={[
const menu = {
items: [
...Object.keys(ProdTemplates).map((key) => ({
key: key,
label: ProdTemplates[key].title,
@@ -76,10 +60,23 @@ export function ProductionListPrint({ bodyshop }) {
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>
);

27
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,7 +28,7 @@ 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,
@@ -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={[
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 === ""

14
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={[
const menu = {
items: [
{
key: "block",
label: t("appointments.actions.block"),
},
]}
/>
);
],
onClick: handleMenu,
}
return (
<Dropdown

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

@@ -1,20 +1,17 @@
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
@@ -23,12 +20,8 @@ const mapStateToProps = createStructuredSelector({
export default connect(mapStateToProps, null)(ShopTemplateAddComponent);
export function ShopTemplateAddComponent({
bodyshop,
shopTemplateList,
refetch,
}) {
const { t } = useTranslation();
export function ShopTemplateAddComponent({ bodyshop, shopTemplateList, refetch}) {
const {t} = useTranslation();
const search = queryString.parse(useLocation().search);
const history = useNavigate();
const [insertTemplate] = useMutation(INSERT_TEMPLATE);
@@ -43,7 +36,7 @@ export function ShopTemplateAddComponent({
const defaultTemplateData = await client.query({
query: QUERY_TEMPLATES_BY_NAME_FOR_DUPE,
variables: { name: item.key },
variables: {name: item.key},
});
const template = defaultTemplateData.data.templates.filter(
@@ -64,15 +57,14 @@ export function ShopTemplateAddComponent({
const returningId = result.data.insert_templates.returning[0].id;
search.customTemplateId = returningId;
history({ search: queryString.stringify(search) });
history({search: queryString.stringify(search)});
if (!!refetch) refetch();
};
const TemplateListGenerated = TemplateList();
const menu = (
<Menu
onClick={handleAdd}
items={
availableTemplateKeys.length > 0
const menu = {
onClick: handleAdd,
items: availableTemplateKeys.length > 0
? availableTemplateKeys.map((tkey) => ({
key: tkey,
label: TemplateListGenerated[tkey].title,
@@ -84,14 +76,12 @@ export function ShopTemplateAddComponent({
disabled: true,
},
]
}
/>
);
};
return (
<Dropdown menu={menu}>
<span>
{t("bodyshop.actions.addtemplate")} <DownOutlined />
{t("bodyshop.actions.addtemplate")} <DownOutlined/>
</span>
</Dropdown>
);

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

@@ -1,41 +1,25 @@
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" })),
dispatch(setModalContext({context: context, modal: "courtesyCarReturn"})),
});
export function ContractDetailPage({
contract,
job,
courtesyCar,
setCourtesyCarReturnModalContext,
refetch,
form,
saveLoading,
}) {
const { t } = useTranslation();
export function ContractDetailPage({contract, job, courtesyCar, setCourtesyCarReturnModalContext, refetch, form, saveLoading}) {
const {t} = useTranslation();
return (
<div>
<Row align="middle">
@@ -49,6 +33,33 @@ export function ContractDetailPage({
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"),
},
]
};
return (
<Space>
<Button
@@ -65,7 +76,7 @@ export function ContractDetailPage({
}
onClick={() => {
setCourtesyCarReturnModalContext({
actions: { refetch },
actions: {refetch},
context: {
contractId: contract.id,
courtesyCarId: courtesyCar.id,
@@ -75,37 +86,7 @@ export function ContractDetailPage({
>
{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"),
},
]}
/>
}
>
<Dropdown trigger="click" menu={menu}>
<Button>{t("general.labels.print")}</Button>
</Dropdown>
@@ -121,16 +102,17 @@ export function ContractDetailPage({
/>
<Row gutter={[16, 16]}>
<Col sm={24} md={12}>
<ContractJobBlock job={job} />
<ContractJobBlock job={job}/>
</Col>
<Col sm={24} md={12}>
<ContractCourtesyCarBlock courtesyCar={courtesyCar} />
<ContractCourtesyCarBlock courtesyCar={courtesyCar}/>
</Col>
<Col span={24}>
<ContractFormComponent form={form} />
<ContractFormComponent form={form}/>
</Col>
</Row>
</div>
);
}
export default connect(null, mapDispatchToProps)(ContractDetailPage);