From 48fd2b1461a9cad12e1857ba0c98a9ee34efdc69 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Fri, 3 Dec 2021 09:32:47 -0800
Subject: [PATCH] IO-233 Minor CDK UI Updates.

---
 .../dms-customer-selector.component.jsx       |  2 -
 .../dms-post-form/dms-post-form.component.jsx | 14 +++-
 client/src/pages/dms/dms.container.jsx        | 82 ++++++++++---------
 3 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx b/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
index 992a67240..a8baa4b0b 100644
--- a/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
+++ b/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
@@ -34,7 +34,6 @@ export function DmsCustomerSelector({ bodyshop }) {
     setVisible(true);
     setDmsType("pbs");
     setcustomerList(customerList);
-
   });
 
   const onUseSelected = () => {
@@ -118,7 +117,6 @@ export function DmsCustomerSelector({ bodyshop }) {
   if (!visible) return null;
   return (
     <Col span={24}>
-    {dmsType}
       <Table
         title={() => (
           <div>
diff --git a/client/src/components/dms-post-form/dms-post-form.component.jsx b/client/src/components/dms-post-form/dms-post-form.component.jsx
index 911040cb2..44b1f86fb 100644
--- a/client/src/components/dms-post-form/dms-post-form.component.jsx
+++ b/client/src/components/dms-post-form/dms-post-form.component.jsx
@@ -7,10 +7,10 @@ import {
   Form,
   Input,
   InputNumber,
+  Menu,
   Select,
   Space,
   Statistic,
-  Menu,
   Typography,
 } from "antd";
 import Dinero from "dinero.js";
@@ -21,9 +21,9 @@ import { createStructuredSelector } from "reselect";
 import { determineDmsType } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
+import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -33,7 +33,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
 
-export function DmsPostForm({ bodyshop, socket, job }) {
+export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
 
@@ -61,6 +61,14 @@ export function DmsPostForm({ bodyshop, socket, job }) {
       jobid: job.id,
       txEnvelope: values,
     });
+    console.log(logsRef);
+    if (logsRef) {
+      console.log("executing", logsRef);
+      logsRef.curent &&
+        logsRef.current.scrollIntoView({
+          behavior: "smooth",
+        });
+    }
   };
 
   return (
diff --git a/client/src/pages/dms/dms.container.jsx b/client/src/pages/dms/dms.container.jsx
index 98493b605..5fc7f1166 100644
--- a/client/src/pages/dms/dms.container.jsx
+++ b/client/src/pages/dms/dms.container.jsx
@@ -7,13 +7,13 @@ import {
   Result,
   Row,
   Select,
-  Space,
+  Space
 } from "antd";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation, useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
@@ -26,7 +26,7 @@ import { auth } from "../../firebase/firebase.utils";
 import { QUERY_JOB_EXPORT_DMS } from "../../graphql/jobs.queries";
 import {
   setBreadcrumbs,
-  setSelectedHeader,
+  setSelectedHeader
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
@@ -66,6 +66,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     variables: { id: jobId },
     skip: !jobId,
   });
+  const logsRef = useRef(null);
 
   useEffect(() => {
     document.title = t("titles.dms");
@@ -151,46 +152,49 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
             socket={socket}
             jobId={jobId}
             job={data && data.jobs_by_pk}
+            logsRef={logsRef}
           />
         </Col>
 
         <DmsCustomerSelector />
 
-        <Col span={24}>
-          <Card
-            title={t("jobs.labels.dms.logs")}
-            extra={
-              <Space wrap>
-                <Select
-                  placeholder="Log Level"
-                  value={logLevel}
-                  onChange={(value) => {
-                    setLogLevel(value);
-                    socket.emit("set-log-level", value);
-                  }}
-                >
-                  <Select.Option key="TRACE">TRACE</Select.Option>
-                  <Select.Option key="DEBUG">DEBUG</Select.Option>
-                  <Select.Option key="INFO">INFO</Select.Option>
-                  <Select.Option key="WARNING">WARNING</Select.Option>
-                  <Select.Option key="ERROR">ERROR</Select.Option>
-                </Select>
-                <Button onClick={() => setLogs([])}>Clear Logs</Button>
-                <Button
-                  onClick={() => {
-                    setLogs([]);
-                    socket.disconnect();
-                    socket.connect();
-                  }}
-                >
-                  Reconnect
-                </Button>
-              </Space>
-            }
-          >
-            <DmsLogEvents socket={socket} logs={logs} />
-          </Card>
-        </Col>
+        <div ref={logsRef}>
+          <Col span={24}>
+            <Card
+              title={t("jobs.labels.dms.logs")}
+              extra={
+                <Space wrap>
+                  <Select
+                    placeholder="Log Level"
+                    value={logLevel}
+                    onChange={(value) => {
+                      setLogLevel(value);
+                      socket.emit("set-log-level", value);
+                    }}
+                  >
+                    <Select.Option key="TRACE">TRACE</Select.Option>
+                    <Select.Option key="DEBUG">DEBUG</Select.Option>
+                    <Select.Option key="INFO">INFO</Select.Option>
+                    <Select.Option key="WARNING">WARNING</Select.Option>
+                    <Select.Option key="ERROR">ERROR</Select.Option>
+                  </Select>
+                  <Button onClick={() => setLogs([])}>Clear Logs</Button>
+                  <Button
+                    onClick={() => {
+                      setLogs([]);
+                      socket.disconnect();
+                      socket.connect();
+                    }}
+                  >
+                    Reconnect
+                  </Button>
+                </Space>
+              }
+            >
+              <DmsLogEvents socket={socket} logs={logs} />
+            </Card>
+          </Col>
+        </div>
       </Row>
     </div>
   );