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

import { useApolloClient } from "@apollo/client";
import Board, { moveCard } from "@lourenci/react-kanban";
import "@lourenci/react-kanban/dist/styles.css";
import { notification, PageHeader, Space, Statistic } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
import { createBoardData } from "./production-board-kanban.utils.js";
import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
import { logImEXEvent } from "../../firebase/firebase.utils";
import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { insertAuditTrail } from "../../redux/application/application.actions";
import AuditTrailMapping from "../../utils/AuditTrailMappings";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician,
});

const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation }) =>
    dispatch(insertAuditTrail({ jobid, operation })),
});

export function ProductionBoardKanbanComponent({
  data,
  bodyshop,
  technician,
  insertAuditTrail,
}) {
  const [boardLanes, setBoardLanes] = useState({
    columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
  });

  const [filter, setFilter] = useState({ search: "", employeeId: null });

  const [isMoving, setIsMoving] = useState(false);

  const { t } = useTranslation();
  useEffect(() => {
    setBoardLanes(
      createBoardData(bodyshop.md_ro_statuses.production_statuses, data, filter)
    );
    setIsMoving(false);
  }, [
    data,
    setBoardLanes,
    setIsMoving,
    bodyshop.md_ro_statuses.production_statuses,
    filter,
  ]);

  const client = useApolloClient();

  const handleDragEnd = async (card, source, destination) => {
    logImEXEvent("kanban_drag_end");

    setIsMoving(true);
    setBoardLanes(moveCard(boardLanes, source, destination));
    const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
    const sourceColumn = boardLanes.columns.find(
      (x) => x.id === source.fromColumnId
    );
    const destinationColumn = boardLanes.columns.find(
      (x) => x.id === destination.toColumnId
    );

    const movedCardWillBeFirst = destination.toPosition === 0;

    const movedCardWillBeLast =
      destinationColumn.cards.length - destination.toPosition < 1;

    const lastCardInDestinationColumn =
      destinationColumn.cards[destinationColumn.cards.length - 1];

    const oldChildCard = sourceColumn.cards[source.fromPosition + 1];

    const newChildCard = movedCardWillBeLast
      ? null
      : destinationColumn.cards[
          sameColumnTransfer
            ? source.fromPosition - destination.toPosition > 0
              ? destination.toPosition
              : destination.toPosition + 1
            : destination.toPosition
        ];

    const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;

    let movedCardNewKanbanParent;
    if (movedCardWillBeFirst) {
      //console.log("==> New Card is first.");
      movedCardNewKanbanParent = "-1";
    } else if (movedCardWillBeLast) {
      // console.log("==> New Card is last.");
      movedCardNewKanbanParent = lastCardInDestinationColumn.id;
    } else if (!!newChildCard) {
      // console.log("==> New Card is somewhere in the middle");
      movedCardNewKanbanParent = newChildCard.kanbanparent;
    } else {
      throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
    }
    const newChildCardNewParent = newChildCard ? card.id : null;
    const update = await client.mutate({
      mutation: generate_UPDATE_JOB_KANBAN(
        oldChildCard ? oldChildCard.id : null,
        oldChildCardNewParent,
        card.id,
        movedCardNewKanbanParent,
        destination.toColumnId,
        newChildCard ? newChildCard.id : null,
        newChildCardNewParent
      ),
    });
    insertAuditTrail({
      jobid: card.id,
      operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
    });

    if (update.errors) {
      notification["error"]({
        message: t("production.errors.boardupdate", {
          message: JSON.stringify(update.errors),
        }),
      });
    }
  };
  const totalHrs = data
  .reduce(
    (acc, val) =>
      acc +
      (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) +
      (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
    0
  )
  .toFixed(1);
  return (
    <div>
      <IndefiniteLoading loading={isMoving} />
      <PageHeader
        title={
          <Space>
            <Statistic
              title={t("dashboard.titles.productionhours")}
              value={totalHrs}
            />
            <Statistic
              title={t("appointments.labels.inproduction")}
              value={data && data.length}
            />
          </Space>
        }
        extra={
          <ProductionBoardFilters
            filter={filter}
            setFilter={setFilter}
            loading={isMoving}
          />
        }
      />

      <Board
        children={boardLanes}
        disableCardDrag={isMoving}
        renderCard={(card) => ProductionBoardCard(technician, card)}
        onCardDragEnd={handleDragEnd}
      />
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductionBoardKanbanComponent);