Dave Richer
@@ -1,70 +1,71 @@
|
||||
import { Checkbox, Col, Row } from "antd";
|
||||
import React, { useContext } from "react";
|
||||
import {Checkbox, Col, Row} from "antd";
|
||||
import React, {useContext} from "react";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import JobsCreateVehicleInfoNewComponent from "./jobs-create-vehicle-info.new.component";
|
||||
import JobsCreateVehicleInfoSearchComponent from "./jobs-create-vehicle-info.search.component";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {useTranslation} from "react-i18next";
|
||||
|
||||
const colSpan = {
|
||||
sm: { span: 24 },
|
||||
lg: { span: 12 },
|
||||
sm: {span: 24},
|
||||
lg: {span: 12},
|
||||
};
|
||||
|
||||
export default function JobsCreateVehicleInfoComponent({
|
||||
loading,
|
||||
vehicles,
|
||||
form,
|
||||
}) {
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Checkbox
|
||||
defaultChecked={state.vehicle.new}
|
||||
checked={state.vehicle.new}
|
||||
onChange={() => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
none: false,
|
||||
new: !state.vehicle.new,
|
||||
selectedid: null,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.labels.create.newvehicle")}
|
||||
</Checkbox>
|
||||
<Checkbox
|
||||
defaultChecked={state.vehicle.none}
|
||||
checked={state.vehicle.none}
|
||||
onChange={() => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
new: false,
|
||||
none: !state.vehicle.none,
|
||||
selectedid: null,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.labels.create.novehicle")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateVehicleInfoSearchComponent
|
||||
loading={loading}
|
||||
vehicles={vehicles}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateVehicleInfoNewComponent form={form}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
loading,
|
||||
vehicles,
|
||||
form,
|
||||
}) {
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Checkbox
|
||||
defaultChecked={state.vehicle.new}
|
||||
checked={state.vehicle.new}
|
||||
onChange={() => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
none: false,
|
||||
new: !state.vehicle.new,
|
||||
selectedid: null,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.labels.create.newvehicle")}
|
||||
</Checkbox>
|
||||
<Checkbox
|
||||
defaultChecked={state.vehicle.none}
|
||||
checked={state.vehicle.none}
|
||||
onChange={() => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
new: false,
|
||||
none: !state.vehicle.none,
|
||||
selectedid: null,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.labels.create.novehicle")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateVehicleInfoSearchComponent
|
||||
loading={loading}
|
||||
vehicles={vehicles}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateVehicleInfoNewComponent form={form}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { useQuery } from "@apollo/client";
|
||||
import React, { useContext } from "react";
|
||||
import { SEARCH_VEHICLES } from "../../graphql/vehicles.queries";
|
||||
import {useQuery} from "@apollo/client";
|
||||
import React, {useContext} from "react";
|
||||
import {SEARCH_VEHICLES} from "../../graphql/vehicles.queries";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component";
|
||||
|
||||
export default function JobsCreateVehicleInfoContainer({ form }) {
|
||||
const [state] = useContext(JobCreateContext);
|
||||
const { loading, error, data } = useQuery(SEARCH_VEHICLES, {
|
||||
variables: { search: `%${state.vehicle.search}%` },
|
||||
skip: !state.vehicle.search,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
export default function JobsCreateVehicleInfoContainer({form}) {
|
||||
const [state] = useContext(JobCreateContext);
|
||||
const {loading, error, data} = useQuery(SEARCH_VEHICLES, {
|
||||
variables: {search: `%${state.vehicle.search}%`},
|
||||
skip: !state.vehicle.search,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
if (error) return <AlertComponent message={error.message} type="error"/>;
|
||||
|
||||
return (
|
||||
<JobsCreateVehicleInfoComponent
|
||||
loading={loading}
|
||||
vehicles={data ? data.search_vehicles : null}
|
||||
form={form}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<JobsCreateVehicleInfoComponent
|
||||
loading={loading}
|
||||
vehicles={data ? data.search_vehicles : null}
|
||||
form={form}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,202 +1,202 @@
|
||||
import { Form, Input } from "antd";
|
||||
import React, { useContext } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {Form, Input} from "antd";
|
||||
import React, {useContext} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import FormDatePicker from "../form-date-picker/form-date-picker.component";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import JobsCreateVehicleInfoPredefined from "./jobs-create-vehicle-info.predefined.component";
|
||||
|
||||
export default function JobsCreateVehicleInfoNewComponent({ form }) {
|
||||
const [state] = useContext(JobCreateContext);
|
||||
export default function JobsCreateVehicleInfoNewComponent({form}) {
|
||||
const [state] = useContext(JobCreateContext);
|
||||
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("vehicles.forms.detail")} grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_vin")}
|
||||
name={["vehicle", "data", "v_vin"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow noDivider>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_color")}
|
||||
name={["vehicle", "data", "v_color"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_model_yr")}
|
||||
name={["vehicle", "data", "v_model_yr"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("vehicles.forms.detail")} grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_vin")}
|
||||
name={["vehicle", "data", "v_vin"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow noDivider>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_color")}
|
||||
name={["vehicle", "data", "v_color"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_model_yr")}
|
||||
name={["vehicle", "data", "v_model_yr"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow grow noDivider>
|
||||
<Form.Item
|
||||
span={10}
|
||||
label={t("vehicles.fields.v_make_desc")}
|
||||
name={["vehicle", "data", "v_make_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={11}
|
||||
label={t("vehicles.fields.v_model_desc")}
|
||||
name={["vehicle", "data", "v_model_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<JobsCreateVehicleInfoPredefined
|
||||
disabled={!state.vehicle.new}
|
||||
form={form}
|
||||
span={1}
|
||||
/>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow noDivider>
|
||||
<Form.Item
|
||||
span={10}
|
||||
label={t("vehicles.fields.v_make_desc")}
|
||||
name={["vehicle", "data", "v_make_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={11}
|
||||
label={t("vehicles.fields.v_model_desc")}
|
||||
name={["vehicle", "data", "v_model_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: state.vehicle.new,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<JobsCreateVehicleInfoPredefined
|
||||
disabled={!state.vehicle.new}
|
||||
form={form}
|
||||
span={1}
|
||||
/>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow header={t("vehicles.forms.registration")} grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.plate_st")}
|
||||
name={["vehicle", "data", "plate_st"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.plate_no")}
|
||||
name={["vehicle", "data", "plate_no"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("vehicles.forms.registration")} grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.plate_st")}
|
||||
name={["vehicle", "data", "plate_st"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.plate_no")}
|
||||
name={["vehicle", "data", "plate_no"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow header={t("vehicles.forms.misc")} grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_type")}
|
||||
name={["vehicle", "data", "v_type"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_trimcode")}
|
||||
name={["vehicle", "data", "v_trimcode"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_tone")}
|
||||
name={["vehicle", "data", "v_tone"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_bstyle")}
|
||||
name={["vehicle", "data", "v_bstyle"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_stage")}
|
||||
name={["vehicle", "data", "v_stage"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_prod_dt")}
|
||||
name={["vehicle", "data", "v_prod_dt"]}
|
||||
>
|
||||
<FormDatePicker disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
{
|
||||
// <Form.Item
|
||||
// label={t("vehicles.fields.v_paint_codes")}
|
||||
// name={["vehicle", "data", "v_paint_codes"]}
|
||||
// >
|
||||
// <Input disabled={!state.vehicle.new} />
|
||||
// </Form.Item>
|
||||
}
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_options")}
|
||||
name={["vehicle", "data", "v_options"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.trim_color")}
|
||||
name={["vehicle", "data", "trim_color"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_mldgcode")}
|
||||
name={["vehicle", "data", "v_mldgcode"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_makecode")}
|
||||
name={["vehicle", "data", "v_makecode"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_engine")}
|
||||
name={["vehicle", "data", "v_engine"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("vehicles.forms.misc")} grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_type")}
|
||||
name={["vehicle", "data", "v_type"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_trimcode")}
|
||||
name={["vehicle", "data", "v_trimcode"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_tone")}
|
||||
name={["vehicle", "data", "v_tone"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_bstyle")}
|
||||
name={["vehicle", "data", "v_bstyle"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_stage")}
|
||||
name={["vehicle", "data", "v_stage"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_prod_dt")}
|
||||
name={["vehicle", "data", "v_prod_dt"]}
|
||||
>
|
||||
<FormDatePicker disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
{
|
||||
// <Form.Item
|
||||
// label={t("vehicles.fields.v_paint_codes")}
|
||||
// name={["vehicle", "data", "v_paint_codes"]}
|
||||
// >
|
||||
// <Input disabled={!state.vehicle.new} />
|
||||
// </Form.Item>
|
||||
}
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_options")}
|
||||
name={["vehicle", "data", "v_options"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.trim_color")}
|
||||
name={["vehicle", "data", "trim_color"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_mldgcode")}
|
||||
name={["vehicle", "data", "v_mldgcode"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_makecode")}
|
||||
name={["vehicle", "data", "v_makecode"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_engine")}
|
||||
name={["vehicle", "data", "v_engine"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_cond")}
|
||||
name={["vehicle", "data", "v_cond"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</div>
|
||||
);
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("vehicles.fields.v_cond")}
|
||||
name={["vehicle", "data", "v_cond"]}
|
||||
>
|
||||
<Input disabled={!state.vehicle.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,81 +1,81 @@
|
||||
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
|
||||
import { Button, Input, Popover, Table } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {PlusOutlined, SearchOutlined} from "@ant-design/icons";
|
||||
import {Button, Input, Popover, Table} from "antd";
|
||||
import React, {useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import PredefinedVehicles from "./predefined-vehicles.js";
|
||||
|
||||
export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const { t } = useTranslation();
|
||||
const handleOpenChange = (newOpen) => {
|
||||
setOpen(newOpen);
|
||||
setSearch("");
|
||||
};
|
||||
const filteredPredefinedVehicles =
|
||||
search === ""
|
||||
? PredefinedVehicles
|
||||
: PredefinedVehicles.filter(
|
||||
(v) =>
|
||||
v.make.toLowerCase().includes(search.toLowerCase()) ||
|
||||
v.model.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
export default function JobsCreateVehicleInfoPredefined({disabled, form}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const {t} = useTranslation();
|
||||
const handleOpenChange = (newOpen) => {
|
||||
setOpen(newOpen);
|
||||
setSearch("");
|
||||
};
|
||||
const filteredPredefinedVehicles =
|
||||
search === ""
|
||||
? PredefinedVehicles
|
||||
: PredefinedVehicles.filter(
|
||||
(v) =>
|
||||
v.make.toLowerCase().includes(search.toLowerCase()) ||
|
||||
v.model.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
const popContent = () => (
|
||||
<div>
|
||||
<Table
|
||||
size="small"
|
||||
title={() => <Input.Search onSearch={(value) => setSearch(value)} />}
|
||||
dataSource={filteredPredefinedVehicles}
|
||||
columns={[
|
||||
{
|
||||
dataIndex: "make",
|
||||
key: "make",
|
||||
title: t("vehicles.fields.v_make_desc"),
|
||||
},
|
||||
{
|
||||
dataIndex: "model",
|
||||
key: "model",
|
||||
title: t("vehicles.fields.v_model_desc"),
|
||||
},
|
||||
{
|
||||
dataIndex: "select",
|
||||
key: "select",
|
||||
title: t("general.labels.actions"),
|
||||
render: (value, record) => (
|
||||
<Button
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
form.setFieldsValue({
|
||||
vehicle: {
|
||||
data: {
|
||||
v_make_desc: record.make,
|
||||
v_model_desc: record.model,
|
||||
},
|
||||
const popContent = () => (
|
||||
<div>
|
||||
<Table
|
||||
size="small"
|
||||
title={() => <Input.Search onSearch={(value) => setSearch(value)}/>}
|
||||
dataSource={filteredPredefinedVehicles}
|
||||
columns={[
|
||||
{
|
||||
dataIndex: "make",
|
||||
key: "make",
|
||||
title: t("vehicles.fields.v_make_desc"),
|
||||
},
|
||||
});
|
||||
setOpen(false);
|
||||
setSearch("");
|
||||
}}
|
||||
>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Popover
|
||||
content={popContent}
|
||||
trigger="click"
|
||||
open={open}
|
||||
placement="left"
|
||||
onOpenChange={handleOpenChange}
|
||||
destroyTooltipOnHide
|
||||
>
|
||||
<SearchOutlined style={{ cursor: "pointer" }} />
|
||||
</Popover>
|
||||
);
|
||||
{
|
||||
dataIndex: "model",
|
||||
key: "model",
|
||||
title: t("vehicles.fields.v_model_desc"),
|
||||
},
|
||||
{
|
||||
dataIndex: "select",
|
||||
key: "select",
|
||||
title: t("general.labels.actions"),
|
||||
render: (value, record) => (
|
||||
<Button
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
form.setFieldsValue({
|
||||
vehicle: {
|
||||
data: {
|
||||
v_make_desc: record.make,
|
||||
v_model_desc: record.model,
|
||||
},
|
||||
},
|
||||
});
|
||||
setOpen(false);
|
||||
setSearch("");
|
||||
}}
|
||||
>
|
||||
<PlusOutlined/>
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Popover
|
||||
content={popContent}
|
||||
trigger="click"
|
||||
open={open}
|
||||
placement="left"
|
||||
onOpenChange={handleOpenChange}
|
||||
destroyTooltipOnHide
|
||||
>
|
||||
<SearchOutlined style={{cursor: "pointer"}}/>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,134 +1,134 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Table, Input, Card, Space } from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import React, {useContext, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {Card, Input, Space, Table} from "antd";
|
||||
import {Link} from "react-router-dom";
|
||||
import {alphaSort} from "../../utils/sorters";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
|
||||
|
||||
export default function JobsCreateVehicleInfoSearchComponent({
|
||||
loading,
|
||||
vehicles,
|
||||
}) {
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
const [tableState, setTableState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: { text: "" },
|
||||
});
|
||||
loading,
|
||||
vehicles,
|
||||
}) {
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
const [tableState, setTableState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: {text: ""},
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
const {t} = useTranslation();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("vehicles.fields.v_vin"),
|
||||
dataIndex: "v_vin",
|
||||
key: "v_vin",
|
||||
sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "v_vin" &&
|
||||
tableState.sortedInfo.order,
|
||||
render: (text, record) => (
|
||||
<Link to={"/manage/vehicles/" + record.id}>
|
||||
<VehicleVinDisplay>{record.v_vin}</VehicleVinDisplay>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("vehicles.fields.description"),
|
||||
dataIndex: "description",
|
||||
key: "description",
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("vehicles.fields.plate_no"),
|
||||
dataIndex: "plate",
|
||||
key: "plate",
|
||||
render: (text, record) => {
|
||||
return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
extra={
|
||||
<Space wrap>
|
||||
<Input.Search
|
||||
placeholder={t("general.labels.search")}
|
||||
onSearch={(value) => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: { ...state.vehicle, search: value },
|
||||
});
|
||||
}}
|
||||
enterButton
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
loading={loading}
|
||||
scroll={{ x: true }}
|
||||
pagination={{ position: "top" }}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
dataSource={vehicles}
|
||||
onChange={handleTableChange}
|
||||
rowSelection={{
|
||||
onSelect: (props) => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
none: false,
|
||||
new: false,
|
||||
selectedid: props.id,
|
||||
vehicleObj: props,
|
||||
},
|
||||
});
|
||||
},
|
||||
type: "radio",
|
||||
selectedRowKeys: [state.vehicle.selectedid],
|
||||
}}
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: (event) => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
none: false,
|
||||
new: false,
|
||||
selectedid: record.id,
|
||||
vehicleObj: record,
|
||||
},
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
selectedid: null,
|
||||
vehicleObj: null,
|
||||
},
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: t("vehicles.fields.v_vin"),
|
||||
dataIndex: "v_vin",
|
||||
key: "v_vin",
|
||||
sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "v_vin" &&
|
||||
tableState.sortedInfo.order,
|
||||
render: (text, record) => (
|
||||
<Link to={"/manage/vehicles/" + record.id}>
|
||||
<VehicleVinDisplay>{record.v_vin}</VehicleVinDisplay>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("vehicles.fields.description"),
|
||||
dataIndex: "description",
|
||||
key: "description",
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
|
||||
);
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
{
|
||||
title: t("vehicles.fields.plate_no"),
|
||||
dataIndex: "plate",
|
||||
key: "plate",
|
||||
render: (text, record) => {
|
||||
return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setTableState({...tableState, filteredInfo: filters, sortedInfo: sorter});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
extra={
|
||||
<Space wrap>
|
||||
<Input.Search
|
||||
placeholder={t("general.labels.search")}
|
||||
onSearch={(value) => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {...state.vehicle, search: value},
|
||||
});
|
||||
}}
|
||||
enterButton
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
loading={loading}
|
||||
scroll={{x: true}}
|
||||
pagination={{position: "top"}}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
dataSource={vehicles}
|
||||
onChange={handleTableChange}
|
||||
rowSelection={{
|
||||
onSelect: (props) => {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
none: false,
|
||||
new: false,
|
||||
selectedid: props.id,
|
||||
vehicleObj: props,
|
||||
},
|
||||
});
|
||||
},
|
||||
type: "radio",
|
||||
selectedRowKeys: [state.vehicle.selectedid],
|
||||
}}
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: (event) => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
none: false,
|
||||
new: false,
|
||||
selectedid: record.id,
|
||||
vehicleObj: record,
|
||||
},
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
setState({
|
||||
...state,
|
||||
vehicle: {
|
||||
...state.vehicle,
|
||||
selectedid: null,
|
||||
vehicleObj: null,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user