Files
bodyshop/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
2021-07-02 12:53:18 -07:00

80 lines
2.2 KiB
JavaScript

import React, { useEffect, useState } from "react";
import { socket } from "../../pages/dms/dms.container";
import { alphaSort } from "../../utils/sorters";
import { Table } from "antd";
import { useTranslation } from "react-i18next";
export default function DmsCustomerSelector() {
const { t } = useTranslation();
const [customerList, setcustomerList] = useState([]);
const [selectedCustomer, setSelectedCustomer] = useState(null);
useEffect(() => {
socket.on("cdk-select-customer", (customerList) => {
setcustomerList(customerList);
console.log("Received a customer list.", customerList);
});
return () => {
socket.removeListener("cdk-select-customer");
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const columns = [
{
title: t("owners.fields.ownr_ln"),
dataIndex: "ownr_ln",
key: "ownr_ln",
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
},
{
title: t("owners.fields.ownr_fn"),
dataIndex: "ownr_fn",
key: "ownr_fn",
sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
},
{
title: t("owners.fields.ownr_co_nm"),
dataIndex: "ownr_co_nm",
key: "ownr_co_nm",
sorter: (a, b) => alphaSort(a.ownr_co_nm, b.ownr_co_nm),
},
{
title: t("owners.fields.ownr_addr1"),
dataIndex: "ownr_addr1",
key: "ownr_addr1",
sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
},
{
title: t("owners.fields.ownr_city"),
dataIndex: "ownr_city",
key: "ownr_city",
sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
},
{
title: t("owners.fields.ownr_ea"),
dataIndex: "ownr_ea",
key: "ownr_ea",
sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
},
];
return (
<Table
//scroll={{ x: true }}
pagination={{ position: "top" }}
columns={columns}
rowKey="id.value"
dataSource={customerList}
//onChange={handleTableChange}
rowSelection={{
onSelect: (props) => {
setSelectedCustomer(props.id);
},
type: "radio",
selectedRowKeys: [selectedCustomer],
}}
/>
);
}