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

import { Card, Input, Table } from "antd";
import { useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters";

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

  const { t } = useTranslation();

  const columns = [
    {
      title: t("owners.fields.ownr_ln"),
      dataIndex: "ownr_ln",
      key: "ownr_ln",
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_ln" && tableState.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_fn"),
      dataIndex: "ownr_fn",
      key: "ownr_fn",
      sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_fn" && tableState.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_co_nm"),
      dataIndex: "ownr_co_nm",
      key: "ownr_co_nm",
      sorter: (a, b) => alphaSort(a.ownr_co_nm, b.ownr_co_nm),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_co_nm" && tableState.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_addr1"),
      dataIndex: "ownr_addr1",
      key: "ownr_addr1",
      sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_addr1" && tableState.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_city"),
      dataIndex: "ownr_city",
      key: "ownr_city",
      sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_city" && tableState.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_ea"),
      dataIndex: "ownr_ea",
      key: "ownr_ea",
      sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_ea" && tableState.sortedInfo.order
    },
    {
      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.ownr_ph1, b.ownr_ph1),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_ph1" && tableState.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_ph2"),
      dataIndex: "ownr_ph2",
      key: "ownr_ph2",
      render: (text, record) => <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>,
      sorter: (a, b) => alphaSort(a.ownr_ph2, b.ownr_ph2),
      sortOrder: tableState.sortedInfo.columnKey === "ownr_ph2" && tableState.sortedInfo.order
    }
  ];

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

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

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