- clear stage.

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

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

@@ -17,7 +17,7 @@ import ProductionBoardFilters from "../production-board-filters/production-board
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
 import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
-import { createBoardData, createFakeBoardData } from "./production-board-kanban.utils.js";
+import { createBoardData } from "./production-board-kanban.utils.js";
 import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
@@ -37,7 +37,7 @@ const mapDispatchToProps = (dispatch) => ({
     )
 });
 
-export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTrail, associationSettings }) {
+function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTrail, associationSettings }) {
   const [boardLanes, setBoardLanes] = useState({ lanes: [] });
   const [filter, setFilter] = useState({ search: "", employeeId: null });
   const [loading, setLoading] = useState(true);
@@ -45,15 +45,18 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
   const [orientation, setOrientation] = useState("vertical");
 
   const { t } = useTranslation();
+  const client = useApolloClient();
 
   useEffect(() => {
     if (associationSettings) {
-      setLoading(false);
+      setLoading(true);
       setOrientation(associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal");
+      setLoading(false);
     }
   }, [associationSettings]);
 
   useEffect(() => {
+    setIsMoving(true);
     const newBoardData = createBoardData(
       [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
       data,
@@ -75,8 +78,6 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
     setIsMoving(false);
   }, [data, bodyshop.md_ro_statuses, filter]);
 
-  const client = useApolloClient();
-
   const getCardByID = useCallback((data, cardId) => {
     for (const lane of data.lanes) {
       for (const card of lane.cards) {
@@ -213,9 +214,11 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
     [associationSettings]
   );
 
-  const handleSettingsChange = (newSettings) => {
+  const handleSettingsChange = useCallback((newSettings) => {
+    setLoading(true);
     setOrientation(newSettings.orientation ? "vertical" : "horizontal");
-  };
+    setLoading(false);
+  }, []);
 
   if (loading) {
     return <Skeleton active />;

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -1,25 +1,40 @@
 .react-trello-board {
   padding: 5px;
 }
-.item .is-dragging {
-  box-shadow: 2px 2px grey;
-  rotate: 5deg;
-}
 
 .height-preserving-container:empty {
   min-height: calc(var(--child-height));
   box-sizing: border-box;
 }
 
+.height-preserving-container {
+}
+
 .react-trello-column-header {
   font-weight: bold;
-  background-color: #e3e3e3;
-  .icon {
-    margin-right: 5px;
-  } 
+  cursor: pointer;
+  background-color: #d0d0d0;
+  border-radius: 5px 5px 0 0;
 }
 
+
 .production-alert {
   background: transparent;
   border: none;
 }
+.react-trello-footer {
+  background-color: #d0d0d0;
+  border-radius: 0 0 5px 5px;
+}
+
+.grid-item {
+  margin: 1px; // TODO: (Note) THis is where we set the margin for vertical
+}
+
+.lane-title {
+  vertical-align: middle;
+
+  .icon {
+    margin-right: 8px; /* Adjust the spacing as needed */
+  }
+}

client/src/components/production-board-kanban/trello-board/components/Lane/LaneFooter.jsx

@@ -3,7 +3,9 @@ import { LaneFooter } from "../../styles/Base";
 import { CollapseBtn, ExpandBtn } from "../../styles/Elements";
 
 const LaneFooterComponent = ({ onClick, collapsed }) => (
-  <LaneFooter onClick={onClick}>{collapsed ? <ExpandBtn /> : <CollapseBtn />}</LaneFooter>
+  <LaneFooter className="react-trello-footer" onClick={onClick}>
+    {collapsed ? <ExpandBtn /> : <CollapseBtn />}
+  </LaneFooter>
 );
 
 export default LaneFooterComponent;

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

@@ -8,7 +8,7 @@ import { Virtuoso, VirtuosoGrid } from "react-virtuoso";
 import HeightPreservingItem from "../components/Lane/HeightPreservingItem.jsx";
 import { Section } from "../styles/Base.js";
 import LaneFooter from "../components/Lane/LaneFooter.jsx";
-import { UnorderedListOutlined } from "@ant-design/icons";
+import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../../redux/user/user.selectors.js";
 import { selectTechnician } from "../../../../redux/tech/tech.selectors.js";
@@ -262,7 +262,10 @@ const Lane = ({
   return (
     <Section key={id} orientation={orientation}>
       <div onDoubleClick={toggleLaneCollapsed} className="react-trello-column-header">
-        <UnorderedListOutlined className="icon" /> {title}
+        <span className="lane-title">
+          {collapsed ? <EyeInvisibleOutlined className="icon" /> : <EyeOutlined className="icon" />}
+          {title}
+        </span>
       </div>
       {renderDragContainer()}
       <LaneFooter onClick={toggleLaneCollapsed} collapsed={collapsed} />

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

@@ -5,12 +5,10 @@ const getBoardWrapperStyles = (props) => {
     return ``;
   }
   if (props.orientation === "horizontal") {
-    // TODO: The white-space: nowrap; would be a good place to offer further customization
     return `
           white-space: nowrap;
     `;
   }
-  return "";
 };
 
 const getSectionStyles = (props) => {
@@ -64,7 +62,6 @@ export const StyleHorizontal = styled.div`
   }
 
   .react-trello-column-header {
-    border-radius: 5px;
     min-height: 15px;
     padding: 4px;
     white-space: nowrap;
@@ -90,7 +87,6 @@ export const StyleHorizontal = styled.div`
 
 export const StyleVertical = styled.div`
   .react-trello-column-header {
-    border-radius: 5px;
     min-height: 15px;
     padding: 5px;
     white-space: nowrap;