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

feature/IO-3544-Ant-Select-Deprecation - finish

Browse Source
This commit is contained in:
Dave
2026-02-03 10:51:14 -05:00
parent db1b701a96
commit cdfae5a429
55 changed files with 872 additions and 1774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/allocations-assignment/allocations-assignment.component.jsx
View File

@@ -35,13 +35,12 @@ export function AllocationsAssignmentComponent({
style={{ width: 200 }} style={{ width: 200 }}
placeholder="Select a person" placeholder="Select a person"
onChange={onChange} onChange={onChange}
> options={bodyshop.employees.map((emp) => ({
{bodyshop.employees.map((emp) => ( value: emp.id,
<Select.Option value={emp.id} key={emp.id}> key: emp.id,
{`${emp.first_name} ${emp.last_name}`} label: `${emp.first_name} ${emp.last_name}`
</Select.Option> }))}
))} />
</Select>
<InputNumber <InputNumber
defaultValue={assignment.hours} defaultValue={assignment.hours}
placeholder={t("joblines.fields.mod_lb_hrs")} placeholder={t("joblines.fields.mod_lb_hrs")}

12
client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
View File

@@ -37,13 +37,11 @@ export default connect(
style={{ width: 200 }} style={{ width: 200 }}
placeholder="Select a person" placeholder="Select a person"
onChange={onChange} onChange={onChange}
> options={bodyshop.employees.map((emp) => ({
{bodyshop.employees.map((emp) => ( value: emp.id,
<Select.Option value={emp.id} key={emp.id}> label: `${emp.first_name} ${emp.last_name}`
{`${emp.first_name} ${emp.last_name}`} }))}
</Select.Option> />
))}
</Select>
<Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}> <Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}>
Assign Assign

46
client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
View File

@@ -99,20 +99,22 @@ export function BillFormItemsExtendedFormItem({
}} }}
</Form.Item> </Form.Item>
<Form.Item label={t("billlines.fields.cost_center")} name={["billlineskeys", record.id, "cost_center"]}> <Form.Item label={t("billlines.fields.cost_center")} name={["billlineskeys", record.id, "cost_center"]}>
<Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}> <Select
{bodyshopHasDmsKey(bodyshop) showSearch
? CiecaSelect(true, false) style={{ minWidth: "3rem" }}
: responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)} disabled={disabled}
</Select> options={
bodyshopHasDmsKey(bodyshop)
? CiecaSelect(true, false)
: responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
}
/>
</Form.Item> </Form.Item>
<Form.Item label={t("billlines.fields.location")} name={["billlineskeys", record.id, "location"]}> <Form.Item label={t("billlines.fields.location")} name={["billlineskeys", record.id, "location"]}>
<Select disabled={disabled}> <Select
{bodyshop.md_parts_locations.map((loc, idx) => ( disabled={disabled}
<Select.Option key={idx} value={loc}> options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
{loc} />
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("billlines.fields.deductedfromlbr")} label={t("billlines.fields.deductedfromlbr")}
@@ -136,22 +138,10 @@ export function BillFormItemsExtendedFormItem({
]} ]}
name={["billlineskeys", record.id, "lbr_adjustment", "mod_lbr_ty"]} name={["billlineskeys", record.id, "lbr_adjustment", "mod_lbr_ty"]}
> >
<Select allowClear> <Select
<Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option> allowClear
<Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option> options={CiecaSelect(false, true)}
<Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option> />
<Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
<Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
<Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
<Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
<Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
<Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
<Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
<Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
<Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
<Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
<Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("jobs.labels.adjustmentrate")} label={t("jobs.labels.adjustmentrate")}

13
client/src/components/bill-form/bill-form.component.jsx
View File

@@ -328,13 +328,12 @@ export function BillFormComponent({
</Form.Item> </Form.Item>
{!billEdit && ( {!billEdit && (
<Form.Item label={t("bills.fields.allpartslocation")} name="location"> <Form.Item label={t("bills.fields.allpartslocation")} name="location">
<Select style={{ width: "10rem" }} disabled={disabled} allowClear> <Select
{bodyshop.md_parts_locations.map((loc, idx) => ( style={{ width: "10rem" }}
<Select.Option key={idx} value={loc}> disabled={disabled}
{loc} allowClear
</Select.Option> options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
))} />
</Select>
</Form.Item> </Form.Item>
)} )}
</LayoutFormRow> </LayoutFormRow>

46
client/src/components/bill-form/bill-form.lines.component.jsx
View File

@@ -392,11 +392,16 @@ export function BillEnterModalLinesComponent({
rules: [{ required: true }] rules: [{ required: true }]
}), }),
formInput: () => ( formInput: () => (
<Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}> <Select
{bodyshopHasDmsKey(bodyshop) showSearch
? CiecaSelect(true, false) style={{ minWidth: "3rem" }}
: responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)} disabled={disabled}
</Select> options={
bodyshopHasDmsKey(bodyshop)
? CiecaSelect(true, false)
: responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
}
/>
) )
}, },
...(billEdit ...(billEdit
@@ -412,13 +417,10 @@ export function BillEnterModalLinesComponent({
name: [field.name, "location"] name: [field.name, "location"]
}), }),
formInput: () => ( formInput: () => (
<Select disabled={disabled}> <Select
{bodyshop.md_parts_locations.map((loc, idx) => ( disabled={disabled}
<Select.Option key={idx} value={loc}> options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
{loc} />
</Select.Option>
))}
</Select>
) )
} }
]), ]),
@@ -459,22 +461,10 @@ export function BillEnterModalLinesComponent({
rules={[{ required: true }]} rules={[{ required: true }]}
name={[record.name, "lbr_adjustment", "mod_lbr_ty"]} name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
> >
<Select allowClear> <Select
<Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option> allowClear
<Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option> options={CiecaSelect(false, true)}
<Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option> />
<Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
<Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
<Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
<Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
<Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
<Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
<Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
<Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
<Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
<Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
<Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
</Select>
</Form.Item> </Form.Item>
{Enhanced_Payroll.treatment === "on" ? ( {Enhanced_Payroll.treatment === "on" ? (

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

@@ -19,13 +19,12 @@ export default function ChatTagRoComponent({ roOptions, loading, handleSearch, h
placeholder={t("general.labels.search")} placeholder={t("general.labels.search")}
onSelect={handleInsertTag} onSelect={handleInsertTag}
notFoundContent={loading ? <LoadingOutlined /> : <Empty />} notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
> options={roOptions.map((item, idx) => ({
{roOptions.map((item, idx) => ( key: item.id || idx,
<Select.Option key={item.id || idx}> value: item.id || idx,
{` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`} label: ` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`
</Select.Option> }))}
))} />
</Select>
</div> </div>
{loading ? <LoadingOutlined /> : null} {loading ? <LoadingOutlined /> : null}

28
client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
View File

@@ -309,13 +309,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
} }
]} ]}
> >
<Select> <Select
{bodyshop.md_ins_cos.map((s) => ( options={bodyshop.md_ins_cos.map((s) => ({
<Select.Option key={s.name} value={s.name}> key: s.name,
{s.name} value: s.name,
</Select.Option> label: s.name
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={"class"} name={"class"}
@@ -327,13 +327,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
} }
]} ]}
> >
<Select> <Select
{bodyshop.md_classes.map((s) => ( options={bodyshop.md_classes.map((s) => ({
<Select.Option key={s} value={s}> key: s,
{s} value: s,
</Select.Option> label: s
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("contracts.labels.convertform.applycleanupcharge")} label={t("contracts.labels.convertform.applycleanupcharge")}

18
client/src/components/contract-status-select/contract-status-select.component.jsx
View File

@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
import { Select } from "antd"; import { Select } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Option } = Select;
const ContractStatusComponent = ({ value, onChange, ref }) => { const ContractStatusComponent = ({ value, onChange, ref }) => {
const [option, setOption] = useState(value); const [option, setOption] = useState(value);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -15,11 +13,17 @@ const ContractStatusComponent = ({ value, onChange, ref }) => {
}, [value, option, onChange]); }, [value, option, onChange]);
return ( return (
<Select ref={ref} value={option} style={{ width: 100 }} onChange={setOption}> <Select
<Option value="contracts.status.new">{t("contracts.status.new")}</Option> ref={ref}
<Option value="contracts.status.out">{t("contracts.status.out")}</Option> value={option}
<Option value="contracts.status.returned">{t("contracts.status.out")}</Option> style={{ width: 100 }}
</Select> onChange={setOption}
options={[
{ value: "contracts.status.new", label: t("contracts.status.new") },
{ value: "contracts.status.out", label: t("contracts.status.out") },
{ value: "contracts.status.returned", label: t("contracts.status.out") }
]}
/>
); );
}; };

11
client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
View File

@@ -2,8 +2,6 @@ import { Select } from "antd";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Option } = Select;
const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => { const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
const [option, setOption] = useState(value); const [option, setOption] = useState(value);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -23,10 +21,11 @@ const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
width: 100 width: 100
}} }}
onChange={setOption} onChange={setOption}
> options={[
<Option value="courtesycars.readiness.ready">{t("courtesycars.readiness.ready")}</Option> { value: "courtesycars.readiness.ready", label: t("courtesycars.readiness.ready") },
<Option value="courtesycars.readiness.notready">{t("courtesycars.readiness.notready")}</Option> { value: "courtesycars.readiness.notready", label: t("courtesycars.readiness.notready") }
</Select> ]}
/>
); );
}; };
export default CourtesyCarReadinessComponent; export default CourtesyCarReadinessComponent;

