IO-233 CDK WIP

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

@@ -1,75 +1,73 @@
-import React, { useEffect, useState } from "react";
-import { socket } from "../../pages/dms/dms.container";
-import { alphaSort } from "../../utils/sorters";
-import { Table } from "antd";
+import { Button, Table } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-
+import { socket } from "../../pages/dms/dms.container";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+import { alphaSort } from "../../utils/sorters";
 export default function DmsCustomerSelector() {
   const { t } = useTranslation();
   const [customerList, setcustomerList] = useState([]);
+  const [visible, setVisible] = useState(false);
   const [selectedCustomer, setSelectedCustomer] = useState(null);
-  useEffect(() => {
-    socket.on("cdk-select-customer", (customerList) => {
-      setcustomerList(customerList);
-      console.log("Received a customer list.", customerList);
-    });
 
-    return () => {
-      socket.removeListener("cdk-select-customer");
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  socket.on("cdk-select-customer", (customerList, callback) => {
+    setVisible(true);
+    setcustomerList(customerList);
+  });
+
+  const onOk = () => {
+    setVisible(false);
+    socket.emit("cdk-selected-customer", selectedCustomer);
+  };
 
   const columns = [
     {
-      title: t("owners.fields.ownr_ln"),
-      dataIndex: "ownr_ln",
-      key: "ownr_ln",
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      title: t("dms.fields.name1"),
+      dataIndex: ["name1", "fullName"],
+      key: "name1",
+      sorter: (a, b) => alphaSort(a.name1?.fullName, b.name1?.fullName),
     },
     {
-      title: t("owners.fields.ownr_fn"),
-      dataIndex: "ownr_fn",
-      key: "ownr_fn",
-      sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
+      title: t("dms.fields.name2"),
+      dataIndex: ["name2", "fullName"],
+      key: "name2",
+      sorter: (a, b) => alphaSort(a.name2?.fullName, b.name2?.fullName),
     },
     {
-      title: t("owners.fields.ownr_co_nm"),
-      dataIndex: "ownr_co_nm",
-      key: "ownr_co_nm",
-      sorter: (a, b) => alphaSort(a.ownr_co_nm, b.ownr_co_nm),
+      title: t("dms.fields.phone"),
+      dataIndex: ["contactInfo", "mainTelephoneNumber", "value"],
+      key: "phone",
+      render: (record, value) => (
+        <PhoneFormatter>
+          {record.contactInfo?.mainTelephoneNumber?.value}
+        </PhoneFormatter>
+      ),
     },
     {
-      title: t("owners.fields.ownr_addr1"),
-      dataIndex: "ownr_addr1",
-      key: "ownr_addr1",
-      sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
-    },
-    {
-      title: t("owners.fields.ownr_city"),
-      dataIndex: "ownr_city",
-      key: "ownr_city",
-      sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
-    },
-    {
-      title: t("owners.fields.ownr_ea"),
-      dataIndex: "ownr_ea",
-      key: "ownr_ea",
-      sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
+      title: t("dms.fields.address"),
+      //dataIndex: ["name2", "fullName"],
+      key: "address",
+      render: (record, value) =>
+        `${record.address?.addressLine[0]}, ${record.address?.city} ${record.address?.stateOrProvince} ${record.address?.postalCode}`,
     },
   ];
 
+  if (!visible) return <></>;
   return (
     <Table
-      //scroll={{ x: true }}
+      title={() => (
+        <div>
+          <Button onClick={onOk}>Select</Button>
+        </div>
+      )}
       pagination={{ position: "top" }}
       columns={columns}
-      rowKey="id.value"
+      rowKey={(record) => record.id.value}
       dataSource={customerList}
       //onChange={handleTableChange}
       rowSelection={{
         onSelect: (props) => {
-          setSelectedCustomer(props.id);
+          setSelectedCustomer(props.id.value);
         },
         type: "radio",
         selectedRowKeys: [selectedCustomer],