Notes lifecycle events added to job details.

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -20,7 +20,7 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 import "./job-detail-cards.styles.scss";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import NoteAddModal from "../note-add-modal/note-add-modal.component";
+import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 
 export default function JobDetailCards({ selectedJob }) {
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -39,7 +39,7 @@ export default function JobDetailCards({ selectedJob }) {
 
   return (
     <div className='job-cards-container'>
-      <NoteAddModal
+      <NoteUpsertModal
         jobId={data.jobs_by_pk.id}
         visible={noteModalVisible}
         changeVisibility={setNoteModalVisible}

client/src/components/job-lines/job-lines.component.jsx

@@ -40,13 +40,12 @@ export default function JobLinesComponent({ loading, joblines }) {
   //   setState({ ...state, filterinfo: { text: [value] } });
   // };
 
-console.log('joblines', joblines)
   return (
     <Table
       loading={loading}
       pagination={{ position: "bottom" }}
       columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
+      rowKey='id'
       dataSource={joblines}
       onChange={handleTableChange}
     />

client/src/components/job-tombstone/job-tombstone.component.jsx

@@ -96,7 +96,13 @@ function JobTombstone({ job, ...otherProps }) {
                 (jobContext.owner?.last_name ?? "")
               : t("jobs.errors.noowner")
           }
-          tags={<Tag color='blue'>{jobContext?.job_status?.name}</Tag>}
+          tags={
+            <span key='job-status'>
+              {jobContext.job_status ? (
+                <Tag color='blue'>{jobContext.job_status.name}</Tag>
+              ) : null}
+            </span>
+          }
           extra={[
             <Button
               key='convert'

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>
+  );
+}

client/src/components/note-add-modal/note-add-modal.component.jsx

@@ -1,81 +0,0 @@
-import { Input, Modal, Switch } from "antd";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useMutation } from "react-apollo";
-import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
-
-export default function NoteAddModal({
-  jobId,
-  visible,
-  changeVisibility,
-  refetch
-}) {
-  const [newNote, setnewNote] = useState({
-    private: false,
-    critical: false,
-    text: ""
-  });
-  const { t } = useTranslation();
-  const [insertNote] = useMutation(INSERT_NEW_NOTE);
-
-  return (
-    <Modal
-      title='Basic Modal'
-      visible={visible}
-      okText='Save'
-      onOk={() => {
-        insertNote({
-          variables: {
-            noteInput: [
-              { ...newNote, jobid: jobId, created_by: "patrick@bodyshop.app" }
-            ]
-          }
-        }).then(r => {
-          setnewNote({
-            private: false,
-            critical: false,
-            text: ""
-          });
-        });
-        console.log('refetch', refetch)
-        refetch();
-        changeVisibility(!visible);
-      }}
-      onCancel={() => {
-        changeVisibility(!visible);
-        setnewNote({
-          private: false,
-          critical: false,
-          text: ""
-        });
-      }}>
-      <div>
-        {t("notes.fields.critical")}
-        <Switch
-          title={t("notes.fields.critical")}
-          onChange={checked => {
-            setnewNote({ ...newNote, critical: checked });
-          }}
-        />
-      </div>
-      <div>
-        {t("notes.fields.private")}
-        <Switch
-          title={t("notes.fields.private")}
-          onChange={checked => {
-            setnewNote({ ...newNote, private: checked });
-          }}
-        />
-      </div>
-
-      <Input.TextArea
-        rows={8}
-        defaultValue={newNote.text}
-        placeholder={t("notes.labels.newnoteplaceholder")}
-        onChange={e => {
-          setnewNote({ ...newNote, text: e.target.value });
-        }}
-      />
-    </Modal>
-  );
-}

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -0,0 +1,57 @@
+import { Input, Modal, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function NoteUpsertModalComponent({
+  visible,
+  changeVisibility,
+  noteState,
+  setNoteState,
+  updateExistingNote,
+  insertNewNote
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      title={noteState?.id ? t("notes.actions.edit") : t("notes.actions.new")}
+      visible={visible}
+      okText={t("general.labels.save")}
+      onOk={() => {
+        noteState.id ? updateExistingNote() : insertNewNote();
+      }}
+      onCancel={() => {
+        changeVisibility(false);
+      }}>
+      <div>
+        {t("notes.fields.critical")}
+        <Switch
+          title={t("notes.fields.critical")}
+          checked={noteState.critical}
+          onChange={checked => {
+            setNoteState({ ...noteState, critical: checked });
+          }}
+        />
+      </div>
+      <div>
+        {t("notes.fields.private")}
+        <Switch
+          title={t("notes.fields.private")}
+          checked={noteState.private}
+          onChange={checked => {
+            setNoteState({ ...noteState, private: checked });
+          }}
+        />
+      </div>
+
+      <Input.TextArea
+        rows={8}
+        value={noteState.text}
+        placeholder={t("notes.labels.newnoteplaceholder")}
+        onChange={e => {
+          setNoteState({ ...noteState, text: e.target.value });
+        }}
+      />
+    </Modal>
+  );
+}

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -0,0 +1,75 @@
+import { notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
+import NoteUpsertModalComponent from "./note-upsert-modal.component";
+
+export default function NoteUpsertModalContainer({
+  jobId,
+  visible,
+  changeVisibility,
+  refetch,
+  existingNote
+}) {
+  const { t } = useTranslation();
+  const [insertNote] = useMutation(INSERT_NEW_NOTE);
+  const [updateNote] = useMutation(UPDATE_NOTE);
+
+  const [noteState, setNoteState] = useState({
+    private: false,
+    critical: false,
+    text: ""
+  });
+
+  useEffect(() => {
+    //Required to prevent infinite looping.
+    if (existingNote) {
+      setNoteState(existingNote);
+    }
+  }, [existingNote]);
+
+  const insertNewNote = () => {
+    insertNote({
+      variables: {
+        noteInput: [
+          { ...noteState, jobid: jobId, created_by: "patrick@bodyshop.app" } //TODO: Fix the created by.
+        ]
+      }
+    }).then(r => {
+      notification["success"]({
+        message: t("notes.successes.create")
+      });
+    });
+    refetch();
+    changeVisibility(!visible);
+  };
+
+  const updateExistingNote = () => {
+    //Required, otherwise unable to spread in new note prop.
+    delete noteState.__typename;
+    updateNote({
+      variables: {
+        noteId: noteState.id,
+        note: noteState
+      }
+    }).then(r => {
+      notification["success"]({
+        message: t("notes.successes.updated")
+      });
+    });
+    refetch();
+    changeVisibility(!visible);
+  };
+
+  return (
+    <NoteUpsertModalComponent
+      visible={visible}
+      changeVisibility={changeVisibility}
+      updateExistingNote={updateExistingNote}
+      insertNewNote={insertNewNote}
+      noteState={noteState}
+      setNoteState={setNoteState}
+    />
+  );
+}