- Merge client update into test-beta

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

client/src/components/dms-customer-selector/dms-customer-selector.component.jsx

@@ -1,161 +1,161 @@
-import { Button, Table, Col, Checkbox } from "antd";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { socket } from "../../pages/dms/dms.container";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { alphaSort } from "../../utils/sorters";
+import {Button, Checkbox, Col, Table} from "antd";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {socket} from "../../pages/dms/dms.container";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {alphaSort} from "../../utils/sorters";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(DmsCustomerSelector);
 
-export function DmsCustomerSelector({ bodyshop }) {
-  const { t } = useTranslation();
-  const [customerList, setcustomerList] = useState([]);
-  const [visible, setVisible] = useState(false);
-  const [selectedCustomer, setSelectedCustomer] = useState(null);
-  const [dmsType, setDmsType] = useState("cdk");
+export function DmsCustomerSelector({bodyshop}) {
+    const {t} = useTranslation();
+    const [customerList, setcustomerList] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [selectedCustomer, setSelectedCustomer] = useState(null);
+    const [dmsType, setDmsType] = useState("cdk");
 
-  socket.on("cdk-select-customer", (customerList, callback) => {
-    setVisible(true);
-    setDmsType("cdk");
-    setcustomerList(customerList);
-  });
-  socket.on("pbs-select-customer", (customerList, callback) => {
-    setVisible(true);
-    setDmsType("pbs");
-    setcustomerList(customerList);
-  });
+    socket.on("cdk-select-customer", (customerList, callback) => {
+        setOpen(true);
+        setDmsType("cdk");
+        setcustomerList(customerList);
+    });
+    socket.on("pbs-select-customer", (customerList, callback) => {
+        setOpen(true);
+        setDmsType("pbs");
+        setcustomerList(customerList);
+    });
 
-  const onUseSelected = () => {
-    setVisible(false);
-    socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
-    setSelectedCustomer(null);
-  };
+    const onUseSelected = () => {
+        setOpen(false);
+        socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
+        setSelectedCustomer(null);
+    };
 
-  const onUseGeneric = () => {
-    setVisible(false);
-    socket.emit(
-      `${dmsType}-selected-customer`,
-      bodyshop.cdk_configuration.generic_customer_number
+    const onUseGeneric = () => {
+        setOpen(false);
+        socket.emit(
+            `${dmsType}-selected-customer`,
+            bodyshop.cdk_configuration.generic_customer_number
+        );
+        setSelectedCustomer(null);
+    };
+
+    const onCreateNew = () => {
+        setOpen(false);
+        socket.emit(`${dmsType}-selected-customer`, null);
+        setSelectedCustomer(null);
+    };
+
+    const cdkColumns = [
+        {
+            title: t("jobs.fields.dms.id"),
+            dataIndex: ["id", "value"],
+            key: "id",
+        },
+        {
+            title: t("jobs.fields.dms.vinowner"),
+            dataIndex: "vinOwner",
+            key: "vinOwner",
+            render: (text, record) => <Checkbox disabled checked={record.vinOwner}/>,
+        },
+        {
+            title: t("jobs.fields.dms.name1"),
+            dataIndex: ["name1", "fullName"],
+            key: "name1",
+            sorter: (a, b) =>
+                alphaSort(a.name1 && a.name1.fullName, b.name1 && b.name1.fullName),
+        },
+
+        {
+            title: t("jobs.fields.dms.address"),
+            //dataIndex: ["name2", "fullName"],
+            key: "address",
+            render: (record, value) =>
+                `${
+                    record.address &&
+                    record.address.addressLine &&
+                    record.address.addressLine[0]
+                }, ${record.address && record.address.city} ${
+                    record.address && record.address.stateOrProvince
+                } ${record.address && record.address.postalCode}`,
+        },
+    ];
+
+    const pbsColumns = [
+        {
+            title: t("jobs.fields.dms.id"),
+            dataIndex: "ContactId",
+            key: "ContactId",
+        },
+        {
+            title: t("jobs.fields.dms.name1"),
+            key: "name1",
+            sorter: (a, b) => alphaSort(a.LastName, b.LastName),
+            render: (text, record) =>
+                `${record.FirstName || ""} ${record.LastName || ""}`,
+        },
+
+        {
+            title: t("jobs.fields.dms.address"),
+            key: "address",
+            render: (record, value) =>
+                `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`,
+        },
+    ];
+
+    if (!open) return null;
+    return (
+        <Col span={24}>
+            <Table
+                title={() => (
+                    <div>
+                        <Button onClick={onUseSelected} disabled={!selectedCustomer}>
+                            {t("jobs.actions.dms.useselected")}
+                        </Button>
+                        <Button
+                            onClick={onUseGeneric}
+                            disabled={
+                                !(
+                                    bodyshop.cdk_configuration &&
+                                    bodyshop.cdk_configuration.generic_customer_number
+                                )
+                            }
+                        >
+                            {t("jobs.actions.dms.usegeneric")}
+                        </Button>
+                        <Button onClick={onCreateNew}>
+                            {t("jobs.actions.dms.createnewcustomer")}
+                        </Button>
+                    </div>
+                )}
+                pagination={{position: "top"}}
+                columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
+                rowKey={(record) =>
+                    dmsType === "cdk" ? record.id.value : record.ContactId
+                }
+                dataSource={customerList}
+                //onChange={handleTableChange}
+                rowSelection={{
+                    onSelect: (record) => {
+                        setSelectedCustomer(
+                            dmsType === "cdk" ? record.id.value : record.ContactId
+                        );
+                    },
+                    type: "radio",
+                    selectedRowKeys: [selectedCustomer],
+                }}
+            />
+        </Col>
     );
-    setSelectedCustomer(null);
-  };
-
-  const onCreateNew = () => {
-    setVisible(false);
-    socket.emit(`${dmsType}-selected-customer`, null);
-    setSelectedCustomer(null);
-  };
-
-  const cdkColumns = [
-    {
-      title: t("jobs.fields.dms.id"),
-      dataIndex: ["id", "value"],
-      key: "id",
-    },
-    {
-      title: t("jobs.fields.dms.vinowner"),
-      dataIndex: "vinOwner",
-      key: "vinOwner",
-      render: (text, record) => <Checkbox disabled checked={record.vinOwner} />,
-    },
-    {
-      title: t("jobs.fields.dms.name1"),
-      dataIndex: ["name1", "fullName"],
-      key: "name1",
-      sorter: (a, b) =>
-        alphaSort(a.name1 && a.name1.fullName, b.name1 && b.name1.fullName),
-    },
-
-    {
-      title: t("jobs.fields.dms.address"),
-      //dataIndex: ["name2", "fullName"],
-      key: "address",
-      render: (record, value) =>
-        `${
-          record.address &&
-          record.address.addressLine &&
-          record.address.addressLine[0]
-        }, ${record.address && record.address.city} ${
-          record.address && record.address.stateOrProvince
-        } ${record.address && record.address.postalCode}`,
-    },
-  ];
-
-  const pbsColumns = [
-    {
-      title: t("jobs.fields.dms.id"),
-      dataIndex: "ContactId",
-      key: "ContactId",
-    },
-    {
-      title: t("jobs.fields.dms.name1"),
-      key: "name1",
-      sorter: (a, b) => alphaSort(a.LastName, b.LastName),
-      render: (text, record) =>
-        `${record.FirstName || ""} ${record.LastName || ""}`,
-    },
-
-    {
-      title: t("jobs.fields.dms.address"),
-      key: "address",
-      render: (record, value) =>
-        `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`,
-    },
-  ];
-
-  if (!visible) return null;
-  return (
-    <Col span={24}>
-      <Table
-        title={() => (
-          <div>
-            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
-              {t("jobs.actions.dms.useselected")}
-            </Button>
-            <Button
-              onClick={onUseGeneric}
-              disabled={
-                !(
-                  bodyshop.cdk_configuration &&
-                  bodyshop.cdk_configuration.generic_customer_number
-                )
-              }
-            >
-              {t("jobs.actions.dms.usegeneric")}
-            </Button>
-            <Button onClick={onCreateNew}>
-              {t("jobs.actions.dms.createnewcustomer")}
-            </Button>
-          </div>
-        )}
-        pagination={{ position: "top" }}
-        columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
-        rowKey={(record) =>
-          dmsType === "cdk" ? record.id.value : record.ContactId
-        }
-        dataSource={customerList}
-        //onChange={handleTableChange}
-        rowSelection={{
-          onSelect: (record) => {
-            setSelectedCustomer(
-              dmsType === "cdk" ? record.id.value : record.ContactId
-            );
-          },
-          type: "radio",
-          selectedRowKeys: [selectedCustomer],
-        }}
-      />
-    </Col>
-  );
 }