- Add Alert Filter to visual production board

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,22 +1,32 @@
-import { Input, Space, Spin } from "antd";
+import { Button, Input, Space, Spin } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { ExclamationCircleFilled, ExclamationCircleOutlined } from "@ant-design/icons";
 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, loading }) {
   const { t } = useTranslation();
+  const [alertFilter, setAlertFilter] = useState(false);
+
+  const toggleAlertFilter = () => {
+    const newAlertFilter = !alertFilter;
+    setAlertFilter(newAlertFilter);
+    setFilter({ ...filter, alert: newAlertFilter });
+  };
+
   return (
     <Space wrap>
       {loading && <Spin />}
@@ -31,10 +41,17 @@ export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading })
         style={{ minWidth: "20rem" }}
         options={bodyshop.employees.filter((e) => e.active)}
         value={filter.employeeId}
-        placeholder={t("production.labels.employeesearch")}
+        placeholder={t("production.labels.alerts")}
         onChange={(emp) => setFilter({ ...filter, employeeId: emp })}
         allowClear
       />
+      <Button
+        type={alertFilter ? "primary" : "default"}
+        onClick={toggleAlertFilter}
+        icon={alertFilter ? <ExclamationCircleFilled /> : <ExclamationCircleOutlined />}
+      >
+        {t("production.labels.alerts")}
+      </Button>
     </Space>
   );
 }

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

@@ -29,7 +29,7 @@ const sortByParentId = (arr) => {
 
 // Function to create board data based on statuses and jobs, with optional filtering
 export const createBoardData = ({ statuses, data, filter, cardSettings }) => {
-  const { search, employeeId } = filter;
+  const { search, employeeId, alert } = filter;
 
   const lanes = statuses.map((status) => ({
     id: status,
@@ -52,6 +52,11 @@ export const createBoardData = ({ statuses, data, filter, cardSettings }) => {
     );
   }
 
+  // Filter jobs by alert if alert filter is true
+  if (alert) {
+    filteredJobs = filteredJobs.filter((job) => job.production_vars?.alert);
+  }
+
   const DataGroupedByStatus = groupBy(filteredJobs, "status");
 
   Object.keys(DataGroupedByStatus).forEach((statusGroupKey) => {

client/src/translations/en_us/common.json

@@ -2833,7 +2833,8 @@
         "sublets": "Sublets",
         "totalhours": "Total Hrs ",
         "touchtime": "T/T",
-        "viewname": "View Name"
+        "viewname": "View Name",
+        "alerts": "Alerts"
       },
       "successes": {
         "removed": "Job removed from production."

client/src/translations/es/common.json

@@ -2833,7 +2833,8 @@
         "sublets": "",
         "totalhours": "",
         "touchtime": "",
-        "viewname": ""
+        "viewname": "",
+        "alerts": ""
       },
       "successes": {
         "removed": ""

client/src/translations/fr/common.json

@@ -2833,7 +2833,8 @@
         "sublets": "",
         "totalhours": "",
         "touchtime": "",
-        "viewname": ""
+        "viewname": "",
+        "alerts": ""
       },
       "successes": {
         "removed": ""