Production list fixes + additional classes + searching on prod list BOD-21

client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx

@@ -87,7 +87,6 @@ export function JobsAvailableSupplementContainer({
         selectedJob,
         estData.data.available_jobs_by_pk.est_data.joblines.data
       );
-      console.log("onModalOk -> suppDelta", suppDelta);
 
       delete supp.joblines;
       await client.mutate({

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

@@ -18,7 +18,9 @@ export default function ProductionListColumnAlert({ record }) {
           production_vars: {
             ...record.production_vars,
             alert:
-              (record.production_vars && !record.production_vars.alert) || true,
+              !!record.production_vars && !!record.production_vars.alert
+                ? !record.production_vars.alert
+                : true,
           },
         },
       },

client/src/components/production-list-table/production-list-table.component.jsx

@@ -1,4 +1,4 @@
-import { Table, Button, Menu, Dropdown } from "antd";
+import { Table, Button, Menu, Dropdown, Input } from "antd";
 import React, { useState } from "react";
 import { SyncOutlined } from "@ant-design/icons";
 import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component";
@@ -18,6 +18,8 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
+const OneCalendarDay = 60 * 60 * 24 * 1000;
+
 export function ProductionListTable({
   columnState,
   loading,
@@ -26,6 +28,7 @@ export function ProductionListTable({
   refetch,
 }) {
   const [columns, setColumns] = columnState;
+  const [searchText, setSearchText] = useState("");
   const [state, setState] = useState(
     bodyshop.production_config.tableState || {
       sortedInfo: {},
@@ -49,6 +52,8 @@ export function ProductionListTable({
     setColumns(columns.filter((i) => i.key !== key));
   };
 
+  const Now = new Date();
+
   const headerItem = (col) => (
     <Dropdown
       overlay={
@@ -82,6 +87,11 @@ export function ProductionListTable({
               }}>
               <SyncOutlined />
             </Button>
+            <Input
+              onChange={(e) => setSearchText(e.target.value)}
+              placeholder={t("general.labels.search")}
+              value={searchText}
+            />
           </div>
         )}
         columns={columns.map((c) => {
@@ -94,9 +104,51 @@ export function ProductionListTable({
         })}
         rowKey='id'
         loading={loading}
-        dataSource={data}
+        dataSource={
+          searchText === ""
+            ? data
+            : data.filter(
+                (j) =>
+                  (j.ro_number || "")
+                    .toString()
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.ownr_fn || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.ownr_ln || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.status || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.ins_co_nm || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.clm_no || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.v_model_desc || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase()) ||
+                  (j.v_make_desc || "")
+                    .toLowerCase()
+                    .includes(searchText.toLowerCase())
+              )
+        }
         onChange={handleTableChange}
-        rowClassName={(record, index) => (index % 2 === 0 ? "red" : "blue")} //TODO What could be good usage here?
+        rowClassName={(record, index) => {
+          const classes = [];
+          if (!!record.scheduled_completion) {
+            if (new Date(record.scheduled_completion) - Now < OneCalendarDay)
+              console.log(
+                "new Date(record.scheduled_completion) - Now < OneCalendarDay",
+                new Date(record.scheduled_completion) - Now < OneCalendarDay
+              );
+            classes.push("production-completion-1");
+          }
+          return classes.join(" ");
+        }} //TODO What could be good usage here?
         onRow={(record, index) => (record.refetch = refetch)}
       />
     </ReactDragListView.DragColumn>

client/src/components/production-list-table/production-list-table.styles.scss

@@ -13,3 +13,12 @@
 .blue {
   color: blue;
 }
+
+.production-completion-1 {
+  animation: production-completion-1-blinker 5s linear infinite;
+}
+@keyframes production-completion-1-blinker {
+  50% {
+    background: rgba(207, 12, 12, 0.555);
+  }
+}