Added filtering and search to kanban board. BOD-176

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -12,6 +12,7 @@ import ProductionBoardCard from "../production-board-kanban-card/production-boar
 import { createBoardData } from "./production-board-kanban.utils.js";
 import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -22,12 +23,14 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
   });
 
+  const [filter, setFilter] = useState({ search: "", employeeId: null });
+
   const [isMoving, setIsMoving] = useState(false);
 
   const { t } = useTranslation();
   useEffect(() => {
     setBoardLanes(
-      createBoardData(bodyshop.md_ro_statuses.production_statuses, data)
+      createBoardData(bodyshop.md_ro_statuses.production_statuses, data, filter)
     );
     setIsMoving(false);
   }, [
@@ -35,6 +38,7 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     setBoardLanes,
     setIsMoving,
     bodyshop.md_ro_statuses.production_statuses,
+    filter,
   ]);
 
   const client = useApolloClient();
@@ -111,6 +115,7 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   return (
     <div>
       <IndefiniteLoading loading={isMoving} />
+      <ProductionBoardFilters filter={filter} setFilter={setFilter} />
       <Board
         children={boardLanes}
         disableCardDrag={isMoving}

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -39,7 +39,8 @@ const sortByParentId = (arr) => {
   return sortedList;
 };
 
-export const createBoardData = (AllStatuses, Jobs) => {
+export const createBoardData = (AllStatuses, Jobs, filter) => {
+  const { search, employeeId } = filter;
   console.log("==========GENERATING BOARD DATA=============");
   const boardLanes = {
     columns: AllStatuses.map((s) => {
@@ -50,7 +51,28 @@ export const createBoardData = (AllStatuses, Jobs) => {
       };
     }),
   };
-  const DataGroupedByStatus = _.groupBy(Jobs, (d) => d.status);
+
+  const filteredJobs =
+    (search === "" || !search) && !employeeId
+      ? Jobs
+      : Jobs.filter((j) => {
+          let include = false;
+          if (search && search !== "") {
+            include = CheckSearch(search, j);
+          }
+
+          if (!!employeeId) {
+            include =
+              include &&
+              (j.employee_body === employeeId ||
+                j.employee_prep === employeeId ||
+                j.employee_refinish === employeeId);
+          }
+
+          return include;
+        });
+
+  const DataGroupedByStatus = _.groupBy(filteredJobs, (d) => d.status);
 
   Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
     boardLanes.columns.find(
@@ -62,6 +84,24 @@ export const createBoardData = (AllStatuses, Jobs) => {
   return boardLanes;
 };
 
+const CheckSearch = (search, job) => {
+  console.log("job", job, search);
+  return (
+    (job.ro_number || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.est_number || "")
+      .toString()
+      .toLowerCase()
+      .includes(search.toLowerCase()) ||
+    (job.ownr_fn || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.ownr_ln || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.status || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.v_make_desc || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.v_model_desc || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.clm_no || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.plate_no || "").toLowerCase().includes(search.toLowerCase())
+  );
+};
+
 // export const updateBoardOnMove = (board, card, source, destination) => {
 //   //Slice from source