bodyshop/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

import { Table, Button, Input, Card, Space } 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.fields.plate"),
      dataIndex: "plate",
      key: "plate",
      sorter: (a, b) => alphaSort(a.plate, b.plate),
      sortOrder:
        state.sortedInfo.columnKey === "plate" && 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 (
    <Card
      title={t("menus.header.courtesycars")}
      extra={
        <Space wrap>
          <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
          />
        </Space>
      }
    >
      <Table
        loading={loading}
        pagination={{ position: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={tableData}
        onChange={handleTableChange}
      />
    </Card>
  );
}