- Major Performance boost reducing uncessasry board renders

- Move Orientation Toggle to Board Settings -> Display
- Delete Card Settings, replaced with Board Settings

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

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

@@ -1,7 +1,7 @@
 import { SyncOutlined, UnorderedListOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import Board from "../../components/trello-board/index";
-import { Button, Grid, notification, Space, Statistic } from "antd";
+import { Button, Grid, notification, Skeleton, Space, Statistic } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,10 +19,10 @@ import IndefiniteLoading from "../indefinite-loading/indefinite-loading.componen
 import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
 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 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";
+import { createBoardData, createFakeBoardData } from "./production-board-kanban.utils.js";
+import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -51,14 +51,21 @@ export function ProductionBoardKanbanComponent({
   const [boardLanes, setBoardLanes] = useState({ lanes: [] });
 
   const [filter, setFilter] = useState({ search: "", employeeId: null });
+  const [loading, setLoading] = useState(true);
 
   const [isMoving, setIsMoving] = useState(false);
 
-  const [orientation, setOrientation] = useState("horizontal");
+  const orientation = associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal";
   const { t } = useTranslation();
 
   useEffect(() => {
-    const boardData = createBoardData(
+    if (associationSettings) {
+      setLoading(false);
+    }
+  }, [associationSettings]);
+
+  useEffect(() => {
+    const boardData = createFakeBoardData(
       [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
       data,
       filter
@@ -73,11 +80,6 @@ export function ProductionBoardKanbanComponent({
 
   const client = useApolloClient();
 
-  // Create a function that toggles the orientation when the button is clicked
-  const toggleOrientation = () => {
-    setOrientation((prevOrientation) => (prevOrientation === "horizontal" ? "vertical" : "horizontal"));
-  };
-
   const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
     logImEXEvent("kanban_drag_end");
 
@@ -217,7 +219,8 @@ export function ProductionBoardKanbanComponent({
           employeeassignments: true,
           scheduled_completion: true,
           stickyheader: false,
-          cardcolor: false
+          cardcolor: false,
+          orientation: false
         };
 
   const components = {
@@ -225,6 +228,10 @@ export function ProductionBoardKanbanComponent({
     LaneHeader: cardSettings.stickyheader && orientation === "horizontal" ? StickyHeader : NormalHeader
   };
 
+  if (loading) {
+    return <Skeleton active />;
+  }
+
   return (
     <Container width={width}>
       <IndefiniteLoading loading={isMoving} />
@@ -243,8 +250,7 @@ export function ProductionBoardKanbanComponent({
               <SyncOutlined />
             </Button>
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
-            <ProductionBoardKanbanCardSettings associationSettings={associationSettings} />
-            <Button onClick={toggleOrientation}>Toggle Orientation</Button>
+            <ProductionBoardKanbanSettings parentLoading={setLoading} associationSettings={associationSettings} />
           </Space>
         }
       />