IO-2514 Production Board Estimator filter by table data

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

@@ -1,7 +1,7 @@
-import React from "react";
 import { Button, Dropdown, Menu } from "antd";
-import dataSource from "./production-list-columns.data";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import dataSource from "./production-list-columns.data";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,6 +24,7 @@ export function ProductionColumnsComponent({
   columnState,
   technician,
   bodyshop,
+  data,
   tableState,
 }) {
   const [columns, setColumns] = columnState;
@@ -36,6 +37,7 @@ export function ProductionColumnsComponent({
         bodyshop,
         technician,
         state: tableState,
+        data: data,
         activeStatuses: bodyshop.md_ro_statuses.active_statuses,
       }).filter((i) => i.key === e.key),
     ]);
@@ -46,6 +48,7 @@ export function ProductionColumnsComponent({
     technician,
     state: tableState,
     activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+    data: data,
   });
   const menu = (
     <Menu

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

@@ -25,7 +25,7 @@ import ProductionListColumnCategory from "./production-list-columns.status.categ
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
-const r = ({ technician, state, activeStatuses, bodyshop }) => {
+const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
   return [
     {
       title: i18n.t("jobs.actions.viewdetail"),
@@ -548,14 +548,12 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
       sortOrder:
         state.sortedInfo.columnKey === "estimator" && state.sortedInfo.order,
       filters:
-        (bodyshop &&
+        data?.map((s) => {
-          bodyshop.md_estimators.map((s) => {
+          return {
-            return {
+            text: `${s.est_ct_fn || ""} ${s.est_ct_ln || ""}`.trim(),
-              text: `${s.est_ct_fn || ""} ${s.est_ct_ln || ""}`.trim(),
+            value: [`${s.est_ct_fn || ""} ${s.est_ct_ln || ""}`.trim()],
-              value: [`${s.est_ct_fn || ""} ${s.est_ct_ln || ""}`.trim()],
+          };
-            };
+        }) || [],
-          })) ||
-        [],
       onFilter: (value, record) =>
         value.includes(
           `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()

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

@@ -24,6 +24,7 @@ export function ProductionListTable({
   technician,
   currentUser,
   state,
+  data,
   setColumns,
   setState,
 }) {
@@ -41,6 +42,7 @@ export function ProductionListTable({
               bodyshop,
               technician,
               state,
+              data: data,
               activeStatuses: bodyshop.md_ro_statuses.active_statuses,
             }).find((e) => e.key === k.key),
             width: k.width,
@@ -95,6 +97,7 @@ export function ProductionListTable({
           ...ProductionListColumns({
             technician,
             state,
+            data: data,
             activeStatuses: bodyshop.md_ro_statuses.active_statuses,
           }).find((e) => e.key === k.key),
           width: k.width,

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

@@ -10,7 +10,7 @@ import {
   Statistic,
   Table,
 } from "antd";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -79,6 +79,7 @@ export function ProductionListTable({
             bodyshop,
             technician,
             state,
+            data: data,
             activeStatuses: bodyshop.md_ro_statuses.active_statuses,
           }).find((e) => e.key === k.key),
           width: k.width ?? 100,
@@ -87,6 +88,33 @@ export function ProductionListTable({
       []
   );
 
+  useEffect(() => {
+    const newColumns =
+      (state &&
+        matchingColumnConfig &&
+        matchingColumnConfig.columns.columnKeys.map((k) => {
+          return {
+            ...ProductionListColumns({
+              bodyshop,
+              technician,
+              state,
+              data: data,
+              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+            }).find((e) => e.key === k.key),
+            width: k.width ?? 100,
+          };
+        })) ||
+      [];
+    setColumns(newColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    //state,
+    matchingColumnConfig,
+    bodyshop,
+    technician,
+    data,
+  ]); //State removed from dependency array as it causes race condition when removing columns from table view and is not needed.
+
   const handleTableChange = (pagination, filters, sorter) => {
     setState({
       ...state,
@@ -104,7 +132,8 @@ export function ProductionListTable({
 
   const removeColumn = (e) => {
     const { key } = e;
-    setColumns(columns.filter((i) => i.key !== key));
+    const newColumns = columns.filter((i) => i.key !== key);
+    setColumns(newColumns);
   };
 
   const handleResize =
@@ -227,6 +256,7 @@ export function ProductionListTable({
             <ProductionListColumnsAdd
               columnState={[columns, setColumns]}
               tableState={state}
+              data={data}
             />
             <ProductionListSaveConfigButton
               columns={columns}
@@ -237,6 +267,7 @@ export function ProductionListTable({
               state={state}
               setState={setState}
               setColumns={setColumns}
+              data={data}
             />
 
             <Input