Metadata + data transformation for production board. Breaking changes. BOD-71

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

@@ -1,49 +1,123 @@
-import React, { useState, useEffect } from "react";
-import Board from "react-trello";
+import { useApolloClient } from "@apollo/react-hooks";
 import { Card } from "antd";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import React from "react";
 import { connect } from "react-redux";
+import Board from "react-trello";
 import { createStructuredSelector } from "reselect";
+import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { createBoardData } from "./production-board-kanban.utils.js";
+import _ from "lodash";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
-export function ProductionBoardKanbanComponent({
-  loading,
-  data,
-  columnState,
-  bodyshop,
-}) {
-  console.log("data", data);
+export function ProductionBoardKanbanComponent({ loading, data, bodyshop }) {
+  const boardLanes = createBoardData(
+    bodyshop.md_ro_statuses.open_statuses,
+    data
+  );
+  console.log("ProductionBoardKanbanComponent -> boardLanes", boardLanes);
 
-  const [cards, setCards] = useState([]);
+  const client = useApolloClient();
 
-  useEffect(() => {
-    const cols = bodyshop.md_ro_statuses.open_statuses.map((s) => {
-      return {
-        id: s,
-        title: s,
-        cards: [],
-      };
+  const handleDataChange = async (data) => {
+    console.log("data", data);
+  };
+
+  const handleDragEnd = async (
+    cardId,
+    sourceLaneId,
+    targetLaneId,
+    position,
+    cardDetails
+  ) => {
+    const oldChildCard = boardLanes.lanes
+      .find((l) => l.id === sourceLaneId)
+      .cards.find((card) => card.kanbanparent === cardId); //.id;
+
+    const newChildCard =
+      sourceLaneId !== targetLaneId
+        ? boardLanes.lanes.find((l) => l.id === targetLaneId).cards[position]
+        : null;
+
+    const lastCardInTargetLane = _.last(
+      boardLanes.lanes.find((l) => l.id === targetLaneId).cards
+    );
+
+    await client.mutate({
+      mutation: generate_UPDATE_JOB_KANBAN(
+        oldChildCard ? oldChildCard.id : null,
+        oldChildCard ? cardDetails.kanbanparent : null,
+        cardDetails.id,
+        (newChildCard && newChildCard.kanbanparent) ||
+          sourceLaneId !== targetLaneId
+          ? lastCardInTargetLane.id
+          : null,
+        targetLaneId,
+        newChildCard ? newChildCard.id : null,
+        newChildCard ? cardDetails.id : null
+      ),
+      //optimisticResponse,
     });
-    if (data)
-      data.forEach((d) =>
-        cols
-          .find((c) => c.id === d.status)
-          .cards.push({ id: d.id, title: d.est_number, description: d.ownr_fn })
-      );
 
-    setCards(cols);
-  }, [data, bodyshop.md_ro_statuses.open_statuses, setCards]);
+    // const optimisticResponse = {
+    //   updateMovedChild: {
+    //     __typename: "jobs_mutation_response",
+    //     returning: {
+    //       id: cardDetails.id,
+    //       status: targetLaneId,
+    //       kanbanparent: newChildCard.kanbanparent,
+    //       __typename: "jobs",
+    //     },
+    //   },
+    // };
+    // if (oldChildCard) {
+    //   optimisticResponse["updateNewChild"] = {
+    //     __typename: "jobs_mutation_response",
+    //     returning: {
+    //       id: oldChildCard.id,
+    //       kanbanparent: cardDetails.kanbanparent,
+    //       __typename: "jobs",
+    //     },
+    //   };
+    // }
+    // if (newChildCard) {
+    //   optimisticResponse["updateOldChild"] = {
+    //     __typename: "jobs_mutation_response",
+    //     returning: {
+    //       id: newChildCard.id,
+    //       kanbanparent: cardDetails.id,
+    //       __typename: "jobs",
+    //     },
+    //   };
+    // }
 
-  const kanbanCard = (card) => <Card>{card.title}</Card>;
+    // console.log("optimisticResponse", optimisticResponse);
+  };
+
+  const kanbanCard = (card) => {
+    return (
+      <Card
+        style={{ margin: ".2rem 0rem" }}
+        size="small"
+        title={card.ro_number}
+      >{`${card.ownr_fn} ${card.ownr_ln}`}</Card>
+    );
+  };
 
   if (loading) return <LoadingSpinner />;
 
   return (
     <div>
-      <Board data={{ lanes: cards }} components={{ Card: kanbanCard }} />
+      <Board
+        data={boardLanes}
+        onDataChange={handleDataChange}
+        handleDragEnd={handleDragEnd}
+        components={{ Card: kanbanCard }}
+      />
     </div>
   );
 }