19
client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
View File

@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
import { Select } from "antd"; import { Select } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Option } = Select;
const CourtesyCarStatusComponent = ({ value, onChange, ref }) => { const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
const [option, setOption] = useState(value); const [option, setOption] = useState(value);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -22,14 +20,15 @@ const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
width: 100 width: 100
}} }}
onChange={setOption} onChange={setOption}
> options={[
<Option value="courtesycars.status.in">{t("courtesycars.status.in")}</Option> { value: "courtesycars.status.in", label: t("courtesycars.status.in") },
<Option value="courtesycars.status.inservice">{t("courtesycars.status.inservice")}</Option> { value: "courtesycars.status.inservice", label: t("courtesycars.status.inservice") },
<Option value="courtesycars.status.out">{t("courtesycars.status.out")}</Option> { value: "courtesycars.status.out", label: t("courtesycars.status.out") },
<Option value="courtesycars.status.sold">{t("courtesycars.status.sold")}</Option> { value: "courtesycars.status.sold", label: t("courtesycars.status.sold") },
<Option value="courtesycars.status.leasereturn">{t("courtesycars.status.leasereturn")}</Option> { value: "courtesycars.status.leasereturn", label: t("courtesycars.status.leasereturn") },
<Option value="courtesycars.status.unavailable">{t("courtesycars.status.unavailable")}</Option> { value: "courtesycars.status.unavailable", label: t("courtesycars.status.unavailable") }
</Select> ]}
/>
); );
}; };
export default CourtesyCarStatusComponent; export default CourtesyCarStatusComponent;

14
client/src/components/dms-post-form/cdklike-dms-post-form.jsx
View File

@@ -272,11 +272,15 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
name={[field.name, "name"]} name={[field.name, "name"]}
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<Select style={{ width: "100%" }} onSelect={(value) => handlePayerSelect(value, index)}> <Select
{bodyshop.cdk_configuration?.payers?.map((payer) => ( style={{ width: "100%" }}
<Select.Option key={payer.name}>{payer.name}</Select.Option> onSelect={(value) => handlePayerSelect(value, index)}
))} options={bodyshop.cdk_configuration?.payers?.map((payer) => ({
</Select> key: payer.name,
value: payer.name,
label: payer.name
}))}
/>
</Form.Item> </Form.Item>
</Col> </Col>

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

@@ -86,11 +86,13 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
} }
]} ]}
> >
<Select> <Select
<Select.Option key={currentUser.email}>{currentUser.email}</Select.Option> options={[
<Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option> { key: currentUser.email, value: currentUser.email, label: currentUser.email },
{bodyshop.md_from_emails && bodyshop.md_from_emails.map((e) => <Select.Option key={e}>{e}</Select.Option>)} { key: bodyshop.email, value: bodyshop.email, label: bodyshop.email },
</Select> ...(bodyshop.md_from_emails ? bodyshop.md_from_emails.map((e) => ({ key: e, value: e, label: e })) : [])
]}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={ label={

31
client/src/components/employee-search-select/employee-search-select-email.component.jsx
View File

@@ -1,7 +1,6 @@
import { Select, Space, Tag } from "antd"; import { Select, Space, Tag } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Option } = Select;
//To be used as a form element only. //To be used as a form element only.
const EmployeeSearchSelectEmail = ({ options, ...props }) => { const EmployeeSearchSelectEmail = ({ options, ...props }) => {
@@ -12,26 +11,24 @@ const EmployeeSearchSelectEmail = ({ options, ...props }) => {
showSearch={{ showSearch={{
optionFilterProp: "search" optionFilterProp: "search"
}} }}
// value={option}
style={{ style={{
width: 400 width: 400
}} }}
options={options?.map((o) => ({
key: o.id,
value: o.user_email,
search: `${o.employee_number} ${o.first_name} ${o.last_name}`,
label: (
<Space>
{`${o.employee_number} ${o.first_name} ${o.last_name}`}
<Tag color="green">
{o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
</Tag>
</Space>
)
}))}
{...props} {...props}
> />
{options
? options.map((o) => (
<Option key={o.id} value={o.user_email} search={`${o.employee_number} ${o.first_name} ${o.last_name}`}>
<Space>
{`${o.employee_number} ${o.first_name} ${o.last_name}`}
<Tag color="green">
{o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
</Tag>
</Space>
</Option>
))
: null}
</Select>
); );
}; };
export default EmployeeSearchSelectEmail; export default EmployeeSearchSelectEmail;

40
client/src/components/employee-search-select/employee-search-select.component.jsx
View File

@@ -1,7 +1,6 @@
import { Select, Space, Tag } from "antd"; import { Select, Space, Tag } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Option } = Select;
//To be used as a form element only. //To be used as a form element only.
const EmployeeSearchSelect = ({ options, showEmail, ...props }) => { const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
@@ -12,30 +11,29 @@ const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
showSearch={{ showSearch={{
optionFilterProp: "search" optionFilterProp: "search"
}} }}
// value={option}
style={{ style={{
width: 400 width: 400
}} }}
options={options?.map((o) => ({
key: o.id,
value: o.id,
search: `${o.employee_number} ${o.first_name} ${o.last_name}`,
label: (
<Space size="small">
{`${o.employee_number ?? ""} ${o.first_name} ${o.last_name}`}
<Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
{o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
</Tag>
{showEmail && o.user_email ? (
<Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
{o.user_email}
</Tag>
) : null}
</Space>
)
}))}
{...props} {...props}
> />
{options
? options.map((o) => (
<Option key={o.id} value={o.id} search={`${o.employee_number} ${o.first_name} ${o.last_name}`}>
<Space size="small">
{`${o.employee_number ?? ""} ${o.first_name} ${o.last_name}`}
<Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
{o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
</Tag>
{showEmail && o.user_email ? (
<Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
{o.user_email}
</Tag>
) : null}
</Space>
</Option>
))
: null}
</Select>
); );
}; };
export default EmployeeSearchSelect; export default EmployeeSearchSelect;

37
client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
View File

@@ -67,16 +67,19 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
); );
}; };
const handleInsSelect = (value, option) => { const handleInsSelect = (value) => {
form.setFieldsValue({ const selectedVendor = bodyshop.md_ins_cos.find(s => s.name === value);
addr1: option.obj.name, if (selectedVendor) {
addr2: option.obj.street1, form.setFieldsValue({
addr3: option.obj.street2, addr1: selectedVendor.name,
city: option.obj.city, addr2: selectedVendor.street1,
state: option.obj.state, addr3: selectedVendor.street2,
zip: option.obj.zip, city: selectedVendor.city,
vendorid: null state: selectedVendor.state,
}); zip: selectedVendor.zip,
vendorid: null
});
}
}; };
const handleVendorSelect = (vendorid) => { const handleVendorSelect = (vendorid) => {
@@ -103,13 +106,13 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
<VendorSearchSelect options={VendorAutoCompleteData?.vendors} onSelect={handleVendorSelect} /> <VendorSearchSelect options={VendorAutoCompleteData?.vendors} onSelect={handleVendorSelect} />
</Form.Item> </Form.Item>
<Form.Item label={t("bodyshop.fields.md_ins_co.name")} name="ins_co_id"> <Form.Item label={t("bodyshop.fields.md_ins_co.name")} name="ins_co_id">
<Select onSelect={handleInsSelect}> <Select
{bodyshop.md_ins_cos.map((s) => ( onSelect={handleInsSelect}
<Select.Option key={s.name} obj={s} value={s.name}> options={bodyshop.md_ins_cos.map((s) => ({
{s.name} value: s.name,
</Select.Option> label: s.name
))} }))}
</Select> />
</Form.Item> </Form.Item>
<LayoutFormRow grow> <LayoutFormRow grow>
<Form.Item label={t("printcenter.jobs.3rdpartyfields.addr1")} name="addr1"> <Form.Item label={t("printcenter.jobs.3rdpartyfields.addr1")} name="addr1">

12
client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
View File

@@ -92,13 +92,11 @@ export function JoblineBulkAssign({ setSelectedLines, selectedLines, insertAudit
filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}} }}
style={{ width: 200 }} style={{ width: 200 }}
> options={bodyshop.employee_teams.map((team) => ({
{bodyshop.employee_teams.map((team) => ( value: team.id,
<Select.Option value={team.id} key={team.id} name={team.name}> label: team.name
{team.name} }))}
</Select.Option> />
))}
</Select>
</Form.Item> </Form.Item>
<Space wrap> <Space wrap>

