Progress Commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -20,7 +20,6 @@ import ProductionBoardFilters from "../production-board-filters/production-board
 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 CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
@@ -31,7 +30,14 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 export function ProductionBoardKanbanComponent({
@@ -163,26 +169,24 @@ export function ProductionBoardKanbanComponent({
       : standardSizes[selectedBreakpoint[0]]
     : "250";
 
-  const stickyHeader = {
-    renderColumnHeader: ({ title }) => (
-      <Sticky>
-        {({
-          style,
+  const StickyHeader = ({ title }) => (
+    <Sticky>
+      {({ style }) => (
+        <div
+          className="react-trello-column-header"
+          style={{ ...style, zIndex: "99", backgroundColor: "#e3e3e3", paddingLeft: "5px" }}
+        >
+          {title}
+        </div>
+      )}
+    </Sticky>
+  );
 
-          // 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 NormalHeader = ({ title }) => (
+    <div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3", paddingLeft: "5px" }}>
+      {title}
+    </div>
+  );
 
   const cardSettings =
     associationSettings &&
@@ -203,6 +207,11 @@ export function ProductionBoardKanbanComponent({
           cardcolor: false
         };
 
+  const components = {
+    Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
+    LaneHeader: cardSettings.stickyheader ? StickyHeader : NormalHeader
+  };
+
   return (
     <Container width={width}>
       <IndefiniteLoading loading={isMoving} />
@@ -227,20 +236,27 @@ export function ProductionBoardKanbanComponent({
       />
       {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
       <ProductionListDetailComponent jobs={data} />
-      <StickyContainer>
-        <Board
-          data={boardLanes}
-          draggable
-          canAddLanes
-          handleDragEnd={handleDragEnd}
-          editable
-          style={{ height: "100%", backgroundColor: "transparent" }}
-          renameLane
-          components={{
-            Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings })
-          }}
-        />
-      </StickyContainer>
+      {cardSettings.stickyheader ? (
+        <StickyContainer>
+          <Board
+            data={boardLanes}
+            draggable
+            handleDragEnd={handleDragEnd}
+            style={{ height: "100%", backgroundColor: "transparent" }}
+            components={components}
+          />
+        </StickyContainer>
+      ) : (
+        <div>
+          <Board
+            data={boardLanes}
+            draggable
+            handleDragEnd={handleDragEnd}
+            style={{ height: "100%", backgroundColor: "transparent" }}
+            components={components}
+          />
+        </div>
+      )}
     </Container>
   );
 }
@@ -248,9 +264,9 @@ export function ProductionBoardKanbanComponent({
 export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent);
 
 const Container = styled.div`
-  .react-kanban-card-skeleton,
-  .react-kanban-card,
-  .react-kanban-card-adder-form {
+  .react-trello-card-skeleton,
+  .react-trello-card,
+  .react-trello-card-adder-form {
     box-sizing: border-box;
     max-width: ${(props) => props.width}px;
     min-width: ${(props) => props.width}px;