- Add Alert

- Fix 2 bugs Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-08-15 20:16:03 -04:00
parent 36d92d4060
commit 879eba0247
2 changed files with 101 additions and 69 deletions
--- a/client/src/components/production-list-columns/production-list-columns.add.component.jsx
+++ b/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([
-      ...columns,
-      ...dataSource({
-        bodyshop,
-        technician,
-        state: tableState,
-        data,
-        activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-        treatments: { Enhanced_Payroll }
-      }).filter((i) => i.key === e.key)
-    ]);
+    const newColumn = dataSource({
+      bodyshop,
+      technician,
+      state: tableState,
+      data,
+      activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+      treatments: { Enhanced_Payroll }
+    }).find((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
-// 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)));
-// }}
-// />
+export default connect(mapStateToProps, mapDispatchToProps)(ProductionColumnsComponent);
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/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 matchingColumnConfig = useMemo(() => {
-    return bodyshop.production_config.find((p) => p.name === defaultView);
-  }, [bodyshop.production_config, defaultView]);
-
-  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) => {
+  const initialColumnsRef = useRef(
+    (initialStateRef.current &&
+      bodyshop.production_config
+        .find((p) => p.name === defaultView)
+        ?.columns.columnKeys.map((k) => {
          return {
            ...ProductionListColumns({
              bodyshop,
-              technician,
              refetch,
-              state,
-              data: data,
+              technician,
+              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}