From 80f92203ca89d7fb345674516d02410a5c701a57 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 21 Apr 2022 12:10:39 -0700
Subject: [PATCH] IO-1834 Add more job info and filtering to scoreboard jobs
 display.

---
 .../scoreboard-jobs-list.component.jsx        | 73 +++++++++++++++++--
 .../scoreboard-targets-table.component.jsx    |  8 --
 client/src/graphql/scoreboard.queries.js      |  6 ++
 3 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
index 82cd14ab3..0a2407a55 100644
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
@@ -1,13 +1,42 @@
-import React from "react";
-import { Dropdown, Button, Table, Space } from "antd";
+import React, { useState } from "react";
+import { Dropdown, Button, Table, Space, Card, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import ScoreboardRemoveButton from "../scoreboard-remove-button/scorebard-remove-button.component";
 import { DateFormatter } from "../../utils/DateFormatter";
 import ScoreboardEntryEdit from "../scoreboard-entry-edit/scoreboard-entry-edit.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 export default function ScoreboardJobsList({ scoreBoardlist }) {
   const { t } = useTranslation();
+  const [searchText, setSearchText] = useState("");
+
+  const jobs = scoreBoardlist
+    ? searchText === ""
+      ? scoreBoardlist
+      : scoreBoardlist.filter(
+          (sb) =>
+            (sb.job.ro_number || "")
+              .toString()
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (sb.job.ownr_co_nm || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (sb.job.ownr_fn || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (sb.job.ownr_ln || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (sb.job.v_model_desc || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (sb.job.v_make_desc || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase())
+        )
+    : [];
 
   const columns = [
     {
@@ -20,7 +49,25 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
         </Link>
       ),
     },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
 
+      render: (text, record) => <OwnerNameDisplay ownerObject={record.job} />,
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => (
+        <span>{`${record.job.v_model_yr || ""} ${
+          record.job.v_make_desc || ""
+        } ${record.job.v_model_desc || ""}`}</span>
+      ),
+    },
     {
       title: t("scoreboard.fields.date"),
       dataIndex: "date",
@@ -51,17 +98,29 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
   ];
 
   const overlay = (
-    <div style={{ width: "50vw", padding: "1rem" }}>
+    <Card
+      style={{ maxWidth: "90vw", padding: "1rem" }}
+      onClick={(e) => e.stopPropagation()}
+      extra={
+        <Input.Search
+          placeholder={t("general.labels.search")}
+          onChange={(e) => {
+            setSearchText(e.target.value);
+          }}
+          value={searchText}
+          enterButton
+          onClick={(e) => e.stopPropagation()}
+        />
+      }
+    >
       <Table
         pagination={false}
         columns={columns}
         rowKey="id"
-        dataSource={scoreBoardlist}
-        scroll={{ x: true, y: "15rem" }}
-        style={{ padding: "1rem" }}
+        dataSource={jobs}
         onClick={(e) => e.stopPropagation()}
       />
-    </div>
+    </Card>
   );
 
   return (
diff --git a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
index 6c0673ca3..85592044c 100644
--- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
+++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
@@ -25,10 +25,6 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
 
   const values = useMemo(() => {
     const dateHash = _.groupBy(scoreBoardlist, "date");
-    console.log(
-      "🚀 ~ file: scoreboard-targets-table.component.jsx ~ line 31 ~ values ~ dateHash",
-      dateHash
-    );
 
     let ret = {
       todayBody: 0,
@@ -71,10 +67,6 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
 
     return ret;
   }, [scoreBoardlist]);
-  console.log(
-    "🚀 ~ file: scoreboard-targets-table.component.jsx ~ line 51 ~ values ~ values",
-    values
-  );
 
   return (
     <Card
diff --git a/client/src/graphql/scoreboard.queries.js b/client/src/graphql/scoreboard.queries.js
index 16a1c6103..2b9a4195b 100644
--- a/client/src/graphql/scoreboard.queries.js
+++ b/client/src/graphql/scoreboard.queries.js
@@ -13,6 +13,12 @@ export const SUBSCRIPTION_SCOREBOARD = gql`
       job {
         id
         ro_number
+        ownr_fn
+        ownr_ln
+        ownr_co_nm
+        v_make_desc
+        v_model_desc
+        v_model_yr
       }
     }
   }