IO-1666 Sticky headers on production board.

bodyshop_translations.babel

@@ -36938,6 +36938,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>stickyheader</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>sublets</name>
                                         <definition_loaded>false</definition_loaded>

client/package.json

@@ -55,6 +55,7 @@
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
+    "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",
     "recharts": "^2.1.8",

client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx

@@ -131,6 +131,13 @@ export default function ProductionBoardKanbanCardSettings({
               >
                 <Switch />
               </Form.Item>
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.stickyheader")}
+                name="stickyheader"
+              >
+                <Switch />
+              </Form.Item>
             </Col>
           </Row>
         </Form>

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -1,27 +1,27 @@
+import { SyncOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import Board, { moveCard } from "@asseinfo/react-kanban";
-//import "@asseinfo/react-kanban/dist/styles.css";
-import "./production-board-kanban.styles.scss";
-import { SyncOutlined } from "@ant-design/icons";
-import { Grid, notification, Button, PageHeader, Space, Statistic } from "antd";
+import { Button, Grid, notification, PageHeader, Space, Statistic } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { Sticky, StickyContainer } from "react-sticky";
 import { createStructuredSelector } from "reselect";
-import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
-import { createBoardData } from "./production-board-kanban.utils.js";
-import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import { insertAuditTrail } from "../../redux/application/application.actions";
-import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
 import styled from "styled-components";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
+import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
+import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
-
+import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
+//import "@asseinfo/react-kanban/dist/styles.css";
+import "./production-board-kanban.styles.scss";
+import { createBoardData } from "./production-board-kanban.utils.js";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician,
@@ -184,9 +184,52 @@ export function ProductionBoardKanbanComponent({
       : standardSizes[selectedBreakpoint[0]]
     : "250";
 
+  const stickyHeader = {
+    renderColumnHeader: ({ title }) => (
+      <Sticky>
+        {({
+          style,
+
+          // the following are also available but unused in this example
+          isSticky,
+          wasSticky,
+          distanceFromTop,
+          distanceFromBottom,
+          calculatedHeight,
+        }) => (
+          <div
+            className="react-kanban-column-header"
+            style={{ ...style, zIndex: "99", backgroundColor: "#ddd" }}
+          >
+            {title}
+          </div>
+        )}
+      </Sticky>
+    ),
+  };
+
+  const cardSettings =
+    associationSettings &&
+    associationSettings.kanban_settings &&
+    Object.keys(associationSettings.kanban_settings).length > 0
+      ? associationSettings.kanban_settings
+      : {
+          ats: true,
+          clm_no: true,
+          compact: false,
+          ownr_nm: true,
+          sublets: true,
+          ins_co_nm: true,
+          production_note: true,
+          employeeassignments: true,
+          scheduled_completion: true,
+          stickyheader: false,
+        };
+
   return (
     <Container width={width}>
       <IndefiniteLoading loading={isMoving} />
+
       <PageHeader
         title={
           <Space>
@@ -217,33 +260,18 @@ export function ProductionBoardKanbanComponent({
         }
       />
       <ProductionListDetailComponent jobs={data} />
-      <Board
-        children={boardLanes}
-        disableCardDrag={isMoving}
-        renderCard={(card) =>
-          ProductionBoardCard(
-            technician,
-            card,
-            bodyshop,
-            associationSettings &&
-              associationSettings.kanban_settings &&
-              Object.keys(associationSettings.kanban_settings).length > 0
-              ? associationSettings.kanban_settings
-              : {
-                  ats: true,
-                  clm_no: true,
-                  compact: false,
-                  ownr_nm: true,
-                  sublets: true,
-                  ins_co_nm: true,
-                  production_note: true,
-                  employeeassignments: true,
-                  scheduled_completion: true,
-                }
-          )
-        }
-        onCardDragEnd={handleDragEnd}
-      />
+      <StickyContainer>
+        <Board
+          style={{ height: "100%" }}
+          children={boardLanes}
+          disableCardDrag={isMoving}
+          {...(cardSettings.stickyheader && stickyHeader)}
+          renderCard={(card) =>
+            ProductionBoardCard(technician, card, bodyshop, cardSettings)
+          }
+          onCardDragEnd={handleDragEnd}
+        />
+      </StickyContainer>
     </Container>
   );
 }

client/src/translations/en_us/common.json

@@ -2195,6 +2195,7 @@
 				"refinishhours": "R",
 				"scheduled_completion": "Scheduled Completion",
 				"selectview": "Select a View",
+				"stickyheader": "Sticky Header (BETA)",
 				"sublets": "Sublets",
 				"totalhours": "Total Hrs ",
 				"touchtime": "T/T",

client/src/translations/es/common.json

@@ -2195,6 +2195,7 @@
 				"refinishhours": "",
 				"scheduled_completion": "",
 				"selectview": "",
+				"stickyheader": "",
 				"sublets": "",
 				"totalhours": "",
 				"touchtime": "",

client/src/translations/fr/common.json

@@ -2195,6 +2195,7 @@
 				"refinishhours": "",
 				"scheduled_completion": "",
 				"selectview": "",
+				"stickyheader": "",
 				"sublets": "",
 				"totalhours": "",
 				"touchtime": "",

client/yarn.lock

@@ -11293,7 +11293,7 @@ raf-schd@^4.0.2:
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
-raf@3.x, raf@^3.4.0, raf@^3.4.1, raf@~3.4.0:
+raf@3.x, raf@^3.3.0, raf@^3.4.0, raf@^3.4.1, raf@~3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -12085,6 +12085,14 @@ react-smooth@^2.0.0:
     raf "^3.4.0"
     react-transition-group "2.9.0"
 
+react-sticky@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
+  integrity sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==
+  dependencies:
+    prop-types "^15.5.8"
+    raf "^3.3.0"
+
 react-sublime-video@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/react-sublime-video/-/react-sublime-video-0.2.5.tgz#c967b8e9a374b36d6a5d1b63b93fa6ec02e54842"