82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
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())
|
|
);
|
|
|
|
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,
|
|
},
|
|
},
|
|
});
|
|
setOpen(false);
|
|
setSearch("");
|
|
}}
|
|
>
|
|
<PlusOutlined />
|
|
</Button>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
return (
|
|
<Popover
|
|
content={popContent}
|
|
trigger="click"
|
|
open={open}
|
|
placement="left"
|
|
onOpenChange={handleOpenChange}
|
|
destroyTooltipOnHide
|
|
>
|
|
<SearchOutlined style={{ cursor: "pointer" }} />
|
|
</Popover>
|
|
);
|
|
}
|