Jobs list page updates & note adding modal.

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

@@ -1,10 +1,12 @@
+import { Input, Table, Icon } from "antd";
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { Table, Icon, Input, Dropdown, Menu } from "antd";
-import { alphaSort } from "../../utils/sorters";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+import { alphaSort } from "../../utils/sorters";
+import "./jobs-list.styles.scss";
 
-export default function JobsPage({
+export default function JobsList({
   loading,
   jobs,
   selectedJob,
@@ -17,38 +19,9 @@ export default function JobsPage({
 
   const { t } = useTranslation();
 
-  const actionMenu = (
-    <Menu>
-      <Menu.Item key="images">
-        <Icon type="file-image" />
-        {t("jobs.actions.viewJobImages")}
-      </Menu.Item>
-      <Menu.Item key="printing">
-        <Icon type="printer" />
-        {t("jobs.actions.printCenter")}
-      </Menu.Item>
-      <Menu.Item key="notes">
-        <Icon type="edit" />
-        {t("jobs.actions.notes")}
-      </Menu.Item>
-      <Menu.Item key="postinvoices">
-        <Icon type="shopping-cart" />
-        {t("jobs.actions.postInvoices")}
-      </Menu.Item>
-      <Menu.Item key="receiveparts">
-        <Icon type="inbox" />
-        {t("jobs.actions.receiveParts")}
-      </Menu.Item>
-      <Menu.Item key="partstatus">
-        <Icon type="tool" />
-        {t("jobs.actions.partStatus")}
-      </Menu.Item>
-    </Menu>
-  );
-
   const columns = [
     {
-      title: "RO #",
+      title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
       // onFilter: (value, record) => record.ro_number.includes(value),
@@ -56,67 +29,144 @@ export default function JobsPage({
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-      ellipsis: true,
+
       render: (text, record) => (
         <span>
-          <Link to={`/manage/jobs/${record.id}`}>{record.ro_number}</Link>
+          <Link to={"/manage/jobs/" + record.id}>
+            {record.ro_number ? record.ro_number : t("general.labels.na")}
+          </Link>
         </span>
       )
     },
     {
-      title: "Est. #",
-      dataIndex: "est_number",
-      key: "est_number"
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.pit_owner_last_name, b.pit_owner_last_name),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.owner ? (
+          <Link to={"/manage/owners/" + record.owner.id}>
+            {record.pit_owner_first_name} {record.pit_owner_last_name}
+          </Link>
+        ) : (
+          t("jobs.errors.noowner")
+        );
+      }
     },
     {
-      title: "Status",
+      title: t("jobs.fields.phone1"),
+      dataIndex: "pit_owner_phone",
+      key: "pit_owner_phone",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.pit_owner_phone ? (
+          <span>
+            <PhoneFormatter>{record.pit_owner_phone}</PhoneFormatter>
+            <Icon
+              style={{ margin: 4 }}
+              type='message'
+              onClick={() => {
+                alert("SMSing will happen here.");
+              }}
+            />
+          </span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
+      ellipsis: true,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      ellipsis: true,
       render: (text, record) => {
-        return record.job_status?.name ?? "";
+        return record.job_status?.name ?? t("general.labels.na");
       }
     },
+
     {
-      title: "Customer",
-      dataIndex: "customer",
-      key: "customer",
-      render: (text, record) => {
-        return record.owner ? (
-          <div>
-            {record.owner.first_name} {record.owner.last_name}
-          </div>
-        ) : (
-          "No Customer"
-        );
-      }
-    },
-    {
-      title: "Vehicle",
+      title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
       key: "vehicle",
+      ellipsis: true,
       render: (text, record) => {
         return record.vehicle ? (
-          <div>
+          <Link to={"manage/vehicles/" + record.vehicle.id}>
             {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
             {record.vehicle.v_model_desc}
-          </div>
+          </Link>
         ) : (
-          "No Vehicle"
+          t("jobs.errors.novehicle")
         );
       }
     },
     {
-      title: "Action",
-      key: "action",
-      render: (text, record) => (
-        <Dropdown overlay={actionMenu} trigger={["click"]}>
-          <Icon type="ellipsis" />
-        </Dropdown>
-      )
+      title: t("vehicles.fields.plate_no"),
+      dataIndex: "plate_no",
+      key: "plate_no",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder:
+        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicle?.plate_no ? (
+          <span>{record.vehicle.plate_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.clm_no ? (
+          <span>{record.clm_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.clm_total"),
+      dataIndex: "clm_total",
+      key: "clm_total",
+      sorter: (a, b) => {
+        return a > b;
+      },
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.clm_total ? (
+          <span>{record.clm_total}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.owner_owing"),
+      dataIndex: "owner_owing",
+      key: "owner_owing",
+      render: (text, record) => {
+        return record.owner_owing ? (
+          <span>{record.owner_owing}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
     }
   ];
 
@@ -140,19 +190,22 @@ export default function JobsPage({
   };
 
   return (
-    <div>
-      <Input.Search
-        placeholder="Search..."
-        onSearch={value => console.log(value)}
-        enterButton
-      />
-      <br />
-
+    <div className='jobs-list'>
       <Table
         loading={loading}
+        title={() => {
+          return (
+            <Input.Search
+              placeholder='Search...'
+              onSearch={value => console.log(value)}
+              enterButton
+            />
+          );
+        }}
+        size='small'
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        rowKey='id'
         dataSource={jobs}
         rowSelection={{ selectedRowKeys: [selectedJob] }}
         onChange={handleTableChange}

client/src/components/jobs-list/jobs-list.styles.scss

@@ -0,0 +1,4 @@
+.jobs-list{
+    text-align: center;     
+   height: 40vh;
+}