bodyshop/client/src/components/jobs-available-table/jobs-available-table.component.jsx

import { DeleteFilled, DownloadOutlined, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
import { useMutation } from "@apollo/client/react";
import { Alert, Button, Card, Input, Space, Table } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { DELETE_ALL_AVAILABLE_JOBS, DELETE_AVAILABLE_JOB } from "../../graphql/available-jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { TimeAgoFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { logImEXEvent } from "../../firebase/firebase.utils.js";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsAvailableComponent);

export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJobAsNew, addJobAsSupp }) {
  const [deleteAllAvailableJobs] = useMutation(DELETE_ALL_AVAILABLE_JOBS);
  const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
  const { t } = useTranslation();
  const [searchText, setSearchText] = useState("");
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" }
  });
  const notification = useNotification();

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

  const columns = [
    {
      title: t("jobs.fields.cieca_id"),
      dataIndex: "cieca_id",
      key: "cieca_id",
      sorter: (a, b) => alphaSort(a.cieca_id, b.cieca_id),
      sortOrder: state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.ro_number"),
      dataIndex: "job_id",
      key: "job_id",
      //width: "8%",
      // onFilter: (value, record) => record.ro_number.includes(value),
      // filteredValue: state.filteredInfo.text || null,
      sorter: (a, b) => alphaSort(a.job && a.job.ro_number, b.job && b.job.ro_number),
      sortOrder: state.sortedInfo.columnKey === "job_id" && state.sortedInfo.order,
      render: (text, record) =>
        record.job ? (
          <Link to={`/manage/jobs/${record.job.id}`}>
            {(record.job && record.job.ro_number) || t("general.labels.na")}
          </Link>
        ) : (
          <div>{(record.job && record.job.ro_number) || t("general.labels.na")}</div>
        )
    },
    {
      title: t("jobs.fields.owner"),
      dataIndex: "ownr_name",
      key: "ownr_name",
      ellipsis: true,
      sorter: (a, b) => alphaSort(a.ownr_name, b.ownr_name),
      sortOrder: state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.vehicle"),
      dataIndex: "vehicle_info",
      key: "vehicle_info",
      sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
      sortOrder: state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.clm_no"),
      dataIndex: "clm_no",
      key: "clm_no",
      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
      sortOrder: state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.ins_co_nm"),
      dataIndex: "ins_co_nm",
      key: "ins_co_nm",
      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
      sortOrder: state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.clm_total"),
      dataIndex: "clm_amt",
      key: "clm_amt",
      sorter: (a, b) => a.clm_amt - b.clm_amt,
      sortOrder: state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order,
      render: (text, record) => <CurrencyFormatter>{record.clm_amt}</CurrencyFormatter>
    },
    {
      title: t("jobs.fields.uploaded_by"),
      dataIndex: "uploaded_by",
      key: "uploaded_by",
      sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
      sortOrder: state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.updated_at"),
      dataIndex: "updated_at",
      key: "updated_at",
      sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
      sortOrder: state.sortedInfo.columnKey === "updated_at" && state.sortedInfo.order,
      render: (text, record) => <TimeAgoFormatter>{record.updated_at}</TimeAgoFormatter>
    },
    {
      title: t("general.labels.actions"),
      key: "actions",
      render: (text, record) => {
        const isClosed =
          record.job &&
          (record.job.status === bodyshop.md_ro_statuses.default_exported ||
            record.job.status === bodyshop.md_ro_statuses.default_invoiced);
        return (
          <Space wrap>
            <Button
              onClick={() => {
                deleteJob({ variables: { id: record.id } }).then(() => {
                  notification.success({
                    title: t("jobs.successes.deleted")
                  });
                  refetch();
                });
              }}
              icon={<DeleteFilled />}
            />
            {!isClosed && (
              <>
                <Button
                  onClick={() => addJobAsNew(record)}
                  disabled={record.issupplement}
                  icon={<PlusCircleFilled />}
                />
                <Button onClick={() => addJobAsSupp(record)} icon={<DownloadOutlined />} />
              </>
            )}
            {isClosed && <Alert type="error" title={t("jobs.labels.alreadyclosed")}></Alert>}
          </Space>
        );
      }
    }
  ];

  const availableJobs = data
    ? searchText
      ? data.available_jobs.filter(
          (j) =>
            (j.ownr_name || "").toLowerCase().includes(searchText.toLowerCase()) ||
            (j.vehicle_info || "").toLowerCase().includes(searchText.toLowerCase()) ||
            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
        )
      : data.available_jobs
    : [];

  return (
    <Card
      title={t("jobs.labels.availablejobs")}
      extra={
        <Space wrap>
          <Button
            onClick={() => {
              refetch();
            }}
            icon={<SyncOutlined />}
          />
          <Button
            onClick={() => {
              deleteAllAvailableJobs()
                .then((r) => {
                  notification.success({
                    title: t("jobs.successes.all_deleted", {
                      count: r.data.delete_available_jobs.affected_rows
                    })
                  });
                  refetch();
                })
                .catch((r) => {
                  notification.error({
                    title: t("jobs.errors.deleted") + " " + r.message
                  });
                });
            }}
          >
            {t("general.actions.deleteall")}
          </Button>
          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
              setSearchText(e.currentTarget.value);
            }}
            enterButton
          />
          <Link to="/manage/jobs/new">
            <Button>{t("jobs.actions.manualnew")}</Button>
          </Link>
        </Space>
      }
    >
      <Table loading={loading} columns={columns} rowKey="id" dataSource={availableJobs} onChange={handleTableChange} />
    </Card>
  );
}