bodyshop/client/src/components/invoices-list-table/invoices-list-table.component.jsx

import { Button, Descriptions, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";

export default function InvoicesListTableComponent({
  loading,
  invoices,
  selectedInvoice,
  handleOnRowClick,
}) {
  const { t } = useTranslation();

  const [state, setState] = useState({
    sortedInfo: {},
  });

  const columns = [
    {
      title: t("invoices.fields.vendorname"),
      dataIndex: "vendorname",
      key: "vendorname",
      sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
      sortOrder:
        state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
      render: (text, record) => <span>{record.vendor.name}</span>,
    },
    {
      title: t("invoices.fields.invoice_number"),
      dataIndex: "invoice_number",
      key: "invoice_number",
      sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
      sortOrder:
        state.sortedInfo.columnKey === "invoice_number" &&
        state.sortedInfo.order,
    },
    {
      title: t("invoices.fields.date"),
      dataIndex: "date",
      key: "date",

      sorter: (a, b) => a.date - b.date,
      sortOrder:
        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
    },
    {
      title: t("invoices.fields.total"),
      dataIndex: "total",
      key: "total",

      sorter: (a, b) => a.total - b.total,
      sortOrder:
        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
      render: (text, record) => (
        <CurrencyFormatter>{record.total}</CurrencyFormatter>
      ),
    },
    {
      title: t("general.labels.actions"),
      dataIndex: "actions",
      key: "actions",
      render: (text, record) => (
        <Link to={`/manage/invoices/${record.id}`}>
          <Button>{t("invoices.actions.edit")}</Button>
        </Link>
      ),
    },
  ];

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

  const rowExpander = (record) => {
    const columns = [
      {
        title: t("invoicelines.fields.line_desc"),
        dataIndex: "line_desc",
        key: "line_desc",
        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
        sortOrder:
          state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
      },
      {
        title: t("invoicelines.fields.retail"),
        dataIndex: "actual_price",
        key: "actual_price",
        sorter: (a, b) => a.actual_price - b.actual_price,
        sortOrder:
          state.sortedInfo.columnKey === "actual_price" &&
          state.sortedInfo.order,
        render: (text, record) => (
          <CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
        ),
      },
      {
        title: t("invoicelines.fields.actual_cost"),
        dataIndex: "actual_cost",
        key: "actual_cost",
        sorter: (a, b) => a.actual_cost - b.actual_cost,
        sortOrder:
          state.sortedInfo.columnKey === "actual_cost" &&
          state.sortedInfo.order,
        render: (text, record) => (
          <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
        ),
      },
      {
        title: t("invoicelines.fields.cost_center"),
        dataIndex: "cost_center",
        key: "cost_center",
        sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
        sortOrder:
          state.sortedInfo.columnKey === "cost_center" &&
          state.sortedInfo.order,
      },
    ];

    return (
      <div>
        <Descriptions title="User Info">
          <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
          <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
          <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
          <Descriptions.Item label="Remark">empty</Descriptions.Item>
          <Descriptions.Item label="Address">
            No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
          </Descriptions.Item>
        </Descriptions>
        <Table
          size="small"
          pagination={{ position: "top", defaultPageSize: 25 }}
          columns={columns.map((item) => ({ ...item }))}
          rowKey="id"
          dataSource={record.invoicelines}
        />
      </div>
    );
  };

  return (
    <Table
      loading={loading}
      size="small"
      expandedRowRender={rowExpander}
      pagination={{ position: "top", defaultPageSize: 25 }}
      columns={columns.map((item) => ({ ...item }))}
      rowKey="id"
      dataSource={invoices}
      onChange={handleTableChange}
      expandable={{
        expandedRowKeys: [selectedInvoice],
        onExpand: (expanded, record) => {
          handleOnRowClick(expanded ? record : null);
        },
      }}
      rowSelection={{
        onSelect: (record) => {
          handleOnRowClick(record);
        },
        selectedRowKeys: [selectedInvoice],
        type: "radio",
      }}
      onRow={(record, rowIndex) => {
        return {
          onClick: (event) => {
            handleOnRowClick(record);
          }, // click row
          onDoubleClick: (event) => {}, // double click row
          onContextMenu: (event) => {}, // right button click row
          onMouseEnter: (event) => {}, // mouse enter row
          onMouseLeave: (event) => {}, // mouse leave row
        };
      }}
    />
  );
}