Notes lifecycle events added to job details.

client/src/components/jobs-notes/jobs-notes.container.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import JobNotesComponent from "./jobs.notes.component";
+import { useQuery, useMutation } from "react-apollo";
+import AlertComponent from "../../components/alert/alert.component";
+//import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
+import {
+  QUERY_NOTES_BY_JOB_PK,
+  DELETE_NOTE
+} from "../../graphql/notes.queries";
+
+export default function JobNotesContainer({ jobId }) {
+  const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+
+
+  const [deleteNote] = useMutation(DELETE_NOTE);
+
+  //if (loading) return <SpinComponent />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+  return (
+    <JobNotesComponent
+      jobId={jobId}
+      loading={loading}
+      data={data ? data.jobs_by_pk.notes : null}
+      refetch={refetch}
+      deleteNote={deleteNote}
+    />
+  );
+}

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Table, Button, Icon, notification } from "antd";
+import { useTranslation } from "react-i18next";
+import Moment from "react-moment";
+import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
+
+export default function JobNotesComponent({
+  loading,
+  data,
+  refetch,
+  deleteNote,
+  jobId
+}) {
+  const { t } = useTranslation();
+  const [noteModalVisible, setNoteModalVisible] = useState(false);
+  const [existingNote, setExistingNote] = useState(null);
+  const columns = [
+    {
+      title: t("notes.fields.text"),
+      dataIndex: "text",
+      key: "text",
+      ellipsis: true
+    },
+    {
+      title: t("notes.fields.updatedat"),
+      dataIndex: "updated_at",
+      key: "updated_at",
+      defaultSortOrder: "descend",
+      sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
+      render: (text, record) => (
+        <span>
+          <Moment format='MM/DD/YYYY @ HH:mm'>{record.updated_at}</Moment>
+        </span>
+      )
+    },
+    {
+      title: t("notes.fields.createdby"),
+      dataIndex: "created_by",
+      key: "created_by"
+    },
+    {
+      title: t("notes.actions.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <span>
+          <Button
+            onClick={() => {
+              deleteNote({
+                variables: {
+                  noteId: record.id
+                }
+              }).then(r => {
+                refetch();
+                notification["success"]({
+                  message: t("notes.successes.deleted")
+                });
+              });
+            }}>
+            <Icon type='delete' />
+          </Button>
+          <Button
+            onClick={() => {
+              setExistingNote(record);
+              setNoteModalVisible(true);
+            }}>
+            <Icon type='edit' />
+          </Button>
+        </span>
+      )
+    }
+  ];
+
+  return (
+    <div>
+      <NoteUpsertModal
+        jobId={jobId}
+        visible={noteModalVisible}
+        changeVisibility={setNoteModalVisible}
+        refetch={refetch}
+        existingNote={existingNote}
+      />
+      <Table
+        loading={loading}
+        pagination={{ position: "bottom" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey='id'
+        dataSource={data}
+      />
+    </div>
+  );
+}