bodyshop/client/src/components/job-audit-trail/job-audit-trail.component.jsx

import { SyncOutlined } from "@ant-design/icons";
import { useQuery } from "@apollo/client";
import { Button, Card, Col, Row, Table, Tag } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";

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

export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
  const { t } = useTranslation();
  const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
    variables: { jobid: jobId },
    skip: !jobId,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  const columns = [
    {
      title: t("audit.fields.created"),
      dataIndex: "created",
      key: "created",
      render: (text, record) => <DateTimeFormatter>{record.created}</DateTimeFormatter>
    },
    {
      title: t("audit.fields.useremail"),
      dataIndex: "useremail",
      key: "useremail"
    },
    {
      title: t("audit.fields.operation"),
      dataIndex: "operation",
      key: "operation",
      render: (text, record) => (
        <BlurWrapperComponent featureName="audit" bypass>
          <div>{text}</div>
        </BlurWrapperComponent>
      )
    }
  ];
  const emailColumns = [
    {
      title: t("audit.fields.created"),
      dataIndex: " created_at",
      key: " created_at",

      render: (text, record) => <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
    },

    {
      title: t("audit.fields.useremail"),
      dataIndex: "useremail",
      key: "useremail"
    },

    {
      title: t("audit.fields.to"),
      dataIndex: "to",
      key: "to",

      render: (text, record) =>
        record.to &&
        record.to.map((email, idx) => (
          <Tag key={idx}>
            <BlurWrapperComponent featureName="audit" bypass>
              <div>{email}</div>
            </BlurWrapperComponent>
          </Tag>
        ))
    },
    {
      title: t("audit.fields.cc"),
      dataIndex: "cc",
      key: "cc",

      render: (text, record) =>
        record.cc &&
        record.cc.map((email, idx) => (
          <Tag key={idx}>
            <BlurWrapperComponent featureName="audit" bypass>
              <div>{email}</div>
            </BlurWrapperComponent>
          </Tag>
        ))
    },
    {
      title: t("audit.fields.subject"),
      dataIndex: "subject",
      key: "subject",
      render: (text, record) => (
        <BlurWrapperComponent featureName="audit" bypass>
          <div>{text}</div>
        </BlurWrapperComponent>
      )
    },
    {
      title: t("audit.fields.status"),
      dataIndex: "status",
      key: "status",
      render: (text, record) => (
        <BlurWrapperComponent featureName="audit" bypass>
          <div>{text}</div>
        </BlurWrapperComponent>
      )
    },

    {
      title: t("audit.fields.contents"),
      dataIndex: "contents",
      key: "contents",
      width: "10%",
      render: (text, record) => (
        <Button
          onClick={() => {
            var win = window.open(
              "",
              "Title",
              "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
            );
            win.document.body.innerHTML = record.contents;
          }}
        >
          Preview
        </Button>
      )
    }
  ];

  const hasAuditAccess = HasFeatureAccess({ bodyshop, featureName: "audit" });
  return (
    <Row gutter={[16, 16]}>
      {!hasAuditAccess && (
        <Col span={24}>
          <Card>
            <UpsellComponent upsell={UpsellEnum().audit.general} disableMask />
          </Card>
        </Col>
      )}
      <Col span={24}>
        <Card
          title={t("jobs.labels.audit")}
          extra={
            <Button
              onClick={() => {
                refetch();
              }}
            >
              <SyncOutlined />
            </Button>
          }
        >
          <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
        </Card>
      </Col>
      <Col span={24}>
        <Card title={t("jobs.labels.emailaudit")}>
          <Table loading={loading} columns={emailColumns} rowKey="id" dataSource={data ? data.email_audit_trail : []} />
        </Card>
      </Col>
    </Row>
  );
}