116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Modal, Button, Table, Input } from "antd";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
//currentUser: selectCurrentUser
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkMakes);
|
|
|
|
export function DmsCdkMakes({ bodyshop, form, socket }) {
|
|
const [makesList, setMakesList] = useState([]);
|
|
const [searchText, setSearchText] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [visible, setVisible] = useState(false);
|
|
const [selectedModel, setSelectedModel] = useState(null);
|
|
const { t } = useTranslation();
|
|
const columns = [
|
|
{
|
|
title: t("jobs.fields.dms.makeFullName"),
|
|
dataIndex: "makeFullName",
|
|
key: "makeFullName",
|
|
},
|
|
{
|
|
title: t("jobs.fields.dms.modelFullName"),
|
|
dataIndex: "modelFullName",
|
|
key: "modelFullName",
|
|
},
|
|
{
|
|
title: t("jobs.fields.dms.makeCode"),
|
|
dataIndex: "makeCode",
|
|
key: "makeCode",
|
|
},
|
|
{
|
|
title: t("jobs.fields.dms.modelCode"),
|
|
dataIndex: "modelCode",
|
|
key: "modelCode",
|
|
},
|
|
];
|
|
|
|
const filteredMakes =
|
|
searchText !== "" && searchText
|
|
? makesList.filter(
|
|
(make) =>
|
|
searchText
|
|
.split(" ")
|
|
.some((v) =>
|
|
make.makeFullName.toLowerCase().includes(v.toLowerCase())
|
|
) ||
|
|
searchText
|
|
.split(" ")
|
|
.some((v) =>
|
|
make.modelFullName.toLowerCase().includes(v.toLowerCase())
|
|
)
|
|
)
|
|
: makesList;
|
|
|
|
return (
|
|
<div>
|
|
<Modal width={"90%"} visible={visible} onCancel={() => setVisible(false)}>
|
|
<Table
|
|
title={() => (
|
|
<Input.Search
|
|
onSearch={(val) => setSearchText(val)}
|
|
placeholder={t("general.labels.search")}
|
|
/>
|
|
)}
|
|
columns={columns}
|
|
loading={loading}
|
|
id="id"
|
|
dataSource={filteredMakes}
|
|
onRow={(record) => {
|
|
return {
|
|
onClick: setSelectedModel(record),
|
|
};
|
|
}}
|
|
rowSelection={{
|
|
onSelect: (record, selected, ...props) => {
|
|
console.log(
|
|
"🚀 ~ file: dms-cdk-makes.component.jsx ~ line 85 ~ record, selected, ...props",
|
|
record,
|
|
selected,
|
|
...props
|
|
);
|
|
|
|
setSelectedModel(record);
|
|
},
|
|
|
|
type: "radio",
|
|
selectedRowKeys: [selectedModel && selectedModel.id],
|
|
}}
|
|
/>
|
|
</Modal>
|
|
<Button
|
|
onClick={() => {
|
|
setVisible(true);
|
|
setLoading(true);
|
|
socket.emit("cdk-get-makes", bodyshop.cdk_dealerid, (makes) => {
|
|
console.log("Called back", makes);
|
|
setMakesList(makes);
|
|
setLoading(false);
|
|
});
|
|
}}
|
|
>
|
|
Get Makes
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|