36
client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
View File

@@ -122,22 +122,26 @@ export function JobLineConvertToLabor({
} }
]} ]}
> >
<Select allowClear showSearch={{ optionFilterProp: "children" }}> <Select
<Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option> allowClear
<Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option> showSearch
<Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option> options={[
<Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option> { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
<Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option> { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
<Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option> { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
<Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option> { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
<Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option> { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
<Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option> { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
<Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option> { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
<Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option> { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
<Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option> { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
<Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option> { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
<Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option> { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
</Select> { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
{ value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
{ value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
]}
/>
</Form.Item> </Form.Item>
<Form.Item shouldUpdate> <Form.Item shouldUpdate>

15
client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
View File

@@ -119,15 +119,14 @@ export function JobLineDispatchButton({
filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}} }}
style={{ width: 200 }} style={{ width: 200 }}
> options={bodyshop.employees
{bodyshop.employees
.filter((emp) => emp.active) .filter((emp) => emp.active)
.map((emp) => ( .map((emp) => ({
<Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}> value: emp.id,
{`${emp.first_name} ${emp.last_name}`} key: emp.id,
</Select.Option> label: `${emp.first_name} ${emp.last_name}`
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Space wrap> <Space wrap>

13
client/src/components/job-line-status-popup/job-line-status-popup.component.jsx
View File

@@ -64,13 +64,12 @@ export function JobLineStatusPopup({ bodyshop, jobline, disabled }) {
onSelect={handleChange} onSelect={handleChange}
onBlur={handleSave} onBlur={handleSave}
onClear={() => handleChange(null)} onClear={() => handleChange(null)}
> options={Object.values(bodyshop.md_order_statuses).map((s, idx) => ({
{Object.values(bodyshop.md_order_statuses).map((s, idx) => ( key: idx,
<Select.Option key={idx} value={s}> value: s,
{s} label: s
</Select.Option> }))}
))} />
</Select>
</LoadingSpinner> </LoadingSpinner>
</div> </div>
); );

13
client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx
View File

@@ -75,13 +75,12 @@ export function JoblineTeamAssignment({ bodyshop, jobline, disabled, jobId, inse
onSelect={handleChange} onSelect={handleChange}
onBlur={handleSave} onBlur={handleSave}
onClear={() => handleChange(null)} onClear={() => handleChange(null)}
> options={Object.values(bodyshop.employee_teams).map((s) => ({
{Object.values(bodyshop.employee_teams).map((s, idx) => ( key: s.id,
<Select.Option key={idx} value={s.id}> value: s.id,
{s.name} label: s.name
</Select.Option> }))}
))} />
</Select>
</LoadingSpinner> </LoadingSpinner>
</div> </div>
); );

54
client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
View File

@@ -67,22 +67,22 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow> <LayoutFormRow grow>
<Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty"> <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
<Select allowClear> <Select allowClear options={[
<Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option> { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
<Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option> { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
<Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option> { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
<Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option> { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
<Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option> { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
<Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option> { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
<Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option> { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
<Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option> { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
<Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option> { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
<Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option> { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
<Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option> { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
<Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option> { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
<Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option> { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
<Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option> { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
</Select> ]} />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.op_code_desc")} name="op_code_desc"> <Form.Item label={t("joblines.fields.op_code_desc")} name="op_code_desc">
<Input /> <Input />
@@ -128,17 +128,17 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow> <LayoutFormRow>
<Form.Item label={t("joblines.fields.part_type")} name="part_type"> <Form.Item label={t("joblines.fields.part_type")} name="part_type">
<Select allowClear> <Select allowClear options={[
<Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option> { value: "PAA", label: t("joblines.fields.part_types.PAA") },
<Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option> { value: "PAC", label: t("joblines.fields.part_types.PAC") },
<Select.Option value="PAE">{t("joblines.fields.part_types.PAE")}</Select.Option> { value: "PAE", label: t("joblines.fields.part_types.PAE") },
<Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option> { value: "PAL", label: t("joblines.fields.part_types.PAL") },
<Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option> { value: "PAM", label: t("joblines.fields.part_types.PAM") },
<Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option> { value: "PAN", label: t("joblines.fields.part_types.PAN") },
<Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option> { value: "PAO", label: t("joblines.fields.part_types.PAO") },
<Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option> { value: "PAR", label: t("joblines.fields.part_types.PAR") },
<Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option> { value: "PAS", label: t("joblines.fields.part_types.PAS") }
</Select> ]} />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno"> <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
<Input /> <Input />

38
client/src/components/job-search-select/job-search-select.component.jsx
View File

@@ -8,8 +8,6 @@ import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component"; import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
const { Option } = Select;
const JobSearchSelect = ({ const JobSearchSelect = ({
disabled, disabled,
convertedOnly = false, convertedOnly = false,
@@ -87,24 +85,24 @@ const JobSearchSelect = ({
style={{ width: "100%" }} style={{ width: "100%" }}
suffixIcon={(loading || idLoading) && <Spin />} // matches OLD spinner semantics suffixIcon={(loading || idLoading) && <Spin />} // matches OLD spinner semantics
notFoundContent={loading ? <LoadingOutlined /> : null} // matches OLD (loading only) notFoundContent={loading ? <LoadingOutlined /> : null} // matches OLD (loading only)
> options={theOptions?.map((o) => ({
{theOptions key: o.id,
? theOptions.map((o) => ( value: o.id,
<Option key={o.id} value={o.id} status={o.status}> status: o.status,
<Space align="center"> label: (
<span> <Space align="center">
{`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${o.ro_number || t("general.labels.na")} | ${OwnerNameDisplayFunction( <span>
o {`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${o.ro_number || t("general.labels.na")} | ${OwnerNameDisplayFunction(
)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""}`} o
</span> )} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
<Tag> </span>
<strong>{o.status}</strong> <Tag>
</Tag> <strong>{o.status}</strong>
</Space> </Tag>
</Option> </Space>
)) )
: null} }))}
</Select> />
{error ? <AlertComponent title={error.message} type="error" /> : null} {error ? <AlertComponent title={error.message} type="error" /> : null}
{idError ? <AlertComponent title={idError.message} type="error" /> : null} {idError ? <AlertComponent title={idError.message} type="error" /> : null}

13
client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
View File

@@ -59,13 +59,12 @@ export function JobsAdminClass({ bodyshop, job }) {
} }
]} ]}
> >
<Select> <Select
{bodyshop.md_classes.map((s) => ( options={bodyshop.md_classes.map((s) => ({
<Select.Option key={s} value={s}> value: s,
{s} label: s
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
</Form> </Form>

24
client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
View File

@@ -141,13 +141,11 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}} }}
disabled={jobRO} disabled={jobRO}
> options={bodyshop.md_responsibility_centers.profits.map((p) => ({
{bodyshop.md_responsibility_centers.profits.map((p) => ( value: p.name,
<Select.Option key={p.name} value={p.name}> label: p.name
{p.name} }))}
</Select.Option> />
))}
</Select>
</Form.Item> </Form.Item>
</td> </td>
<td> <td>
@@ -171,13 +169,11 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}} }}
disabled={jobRO} disabled={jobRO}
> options={bodyshop.md_responsibility_centers.profits.map((p) => ({
{bodyshop.md_responsibility_centers.profits.map((p) => ( value: p.name,
<Select.Option key={p.name} value={p.name}> label: p.name
{p.name} }))}
</Select.Option> />
))}
</Select>
</Form.Item> </Form.Item>
</td> </td>
</tr> </tr>

71
client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
View File

@@ -108,13 +108,13 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
} }
]} ]}
> >
<Select showSearch> <Select
{bodyshop.md_ins_cos.map((s, i) => ( showSearch
<Select.Option key={i} value={s.name}> options={bodyshop.md_ins_cos.map((s) => ({
{s.name} value: s.name,
</Select.Option> label: s.name
))} }))}
</Select> />
</Form.Item> </Form.Item>
{bodyshop.enforce_class && ( {bodyshop.enforce_class && (
<Form.Item <Form.Item
@@ -127,13 +127,12 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
} }
]} ]}
> >
<Select> <Select
{bodyshop.md_classes.map((s) => ( options={bodyshop.md_classes.map((s) => ({
<Select.Option key={s} value={s}> value: s,
{s} label: s
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
)} )}
{bodyshop.enforce_referral && ( {bodyshop.enforce_referral && (
@@ -148,13 +147,12 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
} }
]} ]}
> >
<Select> <Select
{bodyshop.md_referral_sources.map((s) => ( options={bodyshop.md_referral_sources.map((s) => ({
<Select.Option key={s} value={s}> value: s,
{s} label: s
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra"> <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
<Input /> <Input />
@@ -179,19 +177,16 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
> >
<Select <Select
showSearch={{ showSearch={{
optionFilterProp: "children", filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}} }}
style={{ width: 200 }} style={{ width: 200 }}
> options={bodyshop.employees
{bodyshop.employees
.filter((emp) => emp.active) .filter((emp) => emp.active)
.map((emp) => ( .map((emp) => ({
<Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}> value: emp.id,
{`${emp.first_name} ${emp.last_name}`} label: `${emp.first_name} ${emp.last_name}`
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
)} )}
{bodyshop.enforce_conversion_category && ( {bodyshop.enforce_conversion_category && (
@@ -205,13 +200,13 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
} }
]} ]}
> >
<Select allowClear> <Select
{bodyshop.md_categories.map((s) => ( allowClear
<Select.Option key={s} value={s}> options={bodyshop.md_categories.map((s) => ({
{s} value: s,
</Select.Option> label: s
))} }))}
</Select> />
</Form.Item> </Form.Item>
)} )}
{bodyshop.region_config.toLowerCase().startsWith("ca") && ( {bodyshop.region_config.toLowerCase().startsWith("ca") && (

38
client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
View File

@@ -60,13 +60,13 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm"> <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
<Select onChange={handleInsCoChange}> <Select
{bodyshop.md_ins_cos.map((s) => ( onChange={handleInsCoChange}
<Select.Option key={s.name} value={s.name}> options={bodyshop.md_ins_cos.map((s) => ({
{s.name} value: s.name,
</Select.Option> label: s.name
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1"> <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
<Input /> <Input />
@@ -192,13 +192,12 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.referralsource")} name="referral_source"> <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
<Select> <Select
{bodyshop.md_referral_sources.map((s) => ( options={bodyshop.md_referral_sources.map((s) => ({
<Select.Option key={s} value={s}> value: s,
{s} label: s
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra"> <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
<Input /> <Input />
@@ -221,10 +220,13 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
<CurrencyInput min={0} /> <CurrencyInput min={0} />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ded_status")} name="ded_status"> <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
<Select allowClear> <Select
<Select.Option value="W">{t("jobs.labels.deductible.waived")}</Select.Option> allowClear
<Select.Option value="Y">{t("jobs.labels.deductible.stands")}</Select.Option> options={[
</Select> { value: "W", label: t("jobs.labels.deductible.waived") },
{ value: "Y", label: t("jobs.labels.deductible.stands") }
]}
/>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.depreciation_taxes")} name="depreciation_taxes"> <Form.Item label={t("jobs.fields.depreciation_taxes")} name="depreciation_taxes">
<CurrencyInput /> <CurrencyInput />

61
client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
View File

@@ -43,20 +43,19 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
<Input disabled={jobRO} /> <Input disabled={jobRO} />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ded_status")} name="ded_status"> <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
<Select disabled={jobRO}> <Select disabled={jobRO} options={[
<Select.Option value="W">{t("jobs.labels.deductible.waived")}</Select.Option> { value: "W", label: t("jobs.labels.deductible.waived") },
<Select.Option value="Y">{t("jobs.labels.deductible.stands")}</Select.Option> { value: "Y", label: t("jobs.labels.deductible.stands") }
</Select> ]} />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt"> <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
<CurrencyInput disabled={jobRO} min={0} /> <CurrencyInput disabled={jobRO} min={0} />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ded_note")} name="ded_note"> <Form.Item label={t("jobs.fields.ded_note")} name="ded_note">
<Select disabled={jobRO}> <Select disabled={jobRO} options={bodyshop.md_ded_notes.map((n) => ({
{bodyshop.md_ded_notes.map((n, index) => ( value: n,
<Select.Option key={index}>{n}</Select.Option> label: n
))} }))} />
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.policy_no")} name="policy_no"> <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
<Input disabled={jobRO} /> <Input disabled={jobRO} />
@@ -66,13 +65,10 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm"> <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
<Select disabled={jobRO} onChange={handleInsCoChange}> <Select disabled={jobRO} onChange={handleInsCoChange} options={bodyshop.md_ins_cos.map((s) => ({
{bodyshop.md_ins_cos.map((s) => ( value: s.name,
<Select.Option key={s.name} value={s.name}> label: s.name
{s.name} }))} />
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1"> <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
<Input disabled={jobRO} /> <Input disabled={jobRO} />
@@ -123,25 +119,19 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
} }
]} ]}
> >
<Select disabled={jobRO} allowClear> <Select disabled={jobRO} allowClear options={bodyshop.md_referral_sources.map((s) => ({
{bodyshop.md_referral_sources.map((s) => ( value: s,
<Select.Option key={s} value={s}> label: s
{s} }))} />
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra"> <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
<Input disabled={jobRO} /> <Input disabled={jobRO} />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.alt_transport")} name="alt_transport"> <Form.Item label={t("jobs.fields.alt_transport")} name="alt_transport">
<Select disabled={jobRO} allowClear> <Select disabled={jobRO} allowClear options={bodyshop.appt_alt_transport.map((s) => ({
{bodyshop.appt_alt_transport.map((s) => ( value: s,
<Select.Option key={s} value={s}> label: s
{s} }))} />
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
</FormRow> </FormRow>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
@@ -243,13 +233,10 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
</FormRow> </FormRow>
<FormRow header={t("jobs.forms.other")}> <FormRow header={t("jobs.forms.other")}>
<Form.Item label={t("jobs.fields.category")} name="category"> <Form.Item label={t("jobs.fields.category")} name="category">
<Select disabled={jobRO} allowClear> <Select disabled={jobRO} allowClear options={bodyshop.md_categories.map((s) => ({
{bodyshop.md_categories.map((s) => ( value: s,
<Select.Option key={s} value={s}> label: s
{s} }))} />
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer"> <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">

13
client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
View File

@@ -714,13 +714,12 @@ export function JobsDetailHeaderActions({
<FormDateTimePickerComponent /> <FormDateTimePickerComponent />
</Form.Item> </Form.Item>
<Form.Item label={t("appointments.fields.color")} name="color"> <Form.Item label={t("appointments.fields.color")} name="color">
<Select> <Select
{bodyshop.appt_colors.map((col, idx) => ( options={bodyshop.appt_colors.map((col) => ({
<Select.Option key={idx} value={col.color.hex}> value: col.color.hex,
{col.label} label: col.label
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
<Space wrap> <Space wrap>

36
client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx
View File

@@ -94,22 +94,26 @@ export function LaborAllocationsAdjustmentEdit({
} }
]} ]}
> >
<Select allowClear disabled={!!mod_lbr_ty}> <Select
<Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option> allowClear
<Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option> disabled={!!mod_lbr_ty}
<Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option> options={[
<Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option> { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
<Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option> { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
<Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option> { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
<Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option> { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
<Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option> { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
<Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option> { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
<Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option> { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
<Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option> { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
<Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option> { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
<Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option> { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
<Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option> { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
</Select> { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
{ value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
{ value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
]}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("jobs.fields.adjustmenthours")} label={t("jobs.fields.adjustmenthours")}

17
client/src/components/owner-search-select/owner-search-select.component.jsx
View File

@@ -7,8 +7,6 @@ import { SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_OWNERS_FOR_AUTOCOMPLETE }
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component"; import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
const { Option } = Select;
const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => { const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_OWNERS_FOR_AUTOCOMPLETE); const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_OWNERS_FOR_AUTOCOMPLETE);
@@ -71,15 +69,12 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
onSelect={handleSelect} onSelect={handleSelect}
notFoundContent={loading ? <LoadingOutlined /> : <Empty />} notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
onBlur={onBlur} onBlur={onBlur}
> options={theOptions?.map((o) => ({
{theOptions key: o.id,
? theOptions.map((o) => ( value: o.id,
<Option key={o.id} value={o.id}> label: `${OwnerNameDisplayFunction(o)} | ${o.ownr_addr1 || ""} `
{`${OwnerNameDisplayFunction(o)} | ${o.ownr_addr1 || ""} `} }))}
</Option> />
))
: null}
</Select>
{idLoading || loading ? <LoadingOutlined /> : null} {idLoading || loading ? <LoadingOutlined /> : null}
{error ? <AlertComponent title={error.message} type="error" /> : null} {error ? <AlertComponent title={error.message} type="error" /> : null}
{idError ? <AlertComponent title={idError.message} type="error" /> : null} {idError ? <AlertComponent title={idError.message} type="error" /> : null}

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

@@ -158,19 +158,21 @@ export function PartsOrderModalComponent({
key={`${index}part_type`} key={`${index}part_type`}
name={[field.name, "part_type"]} name={[field.name, "part_type"]}
> >
<Select disabled={!(sendType === "oec" && OEConnection_PriceChange.treatment === "on")}> <Select
<Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option> disabled={!(sendType === "oec" && OEConnection_PriceChange.treatment === "on")}
<Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option> options={[
{ value: "PAA", label: t("joblines.fields.part_types.PAA") },
<Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option> { value: "PAC", label: t("joblines.fields.part_types.PAC") },
<Select.Option value="PAG">{t("joblines.fields.part_types.PAG")}</Select.Option> { value: "PAL", label: t("joblines.fields.part_types.PAL") },
<Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option> { value: "PAG", label: t("joblines.fields.part_types.PAG") },
<Select.Option value="PAP">{t("joblines.fields.part_types.PAP")}</Select.Option> { value: "PAM", label: t("joblines.fields.part_types.PAM") },
<Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option> { value: "PAP", label: t("joblines.fields.part_types.PAP") },
<Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option> { value: "PAN", label: t("joblines.fields.part_types.PAN") },
<Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option> { value: "PAO", label: t("joblines.fields.part_types.PAO") },
<Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option> { value: "PAR", label: t("joblines.fields.part_types.PAR") },
</Select> { value: "PAS", label: t("joblines.fields.part_types.PAS") }
]}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("parts_orders.fields.oem_partno")} label={t("parts_orders.fields.oem_partno")}

28
client/src/components/parts-receive-modal/parts-receive-modal.component.jsx
View File

@@ -29,13 +29,12 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
}) })
}); });
}} }}
> options={bodyshop.md_parts_locations.map((loc, idx) => ({
{bodyshop.md_parts_locations.map((loc, idx) => ( key: idx,
<Select.Option key={idx} value={loc}> value: loc,
{loc} label: loc
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Typography.Title level={4}>{t("parts_orders.labels.inthisorder")}</Typography.Title> <Typography.Title level={4}>{t("parts_orders.labels.inthisorder")}</Typography.Title>
@@ -85,13 +84,14 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
key={`${index}location`} key={`${index}location`}
name={[field.name, "location"]} name={[field.name, "location"]}
> >
<Select style={{ width: "10rem" }}> <Select
{bodyshop.md_parts_locations.map((loc, idx) => ( style={{ width: "10rem" }}
<Select.Option key={idx} value={loc}> options={bodyshop.md_parts_locations.map((loc, idx) => ({
{loc} key: idx,
</Select.Option> value: loc,
))} label: loc
</Select> }))}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("parts_orders.fields.quantity")} label={t("parts_orders.fields.quantity")}

10
client/src/components/parts-shop-info/parts-shop-info-email-presets.component.jsx
View File

@@ -2,8 +2,6 @@ import { Button, Card, Divider, Form, Input, Select, Space } from "antd";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons"; import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Option } = Select;
export default function PartsShopInfoEmailPresets() { export default function PartsShopInfoEmailPresets() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -26,13 +24,7 @@ export default function PartsShopInfoEmailPresets() {
label={t("bodyshop.labels.email_type")} label={t("bodyshop.labels.email_type")}
rules={[{ required: true, message: t("bodyshop.errors.email_type_required") }]} rules={[{ required: true, message: t("bodyshop.errors.email_type_required") }]}
> >
<Select placeholder={t("bodyshop.placeholders.select_email_type")}> <Select placeholder={t("bodyshop.placeholders.select_email_type")} options={emailTypes} />
{emailTypes.map((type) => (
<Option key={type.value} value={type.value}>
{type.label}
</Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
{...restField} {...restField}

47
client/src/components/payment-form/payment-form.component.jsx
View File

@@ -91,20 +91,25 @@ export function PaymentFormComponent({ form, bodyshop, disabled }) {
} }
]} ]}
> >
<Select disabled={disabled}> <Select disabled={disabled}
<Select.Option value={t("payments.labels.customer")}>{t("payments.labels.customer")}</Select.Option> options={Qb_Multi_Ar.treatment === "on"
{Qb_Multi_Ar.treatment === "on" ? ( ? [
<Select.OptGroup label={t("payments.labels.external")}> { value: t("payments.labels.customer"), label: t("payments.labels.customer") },
{bodyshop.md_ins_cos.map((i, idx) => ( {
<Select.Option key={idx} value={i.name}> label: t("payments.labels.external"),
{i.name} options: bodyshop.md_ins_cos.map((i, idx) => ({
</Select.Option> key: idx,
))} value: i.name,
</Select.OptGroup> label: i.name
) : ( }))
<Select.Option value={t("payments.labels.insurance")}>{t("payments.labels.insurance")}</Select.Option> }
)} ]
</Select> : [
{ value: t("payments.labels.customer"), label: t("payments.labels.customer") },
{ value: t("payments.labels.insurance"), label: t("payments.labels.insurance") }
]
}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@@ -117,13 +122,13 @@ export function PaymentFormComponent({ form, bodyshop, disabled }) {
} }
]} ]}
> >
<Select disabled={disabled}> <Select disabled={disabled}
{bodyshop.md_payment_types.map((v, idx) => ( options={bodyshop.md_payment_types.map((v, idx) => ({
<Select.Option key={idx} value={v}> key: idx,
{v} value: v,
</Select.Option> label: v
))} }))}
</Select> />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow> <LayoutFormRow grow>

21
client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
View File

@@ -94,9 +94,17 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
const [visibility, setVisibility] = useState(false); const [visibility, setVisibility] = useState(false);
const onChange = (e, option) => { const onChange = (e, option) => {
setAssignment({ ...assignment, employeeid: e, name: option.name }); setAssignment({ ...assignment, employeeid: e, name: option.label });
}; };
const employeeOptions = bodyshop.employees
.filter((emp) => emp.active)
.map((emp) => ({
value: emp.id,
label: `${emp.first_name} ${emp.last_name}`,
name: `${emp.first_name} ${emp.last_name}`
}));
const popContent = ( const popContent = (
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
<Col span={24}> <Col span={24}>
@@ -108,15 +116,8 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
}} }}
style={{ width: 200 }} style={{ width: 200 }}
onChange={onChange} onChange={onChange}
> options={employeeOptions}
{bodyshop.employees />
.filter((emp) => emp.active)
.map((emp) => (
<Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
{`${emp.first_name} ${emp.last_name}`}
</Select.Option>
))}
</Select>
</Col> </Col>
<Col span={24}> <Col span={24}>
<Space wrap> <Space wrap>

2
client/src/components/production-list-table/production-list-config-manager.component.jsx
View File

@@ -453,10 +453,10 @@ export function ProductionListConfigManager({
}} }}
onSelect={handleSelect} onSelect={handleSelect}
placeholder={t("production.labels.selectview")} placeholder={t("production.labels.selectview")}
optionLabelProp="label"
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
value={activeView} value={activeView}
disabled={open || isAddingNewProfile} // Disable the Select box when the popover is open or adding a new profile disabled={open || isAddingNewProfile} // Disable the Select box when the popover is open or adding a new profile
optionLabelProp="label"
> >
{bodyshop?.production_config && {bodyshop?.production_config &&
bodyshop.production_config bodyshop.production_config

32
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -158,20 +158,28 @@ export function ScheduleJobModalComponent({
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow> <LayoutFormRow grow>
<Form.Item name="color" label={t("appointments.fields.color")}> <Form.Item name="color" label={t("appointments.fields.color")}>
<Select allowClear> <Select
{bodyshop.appt_colors && allowClear
bodyshop.appt_colors.map((color) => ( options={
<Select.Option style={{ color: color.color.hex }} key={color.color.hex} value={color.color.hex}> bodyshop.appt_colors &&
{color.label} bodyshop.appt_colors.map((color) => ({
</Select.Option> value: color.color.hex,
))} label: color.label
</Select> }))
}
/>
</Form.Item> </Form.Item>
<Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}> <Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}>
<Select allowClear> <Select
{bodyshop.appt_alt_transport && allowClear
bodyshop.appt_alt_transport.map((alt) => <Select.Option key={alt}>{alt}</Select.Option>)} options={
</Select> bodyshop.appt_alt_transport &&
bodyshop.appt_alt_transport.map((alt) => ({
value: alt,
label: alt
}))
}
/>
</Form.Item> </Form.Item>
<Form.Item name={"note"} label={t("appointments.fields.note")}> <Form.Item name={"note"} label={t("appointments.fields.note")}>
<Input /> <Input />

13
client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
View File

@@ -120,13 +120,12 @@ export function ScheduleManualEvent({ bodyshop, event }) {
<FormDateTimePickerComponent /> <FormDateTimePickerComponent />
</Form.Item> </Form.Item>
<Form.Item label={t("appointments.fields.color")} name="color"> <Form.Item label={t("appointments.fields.color")} name="color">
<Select> <Select
{bodyshop.appt_colors.map((col, idx) => ( options={bodyshop.appt_colors.map((col) => ({
<Select.Option key={idx} value={col.color.hex}> value: col.color.hex,
{col.label} label: col.label
</Select.Option> }))}
))} />
</Select>
</Form.Item> </Form.Item>
<Space wrap> <Space wrap>

30
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -325,22 +325,20 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
} }
]} ]}
> >
<Select> <Select
<Select.Option key={"shift"} value="timetickets.labels.shift"> options={[
{t("timetickets.labels.shift")} { value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
</Select.Option> ...(bodyshop.cdk_dealerid ||
bodyshop.pbs_serialnumber ||
{bodyshop.cdk_dealerid || bodyshop.rr_dealerid ||
bodyshop.pbs_serialnumber || Enhanced_Payroll.treatment === "on"
bodyshop.rr_dealerid || ? CiecaSelect(false, true)
Enhanced_Payroll.treatment === "on" : bodyshop.md_responsibility_centers.costs.map((c) => ({
? CiecaSelect(false, true) value: c.name,
: bodyshop.md_responsibility_centers.costs.map((c) => ( label: c.name
<Select.Option key={c.name} value={c.name}> })))
{c.name} ]}
</Select.Option> />
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("employees.fields.rate")} label={t("employees.fields.rate")}

60
client/src/components/shop-info/shop-info.general.component.jsx
View File

@@ -1039,22 +1039,25 @@ export function ShopInfoGeneral({ form }) {
key={`${index}mod_lbr_ty`} key={`${index}mod_lbr_ty`}
name={[field.name, "mod_lbr_ty"]} name={[field.name, "mod_lbr_ty"]}
> >
<Select allowClear> <Select
<Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option> allowClear
<Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option> options={[
<Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option> { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
<Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option> { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
<Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option> { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
<Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option> { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
<Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option> { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
<Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option> { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
<Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option> { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
<Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option> { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
<Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option> { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
<Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option> { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
<Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option> { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
<Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option> { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
</Select> { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
{ value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
]}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("joblines.fields.mod_lb_hrs")} label={t("joblines.fields.mod_lb_hrs")}
@@ -1068,17 +1071,20 @@ export function ShopInfoGeneral({ form }) {
key={`${index}part_type`} key={`${index}part_type`}
name={[field.name, "part_type"]} name={[field.name, "part_type"]}
> >
<Select allowClear> <Select
<Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option> allowClear
<Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option> options={[
<Select.Option value="PAE">{t("joblines.fields.part_types.PAE")}</Select.Option> { value: "PAA", label: t("joblines.fields.part_types.PAA") },
<Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option> { value: "PAC", label: t("joblines.fields.part_types.PAC") },
<Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option> { value: "PAE", label: t("joblines.fields.part_types.PAE") },
<Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option> { value: "PAL", label: t("joblines.fields.part_types.PAL") },
<Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option> { value: "PAM", label: t("joblines.fields.part_types.PAM") },
<Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option> { value: "PAN", label: t("joblines.fields.part_types.PAN") },
<Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option> { value: "PAO", label: t("joblines.fields.part_types.PAO") },
</Select> { value: "PAR", label: t("joblines.fields.part_types.PAR") },
{ value: "PAS", label: t("joblines.fields.part_types.PAS") }
]}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("joblines.fields.oem_partno")} label={t("joblines.fields.oem_partno")}

44
client/src/components/shop-info/shop-info.intake.component.jsx
View File

@@ -51,13 +51,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
} }
]} ]}
> >
<Select> <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
{Object.keys(ConfigFormTypes).map((i) => (
<Select.Option key={i} value={i}>
{i}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("jobs.fields.intake.label")} label={t("jobs.fields.intake.label")}
@@ -156,13 +150,13 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select
{Object.keys(TemplateListGenerated).map((i) => ( mode="multiple"
<Select.Option key={TemplateListGenerated[i].key} value={TemplateListGenerated[i].key}> options={Object.keys(TemplateListGenerated).map((i) => ({
{TemplateListGenerated[i].title} value: TemplateListGenerated[i].key,
</Select.Option> label: TemplateListGenerated[i].title
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["intakechecklist", "next_contact_hours"]} name={["intakechecklist", "next_contact_hours"]}
@@ -205,13 +199,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
} }
]} ]}
> >
<Select> <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
{Object.keys(ConfigFormTypes).map((i) => (
<Select.Option key={i} value={i}>
{i}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@@ -310,13 +298,13 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select
{Object.keys(TemplateListGenerated).map((i) => ( mode="multiple"
<Select.Option key={TemplateListGenerated[i].key} value={TemplateListGenerated[i].key}> options={Object.keys(TemplateListGenerated).map((i) => ({
{TemplateListGenerated[i].title} value: TemplateListGenerated[i].key,
</Select.Option> label: TemplateListGenerated[i].title
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["deliverchecklist", "actual_delivery"]} name={["deliverchecklist", "actual_delivery"]}

980
client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
View File

File diff suppressed because it is too large Load Diff

120
client/src/components/shop-info/shop-info.rostatus.component.jsx
View File

@@ -80,13 +80,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["md_ro_statuses", "pre_production_statuses"]} name={["md_ro_statuses", "pre_production_statuses"]}
@@ -99,13 +93,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["md_ro_statuses", "production_statuses"]} name={["md_ro_statuses", "production_statuses"]}
@@ -118,13 +106,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["md_ro_statuses", "post_production_statuses"]} name={["md_ro_statuses", "post_production_statuses"]}
@@ -137,13 +119,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["md_ro_statuses", "ready_statuses"]} name={["md_ro_statuses", "ready_statuses"]}
@@ -156,13 +132,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={["md_ro_statuses", "additional_board_statuses"]} name={["md_ro_statuses", "additional_board_statuses"]}
@@ -175,13 +145,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select mode="multiple"> <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<LayoutFormRow noDivider> <LayoutFormRow noDivider>
<Form.Item <Form.Item
@@ -194,13 +158,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_scheduled"]} name={["md_ro_statuses", "default_scheduled"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_arrived")} label={t("bodyshop.fields.statuses.default_arrived")}
@@ -212,13 +170,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_arrived"]} name={["md_ro_statuses", "default_arrived"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_exported")} label={t("bodyshop.fields.statuses.default_exported")}
@@ -230,13 +182,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_exported"]} name={["md_ro_statuses", "default_exported"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_imported")} label={t("bodyshop.fields.statuses.default_imported")}
@@ -248,13 +194,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_imported"]} name={["md_ro_statuses", "default_imported"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_invoiced")} label={t("bodyshop.fields.statuses.default_invoiced")}
@@ -266,13 +206,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_invoiced"]} name={["md_ro_statuses", "default_invoiced"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_completed")} label={t("bodyshop.fields.statuses.default_completed")}
@@ -284,13 +218,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_completed"]} name={["md_ro_statuses", "default_completed"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_delivered")} label={t("bodyshop.fields.statuses.default_delivered")}
@@ -302,13 +230,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_delivered"]} name={["md_ro_statuses", "default_delivered"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.statuses.default_void")} label={t("bodyshop.fields.statuses.default_void")}
@@ -320,13 +242,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]} ]}
name={["md_ro_statuses", "default_void"]} name={["md_ro_statuses", "default_void"]}
> >
<Select> <Select options={options.map((item) => ({ value: item, label: item }))} />
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
{Production_List_Status_Colors.treatment === "on" && ( {Production_List_Status_Colors.treatment === "on" && (
@@ -352,13 +268,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
} }
]} ]}
> >
<Select> <Select options={productionStatus.map((item) => ({ value: item, label: item }))} />
{productionStatus.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<DeleteFilled <DeleteFilled
onClick={() => { onClick={() => {

14
client/src/components/shop-info/shop-info.speedprint.component.jsx
View File

@@ -60,13 +60,13 @@ export default function ShopInfoSpeedPrint() {
} }
]} ]}
> >
<Select mode="multiple"> <Select
{Object.keys(TemplateListGenerated).map((key, idx) => ( mode="multiple"
<Select.Option key={idx} value={TemplateListGenerated[key].key}> options={Object.keys(TemplateListGenerated).map((key) => ({
{TemplateListGenerated[key].title} value: TemplateListGenerated[key].key,
</Select.Option> label: TemplateListGenerated[key].title
))} }))}
</Select> />
</Form.Item> </Form.Item>
<Space wrap> <Space wrap>

56
client/src/components/shop-info/shop-intellipay-config.component.jsx
View File

@@ -43,85 +43,43 @@ export function ShopInfoIntellipay({ bodyshop, form }) {
label={t("bodyshop.fields.intellipay_config.payment_map.visa")} label={t("bodyshop.fields.intellipay_config.payment_map.visa")}
name={["intellipay_config", "payment_map", "visa"]} name={["intellipay_config", "payment_map", "visa"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.intellipay_config.payment_map.mast")} label={t("bodyshop.fields.intellipay_config.payment_map.mast")}
name={["intellipay_config", "payment_map", "mast"]} name={["intellipay_config", "payment_map", "mast"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.intellipay_config.payment_map.amex")} label={t("bodyshop.fields.intellipay_config.payment_map.amex")}
name={["intellipay_config", "payment_map", "amex"]} name={["intellipay_config", "payment_map", "amex"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.intellipay_config.payment_map.disc")} label={t("bodyshop.fields.intellipay_config.payment_map.disc")}
name={["intellipay_config", "payment_map", "disc"]} name={["intellipay_config", "payment_map", "disc"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.intellipay_config.payment_map.dnrs")} label={t("bodyshop.fields.intellipay_config.payment_map.dnrs")}
name={["intellipay_config", "payment_map", "dnrs"]} name={["intellipay_config", "payment_map", "dnrs"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.intellipay_config.payment_map.jcb")} label={t("bodyshop.fields.intellipay_config.payment_map.jcb")}
name={["intellipay_config", "payment_map", "jcb"]} name={["intellipay_config", "payment_map", "jcb"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bodyshop.fields.intellipay_config.payment_map.intr")} label={t("bodyshop.fields.intellipay_config.payment_map.intr")}
name={["intellipay_config", "payment_map", "intr"]} name={["intellipay_config", "payment_map", "intr"]}
> >
<Select showSearch> <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
{bodyshop.md_payment_types.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
</> </>

20
client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx
View File

@@ -57,21 +57,23 @@ export function TechClockInComponent({ form, bodyshop, technician }) {
} }
]} ]}
> >
<Select> <Select
{emps && options={
emps.rates.map((item) => ( emps &&
<Select.Option key={item.cost_center} value={item.cost_center}> emps.rates.map((item) => ({
{item.cost_center === "timetickets.labels.shift" value: item.cost_center,
label:
item.cost_center === "timetickets.labels.shift"
? t(item.cost_center) ? t(item.cost_center)
: bodyshop.cdk_dealerid || : bodyshop.cdk_dealerid ||
bodyshop.pbs_serialnumber || bodyshop.pbs_serialnumber ||
bodyshop.rr_dealerid || bodyshop.rr_dealerid ||
Enhanced_Payroll.treatment === "on" Enhanced_Payroll.treatment === "on"
? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`) ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
: item.cost_center} : item.cost_center
</Select.Option> }))
))} }
</Select> />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Divider /> <Divider />

43
client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
View File

@@ -201,22 +201,22 @@ export function TechClockOffButton({
} }
]} ]}
> >
<Select disabled={isShiftTicket}> <Select disabled={isShiftTicket}
{isShiftTicket ? ( options={
<Select.Option value="timetickets.labels.shift">{t("timetickets.labels.shift")}</Select.Option> isShiftTicket
) : ( ? [{ value: "timetickets.labels.shift", label: t("timetickets.labels.shift") }]
emps && : emps &&
emps.rates.map((item) => ( emps.rates.map((item) => ({
<Select.Option key={item.cost_center}> value: item.cost_center,
{item.cost_center === "timetickets.labels.shift" label:
? t(item.cost_center) item.cost_center === "timetickets.labels.shift"
: hasDmsKey ? t(item.cost_center)
? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`) : hasDmsKey
: item.cost_center} ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
</Select.Option> : item.cost_center
)) }))
)} }
</Select> />
</Form.Item> </Form.Item>
{isShiftTicket ? ( {isShiftTicket ? (
@@ -232,11 +232,12 @@ export function TechClockOffButton({
} }
]} ]}
> >
<Select> <Select
{bodyshop.md_ro_statuses.production_statuses.map((item) => ( options={bodyshop.md_ro_statuses.production_statuses.map((item) => ({
<Select.Option key={item}></Select.Option> value: item,
))} label: item
</Select> }))}
/>
</Form.Item> </Form.Item>
)} )}

19
client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
View File

@@ -91,21 +91,22 @@ export function TimeTicketModalComponent({
value={value === "timetickets.labels.shift" ? t(value) : value} value={value === "timetickets.labels.shift" ? t(value) : value}
{...props} {...props}
disabled={value === "timetickets.labels.shift" || disabled} disabled={value === "timetickets.labels.shift" || disabled}
> options={
{emps && emps &&
emps.rates.map((item) => ( emps.rates.map((item) => ({
<Select.Option key={item.cost_center} value={item.cost_center}> value: item.cost_center,
{item.cost_center === "timetickets.labels.shift" label:
item.cost_center === "timetickets.labels.shift"
? t(item.cost_center) ? t(item.cost_center)
: bodyshop.cdk_dealerid || : bodyshop.cdk_dealerid ||
bodyshop.pbs_serialnumber || bodyshop.pbs_serialnumber ||
bodyshop.rr_dealerid || bodyshop.rr_dealerid ||
Enhanced_Payroll.treatment === "on" Enhanced_Payroll.treatment === "on"
? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`) ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
: item.cost_center} : item.cost_center
</Select.Option> }))
))} }
</Select> />
); );
const MemoInput = ({ value, ...props }) => ( const MemoInput = ({ value, ...props }) => (

16
client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx
View File

@@ -20,13 +20,15 @@ export function TimeTicketShiftFormComponent() {
} }
]} ]}
> >
<Select> <Select
<Select.Option value="timetickets.labels.amshift">{t("timetickets.labels.amshift")}</Select.Option> options={[
<Select.Option value="timetickets.labels.ambreak">{t("timetickets.labels.ambreak")}</Select.Option> { value: "timetickets.labels.amshift", label: t("timetickets.labels.amshift") },
<Select.Option value="timetickets.labels.lunch">{t("timetickets.labels.lunch")}</Select.Option> { value: "timetickets.labels.ambreak", label: t("timetickets.labels.ambreak") },
<Select.Option value="timetickets.labels.pmshift">{t("timetickets.labels.pmshift")}</Select.Option> { value: "timetickets.labels.lunch", label: t("timetickets.labels.lunch") },
<Select.Option value="timetickets.labels.pmbreak">{t("timetickets.labels.pmbreak")}</Select.Option> { value: "timetickets.labels.pmshift", label: t("timetickets.labels.pmshift") },
</Select> { value: "timetickets.labels.pmbreak", label: t("timetickets.labels.pmbreak") }
]}
/>
</Form.Item> </Form.Item>
</div> </div>
); );

17
client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
View File

@@ -9,8 +9,6 @@ import {
} from "../../graphql/vehicles.queries"; } from "../../graphql/vehicles.queries";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
const { Option } = Select;
const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => { const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_VEHICLES_FOR_AUTOCOMPLETE); const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_VEHICLES_FOR_AUTOCOMPLETE);
@@ -73,15 +71,12 @@ const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
onSelect={handleSelect} onSelect={handleSelect}
notFoundContent={loading ? <LoadingOutlined /> : <Empty />} notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
onBlur={onBlur} onBlur={onBlur}
> options={theOptions?.map((o) => ({
{theOptions key: o.id,
? theOptions.map((o) => ( value: o.id,
<Option key={o.id} value={o.id}> label: `${o.v_vin || ""} ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""} `
{`${o.v_vin || ""} ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""} `} }))}
</Option> />
))
: null}
</Select>
{idLoading || loading ? <LoadingOutlined /> : null} {idLoading || loading ? <LoadingOutlined /> : null}
{error ? <AlertComponent title={error.message} type="error" /> : null} {error ? <AlertComponent title={error.message} type="error" /> : null}
{idError ? <AlertComponent title={idError.message} type="error" /> : null} {idError ? <AlertComponent title={idError.message} type="error" /> : null}

120
client/src/components/vendor-search-select/vendor-search-select.component.jsx
View File

@@ -3,8 +3,6 @@ import { Select, Space, Tag } from "antd";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import PhoneNumberFormatter from "../../utils/PhoneFormatter"; import PhoneNumberFormatter from "../../utils/PhoneFormatter";
const { Option } = Select;
// To be used as a form element only. // To be used as a form element only.
const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => { const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => {
@@ -21,10 +19,57 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
? options.filter((o) => o.favorite.filter((f) => f.toLowerCase() === preferredMake.toLowerCase()).length > 0) ? options.filter((o) => o.favorite.filter((f) => f.toLowerCase() === preferredMake.toLowerCase()).length > 0)
: []; : [];
const formatOption = (o, isFavorite = false) => ({
key: isFavorite ? `favorite-${o.id}` : o.id,
value: o.id,
name: o.name,
discount: o.discount,
label: (
<div
style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div>
<Space style={{ marginLeft: "1rem" }}>
{isFavorite && <HeartOutlined style={{ color: "red" }} />}
{!isFavorite &&
o.tags?.map((tag, idx) => (
<Tag key={idx} style={{ marginLeft: "0.5rem" }}>
{tag}
</Tag>
))}
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
</Space>
</div>
)
});
const allOptions = [
...(favorites?.map((o) => formatOption(o, true)) || []),
...(options?.map((o) => formatOption(o, false)) || [])
];
return ( return (
<Select <Select
ref={ref} ref={ref}
showSearch showSearch={{
optionFilterProp: "name"
}}
value={option} value={option}
style={{ style={{
width: "100%" width: "100%"
@@ -59,76 +104,11 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
}} }}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
onChange={setOption} onChange={setOption}
optionFilterProp="name"
onSelect={onSelect} onSelect={onSelect}
disabled={disabled || false} disabled={disabled || false}
optionLabelProp="name" optionLabelProp="name"
> options={allOptions}
{favorites && />
favorites.map((o) => (
<Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
<div
style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div>
<Space style={{ marginLeft: "1rem" }}>
<HeartOutlined style={{ color: "red" }} />
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
</Space>
</div>
</Option>
))}
{options &&
options.map((o) => (
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
<div
style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div>
<Space style={{ marginLeft: "1rem" }}>
{o.tags?.map((tag, idx) => (
<Tag key={idx} style={{ marginLeft: "0.5rem" }}>
{tag}
</Tag>
))}
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
</Space>
</div>
</Option>
))}
</Select>
); );
}; };
export default VendorSearchSelect; export default VendorSearchSelect;

13
client/src/pages/dms-payables/dms-payables.container.jsx
View File

@@ -119,12 +119,13 @@ export function DmsContainer({ setBreadcrumbs, setSelectedHeader }) {
setLogLevel(value); setLogLevel(value);
socket.emit("set-log-level", value); socket.emit("set-log-level", value);
}} }}
> options={[
<Select.Option key="DEBUG">DEBUG</Select.Option> { key: "DEBUG", value: "DEBUG", label: "DEBUG" },
<Select.Option key="INFO">INFO</Select.Option> { key: "INFO", value: "INFO", label: "INFO" },
<Select.Option key="WARN">WARN</Select.Option> { key: "WARN", value: "WARN", label: "WARN" },
<Select.Option key="ERROR">ERROR</Select.Option> { key: "ERROR", value: "ERROR", label: "ERROR" }
</Select> ]}
/>
<Button onClick={() => setLogs([])}>Clear Logs</Button> <Button onClick={() => setLogs([])}>Clear Logs</Button>
<Button <Button
onClick={() => { onClick={() => {

15
client/src/pages/dms/dms.container.jsx
View File

@@ -522,13 +522,14 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
setLogLevel(value); setLogLevel(value);
setActiveLogLevel(value); setActiveLogLevel(value);
}} }}
> options={[
<Select.Option key="SILLY">SILLY</Select.Option> { key: "SILLY", value: "SILLY", label: "SILLY" },
<Select.Option key="DEBUG">DEBUG</Select.Option> { key: "DEBUG", value: "DEBUG", label: "DEBUG" },
<Select.Option key="INFO">INFO</Select.Option> { key: "INFO", value: "INFO", label: "INFO" },
<Select.Option key="WARN">WARN</Select.Option> { key: "WARN", value: "WARN", label: "WARN" },
<Select.Option key="ERROR">ERROR</Select.Option> { key: "ERROR", value: "ERROR", label: "ERROR" }
</Select> ]}
/>
<Button onClick={() => setLogs([])}>Clear Logs</Button> <Button onClick={() => setLogs([])}>Clear Logs</Button>
<Button <Button
onClick={() => { onClick={() => {

16
client/src/pages/jobs-close/jobs-close.component.jsx
View File

@@ -426,13 +426,15 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
} }
]} ]}
> >
<Select style={{ minWidth: "12rem" }} disabled={jobRO}> <Select
{bodyshop.md_ins_cos.map((s) => ( style={{ minWidth: "12rem" }}
<Select.Option key={s.name} value={s.name}> disabled={jobRO}
{s.name} options={bodyshop.md_ins_cos.map((s) => ({
</Select.Option> key: s.name,
))} value: s.name,
</Select> label: s.name
}))}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item

73
client/src/utils/Ciecaselect.jsx
View File

@@ -1,44 +1,43 @@
import { Select } from "antd";
import i18n from "../translations/i18n"; import i18n from "../translations/i18n";
export default function CiecaSelect(parts = true, labor = true) { export default function CiecaSelect(parts = true, labor = true) {
return ( const options = [];
<>
{labor && (
<>
<Select.Option value="LAA">{i18n.t("joblines.fields.lbr_types.LAA")}</Select.Option>
<Select.Option value="LAB">{i18n.t("joblines.fields.lbr_types.LAB")}</Select.Option>
<Select.Option value="LAD">{i18n.t("joblines.fields.lbr_types.LAD")}</Select.Option>
<Select.Option value="LAE">{i18n.t("joblines.fields.lbr_types.LAE")}</Select.Option>
<Select.Option value="LAF">{i18n.t("joblines.fields.lbr_types.LAF")}</Select.Option>
<Select.Option value="LAG">{i18n.t("joblines.fields.lbr_types.LAG")}</Select.Option>
<Select.Option value="LAM">{i18n.t("joblines.fields.lbr_types.LAM")}</Select.Option>
<Select.Option value="LAR">{i18n.t("joblines.fields.lbr_types.LAR")}</Select.Option>
<Select.Option value="LAS">{i18n.t("joblines.fields.lbr_types.LAS")}</Select.Option>
<Select.Option value="LAU">{i18n.t("joblines.fields.lbr_types.LAU")}</Select.Option>
<Select.Option value="LA1">{i18n.t("joblines.fields.lbr_types.LA1")}</Select.Option>
<Select.Option value="LA2">{i18n.t("joblines.fields.lbr_types.LA2")}</Select.Option>
<Select.Option value="LA3">{i18n.t("joblines.fields.lbr_types.LA3")}</Select.Option>
<Select.Option value="LA4">{i18n.t("joblines.fields.lbr_types.LA4")}</Select.Option>
</>
)}
{parts && (
<>
<Select.Option value="PAA">{i18n.t("joblines.fields.part_types.PAA")}</Select.Option>
<Select.Option value="PAC">{i18n.t("joblines.fields.part_types.PAC")}</Select.Option>
<Select.Option value="PAL">{i18n.t("joblines.fields.part_types.PAL")}</Select.Option> if (labor) {
<Select.Option value="PAG">{i18n.t("joblines.fields.part_types.PAG")}</Select.Option> options.push(
<Select.Option value="PAM">{i18n.t("joblines.fields.part_types.PAM")}</Select.Option> { value: "LAA", label: i18n.t("joblines.fields.lbr_types.LAA") },
<Select.Option value="PAP">{i18n.t("joblines.fields.part_types.PAP")}</Select.Option> { value: "LAB", label: i18n.t("joblines.fields.lbr_types.LAB") },
<Select.Option value="PAN">{i18n.t("joblines.fields.part_types.PAN")}</Select.Option> { value: "LAD", label: i18n.t("joblines.fields.lbr_types.LAD") },
<Select.Option value="PAO">{i18n.t("joblines.fields.part_types.PAO")}</Select.Option> { value: "LAE", label: i18n.t("joblines.fields.lbr_types.LAE") },
<Select.Option value="PAR">{i18n.t("joblines.fields.part_types.PAR")}</Select.Option> { value: "LAF", label: i18n.t("joblines.fields.lbr_types.LAF") },
<Select.Option value="PAS">{i18n.t("joblines.fields.part_types.PAS")}</Select.Option> { value: "LAG", label: i18n.t("joblines.fields.lbr_types.LAG") },
</> { value: "LAM", label: i18n.t("joblines.fields.lbr_types.LAM") },
)} { value: "LAR", label: i18n.t("joblines.fields.lbr_types.LAR") },
</> { value: "LAS", label: i18n.t("joblines.fields.lbr_types.LAS") },
); { value: "LAU", label: i18n.t("joblines.fields.lbr_types.LAU") },
{ value: "LA1", label: i18n.t("joblines.fields.lbr_types.LA1") },
{ value: "LA2", label: i18n.t("joblines.fields.lbr_types.LA2") },
{ value: "LA3", label: i18n.t("joblines.fields.lbr_types.LA3") },
{ value: "LA4", label: i18n.t("joblines.fields.lbr_types.LA4") }
);
}
if (parts) {
options.push(
{ value: "PAA", label: i18n.t("joblines.fields.part_types.PAA") },
{ value: "PAC", label: i18n.t("joblines.fields.part_types.PAC") },
{ value: "PAL", label: i18n.t("joblines.fields.part_types.PAL") },
{ value: "PAG", label: i18n.t("joblines.fields.part_types.PAG") },
{ value: "PAM", label: i18n.t("joblines.fields.part_types.PAM") },
{ value: "PAP", label: i18n.t("joblines.fields.part_types.PAP") },
{ value: "PAN", label: i18n.t("joblines.fields.part_types.PAN") },
{ value: "PAO", label: i18n.t("joblines.fields.part_types.PAO") },
{ value: "PAR", label: i18n.t("joblines.fields.part_types.PAR") },
{ value: "PAS", label: i18n.t("joblines.fields.part_types.PAS") }
);
}
return options;
} }
export function GetPartTypeName(part_type) { export function GetPartTypeName(part_type) {