IO-1676 Add RO Comment.

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -21,6 +21,7 @@ import ProductionListColumnProductionNote from "../production-list-columns/produ
 import "./jobs-detail-header.styles.scss";
 import JobsRelatedRos from "../jobs-related-ros/jobs-related-ros.component";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -86,6 +87,12 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                 ) : null}
               </Space>
             </DataLabel>
+            <DataLabel
+              label={t("jobs.fields.comment")}
+              valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}
+            >
+              <ProductionListColumnComment record={job} />
+            </DataLabel>
             <DataLabel label={t("jobs.fields.ins_co_nm_short")}>
               {job.ins_co_nm}
             </DataLabel>

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -30,7 +30,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      width: "8%",
+
       sorter: true, //(a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder: sortcolumn === "ro_number" && sortorder,
 
@@ -47,7 +47,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       key: "ownr_ln",
       ellipsis: true,
       //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      width: "25%",
+
       //sortOrder: sortcolumn === "ownr_ln" && sortorder,
       render: (text, record) => {
         return record.ownerid ? (
@@ -67,7 +67,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
-      width: "12%",
+
       ellipsis: true,
       render: (text, record) => (
         <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
@@ -77,7 +77,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
-      width: "12%",
+
       ellipsis: true,
       render: (text, record) => (
         <StartChatButton phone={record.ownr_ph2} jobid={record.id} />
@@ -87,7 +87,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
-      width: "10%",
+
       ellipsis: true,
       sorter: true, // (a, b) => alphaSort(a.status, b.status),
       sortOrder: sortcolumn === "status" && sortorder,
@@ -104,7 +104,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
       key: "vehicle",
-      width: "15%",
+
       ellipsis: true,
       render: (text, record) => {
         return record.vehicleid ? (
@@ -124,7 +124,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("vehicles.fields.plate_no"),
       dataIndex: "plate_no",
       key: "plate_no",
-      width: "8%",
+
       ellipsis: true,
       sorter: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
       sortOrder: sortcolumn === "plate_no" && sortorder,
@@ -136,7 +136,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
-      width: "12%",
+
       ellipsis: true,
       sorter: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder: sortcolumn === "clm_no" && sortorder,
@@ -155,7 +155,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",
       key: "clm_total",
-      width: "10%",
+
       sorter: true, //(a, b) => a.clm_total - b.clm_total,
       sortOrder: sortcolumn === "clm_total" && sortorder,
       render: (text, record) => {
@@ -170,11 +170,17 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.owner_owing"),
       dataIndex: "owner_owing",
       key: "owner_owing",
-      width: "8%",
+
       render: (text, record) => (
         <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
       ),
     },
+    {
+      title: t("jobs.fields.comment"),
+      dataIndex: "comment",
+      key: "comment",
+      ellipsis: true,
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -224,7 +230,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     >
       <Table
         loading={loading}
-        scroll={{ x: true }}
         pagination={{
           position: "top",
           pageSize: 25,

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

@@ -60,6 +60,9 @@ export function JobsList({ bodyshop }) {
             (j.ownr_co_nm || "")
               .toLowerCase()
               .includes(searchText.toLowerCase()) ||
+            (j.comments || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
             (j.ownr_fn || "")
               .toLowerCase()
               .includes(searchText.toLowerCase()) ||
@@ -262,6 +265,13 @@ export function JobsList({ bodyshop }) {
         <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
       ),
     },
+    {
+      title: t("jobs.fields.comment"),
+      dataIndex: "comment",
+      key: "comment",
+      ellipsis: true,
+      responsive: ["md"],
+    },
     // {
     //   title: t("jobs.fields.owner_owing"),
     //   dataIndex: "owner_owing",

client/src/components/production-list-columns/production-list-columns.comment.component.jsx

@@ -0,0 +1,79 @@
+import Icon from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { Button, Input, Popover } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FaRegStickyNote } from "react-icons/fa";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+export default function ProductionListColumnComment({ record }) {
+  const { t } = useTranslation();
+
+  const [note, setNote] = useState(record.comment || "");
+
+  const [visible, setVisible] = useState(false);
+
+  const [updateAlert] = useMutation(UPDATE_JOB);
+
+  const handleSaveNote = (e) => {
+    e.stopPropagation();
+    setVisible(false);
+    updateAlert({
+      variables: {
+        jobId: record.id,
+        job: {
+          comment: note,
+        },
+      },
+    }).then(() => {
+      if (record.refetch) record.refetch();
+    });
+  };
+
+  const handleChange = (e) => {
+    e.stopPropagation();
+    setNote(e.target.value);
+  };
+
+  const handleVisibleChange = (flag) => {
+    setVisible(flag);
+    if (flag) setNote(record.comment || "");
+  };
+
+  return (
+    <Popover
+      onVisibleChange={handleVisibleChange}
+      visible={visible}
+      content={
+        <div style={{ width: "30em" }}>
+          <Input.TextArea
+            rows={5}
+            value={note}
+            onChange={handleChange}
+            // onPressEnter={handleSaveNote}
+            autoFocus
+            allowClear
+          />
+          <div>
+            <Button onClick={handleSaveNote}>
+              {t("general.actions.save")}
+            </Button>
+          </div>
+        </div>
+      }
+      trigger={["click"]}
+    >
+      <div
+        style={{
+          width: "100%",
+          height: "19px",
+          cursor: "pointer",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
+        {record.comment || " "}
+      </div>
+    </Popover>
+  );
+}

client/src/components/production-list-columns/production-list-columns.data.js

@@ -20,6 +20,7 @@ import ProductionListColumnNote from "./production-list-columns.productionnote.c
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionListColumnCategory from "./production-list-columns.status.category";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
+import ProductionListColumnComment from "./production-list-columns.comment.component";
 
 const r = ({ technician, state, activeStatuses, bodyshop }) => {
   return [
@@ -109,7 +110,11 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.columnKey === "scheduled_completion" &&
         state.sortedInfo.order,
       render: (text, record) => (
-        <ProductionListDate record={record} field="scheduled_completion" pastIndicator />
+        <ProductionListDate
+          record={record}
+          field="scheduled_completion"
+          pastIndicator
+        />
       ),
     },
     {
@@ -156,7 +161,11 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.columnKey === "scheduled_delivery" &&
         state.sortedInfo.order,
       render: (text, record) => (
-        <ProductionListDate record={record} field="scheduled_delivery" pastIndicator/>
+        <ProductionListDate
+          record={record}
+          field="scheduled_delivery"
+          pastIndicator
+        />
       ),
     },
     {
@@ -325,6 +334,13 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
       ellipsis: true,
       render: (text, record) => <ProductionListColumnNote record={record} />,
     },
+    {
+      title: i18n.t("production.labels.comment"),
+      dataIndex: "comment",
+      key: "comment",
+      ellipsis: true,
+      render: (text, record) => <ProductionListColumnComment record={record} />,
+    },
     {
       title: i18n.t("production.labels.touchtime"),
       dataIndex: "tt",