BOD-5 BOD-36 #comment Added Audit Trail List to jobs and created Audit List view component + queries

client/src/components/audit-trail-list/audit-trail-list.component.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { Table } from "antd";
+import { alphaSort } from "../../utils/sorters";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { useTranslation } from "react-i18next";
+import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values.component";
+
+export default function AuditTrailListComponent({ loading, data }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {}
+  });
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("audit.fields.created"),
+      dataIndex: " created",
+      key: " created",
+
+      render: (text, record) => (
+        <DateTimeFormatter>{record.created}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => a.created - b.created,
+      sortOrder:
+        state.sortedInfo.columnKey === "created" && state.sortedInfo.order
+    },
+    {
+      title: t("audit.fields.operation"),
+      dataIndex: "operation",
+      key: "operation",
+      sorter: (a, b) => alphaSort(a.operation, b.operation),
+      sortOrder:
+        state.sortedInfo.columnKey === "operation" && state.sortedInfo.order
+    },
+    {
+      title: t("audit.fields.values"),
+      dataIndex: " old_val",
+      key: " old_val",
+      render: (text, record) => (
+        <AuditTrailValuesComponent
+          oldV={record.old_val}
+          newV={record.new_val}
+        />
+      )
+    },
+    {
+      title: t("audit.fields.useremail"),
+      dataIndex: "useremail",
+      key: "useremail",
+      sorter: (a, b) => alphaSort(a.useremail, b.useremail),
+      sortOrder:
+        state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order
+    }
+  ];
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 12 },
+      sm: { span: 5 }
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 12 }
+    }
+  };
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Table
+      {...formItemLayout}
+      loading={loading}
+      size="small"
+      pagination={{ position: "top", defaultPageSize: 25 }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={data}
+      onChange={handleTableChange}
+    />
+  );
+}

client/src/components/audit-trail-list/audit-trail-list.container.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import AuditTrailListComponent from "./audit-trail-list.component";
+import { useQuery } from "react-apollo";
+import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
+import AlertComponent from "../alert/alert.component";
+
+export default function AuditTrailListContainer({ recordId }) {
+  const { loading, error, data } = useQuery(QUERY_AUDIT_TRAIL, {
+    variables: { id: recordId },
+    fetchPolicy: "network-only"
+  });
+  return (
+    <div>
+      {error ? (
+        <AlertComponent type="error" message={error.message} />
+      ) : (
+        <AuditTrailListComponent
+          loading={loading}
+          data={data ? data.audit_trail : null}
+        />
+      )}
+    </div>
+  );
+}

client/src/components/audit-trail-values/audit-trail-values.component.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { List } from "antd";
+import Icon from "@ant-design/icons";
+import { FaArrowRight } from "react-icons/fa";
+export default function AuditTrailValuesComponent({ oldV, newV }) {
+  return (
+    <List bordered size="small">
+      {Object.keys(oldV).map((key, idx) => (
+        <List.Item key={idx} value={key}>
+          {key}: {oldV[key]} <Icon component={FaArrowRight} /> {newV[key]}
+        </List.Item>
+      ))}
+    </List>
+  );
+}