Add automatic saving of estimate.

package.json

@@ -3,7 +3,7 @@
   "productName": "ImEX RPS",
   "author": "ImEX Systems Inc. <support@thinkimex.com>",
   "description": "ImEX RPS",
-  "version": "1.4.2-beta.4",
+  "version": "1.4.2-alpha.15",
   "main": "electron/main.js",
   "homepage": "./",
   "dependencies": {

src/components/molecules/shop-settings-form/shop-settings-form.molecule.jsx

@@ -40,18 +40,6 @@ export default function ShopSettingsFormMolecule({ form, saveLoading }) {
         >
           <Select mode="tags" />
         </Form.Item>
-
-        <Form.Item
-          label="Alert when Parts Price Difference Less Than"
-          name="ppd_diff_alert"
-          rules={[
-            {
-              required: true
-            }
-          ]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label="Alert when Parts Price Difference Less Than"
           name="ppd_diff_alert"

src/components/organisms/shop-settings/shop-settings.organism.jsx

@@ -1,8 +1,9 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, notification, Skeleton } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { debounce } from "lodash";
 import { QUERY_BODYSHOP, UPDATE_SHOP } from "../../../graphql/bodyshop.queries";
 import ipcTypes from "../../../ipc.types";
 import { setBodyshop } from "../../../redux/user/user.actions";
@@ -14,7 +15,7 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
-  setBodyshop: (shop) => dispatch(setBodyshop(shop)),
+  setBodyshop: (shop) => dispatch(setBodyshop(shop))
 });
 
 export function ShopSettingsOrganism({ setBodyshop }) {
@@ -30,26 +31,46 @@ export function ShopSettingsOrganism({ setBodyshop }) {
   const handleFinish = async (values) => {
     setSaveLoading(true);
     ipcRenderer.send(ipcTypes.app.toMain.track, {
-      event: "UPDATE_SHOP_DETAILS",
+      event: "UPDATE_SHOP_DETAILS"
     });
 
     const result = await updateBodyshop({
-      variables: { id: data.bodyshops[0].id, shop: values },
+      variables: { id: data.bodyshops[0].id, shop: values }
     });
 
     if (!result.errors) {
-      notification["success"]({ message: "Settings saved successfully." });
+      notification["success"]({ message: "Settings saved successfully.", key: "shop_settings_save" });
       //  console.log("r", result.data.update_bodyshops.returning[0]);
       setBodyshop(result.data.update_bodyshops.returning[0]);
       form.resetFields();
     } else {
       notification["error"]({
-        message: "Error while saving settings " + error,
+        message: "Error while saving settings " + error
       });
     }
     setSaveLoading(false);
   };
 
+  // Create debounced auto-save function
+  const debouncedAutoSave = debounce(function (changed, values) {
+    // Only auto-save if data is loaded
+    if (
+      data &&
+      !loading &&
+      Object.keys(changed).some((key) => ["mpi_count_quantity", "accepted_ins_co"].includes(key))
+    ) {
+      //Prevent auto save on shop name.
+      form
+        .validateFields()
+        .then((values) => {
+          handleFinish(values);
+        })
+        .catch(() => {
+          // Form validation failed, don't save
+        });
+    }
+  }, 250);
+
   return (
     <div>
       <Form
@@ -57,21 +78,15 @@ export function ShopSettingsOrganism({ setBodyshop }) {
         layout="vertical"
         autoComplete="new-password"
         onFinish={handleFinish}
+        onValuesChange={debouncedAutoSave}
         initialValues={data ? data.bodyshops[0] : null}
       >
         {loading && <Skeleton />}
         {error && <ErrorResultAtom title="Error displaying job data." />}
-        <ShopSettingsFormMolecule
-          loading={loading}
-          form={form}
-          saveLoading={saveLoading}
-        />
+        <ShopSettingsFormMolecule loading={loading} form={form} saveLoading={saveLoading} />
       </Form>
     </div>
   );
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ShopSettingsOrganism);
+export default connect(mapStateToProps, mapDispatchToProps)(ShopSettingsOrganism);