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

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],
+      }}
+    />
+  );
+}

client/src/pages/dms/dms.container.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Button, Result } from "antd";
+import { Button, Result, Select, Space } from "antd";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,7 @@ import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
 import DmsAllocationsSummary from "../../components/dms-allocations-summary/dms-allocations-summary.component";
+import DmsCustomerSelector from "../../components/dms-customer-selector/dms-customer-selector.component";
 import DmsLogEvents from "../../components/dms-log-events/dms-log-events.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { auth } from "../../firebase/firebase.utils";
@@ -45,6 +46,7 @@ export const socket = SocketIO(
 
 export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
+  const [logLevel, setLogLevel] = useState("DEBUG");
   const [logs, setLogs] = useState([]);
   const search = queryString.parse(useLocation().search);
   const { jobId } = search;
@@ -69,6 +71,19 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     socket.on("connected", () => {
       console.log("Connected again.");
     });
+    socket.on("reconnect", () => {
+      console.log("Connected again.");
+      setLogs((logs) => {
+        return [
+          ...logs,
+          {
+            timestamp: new Date(),
+            level: "WARNING",
+            message: "Reconnected to CDK Export Service",
+          },
+        ];
+      });
+    });
 
     socket.on("log-event", (payload) => {
       setLogs((logs) => {
@@ -77,12 +92,13 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     });
 
     socket.connect();
-    socket.emit("set-log-level", "TRACE");
+    socket.emit("set-log-level", logLevel);
 
     return () => {
       socket.removeAllListeners();
       socket.disconnect();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (!jobId || !bodyshop.cdk_dealerid) return <Result status="404" />;
@@ -94,35 +110,42 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <div>
-      <Button
-        onClick={() => {
-          socket.emit(
-            `${dmsType}-export-job`,
-            "752a4f5f-22ab-414b-b182-98d4e62227ef"
-          );
-        }}
-      >
-        Export
-      </Button>
-
-      <Button
-        onClick={() => {
-          setLogs([]);
-          socket.disconnect();
-          socket.connect();
-        }}
-      >
-        reconnect
-      </Button>
-
-      <DmsAllocationsSummary
-        socket={socket}
-        job={data ? data.jobs_by_pk : null}
-      />
-
+      <Space>
+        <Button
+          onClick={() => {
+            socket.emit(
+              `${dmsType}-export-job`,
+              "752a4f5f-22ab-414b-b182-98d4e62227ef"
+            );
+          }}
+        >
+          Export
+        </Button>
+        <Select
+          placeholder="Log Level"
+          value={logLevel}
+          onChange={(value) => {
+            setLogLevel(value);
+            socket.emit("set-log-level", value);
+          }}
+        >
+          <Select.Option>TRACE</Select.Option>
+          <Select.Option>DEBUG</Select.Option>
+          <Select.Option>INFO</Select.Option>
+          <Select.Option>WARNING</Select.Option>
+          <Select.Option>ERROR</Select.Option>
+        </Select>
+        <Button onClick={() => setLogs([])}>Clear Logs</Button>
+      </Space>
       <div>
+        <DmsAllocationsSummary
+          socket={socket}
+          job={data ? data.jobs_by_pk : null}
+        />
         <DmsLogEvents socket={socket} logs={logs} />
       </div>
+
+      <DmsCustomerSelector />
     </div>
   );
 }