Files
bodyshop/client/src/components/owner-find-modal/owner-find-modal.component.jsx

126 lines
3.5 KiB
JavaScript

import { Checkbox, Divider, Table } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import PhoneFormatter from "../../utils/PhoneFormatter";
export default function OwnerFindModalComponent({
selectedOwner,
setSelectedOwner,
ownersListLoading,
ownersList
}) {
//setSelectedOwner is used to set the record id of the owner to use for adding the job.
const { t } = useTranslation();
const columns = [
{
title: t("owners.fields.ownr_ln"),
dataIndex: "ownr_ln",
key: "ownr_ln"
//width: "8%",
// onFilter: (value, record) => record.ro_number.includes(value),
// // filteredValue: state.filteredInfo.text || null,
// sorter: (a, b) => alphaSort(a, b),
// sortOrder:
// state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
},
{
title: t("owners.fields.ownr_fn"),
dataIndex: "ownr_fn",
key: "ownr_fn"
// ellipsis: true,
// sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
// //width: "25%",
// sortOrder:
// state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
},
{
title: t("owners.fields.ownr_addr1"),
dataIndex: "ownr_addr1",
key: "ownr_addr1"
// sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
// sortOrder:
// state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
//ellipsis: true
},
{
title: t("owners.fields.ownr_city"),
dataIndex: "ownr_city",
key: "ownr_city"
// sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
// sortOrder:
// state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("owners.fields.ownr_ea"),
dataIndex: "ownr_ea",
key: "ownr_ea"
// sorter: (a, b) => a.clm_amt - b.clm_amt,
// sortOrder:
// state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("owners.fields.ownr_ph1"),
dataIndex: "ownr_ph1",
key: "ownr_ph1",
render: (text, record) => (
<PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
)
// sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
// sortOrder:
// state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
}
];
const handleOnRowClick = record => {
if (record) {
if (record.id) {
setSelectedOwner(record.id);
return;
}
}
setSelectedOwner(null);
};
return (
<div>
<Table
title={() => t("owners.labels.existing_owners")}
size="small"
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
loading={ownersListLoading}
dataSource={ownersList}
rowSelection={{
onSelect: props => {
setSelectedOwner(props.id);
},
type: "radio",
selectedRowKeys: [selectedOwner]
}}
onRow={(record, rowIndex) => {
return {
onClick: event => {
handleOnRowClick(record);
}
};
}}
/>
<Divider />
<Checkbox
checked={selectedOwner ? false : true}
onClick={() => setSelectedOwner(null)}
>
Create a new Owner record for this job.
</Checkbox>
</div>
);
}