Added filtering and search to kanban board. BOD-176

client/src/components/employee-search-select/employee-search-select.component.jsx

@@ -5,7 +5,7 @@ const { Option } = Select;
 //To be used as a form element only.
 
 const EmployeeSearchSelect = (
-  { value, onChange, options, onSelect, onBlur },
+  { value, onChange, options, onSelect, onBlur, ...restProps },
   ref
 ) => {
   const [option, setOption] = useState(value);
@@ -27,6 +27,7 @@ const EmployeeSearchSelect = (
       optionFilterProp="search"
       onSelect={onSelect}
       onBlur={onBlur}
+      {...restProps}
     >
       {options
         ? options.map((o) => (

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

@@ -0,0 +1,40 @@
+import { Input } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionBoardFilters);
+
+export function ProductionBoardFilters({ bodyshop, filter, setFilter }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Input.Search
+        //value={filter.search}
+        placeholder={t("general.labels.search")}
+        onChange={(e) => {
+          setFilter({ ...filter, search: e.target.value });
+        }}
+      />
+      <EmployeeSearchSelectComponent
+        options={bodyshop.employees}
+        value={filter.employeeId}
+        onChange={(emp) => setFilter({ ...filter, employeeId: emp })}
+        allowClear
+      />
+    </div>
+  );
+}

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