BOD-71 Added dependencies and pages for kanban production board.

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

@@ -0,0 +1,52 @@
+import React from "react";
+import Board from "react-trello";
+import { Card } from "antd";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+export default function ProductionBoardKanbanComponent({
+  loading,
+  data,
+  columnState,
+}) {
+  console.log("data", data);
+  const data2 = {
+    lanes: [
+      {
+        id: "lane1",
+        title: "Planned Tasks",
+        label: "2/2",
+        cards: [
+          {
+            id: "Card1",
+            title: "Write Blog",
+            description: "Can AI make memes",
+            label: "30 mins",
+          },
+          {
+            id: "Card2",
+            title: "Pay Rent",
+            description: "Transfer via NEFT",
+            label: "5 mins",
+            metadata: { sha: "be312a1" },
+          },
+        ],
+      },
+      {
+        id: "lane2",
+        title: "Completed",
+        label: "0/0",
+        cards: [],
+      },
+    ],
+  };
+
+  const kanbanCard = (card) => <Card>{card.title}</Card>;
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div>
+      <Board data={data2} components={{ Card: kanbanCard }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { useSubscription } from "@apollo/react-hooks";
+import React from "react";
+import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
+import ProductionBoardKanbanComponent from "./production-board-kanban.component";
+
+export default function ProductionBoardKanbanContainer({ columnState }) {
+  const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
+
+  return (
+    <ProductionBoardKanbanComponent
+      loading={loading}
+      data={data ? data.productionview : []}
+      refetch={null}
+      columnState={columnState}
+    />
+  );
+}

client/src/pages/manage/manage.page.component.jsx

@@ -80,6 +80,9 @@ const TimeTicketModalContainer = lazy(() =>
 const ProductionListPage = lazy(() =>
   import("../production-list/production-list.container")
 );
+const ProductionBoardPage = lazy(() =>
+  import("../production-board/production-board.container")
+);
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -173,6 +176,11 @@ export default function Manage({ match }) {
                 path={`${match.path}/production/list`}
                 component={ProductionListPage}
               />
+              <Route
+              exact
+              path={`${match.path}/production/board`}
+              component={ProductionBoardPage}
+            />
               <Route
                 exact
                 path={`${match.path}/vehicles/:vehId`}

client/src/pages/production-board/production-board.component.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import ProductionBoardKanbanContainer from "../../components/production-board-kanban/production-board-kanban.container";
+
+export default function ProductionBoardComponent({ columnState }) {
+  return <ProductionBoardKanbanContainer columnState={columnState} />;
+}

client/src/pages/production-board/production-board.container.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ProductionBoardComponent from "./production-board.component";
+import ProductionListColumns from "../../components/production-list-columns/production-list-columns.data";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function ProductionBoardContainer({ setBreadcrumbs, bodyshop }) {
+  const { t } = useTranslation();
+  const columnState = useState(
+    (bodyshop.production_config &&
+      bodyshop.production_config.columnKeys.map((k) =>
+        ProductionListColumns.find((e) => e.key === k)
+      )) ||
+      []
+  );
+  // console.log("ProductionListContainer -> columnState", columnState);
+
+  useEffect(() => {
+    document.title = t("titles.productionboard");
+    setBreadcrumbs([
+      { link: "/manage/production/board", label: t("titles.bc.productionboard") },
+    ]);
+  }, [t, setBreadcrumbs]);
+
+  return (
+    <div>
+      <ProductionBoardComponent columnState={columnState} />
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionBoardContainer);

client/src/translations/en_us/common.json

@@ -781,6 +781,7 @@
 				"jobs-new": "Create a New Job",
 				"owner-detail": "{{name}}",
 				"owners": "Owners",
+				"productionboard": "Production Board",
 				"productionlist": "Production - List",
 				"schedule": "Schedule",
 				"vehicle-details": "Vehicle: {{vehicle}}",
@@ -800,6 +801,7 @@
 			"manageroot": "Home | $t(titles.app)",
 			"owners": "All Owners | $t(titles.app)",
 			"owners-detail": "{{name}} | $t(titles.app)",
+			"productionboard": "Production - Board",
 			"productionlist": "Production - List View | $t(titles.app)",
 			"profile": "My Profile | $t(titles.app)",
 			"schedule": "Schedule | $t(titles.app)",

client/src/translations/es/common.json

@@ -781,6 +781,7 @@
 				"jobs-new": "",
 				"owner-detail": "",
 				"owners": "",
+				"productionboard": "",
 				"productionlist": "",
 				"schedule": "",
 				"vehicle-details": "",
@@ -800,6 +801,7 @@
 			"manageroot": "Casa | $t(titles.app)",
 			"owners": "Todos los propietarios | $t(titles.app)",
 			"owners-detail": "",
+			"productionboard": "",
 			"productionlist": "",
 			"profile": "Mi perfil | $t(titles.app)",
 			"schedule": "Horario | $t(titles.app)",

client/src/translations/fr/common.json

@@ -781,6 +781,7 @@
 				"jobs-new": "",
 				"owner-detail": "",
 				"owners": "",
+				"productionboard": "",
 				"productionlist": "",
 				"schedule": "",
 				"vehicle-details": "",
@@ -800,6 +801,7 @@
 			"manageroot": "Accueil | $t(titles.app)",
 			"owners": "Tous les propriétaires | $t(titles.app)",
 			"owners-detail": "",
+			"productionboard": "",
 			"productionlist": "",
 			"profile": "Mon profil | $t(titles.app)",
 			"schedule": "Horaire | $t(titles.app)",