128 lines
4.1 KiB
JavaScript
128 lines
4.1 KiB
JavaScript
import { Card, Input, Table } from "antd";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { alphaSort } from "../../utils/sorters";
|
|
|
|
export default function ContractsCarsComponent({ loading, data, selectedCarId, handleSelect }) {
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
filteredInfo: { text: "" },
|
|
search: ""
|
|
});
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const columns = [
|
|
{
|
|
title: t("courtesycars.fields.fleetnumber"),
|
|
dataIndex: "fleetnumber",
|
|
key: "fleetnumber",
|
|
sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
|
|
sortOrder: state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.status"),
|
|
dataIndex: "status",
|
|
key: "status",
|
|
sorter: (a, b) => alphaSort(a.status, b.status),
|
|
sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
|
|
render: (text, record) => <div>{t(record.status)}</div>
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.readiness"),
|
|
dataIndex: "readiness",
|
|
key: "readiness",
|
|
sorter: (a, b) => alphaSort(a.readiness, b.readiness),
|
|
sortOrder: state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
|
|
render: (text, record) => t(record.readiness)
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.year"),
|
|
dataIndex: "year",
|
|
key: "year",
|
|
sorter: (a, b) => alphaSort(a.year, b.year),
|
|
sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.make"),
|
|
dataIndex: "make",
|
|
key: "make",
|
|
sorter: (a, b) => alphaSort(a.make, b.make),
|
|
sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.model"),
|
|
dataIndex: "model",
|
|
key: "model",
|
|
sorter: (a, b) => alphaSort(a.model, b.model),
|
|
sortOrder: state.sortedInfo.columnKey === "model" && state.sortedInfo.order
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.color"),
|
|
dataIndex: "color",
|
|
key: "color",
|
|
sorter: (a, b) => alphaSort(a.color, b.color),
|
|
sortOrder: state.sortedInfo.columnKey === "color" && state.sortedInfo.order
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.plate"),
|
|
dataIndex: "plate",
|
|
key: "plate",
|
|
sorter: (a, b) => alphaSort(a.plate, b.plate),
|
|
sortOrder: state.sortedInfo.columnKey === "plate" && state.sortedInfo.order
|
|
}
|
|
];
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
|
|
const filteredData =
|
|
state.search === ""
|
|
? data
|
|
: data.filter(
|
|
(cc) =>
|
|
(cc.fleetnumber || "").toLowerCase().includes(state.search.toLowerCase()) ||
|
|
(cc.status || "").toLowerCase().includes(state.search.toLowerCase()) ||
|
|
(cc.year || "").toLowerCase().includes(state.search.toLowerCase()) ||
|
|
(cc.make || "").toLowerCase().includes(state.search.toLowerCase()) ||
|
|
(cc.model || "").toLowerCase().includes(state.search.toLowerCase()) ||
|
|
(cc.color || "").toLowerCase().includes(state.search.toLowerCase()) ||
|
|
(cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<Card
|
|
title={t("contracts.labels.availablecars")}
|
|
extra={
|
|
<Input.Search
|
|
placeholder={t("general.labels.search")}
|
|
value={state.search}
|
|
onChange={(e) => setState({ ...state, search: e.target.value })}
|
|
/>
|
|
}
|
|
>
|
|
<Table
|
|
loading={loading}
|
|
pagination={{ position: "top" }}
|
|
columns={columns}
|
|
rowKey="id"
|
|
dataSource={filteredData}
|
|
onChange={handleTableChange}
|
|
rowSelection={{
|
|
onSelect: handleSelect,
|
|
type: "radio",
|
|
selectedRowKeys: [selectedCarId]
|
|
}}
|
|
onRow={(record) => {
|
|
return {
|
|
onClick: () => {
|
|
handleSelect(record);
|
|
}
|
|
};
|
|
}}
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|