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/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
@@ -89,8 +89,6 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
      render: (text, record) => {
-        console.log("Render record out today");
-        console.dir(record);
        return record.ownerid ? (
          <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
@@ -12,7 +12,6 @@ import JobCloseRoGuardBills from "./job-close-ro-guard.bills";
 import JobCloseRoGuardPpd from "./job-close-ro-guard.ppd";
 import JobCloseRoGuardProfit from "./job-close-ro-guard.profit";
 import "./job-close-ro-guard.styles.scss";
-import JobCloseRoGuardSublet from "./job-close-ro-guard.sublet";
 import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";

--- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
@@ -66,21 +66,23 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
    ((dayjs().isSameOrAfter(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-past") ||
      (dayjs().add(1, "day").isSame(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-soon"));

-  const totalHrs = card
-    ? card.metadata.labhrs.aggregate.sum.mod_lb_hrs + card.metadata.larhrs.aggregate.sum.mod_lb_hrs
-    : 0;
+  const totalHrs =
+    card && card?.metadata?.labhrs && card?.metadata?.larhrs
+      ? card.metadata.labhrs.aggregate.sum.mod_lb_hrs + card.metadata.larhrs.aggregate.sum.mod_lb_hrs
+      : 0;

  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);

  return (
    <Card
+      draggable={true}
      size="small"
      style={{
        backgroundColor:
          cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
        color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
        maxWidth: "250px",
-        marginBottom: "5px"
+        margin: "5px"
      }}
      title={
        <Space>
--- 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;
 }
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -18,8 +18,6 @@ const mapDispatchToProps = (dispatch) => ({

 function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
  const { t } = useTranslation();
-  console.log("RECORD");
-  console.dir(record);
  const [note, setNote] = useState((record.production_vars && record.production_vars.note) || "");

  const [open, setOpen] = useState(false);
--- a/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
+++ b/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
@@ -9,8 +9,7 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
  const { t } = useTranslation();
  const [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET);
  const [loading, setLoading] = useState(false);
-  console.log("subletJobLines");
-  console.dir(subletJobLines);
+
  const subletCount = useMemo(() => {
    return {
      total: subletJobLines.filter((s) => !s.sublet_ignored).length,
--- a/client/src/components/trello-board/components/NewLaneForm.jsx
+++ b/client/src/components/trello-board/components/NewLaneForm.jsx
@@ -19,13 +19,14 @@ const NewLane = ({ onCancel, onAdd }) => {

  const getValue = () => refInput.current.getValue();

-  const onClickOutside = (a, b, c) => {
-    if (getValue().length > 0) {
-      handleSubmit();
-    } else {
-      onCancel();
-    }
-  };
+  // TODO: Commented out because it was never called and it was causing a error
+  // const onClickOutside = (a, b, c) => {
+  //   if (getValue().length > 0) {
+  //     handleSubmit();
+  //   } else {
+  //     onCancel();
+  //   }
+  // };

  return (
    <Section>
--- a/client/src/components/trello-board/components/index.js
+++ b/client/src/components/trello-board/components/index.js
@@ -8,7 +8,7 @@ import AddCardLink from "./AddCardLink";
 import NewLaneSection from "./NewLaneSection.jsx";
 import { BoardWrapper, GlobalStyle, ScrollableLane, Section } from "../styles/Base";

-export default {
+const exports = {
  GlobalStyle,
  BoardWrapper,
  Loader,
@@ -22,3 +22,5 @@ export default {
  Card,
  AddCardLink
 };
+
+export default exports;
--- a/client/src/components/trello-board/controllers/BoardContainer.jsx
+++ b/client/src/components/trello-board/controllers/BoardContainer.jsx
@@ -70,8 +70,9 @@ class BoardContainer extends Component {
        switch (event.type) {
          case "ADD_CARD":
            return actions.addCard({ laneId: event.laneId, card: event.card });
-          case "UPDATE_CARD":
-            return actions.updateCard({ laneId: event.laneId, card: event.card });
+          // Note: Removed because there was a duplicate entry
+          // case "UPDATE_CARD":
+          //   return actions.updateCard({ laneId: event.laneId, card: event.card });
          case "REMOVE_CARD":
            return actions.removeCard({ laneId: event.laneId, cardId: event.cardId });
          case "REFRESH_BOARD":
--- a/client/src/components/trello-board/controllers/Lane.jsx
+++ b/client/src/components/trello-board/controllers/Lane.jsx
@@ -62,12 +62,14 @@ class Lane extends Component {
    }
  };

-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!isEqual(this.props.cards, nextProps.cards)) {
-      this.setState({
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!isEqual(prevState.cards, nextProps.cards)) {
+      return {
        currentPage: nextProps.currentPage
-      });
+      };
    }
+    // Return null if the state hasn't changed
+    return null;
  }

  removeCard = (cardId) => {
@@ -155,8 +157,7 @@ class Lane extends Component {
      cardDropClass,
      tagStyle,
      cardStyle,
-      components,
-      t
+      components
    } = this.props;
    const { addCardMode, collapsed } = this.state;

--- a/client/src/components/trello-board/dnd/Container.jsx
+++ b/client/src/components/trello-board/dnd/Container.jsx
@@ -1,112 +1,109 @@
-import React, {Component} from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-import container, {dropHandlers} from 'kuika-smooth-dnd'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import container, { dropHandlers } from "kuika-smooth-dnd";

-container.dropHandler = dropHandlers.reactDropHandler().handler
-container.wrapChild = p => p // dont wrap children they will already be wrapped
+container.dropHandler = dropHandlers.reactDropHandler().handler;
+container.wrapChild = (p) => p; // don't wrap children they will already be wrapped

 class Container extends Component {
  constructor(props) {
-    super(props)
-    this.getContainerOptions = this.getContainerOptions.bind(this)
-    this.setRef = this.setRef.bind(this)
-    this.prevContainer = null
+    super(props);
+    this.getContainerOptions = this.getContainerOptions.bind(this);
+    this.setRef = this.setRef.bind(this);
+    this.prevContainer = null;
  }

  componentDidMount() {
-    this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this)
-    this.prevContainer = this.containerDiv
-    this.container = container(this.containerDiv, this.getContainerOptions())
+    this.prevContainer = this.containerDiv;
+    this.container = container(this.containerDiv, this.getContainerOptions());
  }

  componentWillUnmount() {
-    this.container.dispose()
-    this.container = null
+    this.container.dispose();
+    this.container = null;
  }

  componentDidUpdate() {
-    this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this)
    if (this.containerDiv) {
      if (this.prevContainer && this.prevContainer !== this.containerDiv) {
-        this.container.dispose()
-        this.container = container(this.containerDiv, this.getContainerOptions())
-        this.prevContainer = this.containerDiv
+        this.container.dispose();
+        this.container = container(this.containerDiv, this.getContainerOptions());
+        this.prevContainer = this.containerDiv;
      }
    }
  }

  render() {
    if (this.props.render) {
-      return this.props.render(this.setRef)
+      return this.props.render(this.setRef);
    } else {
      return (
        <div style={this.props.style} ref={this.setRef}>
          {this.props.children}
        </div>
-      )
+      );
    }
  }

  setRef(element) {
-    this.containerDiv = element
+    this.containerDiv = element;
  }

  getContainerOptions() {
-    const functionProps = {}
+    const functionProps = {};

    if (this.props.onDragStart) {
-      functionProps.onDragStart = (...p) => this.props.onDragStart(...p)
+      functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
    }

    if (this.props.onDragEnd) {
-      functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p)
+      functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
    }

    if (this.props.onDrop) {
-      functionProps.onDrop = (...p) => this.props.onDrop(...p)
+      functionProps.onDrop = (...p) => this.props.onDrop(...p);
    }

    if (this.props.getChildPayload) {
-      functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p)
+      functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
    }

    if (this.props.shouldAnimateDrop) {
-      functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p)
+      functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
    }

    if (this.props.shouldAcceptDrop) {
-      functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p)
+      functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
    }

    if (this.props.onDragEnter) {
-      functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p)
+      functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
    }

    if (this.props.onDragLeave) {
-      functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p)
+      functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
    }

    if (this.props.render) {
-      functionProps.render = (...p) => this.props.render(...p)
+      functionProps.render = (...p) => this.props.render(...p);
    }

    if (this.props.onDropReady) {
-      functionProps.onDropReady = (...p) => this.props.onDropReady(...p)
+      functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
    }

    if (this.props.getGhostParent) {
-      functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p)
+      functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
    }

-    return Object.assign({}, this.props, functionProps)
+    return Object.assign({}, this.props, functionProps);
  }
 }

 Container.propTypes = {
-  behaviour: PropTypes.oneOf(['move', 'copy', 'drag-zone']),
+  behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
  groupName: PropTypes.string,
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
  style: PropTypes.object,
  dragHandleSelector: PropTypes.string,
  className: PropTypes.string,
@@ -128,12 +125,12 @@ Container.propTypes = {
  render: PropTypes.func,
  getGhostParent: PropTypes.func,
  removeOnDropOut: PropTypes.bool
-}
+};

 Container.defaultProps = {
-  behaviour: 'move',
-  orientation: 'vertical',
-  className: 'reactTrelloBoard'
-}
+  behaviour: "move",
+  orientation: "vertical",
+  className: "reactTrelloBoard"
+};

-export default Container
+export default Container;
--- a/client/src/components/trello-board/helpers/deprecationWarnings.js
+++ b/client/src/components/trello-board/helpers/deprecationWarnings.js
@@ -1,24 +1,26 @@
 const REPLACE_TABLE = {
-  customLaneHeader: 'components.LaneHeader',
-  newLaneTemplate: 'components.NewLaneSection',
-  newCardTemplate: 'components.NewCardForm',
-  children: 'components.Card',
-  customCardLayout: 'components.Card',
+  customLaneHeader: "components.LaneHeader",
+  newLaneTemplate: "components.NewLaneSection",
+  newCardTemplate: "components.NewCardForm",
+  children: "components.Card",
+  customCardLayout: "components.Card",
  addLaneTitle: '`t` function with key "Add another lane"',
  addCardLink: '`t` function with key "Click to add card"'
-}
+};

-const warn = prop => {
-  const use = REPLACE_TABLE[prop]
+const warn = (prop) => {
+  const use = REPLACE_TABLE[prop];
  console.warn(
    `react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md`
-  )
-}
+  );
+};

-export default props => {
-  Object.keys(REPLACE_TABLE).forEach(key => {
+const deprecationWarning = (props) => {
+  Object.keys(REPLACE_TABLE).forEach((key) => {
    if (props.hasOwnProperty(key)) {
-      warn(key)
+      warn(key);
    }
-  })
-}
+  });
+};
+
+export default deprecationWarning;
--- a/client/src/components/trello-board/index.jsx
+++ b/client/src/components/trello-board/index.jsx
@@ -23,7 +23,7 @@ const TrelloBoard = ({ components, ...otherProps }) => {

  return (
    <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-      <Board components={{ ...DefaultComponents, ...components }} {...otherProps} />;
+      <Board components={{ ...DefaultComponents, ...components }} {...otherProps} />
    </StyleSheetManager>
  );
 };
--- a/client/src/components/trello-board/styles/Base.js
+++ b/client/src/components/trello-board/styles/Base.js
@@ -2,40 +2,40 @@ import { PopoverContainer, PopoverContent } from "react-popopo";
 import styled, { createGlobalStyle, css } from "styled-components";

 export const GlobalStyle = createGlobalStyle`
-    .comPlainTextContentEditable {
-        -webkit-user-modify: read-write-plaintext-only;
-        cursor: text;
-    }
+  .comPlainTextContentEditable {
+    -webkit-user-modify: read-write-plaintext-only;
+    cursor: text;
+  }

-    .comPlainTextContentEditable--has-placeholder::before {
-        content: attr(placeholder);
-        opacity: 0.5;
-        color: inherit;
-        cursor: text;
-    }
+  .comPlainTextContentEditable--has-placeholder::before {
+    content: attr(placeholder);
+    opacity: 0.5;
+    color: inherit;
+    cursor: text;
+  }

-    .react_trello_dragClass {
-        transform: rotate(3deg);
-    }
+  .react_trello_dragClass {
+    transform: rotate(3deg);
+  }

-    .react_trello_dragLaneClass {
-        transform: rotate(3deg);
-    }
+  .react_trello_dragLaneClass {
+    transform: rotate(3deg);
+  }

-    .icon-overflow-menu-horizontal:before {
-        content: "\\E91F";
-    }
+  .icon-overflow-menu-horizontal:before {
+    content: "\\E91F";
+  }

-    .icon-lg, .icon-sm {
-        color: #798d99;
-    }
+  .icon-lg, .icon-sm {
+    color: #798d99;
+  }

-    .icon-lg {
-        height: 32px;
-        font-size: 16px;
-        line-height: 32px;
-        width: 32px;
-    }
+  .icon-lg {
+    height: 32px;
+    font-size: 16px;
+    line-height: 32px;
+    width: 32px;
+  }
 `;

 export const CustomPopoverContainer = styled(PopoverContainer)`
@@ -115,16 +115,16 @@ export const Section = styled.section`
 `;

 export const LaneHeader = styled(Header)`
-  margin-bottom: 0px;
+  margin-bottom: 0;
  ${(props) =>
    props.editLaneTitle &&
    css`
-      padding: 0px;
+      padding: 0;
      line-height: 30px;
    `} ${(props) =>
    !props.editLaneTitle &&
    css`
-      padding: 0px 5px;
+      padding: 0 5px;
    `};
 `;

@@ -144,7 +144,6 @@ export const ScrollableLane = styled.div`
  overflow-x: hidden;
  align-self: center;
  max-height: 90vh;
-  min-height: 100px;
  margin-top: 10px;
  flex-direction: column;
  justify-content: space-between;
--- a/client/src/components/trello-board/widgets/index.jsx
+++ b/client/src/components/trello-board/widgets/index.jsx
@@ -2,8 +2,10 @@ import DeleteButton from "./DeleteButton";
 import EditableLabel from "./EditableLabel";
 import InlineInput from "./InlineInput";

-export default {
+const exports = {
  DeleteButton,
  EditableLabel,
  InlineInput
 };
+
+export default exports;
--- a/client/src/pages/jobs-create/jobs-create.component.jsx
+++ b/client/src/pages/jobs-create/jobs-create.component.jsx
@@ -13,7 +13,10 @@ import FormsFieldChanged from "../../components/form-fields-changed-alert/form-f

 export default function JobsCreateComponent({ form }) {
  const [pageIndex, setPageIndex] = useState(0);
-  const [errorMessage, setErrorMessage] = useState(null);
+
+  // const [errorMessage, setErrorMessage] = useState(null);
+  const [errorMessage] = useState(null);
+
  const [state] = useContext(JobCreateContext);

  const { t } = useTranslation();