- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,73 +1,70 @@
-import { useMutation, useQuery } from "@apollo/client";
-import { notification } from "antd";
-import React, { useState } from "react";
+import {useMutation, useQuery} from "@apollo/client";
+import {notification} from "antd";
+import React, {useState} from "react";
 //import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import {
-  DELETE_NOTE,
-  QUERY_NOTES_BY_JOB_PK,
-} from "../../graphql/notes.queries";
-import { insertAuditTrail } from "../../redux/application/application.actions";
+import {logImEXEvent} from "../../firebase/firebase.utils";
+import {DELETE_NOTE, QUERY_NOTES_BY_JOB_PK,} from "../../graphql/notes.queries";
+import {insertAuditTrail} from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import JobNotesComponent from "./jobs.notes.component";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+    //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation }) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
+    insertAuditTrail: ({jobid, operation}) =>
+        dispatch(insertAuditTrail({jobid, operation})),
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobNotesContainer);
 
-export function JobNotesContainer({ jobId, insertAuditTrail }) {
-  const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, {
-    variables: { id: jobId },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-
-  const [deleteNote] = useMutation(DELETE_NOTE);
-  const { t } = useTranslation();
-  const [deleteLoading, setDeleteLoading] = useState(false);
-  const handleNoteDelete = (id) => {
-    logImEXEvent("job_note_delete");
-    setDeleteLoading(true);
-    deleteNote({
-      variables: {
-        noteId: id,
-      },
-    }).then((r) => {
-      refetch();
-      notification["success"]({
-        message: t("notes.successes.deleted"),
-      });
-      insertAuditTrail({
-        jobid: jobId,
-        operation: AuditTrailMapping.jobnotedeleted(),
-      });
+export function JobNotesContainer({jobId, insertAuditTrail}) {
+    const {loading, error, data, refetch} = useQuery(QUERY_NOTES_BY_JOB_PK, {
+        variables: {id: jobId},
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
     });
-    setDeleteLoading(false);
-  };
 
-  //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}
-      relatedRos={
-        data ? data.jobs_by_pk.vehicle && data.jobs_by_pk.vehicle.jobs : null
-      }
-      refetch={refetch}
-      deleteLoading={deleteLoading}
-      handleNoteDelete={handleNoteDelete}
-      ro_number={data ? data.jobs_by_pk.ro_number : null}
-    />
-  );
+    const [deleteNote] = useMutation(DELETE_NOTE);
+    const {t} = useTranslation();
+    const [deleteLoading, setDeleteLoading] = useState(false);
+    const handleNoteDelete = (id) => {
+        logImEXEvent("job_note_delete");
+        setDeleteLoading(true);
+        deleteNote({
+            variables: {
+                noteId: id,
+            },
+        }).then((r) => {
+            refetch();
+            notification["success"]({
+                message: t("notes.successes.deleted"),
+            });
+            insertAuditTrail({
+                jobid: jobId,
+                operation: AuditTrailMapping.jobnotedeleted(),
+            });
+        });
+        setDeleteLoading(false);
+    };
+
+    //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}
+            relatedRos={
+                data ? data.jobs_by_pk.vehicle && data.jobs_by_pk.vehicle.jobs : null
+            }
+            refetch={refetch}
+            deleteLoading={deleteLoading}
+            handleNoteDelete={handleNoteDelete}
+            ro_number={data ? data.jobs_by_pk.ro_number : null}
+        />
+    );
 }

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

@@ -1,215 +1,210 @@
-import {
-  AuditOutlined,
-  DeleteFilled,
-  EditFilled,
-  EyeInvisibleFilled,
-  WarningFilled,
-} from "@ant-design/icons";
-import { Button, Card, Form, Input, Space, Table } from "antd";
+import {AuditOutlined, DeleteFilled, EditFilled, EyeInvisibleFilled, WarningFilled,} from "@ant-design/icons";
+import {Button, Card, Form, Input, Space, Table} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-import { TemplateList } from "../../utils/TemplateConstants";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectJobReadOnly} from "../../redux/application/application.selectors";
+import {setModalContext} from "../../redux/modals/modals.actions";
+import {DateTimeFormatter} from "../../utils/DateFormatter";
+import {TemplateList} from "../../utils/TemplateConstants";
 import useLocalStorage from "../../utils/useLocalStorage";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
-  jobRO: selectJobReadOnly,
+    jobRO: selectJobReadOnly,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setNoteUpsertContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "noteUpsert" })),
+    setNoteUpsertContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "noteUpsert"})),
 });
 
 export function JobNotesComponent({
-  jobRO,
-  loading,
-  data,
-  refetch,
-  handleNoteDelete,
-  jobId,
-  setNoteUpsertContext,
-  deleteLoading,
-  ro_number,
-  relatedRos,
-}) {
-  const { t } = useTranslation();
-  const [filter, setFilter] = useLocalStorage("filter_job_notes_icons", null);
+                                      jobRO,
+                                      loading,
+                                      data,
+                                      refetch,
+                                      handleNoteDelete,
+                                      jobId,
+                                      setNoteUpsertContext,
+                                      deleteLoading,
+                                      ro_number,
+                                      relatedRos,
+                                  }) {
+    const {t} = useTranslation();
+    const [filter, setFilter] = useLocalStorage("filter_job_notes_icons", null);
 
-  const Templates = TemplateList("job_special", {
-    ro_number,
-  });
+    const Templates = TemplateList("job_special", {
+        ro_number,
+    });
 
-  const columns = [
-    {
-      title: "",
-      dataIndex: "icons",
-      key: "icons",
-      width: 80,
-      filteredValue: filter?.icons || null,
-      filters: [
+    const columns = [
         {
-          text: t("notes.labels.usernotes"),
-          value: false,
-        },
-        {
-          text: t("notes.labels.systemnotes"),
-          value: true,
-        },
-      ],
-      onFilter: (value, record) => record.audit === value,
-      render: (text, record) => (
-        <span>
+            title: "",
+            dataIndex: "icons",
+            key: "icons",
+            width: 80,
+            filteredValue: filter?.icons || null,
+            filters: [
+                {
+                    text: t("notes.labels.usernotes"),
+                    value: false,
+                },
+                {
+                    text: t("notes.labels.systemnotes"),
+                    value: true,
+                },
+            ],
+            onFilter: (value, record) => record.audit === value,
+            render: (text, record) => (
+                <span>
           {record.critical ? (
-            <WarningFilled style={{ margin: 4, color: "red" }} />
+              <WarningFilled style={{margin: 4, color: "red"}}/>
           ) : null}
-          {record.private ? <EyeInvisibleFilled style={{ margin: 4 }} /> : null}
-          {record.audit ? <AuditOutlined style={{ margin: 4 }} /> : null}
+                    {record.private ? <EyeInvisibleFilled style={{margin: 4}}/> : null}
+                    {record.audit ? <AuditOutlined style={{margin: 4}}/> : null}
         </span>
-      ),
-    },
-    {
-      title: t("notes.fields.type"),
-      dataIndex: "type",
-      key: "type",
-      width: 120,
-      filteredValue: filter?.type || null,
-      filters: [
-        { value: "general", text: t("notes.fields.types.general") },
-        { value: "customer", text: t("notes.fields.types.customer") },
-        { value: "shop", text: t("notes.fields.types.shop") },
-        { value: "office", text: t("notes.fields.types.office") },
-        { value: "parts", text: t("notes.fields.types.parts") },
-        { value: "paint", text: t("notes.fields.types.paint") },
-        {
-          value: "supplement",
-          text: t("notes.fields.types.supplement"),
+            ),
         },
-      ],
-      onFilter: (value, record) => value.includes(record.type),
-      render: (text, record) => t(`notes.fields.types.${record.type}`),
-    },
-    {
-      title: t("notes.fields.text"),
-      dataIndex: "text",
-      key: "text",
-      ellipsis: true,
-      render: (text, record) => (
-        <span style={{ whiteSpace: "pre-line" }}>{text}</span>
-      ),
-    },
-
-    {
-      title: t("notes.fields.updatedat"),
-      dataIndex: "updated_at",
-      key: "updated_at",
-      defaultSortOrder: "descend",
-      width: 200,
-      sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
-      render: (text, record) => (
-        <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
-      ),
-    },
-    {
-      title: t("notes.fields.createdby"),
-      dataIndex: "created_by",
-      key: "created_by",
-      width: 200,
-    },
-    {
-      title: t("notes.actions.actions"),
-      dataIndex: "actions",
-      key: "actions",
-      width: 200,
-      render: (text, record) => (
-        <Space wrap>
-          <Button
-            loading={deleteLoading}
-            disabled={record.audit || jobRO}
-            onClick={() => handleNoteDelete(record.id)}
-          >
-            <DeleteFilled />
-          </Button>
-          <Button
-            disabled={record.audit || jobRO}
-            onClick={() => {
-              setNoteUpsertContext({
-                actions: { refetch: refetch },
-                context: {
-                  jobId: jobId,
-                  existingNote: record,
+        {
+            title: t("notes.fields.type"),
+            dataIndex: "type",
+            key: "type",
+            width: 120,
+            filteredValue: filter?.type || null,
+            filters: [
+                {value: "general", text: t("notes.fields.types.general")},
+                {value: "customer", text: t("notes.fields.types.customer")},
+                {value: "shop", text: t("notes.fields.types.shop")},
+                {value: "office", text: t("notes.fields.types.office")},
+                {value: "parts", text: t("notes.fields.types.parts")},
+                {value: "paint", text: t("notes.fields.types.paint")},
+                {
+                    value: "supplement",
+                    text: t("notes.fields.types.supplement"),
                 },
-              });
-            }}
-          >
-            <EditFilled />
-          </Button>
-          <PrintWrapperComponent
-            templateObject={{
-              name: Templates.individual_job_note.key,
+            ],
+            onFilter: (value, record) => value.includes(record.type),
+            render: (text, record) => t(`notes.fields.types.${record.type}`),
+        },
+        {
+            title: t("notes.fields.text"),
+            dataIndex: "text",
+            key: "text",
+            ellipsis: true,
+            render: (text, record) => (
+                <span style={{whiteSpace: "pre-line"}}>{text}</span>
+            ),
+        },
 
-              variables: { id: record.id },
-            }}
-            messageObject={{
-              subject: Templates.individual_job_note.subject,
-            }}
-            id={jobId}
-          />
-        </Space>
-      ),
-    },
-  ];
+        {
+            title: t("notes.fields.updatedat"),
+            dataIndex: "updated_at",
+            key: "updated_at",
+            defaultSortOrder: "descend",
+            width: 200,
+            sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
+            render: (text, record) => (
+                <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
+            ),
+        },
+        {
+            title: t("notes.fields.createdby"),
+            dataIndex: "created_by",
+            key: "created_by",
+            width: 200,
+        },
+        {
+            title: t("notes.actions.actions"),
+            dataIndex: "actions",
+            key: "actions",
+            width: 200,
+            render: (text, record) => (
+                <Space wrap>
+                    <Button
+                        loading={deleteLoading}
+                        disabled={record.audit || jobRO}
+                        onClick={() => handleNoteDelete(record.id)}
+                    >
+                        <DeleteFilled/>
+                    </Button>
+                    <Button
+                        disabled={record.audit || jobRO}
+                        onClick={() => {
+                            setNoteUpsertContext({
+                                actions: {refetch: refetch},
+                                context: {
+                                    jobId: jobId,
+                                    existingNote: record,
+                                },
+                            });
+                        }}
+                    >
+                        <EditFilled/>
+                    </Button>
+                    <PrintWrapperComponent
+                        templateObject={{
+                            name: Templates.individual_job_note.key,
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    setFilter(filters);
-  };
+                            variables: {id: record.id},
+                        }}
+                        messageObject={{
+                            subject: Templates.individual_job_note.subject,
+                        }}
+                        id={jobId}
+                    />
+                </Space>
+            ),
+        },
+    ];
 
-  return (
-    <div>
-      <LayoutFormRow>
-        <Form.Item
-          label={t("jobs.fields.invoice_final_note")}
-          name="invoice_final_note"
-        >
-          <Input.TextArea disabled={jobRO} />
-        </Form.Item>
-      </LayoutFormRow>
-      <Card
-        title={t("jobs.labels.notes")}
-        extra={
-          <Button
-            onClick={() => {
-              setNoteUpsertContext({
-                actions: { refetch: refetch },
-                context: {
-                  jobId: jobId,
-                  relatedRos: relatedRos,
-                },
-              });
-            }}
-          >
-            {t("notes.actions.new")}
-          </Button>
-        }
-      >
-        <NoteUpsertModal />
+    const handleTableChange = (pagination, filters, sorter) => {
+        setFilter(filters);
+    };
 
-        <Table
-          loading={loading}
-          columns={columns}
-          rowKey="id"
-          dataSource={data}
-          onChange={handleTableChange}
-        />
-      </Card>
-    </div>
-  );
+    return (
+        <div>
+            <LayoutFormRow>
+                <Form.Item
+                    label={t("jobs.fields.invoice_final_note")}
+                    name="invoice_final_note"
+                >
+                    <Input.TextArea disabled={jobRO}/>
+                </Form.Item>
+            </LayoutFormRow>
+            <Card
+                title={t("jobs.labels.notes")}
+                extra={
+                    <Button
+                        onClick={() => {
+                            setNoteUpsertContext({
+                                actions: {refetch: refetch},
+                                context: {
+                                    jobId: jobId,
+                                    relatedRos: relatedRos,
+                                },
+                            });
+                        }}
+                    >
+                        {t("notes.actions.new")}
+                    </Button>
+                }
+            >
+                <NoteUpsertModal/>
+
+                <Table
+                    loading={loading}
+                    columns={columns}
+                    rowKey="id"
+                    dataSource={data}
+                    onChange={handleTableChange}
+                />
+            </Card>
+        </div>
+    );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobNotesComponent);