143 lines
4.5 KiB
JavaScript
143 lines
4.5 KiB
JavaScript
import { Table, Button, Input } from "antd";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router-dom";
|
|
import { alphaSort } from "../../utils/sorters";
|
|
import { SyncOutlined } from "@ant-design/icons";
|
|
export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
filteredInfo: { text: "" },
|
|
});
|
|
const [searchText, setSearchText] = useState("");
|
|
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.vin"),
|
|
dataIndex: "vin",
|
|
key: "vin",
|
|
sorter: (a, b) => alphaSort(a.vin, b.vin),
|
|
sortOrder: state.sortedInfo.columnKey === "vin" && state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<Link to={`/manage/courtesycars/${record.id}`}>{record.vin}</Link>
|
|
),
|
|
},
|
|
{
|
|
title: t("courtesycars.fields.status"),
|
|
dataIndex: "status",
|
|
key: "status",
|
|
sorter: (a, b) => alphaSort(a.status, b.status),
|
|
filters: [
|
|
{
|
|
text: t("courtesycars.status.in"),
|
|
value: "courtesycars.status.in",
|
|
},
|
|
{
|
|
text: t("courtesycars.status.out"),
|
|
value: "courtesycars.status.out",
|
|
},
|
|
],
|
|
onFilter: (value, record) => value.includes(record.status),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
|
|
render: (text, record) => t(record.status),
|
|
},
|
|
{
|
|
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.labels.outwith"),
|
|
dataIndex: "outwith",
|
|
key: "outwith",
|
|
// sorter: (a, b) => alphaSort(a.model, b.model),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<div>
|
|
{record.cccontracts.length === 1
|
|
? record.cccontracts[0].job.ro_number
|
|
: null}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
|
|
const tableData = searchText
|
|
? courtesycars.filter(
|
|
(c) =>
|
|
(c.fleetnumber || "")
|
|
.toLowerCase()
|
|
.includes(searchText.toLowerCase()) ||
|
|
(c.vin || "").toLowerCase().includes(searchText.toLowerCase()) ||
|
|
(c.year || "").toLowerCase().includes(searchText.toLowerCase()) ||
|
|
(c.make || "").toLowerCase().includes(searchText.toLowerCase()) ||
|
|
(c.model || "").toLowerCase().includes(searchText.toLowerCase()) ||
|
|
(t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
|
|
)
|
|
: courtesycars;
|
|
return (
|
|
<Table
|
|
loading={loading}
|
|
title={() => (
|
|
<div className="imex-table-header">
|
|
<Button onClick={() => refetch()}>
|
|
<SyncOutlined />
|
|
</Button>
|
|
<Link to={`/manage/courtesycars/new`}>
|
|
<Button>{t("courtesycars.actions.new")}</Button>
|
|
</Link>
|
|
<Input.Search
|
|
className="imex-table-header__search"
|
|
placeholder={t("general.labels.search")}
|
|
onChange={(e) => {
|
|
setSearchText(e.target.value);
|
|
}}
|
|
value={searchText}
|
|
enterButton
|
|
/>
|
|
</div>
|
|
)}
|
|
size="small"
|
|
pagination={{ position: "top" }}
|
|
columns={columns.map((item) => ({ ...item }))}
|
|
rowKey="id"
|
|
dataSource={tableData}
|
|
onChange={handleTableChange}
|
|
/>
|
|
);
|
|
}
|