Progress Commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-05-13 13:37:19 -04:00
parent f647e1ff11
commit a33a92207b
20 changed files with 2266 additions and 3030 deletions
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/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;
--- a/client/src/components/production-board-kanban/production-board-kanban.styles.scss
+++ b/client/src/components/production-board-kanban/production-board-kanban.styles.scss
@@ -1,31 +1,31 @@
-.react-kanban-board {
+.react-trello-board {
  padding: 5px;
 }

-.react-kanban-card {
+.react-trello-card {
  border-radius: 3px;
  background-color: #fff;
  padding: 4px;
  margin-bottom: 7px;
 }

-// .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: 145px;
 //   min-width: 145px;
 // }

-.react-kanban-card--dragging {
+.react-trello-card--dragging {
  box-shadow: 2px 2px grey;
 }

-.react-kanban-card__description {
+.react-trello-card__description {
  padding-top: 10px;
 }

-.react-kanban-card__title {
+.react-trello-card__title {
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  font-weight: bold;
@@ -33,31 +33,31 @@
  justify-content: space-between;
 }

-.react-kanban-column {
+.react-trello-column {
  padding: 10px;
  border-radius: 2px;
  background-color: #eee;
  margin: 5px;
 }

-.react-kanban-column input:focus {
+.react-trello-column input:focus {
  outline: none;
 }

-.react-kanban-card-adder-form {
+.react-trello-card-adder-form {
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 7px;
 }

-.react-kanban-card-adder-form input {
+.react-trello-card-adder-form input {
  border: 0px;
  font-family: inherit;
  font-size: inherit;
 }

-.react-kanban-card-adder-button {
+.react-trello-card-adder-button {
  width: 100%;
  margin-top: 5px;
  background-color: transparent;
@@ -70,11 +70,11 @@
  font-weight: bold;
 }

-.react-kanban-card-adder-button:hover {
+.react-trello-card-adder-button:hover {
  background-color: #ccc;
 }

-.react-kanban-card-adder-form__title {
+.react-trello-card-adder-form__title {
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
@@ -85,20 +85,20 @@
  padding: 0px;
 }

-.react-kanban-card-adder-form__title:focus {
+.react-trello-card-adder-form__title:focus {
  outline: none;
 }

-.react-kanban-card-adder-form__description {
+.react-trello-card-adder-form__description {
  width: 100%;
  margin-top: 10px;
 }

-.react-kanban-card-adder-form__description:focus {
+.react-trello-card-adder-form__description:focus {
  outline: none;
 }

-.react-kanban-card-adder-form__button {
+.react-trello-card-adder-form__button {
  background-color: #eee;
  border: none;
  padding: 5px;
@@ -107,39 +107,39 @@
  border-radius: 3px;
 }

-.react-kanban-card-adder-form__button:hover {
+.react-trello-card-adder-form__button:hover {
  transition: 0.3s;
  cursor: pointer;
  background-color: #ccc;
 }

-.react-kanban-column-header {
+.react-trello-column-header {
  padding-bottom: 10px;
  font-weight: bold;
 }

-.react-kanban-column-header input:focus {
+.react-trello-column-header input:focus {
  outline: none;
 }

-.react-kanban-column-header__button {
+.react-trello-column-header__button {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
 }

-.react-kanban-column-header__button:hover,
-.react-kanban-column-header__button:focus,
-.react-kanban-column-header__button:active {
+.react-trello-column-header__button:hover,
+.react-trello-column-header__button:focus,
+.react-trello-column-header__button:active {
  background-color: #e6e6e6;
 }

-.react-kanban-column-adder-button {
+.react-trello-column-adder-button {
  border: 2px dashed #eee;
  height: 132px;
  margin: 5px;
 }

-.react-kanban-column-adder-button:hover {
+.react-trello-column-adder-button:hover {
  cursor: pointer;
 }