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 = (
+
+
+
+ );
+
+ 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) => {