Merge branch 'feature/cdk' into feature/2021-08-13

2021-08-10 13:58:58 -07:00
parent ed8eb51c2f f0d6c5e1b1
commit e78e628bec
6 changed files with 620 additions and 50 deletions
--- a/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
+++ b/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
@@ -0,0 +1,77 @@
+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);
+
+  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("dms.fields.name1"),
+      dataIndex: ["name1", "fullName"],
+      key: "name1",
+      sorter: (a, b) => alphaSort(a.name1?.fullName, b.name1?.fullName),
+    },
+    {
+      title: t("dms.fields.name2"),
+      dataIndex: ["name2", "fullName"],
+      key: "name2",
+      sorter: (a, b) => alphaSort(a.name2?.fullName, b.name2?.fullName),
+    },
+    {
+      title: t("dms.fields.phone"),
+      dataIndex: ["contactInfo", "mainTelephoneNumber", "value"],
+      key: "phone",
+      render: (record, value) => (
+        <PhoneFormatter>
+          {record.contactInfo?.mainTelephoneNumber?.value}
+        </PhoneFormatter>
+      ),
+    },
+    {
+      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
+      title={() => (
+        <div>
+          <Button onClick={onOk}>Select</Button>
+        </div>
+      )}
+      pagination={{ position: "top" }}
+      columns={columns}
+      rowKey={(record) => record.id.value}
+      dataSource={customerList}
+      //onChange={handleTableChange}
+      rowSelection={{
+        onSelect: (props) => {
+          setSelectedCustomer(props.id.value);
+        },
+        type: "radio",
+        selectedRowKeys: [selectedCustomer],
+      }}
+    />
+  );
+}