From d85768b2ac7569886f1eddd218645f4a5d8c61b2 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Thu, 30 May 2024 16:36:55 -0400 Subject: [PATCH] - 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 --- ...n-board-kanban.card-settings.component.jsx | 125 --------- .../production-board-kanban.component.jsx | 32 ++- ...uction-board-kanban.settings.component.jsx | 243 ++++++++++++++++++ .../production-board-kanban.utils.js | 5 + 4 files changed, 267 insertions(+), 138 deletions(-) delete mode 100644 client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx create mode 100644 client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx diff --git a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx deleted file mode 100644 index d20634c9b..000000000 --- a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx +++ /dev/null @@ -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 = ( -
- -
- - - - - - - - - - - - - - - {/* - - */} - - - - - - - - - - - - - - - - - - - - - {/* - - */} - - - - - - - - - - - -
- - -
- ); - return ( - - - - ); -} diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx index cab98a0a9..24e14f80f 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx +++ b/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 ; + } + return ( @@ -243,8 +250,7 @@ export function ProductionBoardKanbanComponent({ - - + } /> diff --git a/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx new file mode 100644 index 000000000..bc3dfe987 --- /dev/null +++ b/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 = () => ( + <> + + + + + {t("production.labels.compact")} + + + + + {t("production.labels.cardcolor")} + + + + + + + + + {t("production.labels.ownr_nm")} + + + + + {t("production.labels.clm_no")} + + + + + {t("production.labels.ins_co_nm")} + + + + + {t("production.labels.employeeassignments")} + + + + + {t("production.labels.actual_in")} + + + + + {t("production.labels.scheduled_completion")} + + + + + {t("production.labels.ats")} + + + + + {t("production.labels.production_note")} + + + + + {t("production.labels.sublets")} + + + + + {t("production.labels.partsstatus")} + + + + + + + + + {t("production.labels.stickyheader")} + + + + + + ); + + const renderBoardSettings = () => ( + <> + + + + Orientation + + + + + + + {/**/} + {/* */} + {/* */} + {/* */} + {/* {t("board.labels.some_setting_3")}*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* {t("board.labels.some_setting_4")}*/} + {/* */} + {/* */} + {/* */} + {/**/} + {/**/} + {/* */} + {/* /!* Add beta settings here if any *!/*/} + {/* */} + {/**/} + + ); + + const renderLaneSettings = () => ( + <> + + + {/**/} + {/* */} + {/* {t("lane.labels.some_setting_1")}*/} + {/* */} + {/**/} + {/**/} + {/* */} + {/* {t("lane.labels.some_setting_2")}*/} + {/* */} + {/**/} + + + {/**/} + {/* */} + {/* */} + {/* */} + {/* {t("lane.labels.some_setting_3")}*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* {t("lane.labels.some_setting_4")}*/} + {/* */} + {/* */} + {/* */} + {/**/} + {/**/} + {/* */} + {/* /!* Add beta settings here if any *!/*/} + {/* */} + {/**/} + + ); + + const overlay = ( + +
+ + + {renderCardSettings()} + + + {renderBoardSettings()} + + + {renderLaneSettings()} + + + + + + + + + + +
+ + ); + + return ( + + + + ); +} diff --git a/client/src/components/production-board-kanban/production-board-kanban.utils.js b/client/src/components/production-board-kanban/production-board-kanban.utils.js index ab286794f..a10446928 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.utils.js +++ b/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) => {