Progress Commit

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

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

@@ -77,6 +77,7 @@ export function ProductionBoardKanbanComponent({
     setIsMoving(true);
 
     const sameColumnTransfer = sourceLaneId === targetLaneId;
+
     const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId);
     const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId);
 

client/src/components/trello-board/controllers/Lane.jsx

@@ -161,9 +161,9 @@ class Lane extends Component {
     } = this.props;
     const { addCardMode, collapsed } = this.state;
 
-    const showableCards = collapsed ? [] : cards;
+    const stableCards = collapsed ? [] : cards;
 
-    const cardList = this.sortCards(showableCards, laneSortFunction).map((card, idx) => {
+    const cardList = this.sortCards(stableCards, laneSortFunction).map((card, idx) => {
       const onDeleteCard = () => this.removeCard(card.id);
       const cardToRender = (
         <components.Card
@@ -191,7 +191,7 @@ class Lane extends Component {
     return (
       <components.ScrollableLane ref={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <Container
-          orientation="vertical"
+          orientation="vertical" // TODO This is where we would switch the card orientation.
           groupName={this.groupName}
           dragClass={cardDragClass}
           dropClass={cardDropClass}

client/src/components/trello-board/styles/Base.js

@@ -25,11 +25,9 @@ export const GlobalStyle = createGlobalStyle`
   .icon-overflow-menu-horizontal:before {
     content: "\\E91F";
   }
-
   .icon-lg, .icon-sm {
     color: #798d99;
   }
-
   .icon-lg {
     height: 32px;
     font-size: 16px;
@@ -60,7 +58,6 @@ export const CustomPopoverContent = styled(PopoverContent)`
   padding: 5px;
   left: 50%;
   transform: translateX(-50%);
-
   ${(props) =>
     props.active &&
     `
@@ -70,13 +67,11 @@ export const CustomPopoverContent = styled(PopoverContent)`
   `} &::before {
     visibility: hidden;
   }
-
   a {
     color: rgba(255, 255, 255, 0.56);
     padding: 0.5em 1em;
     margin: 0;
     text-decoration: none;
-
     &:hover {
       background-color: #00bcd4 !important;
       color: #37474f;
@@ -284,7 +279,6 @@ export const InlineInput = styled.textarea`
   border: 0;
   padding: 0 8px;
   outline: 0;
-
   ${(props) =>
     props.border &&
     css`