- 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.card-settings.component.jsx

@@ -1,125 +0,0 @@
-import { useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, notification, Popover, Row, Switch } from "antd";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
-
-export default function ProductionBoardKanbanCardSettings({ associationSettings }) {
-  const [form] = Form.useForm();
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
-
-  useEffect(() => {
-    form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
-  }, [form, associationSettings, open]);
-
-  const { t } = useTranslation();
-
-  const handleFinish = async (values) => {
-    setLoading(true);
-    const result = await updateKbSettings({
-      variables: {
-        id: associationSettings && associationSettings.id,
-        ks: values
-      }
-    });
-    if (result.errors) {
-      notification.open({
-        type: "error",
-        message: t("production.errors.settings", {
-          error: JSON.stringify(result.errors)
-        })
-      });
-    }
-    setOpen(false);
-    setLoading(false);
-  };
-
-  const overlay = (
-    <div>
-      <Card>
-        <Form form={form} onFinish={handleFinish} layout="vertical">
-          <Row gutter={[16, 16]}>
-            <Col span={12}>
-              <Form.Item label={t("production.labels.compact")} name="compact" valuePropName="checked">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.ownr_nm")} name="ownr_nm">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.clm_no")} name="clm_no">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.ins_co_nm")} name="ins_co_nm">
-                <Switch />
-              </Form.Item>
-              {/* <Form.Item
-                valuePropName="checked"
-                label={t("production.labels.laborhrs")}
-                name="laborhrs"
-              >
-                <Switch />
-              </Form.Item> */}
-              <Form.Item
-                valuePropName="checked"
-                label={t("production.labels.employeeassignments")}
-                name="employeeassignments"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.actual_in")} name="actual_in">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.cardcolor")} name="cardcolor">
-                <Switch />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                valuePropName="checked"
-                label={t("production.labels.scheduled_completion")}
-                name="scheduled_completion"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.ats")} name="ats">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.production_note")} name="production_note">
-                <Switch />
-              </Form.Item>
-              {/* <Form.Item
-              valuePropName='checked' label={t("production.labels.alert")} name="alert">
-                <Switch/>
-              </Form.Item> */}
-              <Form.Item valuePropName="checked" label={t("production.labels.sublets")} name="sublets">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.partsstatus")} name="partsstatus">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.stickyheader")} name="stickyheader">
-                <Switch />
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-        <Button
-          onClick={() => {
-            form.submit();
-          }}
-        >
-          {t("general.actions.save")}
-        </Button>
-      </Card>
-    </div>
-  );
-  return (
-    <Popover content={overlay} open={open} placement="topRight">
-      <Button loading={loading} onClick={() => setOpen(!open)}>
-        {t("production.labels.cardsettings")}
-      </Button>
-    </Popover>
-  );
-}

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>
         }
       />

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

