IO-1666 Sticky headers on production board.

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": "",