- Production Board List View Unsaved Changes Prompt

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

client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx

@@ -7,6 +7,7 @@ import { Button, Form, Input, notification, Popover, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { UPDATE_SHOP } from "../../graphql/bodyshop.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { isFunction } from "lodash";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -16,7 +17,7 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function ProductionListSaveConfigButton({ columns, bodyshop, tableState }) {
+export function ProductionListSaveConfigButton({ columns, bodyshop, tableState, onSave }) {
   const [updateShop] = useMutation(UPDATE_SHOP);
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
@@ -49,6 +50,9 @@ export function ProductionListSaveConfigButton({ columns, bodyshop, tableState }
     });
     if (!!!result.errors) {
       notification["success"]({ message: t("bodyshop.successes.save") });
+      if (onSave && isFunction(onSave)) {
+        onSave();
+      }
     } else {
       notification["error"]({
         message: t("bodyshop.errors.saving", {

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

@@ -1,8 +1,6 @@
-import { SyncOutlined } from "@ant-design/icons";
+import { useEffect, useMemo, useState } from "react";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Dropdown, Input, Space, Statistic, Table } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import React, { useEffect, useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -16,6 +14,10 @@ import ProductionListSaveConfigButton from "../production-list-save-config-butto
 import ProductionListPrint from "./production-list-print.component";
 import ProductionListTableViewSelect from "./production-list-table-view-select.component";
 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
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,6 +27,7 @@ const mapStateToProps = createStructuredSelector({
 
 export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser }) {
   const [searchText, setSearchText] = useState("");
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const {
     treatments: { Production_List_Status_Colors, Enhanced_Payroll }
@@ -35,7 +38,6 @@ 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(
@@ -93,34 +95,48 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         })) ||
       [];
     setColumns(newColumns);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    //state,
     matchingColumnConfig,
     bodyshop,
     technician,
-    data
+    data,
-  ]); //State removed from dependency array as it causes race condition when removing columns from table view and is not needed.
+    Enhanced_Payroll,
+    Production_List_Status_Colors,
+    refetch,
+    state
+  ]);
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({
+    const newState = {
       ...state,
       filteredInfo: filters,
       sortedInfo: { columnKey: sorter.columnKey, order: sorter.order }
-    });
+    };
+    if (!_.isEqual(newState, state)) {
+      setState(newState);
+      setHasUnsavedChanges(true);
+    }
   };
 
   const onDragEnd = (fromIndex, toIndex) => {
     const columnsCopy = columns.slice();
     const item = columnsCopy.splice(fromIndex, 1)[0];
     columnsCopy.splice(toIndex, 0, item);
-    setColumns(columnsCopy);
+
+    if (!_.isEqual(columnsCopy, columns)) {
+      setColumns(columnsCopy);
+      setHasUnsavedChanges(true);
+    }
   };
 
   const removeColumn = (e) => {
     const { key } = e;
     const newColumns = columns.filter((i) => i.key !== key);
-    setColumns(newColumns);
+
+    if (!_.isEqual(newColumns, columns)) {
+      setColumns(newColumns);
+      setHasUnsavedChanges(true);
+    }
   };
 
   const handleResize =
@@ -131,9 +147,22 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         ...nextColumns[index],
         width: size.width
       };
-      setColumns(nextColumns);
+
+      if (!_.isEqual(nextColumns, columns)) {
+        setColumns(nextColumns);
+        setHasUnsavedChanges(true);
+      }
     };
 
+  const addColumn = (newColumn) => {
+    const updatedColumns = [...columns, newColumn];
+
+    if (!_.isEqual(updatedColumns, columns)) {
+      setColumns(updatedColumns);
+      setHasUnsavedChanges(true);
+    }
+  };
+
   const headerItem = (col) => {
     const menu = {
       onClick: removeColumn,
@@ -168,14 +197,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
             (j.v_make_desc || "").toLowerCase().includes(searchText.toLowerCase())
         );
 
-  // const handleSelectRecord = (record) => {
-  //   if (selected !== record.id) {
-  //     setSelected(record.id);
-  //   } else {
-  //     setSelected(null);
-  //   }
-  // };
-
   if (!!!columns) return <div>No columns found.</div>;
 
   const totalHrs = data
@@ -186,8 +207,10 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     .toFixed(1);
   const totalLAB = data.reduce((acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0), 0).toFixed(1);
   const totalLAR = data.reduce((acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0), 0).toFixed(1);
+
   return (
     <div>
+      <Prompt when={hasUnsavedChanges} message={t("general.messages.unsavedchangespopup")} />
       <PageHeader
         title={
           <Space>
@@ -199,20 +222,43 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         }
         extra={
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
+            <Button
+              onClick={() => {
+                refetch && refetch();
+              }}
+            >
               <SyncOutlined />
             </Button>
-            <ProductionListColumnsAdd columnState={[columns, setColumns]} tableState={state} data={data} />
+            <ProductionListColumnsAdd
-            <ProductionListSaveConfigButton columns={columns} tableState={state} />
+              columnState={[columns, setColumns]}
-
+              tableState={state}
+              data={data}
+              onColumnAdd={addColumn}
+            />
+            <ProductionListSaveConfigButton
+              columns={columns}
+              tableState={state}
+              onSave={() => {
+                setHasUnsavedChanges(false);
+              }}
+            />
             <ProductionListTableViewSelect
               state={state}
-              setState={setState}
+              setState={(newState) => {
-              setColumns={setColumns}
+                if (!_.isEqual(newState, state)) {
+                  setState(newState);
+                  setHasUnsavedChanges(true);
+                }
+              }}
+              setColumns={(newColumns) => {
+                if (!_.isEqual(newColumns, columns)) {
+                  setColumns(newColumns);
+                  setHasUnsavedChanges(true);
+                }
+              }}
               refetch={refetch}
               data={data}
             />
-
             <Input
               onChange={(e) => setSearchText(e.target.value)}
               placeholder={t("general.labels.search")}