@@ -0,0 +1,243 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Tabs, Switch } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
+
+const { TabPane } = Tabs;
+
+export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
+  const [form] = Form.useForm();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
+
+  useEffect(() => {
+    form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
+  }, [form, associationSettings, open]);
+
+  const { t } = useTranslation();
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    parentLoading(true);
+
+    const result = await updateKbSettings({
+      variables: {
+        id: associationSettings && associationSettings.id,
+        ks: values
+      }
+    });
+    if (result.errors) {
+      notification.open({
+        type: "error",
+        message: t("production.errors.settings", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+    setOpen(false);
+    setLoading(false);
+    parentLoading(false);
+    setHasChanges(false);
+  };
+
+  const handleValuesChange = (changedValues, allValues) => {
+    setHasChanges(true);
+  };
+
+  const cardStyle = { minWidth: "50vw", marginTop: 10 };
+
+  const renderCardSettings = () => (
+    <>
+      <Card title={t("settings.sections.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="compact" valuePropName="checked">
+              <Checkbox>{t("production.labels.compact")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="cardcolor" valuePropName="checked">
+              <Checkbox>{t("production.labels.cardcolor")}</Checkbox>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+      <Card title={t("settings.sections.information")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="ownr_nm" valuePropName="checked">
+              <Checkbox>{t("production.labels.ownr_nm")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="clm_no" valuePropName="checked">
+              <Checkbox>{t("production.labels.clm_no")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="ins_co_nm" valuePropName="checked">
+              <Checkbox>{t("production.labels.ins_co_nm")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="employeeassignments" valuePropName="checked">
+              <Checkbox>{t("production.labels.employeeassignments")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="actual_in" valuePropName="checked">
+              <Checkbox>{t("production.labels.actual_in")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="scheduled_completion" valuePropName="checked">
+              <Checkbox>{t("production.labels.scheduled_completion")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="ats" valuePropName="checked">
+              <Checkbox>{t("production.labels.ats")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="production_note" valuePropName="checked">
+              <Checkbox>{t("production.labels.production_note")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="sublets" valuePropName="checked">
+              <Checkbox>{t("production.labels.sublets")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="partsstatus" valuePropName="checked">
+              <Checkbox>{t("production.labels.partsstatus")}</Checkbox>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+      <Card title={t("settings.sections.beta")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="stickyheader" valuePropName="checked">
+              <Checkbox>{t("production.labels.stickyheader")}</Checkbox>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+    </>
+  );
+
+  const renderBoardSettings = () => (
+    <>
+      <Card title={t("settings.sections.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4} style={{ display: "flex", alignItems: "center" }}>
+            <span style={{ marginRight: "8px" }}>Orientation</span>
+            <Form.Item name="orientation" valuePropName="checked" style={{ marginBottom: 0 }}>
+              <Switch checkedChildren="Vertical" unCheckedChildren="Horizontal" defaultChecked />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+      {/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="board_setting_3" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("board.labels.some_setting_3")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="board_setting_4" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("board.labels.some_setting_4")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+      {/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+    </>
+  );
+
+  const renderLaneSettings = () => (
+    <>
+      <Card title={t("settings.sections.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          {/*<Col span={4}>*/}
+          {/*  <Form.Item name="lane_setting_1" valuePropName="checked">*/}
+          {/*    <Checkbox>{t("lane.labels.some_setting_1")}</Checkbox>*/}
+          {/*  </Form.Item>*/}
+          {/*</Col>*/}
+          {/*<Col span={4}>*/}
+          {/*  <Form.Item name="lane_setting_2" valuePropName="checked">*/}
+          {/*    <Checkbox>{t("lane.labels.some_setting_2")}</Checkbox>*/}
+          {/*  </Form.Item>*/}
+          {/*</Col>*/}
+        </Row>
+      </Card>
+      {/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="lane_setting_3" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("lane.labels.some_setting_3")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="lane_setting_4" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("lane.labels.some_setting_4")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+      {/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+    </>
+  );
+
+  const overlay = (
+    <Card>
+      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
+        <Tabs defaultActiveKey="1">
+          <TabPane tab={t("settings.tabs.card")} key="1">
+            {renderCardSettings()}
+          </TabPane>
+          <TabPane tab={t("settings.tabs.board")} key="2">
+            {renderBoardSettings()}
+          </TabPane>
+          <TabPane tab={t("settings.tabs.lane")} key="3">
+            {renderLaneSettings()}
+          </TabPane>
+        </Tabs>
+        <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
+          <Col span={8}>
+            <Button block onClick={() => setOpen(false)}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Col>
+          <Col span={8}>
+            <Button block onClick={() => form.submit()} loading={loading} type="primary" disabled={!hasChanges}>
+              {t("general.actions.save")}
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+    </Card>
+  );
+
+  return (
+    <Popover content={overlay} open={open} placement="topRight">
+      <Button loading={loading} onClick={() => setOpen(!open)}>
+        {t("settings.buttons.boardSettings")}
+      </Button>
+    </Popover>
+  );
+}

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -1,4 +1,5 @@
 import { groupBy } from "lodash";
+import fakeData from "./testData/board600.json";
 
 const sortByParentId = (arr) => {
   // return arr.reduce((accumulator, currentValue) => {
@@ -38,6 +39,10 @@ const sortByParentId = (arr) => {
   return sortedList;
 };
 
+export const createFakeBoardData = () => {
+  return fakeData;
+};
+
 export const createBoardData = (AllStatuses, Jobs, filter) => {
   const { search, employeeId } = filter;
   const lanes = AllStatuses.map((s) => {