IO-117 WIP PBS

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

@@ -1,4 +1,4 @@
-import { Button, Table, Col , Checkbox} from "antd";
+import { Button, Table, Col, Checkbox } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -23,15 +23,26 @@ export function DmsCustomerSelector({ bodyshop }) {
   const [customerList, setcustomerList] = useState([]);
   const [visible, setVisible] = 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);
+    console.log(
+      "🚀 ~ file: dms-customer-selector.component.jsx ~ line 37 ~ socket.on ~ customerList",
+      customerList
+    );
+  });
 
   const onUseSelected = () => {
     setVisible(false);
-    socket.emit("cdk-selected-customer", selectedCustomer);
+    socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
     setSelectedCustomer(null);
   };
 
@@ -50,7 +61,7 @@ export function DmsCustomerSelector({ bodyshop }) {
     setSelectedCustomer(null);
   };
 
-  const columns = [
+  const cdkColumns = [
     {
       title: t("jobs.fields.dms.id"),
       dataIndex: ["id", "value"],
@@ -60,13 +71,14 @@ export function DmsCustomerSelector({ bodyshop }) {
       title: t("jobs.fields.dms.vinowner"),
       dataIndex: "vinOwner",
       key: "vinOwner",
-      render: (text, record) => <Checkbox disabled checked={record.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?.fullName, b.name1?.fullName),
+      sorter: (a, b) =>
+        alphaSort(a.name1 && a.name1.fullName, b.name1 && b.name1.fullName),
     },
 
     {
@@ -74,11 +86,43 @@ export function DmsCustomerSelector({ bodyshop }) {
       //dataIndex: ["name2", "fullName"],
       key: "address",
       render: (record, value) =>
-        `${record?.address?.addressLine[0]}, ${record.address?.city} ${record.address?.stateOrProvince} ${record.address?.postalCode}`,
+        `${record.address && record.address.addressLine[0]}, ${
+          record.address && record.address.city
+        } ${record.address && record.address.stateOrProvince} ${
+          record.address && record.address.postalCode
+        }`,
     },
   ];
 
-  if (!visible) return <></>;
+  const pbsColumns = [
+    {
+      title: t("jobs.fields.dms.id"),
+      dataIndex: "ContactId",
+      key: "ContactId",
+    },
+    {
+      title: t("jobs.fields.dms.vinowner"),
+      dataIndex: "vinOwner",
+      key: "vinOwner",
+      render: (text, record) => <Checkbox disabled checked={record.vinOwner} />,
+    },
+    {
+      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
@@ -104,13 +148,17 @@ export function DmsCustomerSelector({ bodyshop }) {
           </div>
         )}
         pagination={{ position: "top" }}
-        columns={columns}
-        rowKey={(record) => record.id.value}
+        columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
+        rowKey={(record) =>
+          dmsType === "cdk" ? record.id.value : record.ContactId
+        }
         dataSource={customerList}
         //onChange={handleTableChange}
         rowSelection={{
-          onSelect: (props) => {
-            setSelectedCustomer(props.id.value);
+          onSelect: (record) => {
+            setSelectedCustomer(
+              dmsType === "cdk" ? record.id.value : record.ContactId
+            );
           },
           type: "radio",
           selectedRowKeys: [selectedCustomer],