feature/IO-3357-Reynolds-and-Reynolds-DMS-API-Integration / RRScratch2 / Polish

client/src/App/App.styles.scss

@@ -425,6 +425,24 @@
   }
 }
 
+.dms-equal-height-col {
+  display: flex; // make the Col a flex container
+}
+
+/* If the direct child is an AntD Card, make it fill the column */
+.dms-equal-height-col > .ant-card {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Optional: if you want the card body to fill vertically too */
+.dms-equal-height-col > .ant-card .ant-card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 //.rbc-time-header-gutter {
 //  padding: 0;
 //}

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -24,11 +24,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummar
  * @param bodyshop
  * @param jobId
  * @param title
- * @param minHeight
  * @returns {JSX.Element}
  * @constructor
  */
-export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, minHeight }) {
+export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
 
@@ -98,8 +97,6 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, mi
 
   return (
     <Card
-      style={minHeight ? { minHeight } : undefined}
-      className="dms-summary-card"
       title={title}
       extra={
         <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>

client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx

@@ -50,7 +50,7 @@ function normalizeJobAllocations(ack) {
  * is now done on the backend via buildRogogFromAllocations/buildRolaborFromRogog.
  * This component just renders the preview from `ack.rogg` / `ack.rolabor`.
  */
-export function RrAllocationsSummary({ socket, bodyshop, jobId, title, minHeight }) {
+export function RrAllocationsSummary({ socket, bodyshop, jobId, title }) {
   const { t } = useTranslation();
   const [roggPreview, setRoggPreview] = useState(null);
   const [rolaborPreview, setRolaborPreview] = useState(null);
@@ -281,8 +281,6 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, minHeight
 
   return (
     <Card
-      style={minHeight ? { minHeight } : undefined}
-      className="dms-summary-card"
       title={title}
       extra={
         <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>

client/src/components/dms-post-form/cdklike-dms-post-form.jsx

@@ -38,11 +38,10 @@ import { DMS_MAP } from "../../utils/dmsUtils";
  * @param job
  * @param logsRef
  * @param mode
- * @param minHeight
  * @returns {JSX.Element}
  * @constructor
  */
-export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode, minHeight }) {
+export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const [, /*unused*/ setTick] = useState(0); // handy if you need a forceUpdate later
@@ -123,11 +122,7 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
     : { totalSale: Dinero(), totalCost: Dinero() };
 
   return (
-    <Card
-      className="dms-summary-card"
-      style={minHeight ? { minHeight } : undefined}
-      title={t("jobs.labels.dms.postingform")}
-    >
+    <Card title={t("jobs.labels.dms.postingform")}>
       <Form
         form={form}
         layout="vertical"

client/src/components/dms-post-form/rr-dms-post-form.jsx

@@ -26,11 +26,10 @@ import dayjs from "../../utils/day";
  * @param socket
  * @param job
  * @param logsRef
- * @param minHeight
  * @returns {JSX.Element}
  * @constructor
  */
-export default function RRPostForm({ bodyshop, socket, job, logsRef, minHeight }) {
+export default function RRPostForm({ bodyshop, socket, job, logsRef }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
 
@@ -126,11 +125,7 @@ export default function RRPostForm({ bodyshop, socket, job, logsRef, minHeight }
     : { totalSale: Dinero(), totalCost: Dinero() };
 
   return (
-    <Card
-      style={minHeight ? { minHeight } : undefined}
-      className="dms-summary-card"
-      title={t("jobs.labels.dms.postingform")}
-    >
+    <Card title={t("jobs.labels.dms.postingform")}>
       <Form
         form={form}
         layout="vertical"

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

@@ -38,8 +38,6 @@ const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
-const SUMMARY_MIN_HEIGHT = 545;
-
 export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
 
 const DMS_SOCKET_EVENTS = {
@@ -389,10 +387,9 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
       <AlertComponent style={{ marginBottom: 10 }} message={bannerMessage} type="warning" showIcon closable />
 
       <Row gutter={[16, 16]}>
-        <Col md={24} lg={10}>
+        <Col md={24} lg={10} className="dms-equal-height-col">
           {!isRrMode ? (
             <DmsAllocationsSummary
-              minHeight={SUMMARY_MIN_HEIGHT}
               key={resetKey}
               title={
                 <span>
@@ -410,7 +407,6 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
             />
           ) : (
             <RrAllocationsSummary
-              minHeight={SUMMARY_MIN_HEIGHT}
               key={resetKey}
               title={
                 <span>
@@ -428,15 +424,8 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
           )}
         </Col>
 
-        <Col md={24} lg={14}>
-          <DmsPostForm
-            minHeight={SUMMARY_MIN_HEIGHT}
-            key={resetKey}
-            socket={activeSocket}
-            job={data?.jobs_by_pk}
-            logsRef={logsRef}
-            mode={mode}
-          />
+        <Col md={24} lg={14} className="dms-equal-height-col">
+          <DmsPostForm key={resetKey} socket={activeSocket} job={data?.jobs_by_pk} logsRef={logsRef} mode={mode} />
         </Col>
 
         <DmsCustomerSelector
@@ -494,6 +483,8 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
                       if (activeSocket) {
                         activeSocket.disconnect();
                         activeSocket.connect();
+                        // Re-emit reset after reconnect (we need to figure out how to make sure active socket has finished connecting first)
+                        // activeSocket.emit("dms-reset-context", { jobId, mode });
                       }
                     }}
                   >