bodyshop/client/src/components/parts-queue-card/parts-queue-job-lines.component.jsx

import { Card, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { onlyUnique } from "../../utils/arrayHelper";
import { alphaSort } from "../../utils/sorters";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly,
});

const mapDispatchToProps = (dispatch) => ({});

export function PartsQueueJobLinesComponent({ jobRO, loading, jobLines }) {
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: {},
  });
  const { t } = useTranslation();

  const columns = [
    {
      title: "#",
      dataIndex: "line_no",
      key: "line_no",
      sorter: (a, b) => a.line_no - b.line_no,
      sortOrder:
        state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order,
    },
    {
      title: t("joblines.fields.line_desc"),
      dataIndex: "line_desc",
      key: "line_desc",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
      onCell: (record) => ({
        className: record.manual_line && "job-line-manual",
        style: {
          ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {}),
        },
      }),
      sortOrder:
        state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
      ellipsis: true,
    },
    {
      title: t("joblines.fields.oem_partno"),
      dataIndex: "oem_partno",
      key: "oem_partno",
      sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
      sortOrder:
        state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
      ellipsis: true,
      render: (text, record) =>
        `${record.oem_partno || ""} ${
          record.alt_partno ? `(${record.alt_partno})` : ""
        }`.trim(),
    },
    {
      title: t("joblines.fields.part_type"),
      dataIndex: "part_type",
      key: "part_type",
      filteredValue: state.filteredInfo.part_type || null,
      sorter: (a, b) => alphaSort(a.part_type, b.part_type),
      sortOrder:
        state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
      filters: [
        {
          text: t("jobs.labels.partsfilter"),
          value: [
            "PAN",
            "PAC",
            "PAR",
            "PAL",
            "PAA",
            "PAM",
            "PAP",
            "PAS",
            "PASL",
            "PAG",
          ],
        },
        {
          text: t("joblines.fields.part_types.PAN"),
          value: ["PAN"],
        },
        {
          text: t("joblines.fields.part_types.PAP"),
          value: ["PAP"],
        },
        {
          text: t("joblines.fields.part_types.PAL"),
          value: ["PAL"],
        },
        {
          text: t("joblines.fields.part_types.PAA"),
          value: ["PAA"],
        },
        {
          text: t("joblines.fields.part_types.PAG"),
          value: ["PAG"],
        },
        {
          text: t("joblines.fields.part_types.PAS"),
          value: ["PAS"],
        },
        {
          text: t("joblines.fields.part_types.PASL"),
          value: ["PASL"],
        },
        {
          text: t("joblines.fields.part_types.PAC"),
          value: ["PAC"],
        },
        {
          text: t("joblines.fields.part_types.PAR"),
          value: ["PAR"],
        },
        {
          text: t("joblines.fields.part_types.PAM"),
          value: ["PAM"],
        },
      ],
      onFilter: (value, record) => value.includes(record.part_type),
      render: (text, record) =>
        record.part_type
          ? t(`joblines.fields.part_types.${record.part_type}`)
          : null,
    },
    {
      title: t("joblines.fields.part_qty"),
      dataIndex: "part_qty",
      key: "part_qty",
    },
    {
      title: t("joblines.fields.act_price"),
      dataIndex: "act_price",
      key: "act_price",
      sorter: (a, b) => a.act_price - b.act_price,
      sortOrder:
        state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
      ellipsis: true,
      render: (text, record) => (
        <CurrencyFormatter>
          {record.db_ref === "900510" || record.db_ref === "900511"
            ? record.prt_dsmk_m
            : record.act_price}
        </CurrencyFormatter>
      ),
    },
    {
      title: t("joblines.fields.location"),
      dataIndex: "location",
      key: "location",
    },
    {
      title: t("joblines.fields.status"),
      dataIndex: "status",
      key: "status",
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder:
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
      filteredValue: state.filteredInfo.status || null,
      filters:
        (jobLines &&
          jobLines
            .map((l) => l.status)
            .filter(onlyUnique)
            .map((s) => {
              return {
                text: s || "No Status*",
                value: [s],
              };
            })) ||
        [],
      onFilter: (value, record) => value.includes(record.status),
    },
  ];

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

  return (
    <Card title={t("jobs.labels.parts_lines")}>
      <Table
        columns={columns}
        rowKey="id"
        loading={loading}
        pagination={false}
        dataSource={jobLines}
        onChange={handleTableChange}
      />
    </Card>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PartsQueueJobLinesComponent);