bodyshop/client/src/components/job-detail-lines/job-lines.component.jsx

import {
  DeleteFilled,
  FilterFilled,
  SyncOutlined,
  WarningFilled,
  EditFilled,
} from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import {
  Button,
  Dropdown,
  Input,
  Menu,
  PageHeader,
  Space,
  Table,
  Tag,
} from "antd";
import axios from "axios";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { DELETE_JOB_LINE_BY_PK } from "../../graphql/jobs-lines.queries";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { onlyUnique } from "../../utils/arrayHelper";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
import JobLineStatusPopup from "../job-line-status-popup/job-line-status-popup.component";
import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-reference.component";
// import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
// import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
// import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
import _ from "lodash";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  jobRO: selectJobReadOnly,
  technician: selectTechnician,
});

const mapDispatchToProps = (dispatch) => ({
  setJobLineEditContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
  setPartsOrderContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
});

export function JobLinesComponent({
  jobRO,
  technician,
  setPartsOrderContext,
  loading,
  refetch,
  jobLines,
  setSearchText,
  job,
  setJobLineEditContext,
  form,
}) {
  const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);

  const [selectedLines, setSelectedLines] = useState([]);
  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,
      fixed: "left",
      sortOrder:
        state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order,
    },
    {
      title: t("joblines.fields.line_desc"),
      dataIndex: "line_desc",
      fixed: "left",
      key: "line_desc",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
      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,
    },
    {
      title: t("joblines.fields.op_code_desc"),
      dataIndex: "op_code_desc",
      key: "op_code_desc",
      sorter: (a, b) => alphaSort(a.op_code_desc, b.op_code_desc),
      sortOrder:
        state.sortedInfo.columnKey === "op_code_desc" && state.sortedInfo.order,
      ellipsis: true,
      render: (text, record) =>
        `${record.op_code_desc || ""}${
          record.alt_partm ? ` ${record.alt_partm}` : ""
        }`,
    },
    {
      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", "PAP", "PAL", "PAA", "PAS", "PASL"],
        },
        {
          text: t("joblines.fields.part_types.PAN"),
          value: ["PAN", "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.PAS"),
          value: ["PAS", "PASL"],
        },
      ],
      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.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.act_price}</CurrencyFormatter>
          {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
            <span
              style={{ marginLeft: ".2rem" }}
            >{`(${record.prt_dsmk_p}%)`}</span>
          ) : (
            <></>
          )}
        </>
      ),
    },
    {
      title: t("joblines.fields.part_qty"),
      dataIndex: "part_qty",
      key: "part_qty",
    },
    // {
    //   title: t("joblines.fields.total"),
    //   dataIndex: "total",
    //   key: "total",
    //   sorter: (a, b) => a.act_price * a.part_qty - b.act_price * b.part_qty,
    //   sortOrder:
    //     state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
    //   ellipsis: true,
    //   render: (text, record) => (
    //     <CurrencyFormatter>
    //       {record.act_price * record.part_qty}
    //     </CurrencyFormatter>
    //   ),
    // },
    {
      title: t("joblines.fields.mod_lbr_ty"),
      dataIndex: "mod_lbr_ty",
      key: "mod_lbr_ty",

      sorter: (a, b) => alphaSort(a.mod_lbr_ty, b.mod_lbr_ty),
      sortOrder:
        state.sortedInfo.columnKey === "mod_lbr_ty" && state.sortedInfo.order,
      render: (text, record) =>
        record.mod_lbr_ty
          ? t(`joblines.fields.lbr_types.${record.mod_lbr_ty}`)
          : null,
    },
    {
      title: t("joblines.fields.mod_lb_hrs"),
      dataIndex: "mod_lb_hrs",
      key: "mod_lb_hrs",

      sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs,
      sortOrder:
        state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order,
    },
    {
      title: t("joblines.fields.line_ind"),
      dataIndex: "line_ind",
      key: "line_ind",
      sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
      sortOrder:
        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
      responsive: ["md"],
    },
    {
      title: t("joblines.fields.notes"),
      dataIndex: "notes",
      key: "notes",
      render: (text, record) => (
        <JobLineNotePopup disabled={jobRO} jobline={record} />
      ),
    },
    {
      title: t("joblines.fields.location"),
      dataIndex: "location",
      key: "location",
      render: (text, record) => (
        <JobLineLocationPopup jobline={record} disabled={jobRO} />
      ),
    },
    {
      title: t("joblines.labels.billref"),
      dataIndex: "billref",
      key: "billref",
      render: (text, record) => <JobLinesBillRefernece jobline={record} />,
      responsive: ["md"],
    },
    {
      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),
      render: (text, record) => (
        <JobLineStatusPopup jobline={record} disabled={jobRO} />
      ),
    },
    {
      title: t("general.labels.actions"),
      dataIndex: "actions",
      key: "actions",
      render: (text, record) => (
        <div>
          {record.manual_line && (
            <Space>
              <Button
                disabled={jobRO}
                onClick={() => {
                  setJobLineEditContext({
                    actions: { refetch: refetch, submit: form && form.submit },
                    context: record,
                  });
                }}
              >
                <EditFilled />
              </Button>
              <Button
                disabled={jobRO}
                onClick={async () => {
                  await deleteJobLine({
                    variables: { joblineId: record.id },
                    // update(cache) {
                    //   cache.modify({
                    //     id: cache.identify(job),
                    //     fields: {
                    //       joblines(existingJobLines, { readField }) {
                    //         return existingJobLines.filter(
                    //           (jlRef) => record.id !== readField("id", jlRef)
                    //         );
                    //       },
                    //     },
                    //   });
                    // },
                  });
                  await axios.post("/job/totalsssu", {
                    id: job.id,
                  });
                  refetch && refetch();
                }}
              >
                <DeleteFilled />
              </Button>
            </Space>
          )}
        </div>
      ),
    },
  ];

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

  const handleMark = (e) => {
    if (e.key === "clear") {
      setSelectedLines([]);
    } else {
      const markedTypes = [e.key];
      if (e.key === "PAN") markedTypes.push("PAP");
      if (e.key === "PAS") markedTypes.push("PASL");
      setSelectedLines(
        _.uniq([
          ...selectedLines,
          ...jobLines.filter((item) => markedTypes.includes(item.part_type)),
        ])
      );
    }
  };

  const markMenu = (
    <Menu onClick={handleMark}>
      <Menu.Item key="PAA">{t("joblines.fields.part_types.PAA")}</Menu.Item>
      <Menu.Item key="PAN">{t("joblines.fields.part_types.PAN")}</Menu.Item>
      <Menu.Item key="PAL">{t("joblines.fields.part_types.PAL")}</Menu.Item>
      <Menu.Item key="PAS">{t("joblines.fields.part_types.PAS")}</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="clear">{t("general.labels.clear")}</Menu.Item>
    </Menu>
  );

  return (
    <div>
      <PartsOrderModalContainer />
      <PageHeader
        title={t("jobs.labels.estimatelines")}
        extra={
          <Space wrap>
            <Button onClick={() => refetch()}>
              <SyncOutlined />
            </Button>

            {job.special_coverage_policy && (
              <Tag color="tomato">
                <Space>
                  <WarningFilled />
                  <span>{t("jobs.labels.specialcoveragepolicy")}</span>
                </Space>
              </Tag>
            )}
            <Button
              disabled={
                (job && !job.converted) ||
                (selectedLines.length > 0 ? false : true) ||
                jobRO ||
                technician
              }
              onClick={() => {
                setPartsOrderContext({
                  actions: { refetch: refetch },
                  context: {
                    jobId: job.id,
                    job: job,
                    linesToOrder: selectedLines,
                  },
                });

                //Clear out the selected lines. IO-785
                setSelectedLines([]);
              }}
            >
              {t("parts.actions.order")}
              {selectedLines.length > 0 && ` (${selectedLines.length})`}
            </Button>
            <Button
              onClick={() => {
                setState({
                  ...state,
                  filteredInfo: {
                    part_type: ["PAN,PAC,PAR,PAL,PAA,PAM,PAP,PAS,PASL,PAG"],
                  },
                });
              }}
            >
              <FilterFilled /> {t("jobs.actions.filterpartsonly")}
            </Button>
            <Dropdown overlay={markMenu} trigger={["click"]}>
              <Button>{t("jobs.actions.mark")}</Button>
            </Dropdown>
            <Button
              disabled={jobRO || technician}
              onClick={() => {
                setJobLineEditContext({
                  actions: { refetch: refetch },
                  context: { jobid: job.id },
                });
              }}
            >
              {t("joblines.actions.new")}
            </Button>
            <Input.Search
              placeholder={t("general.labels.search")}
              onChange={(e) => {
                e.preventDefault();
                setSearchText(e.target.value);
              }}
            />
          </Space>
        }
      />
      <Table
        columns={columns}
        rowKey="id"
        loading={loading}
        pagination={false}
        dataSource={jobLines}
        onChange={handleTableChange}
        scroll={{
          x: true,
        }}
        onRow={(record, rowIndex) => {
          return {
            onDoubleClick: (event) => {
              const notMatchingLines = selectedLines.filter(
                (i) => i.id !== record.id
              );
              notMatchingLines.length !== selectedLines.length
                ? setSelectedLines(notMatchingLines)
                : setSelectedLines([...selectedLines, record]);
            }, // double click row
          };
        }}
        rowSelection={{
          selectedRowKeys: selectedLines.map((item) => item.id),
          onSelectAll: (selected, selectedRows, changeRows) => {
            setSelectedLines(selectedRows);
          },
          onSelect: (record, selected, selectedRows, nativeEvent) =>
            setSelectedLines(selectedRows),
        }}
      />
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobLinesComponent);