- Add Alert

- Fix 2 bugs

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

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

@@ -2,7 +2,6 @@ import React from "react";
 import { Button, Dropdown } from "antd";
 import dataSource from "./production-list-columns.data";
 import { useTranslation } from "react-i18next";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
@@ -10,16 +9,23 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   technician: selectTechnician,
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(ProductionColumnsComponent);
 
-export function ProductionColumnsComponent({ columnState, technician, bodyshop, data, tableState, refetch }) {
+const mapDispatchToProps = (dispatch) => ({
+  // Add any necessary dispatch actions here
+});
+
+export function ProductionColumnsComponent({
+  columnState,
+  technician,
+  bodyshop,
+  data,
+  tableState,
+  refetch,
+  onColumnAdd
+}) {
   const [columns, setColumns] = columnState;
   const { t } = useTranslation();
   const {
@@ -29,18 +35,26 @@ export function ProductionColumnsComponent({ columnState, technician, bodyshop,
     names: ["Enhanced_Payroll"],
     splitKey: bodyshop.imexshopid
   });
+
   const handleAdd = (e) => {
-    setColumns([
+    const newColumn = dataSource({
-      ...columns,
+      bodyshop,
-      ...dataSource({
+      technician,
-        bodyshop,
+      state: tableState,
-        technician,
+      data,
-        state: tableState,
+      activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-        data,
+      treatments: { Enhanced_Payroll }
-        activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+    }).find((i) => i.key === e.key);
-        treatments: { Enhanced_Payroll }
+
-      }).filter((i) => i.key === e.key)
+    if (newColumn) {
-    ]);
+      const updatedColumns = [...columns, newColumn];
+      setColumns(updatedColumns);
+
+      // Call the onColumnAdd function passed as a prop
+      if (onColumnAdd) {
+        onColumnAdd(newColumn);
+      }
+    }
   };
 
   const columnKeys = columns.map((i) => i.key);
@@ -76,12 +90,4 @@ export function ProductionColumnsComponent({ columnState, technician, bodyshop,
   );
 }
 
-// <Transfer
+export default connect(mapStateToProps, mapDispatchToProps)(ProductionColumnsComponent);
-// dataSource={dataSource}
-// titles={["Source", "Target"]}
-// targetKeys={columns.map((c) => c.key)}
-// render={(item) => item.title}
-// onChange={(nextTargetKeys, direction, moveKeys) => {
-//   setColumns(dataSource.filter((i) => nextTargetKeys.includes(i.key)));
-// }}
-// />

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Button, Dropdown, Input, Space, Statistic, Table } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import ReactDragListView from "react-drag-listview";
@@ -17,7 +17,8 @@ import ResizeableTitle from "./production-list-table.resizeable.component";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { SyncOutlined } from "@ant-design/icons";
 import Prompt from "../../utils/prompt.js";
-import _ from "lodash"; // lodash will be used for deep comparison
+import _ from "lodash";
+import AlertComponent from "../alert/alert.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -40,7 +41,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
   const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
   const defaultView = assoc && assoc.default_prod_list_view;
 
-  const [state, setState] = useState(
+  const initialStateRef = useRef(
     (bodyshop.production_config &&
       bodyshop.production_config.find((p) => p.name === defaultView)?.columns.tableState) ||
       bodyshop.production_config[0]?.columns.tableState || {
@@ -49,51 +50,52 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
       }
   );
 
-  const { t } = useTranslation();
+  const initialColumnsRef = useRef(
-
+    (initialStateRef.current &&
-  const matchingColumnConfig = useMemo(() => {
+      bodyshop.production_config
-    return bodyshop.production_config.find((p) => p.name === defaultView);
+        .find((p) => p.name === defaultView)
-  }, [bodyshop.production_config, defaultView]);
+        ?.columns.columnKeys.map((k) => {
-
-  const [columns, setColumns] = useState(
-    (state &&
-      matchingColumnConfig &&
-      matchingColumnConfig.columns.columnKeys.map((k) => {
-        return {
-          ...ProductionListColumns({
-            bodyshop,
-            refetch,
-            technician,
-            state,
-            data,
-            activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-            treatments: { Production_List_Status_Colors, Enhanced_Payroll }
-          }).find((e) => e.key === k.key),
-          width: k.width ?? 100
-        };
-      })) ||
-      []
-  );
-
-  useEffect(() => {
-    const newColumns =
-      (state &&
-        matchingColumnConfig &&
-        matchingColumnConfig.columns.columnKeys.map((k) => {
           return {
             ...ProductionListColumns({
               bodyshop,
-              technician,
               refetch,
-              state,
+              technician,
-              data: data,
+              state: initialStateRef.current,
+              data,
               activeStatuses: bodyshop.md_ro_statuses.active_statuses,
               treatments: { Production_List_Status_Colors, Enhanced_Payroll }
             }).find((e) => e.key === k.key),
             width: k.width ?? 100
           };
         })) ||
-      [];
+      []
+  );
+
+  const [state, setState] = useState(initialStateRef.current);
+  const [columns, setColumns] = useState(initialColumnsRef.current);
+
+  const { t } = useTranslation();
+
+  const matchingColumnConfig = useMemo(() => {
+    return bodyshop.production_config.find((p) => p.name === defaultView);
+  }, [bodyshop.production_config, defaultView]);
+
+  useEffect(() => {
+    const newColumns =
+      matchingColumnConfig?.columns.columnKeys.map((k) => {
+        return {
+          ...ProductionListColumns({
+            bodyshop,
+            technician,
+            refetch,
+            state,
+            data: data,
+            activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+            treatments: { Production_List_Status_Colors, Enhanced_Payroll }
+          }).find((e) => e.key === k.key),
+          width: k.width ?? 100
+        };
+      }) || [];
     setColumns(newColumns);
   }, [
     matchingColumnConfig,
@@ -156,7 +158,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
 
   const addColumn = (newColumn) => {
     const updatedColumns = [...columns, newColumn];
-
     if (!_.isEqual(updatedColumns, columns)) {
       setColumns(updatedColumns);
       setHasUnsavedChanges(true);
@@ -181,6 +182,12 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     );
   };
 
+  const resetChanges = () => {
+    setState(initialStateRef.current);
+    setColumns(initialColumnsRef.current);
+    setHasUnsavedChanges(false);
+  };
+
   const dataSource =
     searchText === ""
       ? data
@@ -210,7 +217,26 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
 
   return (
     <div>
-      <Prompt when={hasUnsavedChanges} message={t("general.messages.unsavedchangespopup")} />
+      <Prompt when={hasUnsavedChanges} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
+      {hasUnsavedChanges && (
+        <AlertComponent
+          type="warning"
+          message={
+            <div>
+              <span>{t("general.messages.unsavedchanges")} </span>
+              <span
+                onClick={resetChanges}
+                style={{
+                  cursor: "pointer",
+                  textDecoration: "underline"
+                }}
+              >
+                {t("general.actions.reset")}
+              </span>
+            </div>
+          }
+        />
+      )}
       <PageHeader
         title={
           <Space>
@@ -247,13 +273,13 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               setState={(newState) => {
                 if (!_.isEqual(newState, state)) {
                   setState(newState);
-                  setHasUnsavedChanges(true);
+                  setHasUnsavedChanges(false);
                 }
               }}
               setColumns={(newColumns) => {
                 if (!_.isEqual(newColumns, columns)) {
                   setColumns(newColumns);
-                  setHasUnsavedChanges(true);
+                  setHasUnsavedChanges(false);
                 }
               }}
               refetch={refetch}