bodyshop/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx

import { Card, Input, Space, Table } from "antd";
import { useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import { alphaSort } from "../../utils/sorters";
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";

export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles }) {
  const [state, setState] = useContext(JobCreateContext);
  const [tableState, setTableState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" }
  });

  const { t } = useTranslation();

  const columns = [
    {
      title: t("vehicles.fields.v_vin"),
      dataIndex: "v_vin",
      key: "v_vin",
      sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
      sortOrder: tableState.sortedInfo.columnKey === "v_vin" && tableState.sortedInfo.order,
      render: (text, record) => (
        <Link to={"/manage/vehicles/" + record.id}>
          <VehicleVinDisplay>{record.v_vin}</VehicleVinDisplay>
        </Link>
      )
    },
    {
      title: t("vehicles.fields.description"),
      dataIndex: "description",
      key: "description",
      render: (text, record) => {
        return <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>;
      }
    },
    {
      title: t("vehicles.fields.plate_no"),
      dataIndex: "plate",
      key: "plate",
      render: (text, record) => {
        return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
      }
    }
  ];

  const handleTableChange = (pagination, filters, sorter) => {
    setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter });
  };

  return (
    <Card
      extra={
        <Space wrap>
          <Input.Search
            placeholder={t("general.labels.search")}
            onSearch={(value) => {
              setState({
                ...state,
                vehicle: { ...state.vehicle, search: value }
              });
            }}
            enterButton
            id="search-vehicle"
          />
        </Space>
      }
    >
      <Table
        loading={loading}
        scroll={{ x: true }}
        pagination={{ position: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={vehicles}
        onChange={handleTableChange}
        rowSelection={{
          onSelect: (props) => {
            setState({
              ...state,
              vehicle: {
                ...state.vehicle,
                none: false,
                new: false,
                selectedid: props.id,
                vehicleObj: props
              }
            });
          },
          type: "radio",
          selectedRowKeys: [state.vehicle.selectedid]
        }}
        onRow={(record) => {
          return {
            onClick: () => {
              if (record) {
                if (record.id) {
                  setState({
                    ...state,
                    vehicle: {
                      ...state.vehicle,
                      none: false,
                      new: false,
                      selectedid: record.id,
                      vehicleObj: record
                    }
                  });

                  return;
                }
              }
              setState({
                ...state,
                vehicle: {
                  ...state.vehicle,
                  selectedid: null,
                  vehicleObj: null
                }
              });
            }
          };
        }}
      />
    </Card>
  );
}