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

import { Input, Table, Button, Icon, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters";
import { DateTimeFormatter } from "../../utils/DateFormatter";
export default function JobsAvailableComponent({
  loading,
  data,
  refetch,
  deleteJob,
  deleteAllNewJobs
}) {
  const { t } = useTranslation();

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

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

  const columns = [
    {
      title: t("jobs.fields.cieca_id"),
      dataIndex: "cieca_id",
      key: "cieca_id",
      //width: "8%",
      // onFilter: (value, record) => record.ro_number.includes(value),
      // filteredValue: state.filteredInfo.text || null,
      sorter: (a, b) => alphaSort(a, b),
      sortOrder:
        state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.owner"),
      dataIndex: "ownr_name",
      key: "ownr_name",
      ellipsis: true,
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      //width: "25%",
      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
      //ellipsis: true
    },
    {
      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
      //width: "12%",
      //ellipsis: true
    },
    {
      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
      //width: "12%",
      //ellipsis: true
    },
    {
      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
      //width: "12%",
      //ellipsis: true
    },
    {
      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) => (
        <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
      )
      //width: "12%",
      //ellipsis: true
    },
    {
      title: t("general.labels.actions"),
      key: "actions",
      render: (text, record) => (
        <span>
          <Button
            onClick={() => {
              deleteJob({ variables: { id: record.id } }).then(r => {
                notification["success"]({
                  message: t("jobs.successes.deleted")
                });
                refetch();
              });
            }}
          >
            <Icon type="delete" />
          </Button>
          <Button
            onClick={() => {
              alert("Add");
            }}
          >
            <Icon type="plus" />
          </Button>
        </span>
      )
      //width: "12%",
      //ellipsis: true
    }
  ];

  return (
    <Table
      loading={loading}
      title={() => {
        return (
          <div>
            <Input.Search
              placeholder="Search..."
              onSearch={value => {
                console.log(value);
              }}
              enterButton
            />
            <Button
              onClick={() => {
                refetch();
              }}
            >
              <Icon type="sync" />
            </Button>
            <Button
              onClick={() => {
                deleteAllNewJobs()
                  .then(r => {
                    notification["success"]({
                      message: t("jobs.successes.all_deleted", {
                        count: r.data.delete_available_jobs.affected_rows
                      })
                    });
                    refetch();
                  })
                  .catch(r => {
                    notification["error"]({
                      message: t("jobs.errors.deleted") + " " + r.message
                    });
                  });
              }}
            >
              Delete All
            </Button>
          </div>
        );
      }}
      size="small"
      pagination={{ position: "top" }}
      columns={columns.map(item => ({ ...item }))}
      rowKey="id"
      dataSource={data && data.available_jobs}
      onChange={handleTableChange}
    />
  );
}