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

import { SyncOutlined } 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 { PageHeader } from "@ant-design/pro-layout";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Sticky, StickyContainer } from "react-sticky";
import { createStructuredSelector } from "reselect";
import styled from "styled-components";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
import { insertAuditTrail } from "../../redux/application/application.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
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";

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

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

export function ProductionBoardKanbanComponent({
  data,
  bodyshop,
  refetch,
  technician,
  insertAuditTrail,
  associationSettings
}) {
  const [boardLanes, setBoardLanes] = useState({ lanes: [] });

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

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

  const { t } = useTranslation();
  useEffect(() => {
    const boardData = createBoardData(
      [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
      data,
      filter
    );

    boardData.lanes = boardData.lanes.map((d) => {
      return { ...d, title: `${d.title} (${d.cards.length})` };
    });
    setBoardLanes(boardData);
    setIsMoving(false);
  }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses, filter]);

  const client = useApolloClient();

  const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
    logImEXEvent("kanban_drag_end");

    setIsMoving(true);

    const sameColumnTransfer = sourceLaneId === targetLaneId;

    const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId);
    const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId);

    const movedCardWillBeFirst = position === 0;
    const movedCardWillBeLast = targetLane.cards.length - position < 1;

    const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];

    const oldChildCard = sourceLane.cards[position + 1];

    const newChildCard = movedCardWillBeLast
      ? null
      : targetLane.cards[sameColumnTransfer ? (position - position > 0 ? position : position + 1) : position];

    const oldChildCardNewParent = oldChildCard ? cardDetails.kanbanparent : null;

    let movedCardNewKanbanParent;
    if (movedCardWillBeFirst) {
      movedCardNewKanbanParent = "-1";
    } else if (movedCardWillBeLast) {
      movedCardNewKanbanParent = lastCardInTargetLane.id;
    } else if (!!newChildCard) {
      movedCardNewKanbanParent = newChildCard.kanbanparent;
    } else {
      console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
    }
    const newChildCardNewParent = newChildCard ? cardId : null;

    const update = await client.mutate({
      mutation: generate_UPDATE_JOB_KANBAN(
        oldChildCard ? oldChildCard.id : null,
        oldChildCardNewParent,
        cardId,
        movedCardNewKanbanParent,
        targetLaneId,
        newChildCard ? newChildCard.id : null,
        newChildCardNewParent
      )
    });

    insertAuditTrail({
      jobid: cardId,
      operation: AuditTrailMapping.jobstatuschange(targetLaneId),
      type: "jobstatuschange"
    });

    if (update.errors) {
      notification["error"]({
        message: t("production.errors.boardupdate", {
          message: JSON.stringify(update.errors)
        })
      });
    }

    setIsMoving(false);
  };

  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);
  const totalLAB = data.reduce((acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0), 0).toFixed(1);
  const totalLAR = data.reduce((acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0), 0).toFixed(1);
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
    .slice(-1)[0];

  const standardSizes = {
    xs: "250",
    sm: "250",
    md: "250",
    lg: "250",
    xl: "250",
    xxl: "250"
  };
  const compactSizes = {
    xs: "150",
    sm: "150",
    md: "150",
    lg: "150",
    xl: "155",
    xxl: "155"
  };

  const width = selectedBreakpoint
    ? associationSettings && associationSettings.kanban_settings && associationSettings.kanban_settings.compact
      ? compactSizes[selectedBreakpoint[0]]
      : standardSizes[selectedBreakpoint[0]]
    : "250";

  const StickyHeader = ({ title }) => (
    <Sticky>
      {({ style }) => (
        <div
          className="react-trello-column-header"
          style={{ ...style, zIndex: "99", backgroundColor: "#e3e3e3", paddingLeft: "5px" }}
        >
          {title}
        </div>
      )}
    </Sticky>
  );

  const NormalHeader = ({ title }) => (
    <div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3", paddingLeft: "5px" }}>
      {title}
    </div>
  );

  const cardSettings =
    associationSettings &&
    associationSettings.kanban_settings &&
    Object.keys(associationSettings.kanban_settings).length > 0
      ? associationSettings.kanban_settings
      : {
          ats: true,
          clm_no: true,
          compact: false,
          ownr_nm: true,
          sublets: true,
          ins_co_nm: true,
          production_note: true,
          employeeassignments: true,
          scheduled_completion: true,
          stickyheader: false,
          cardcolor: false
        };

  const components = {
    Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
    LaneHeader: cardSettings.stickyheader ? StickyHeader : NormalHeader
  };

  return (
    <Container width={width}>
      <IndefiniteLoading loading={isMoving} />
      <PageHeader
        title={
          <Space>
            <Statistic title={t("dashboard.titles.productionhours")} value={totalHrs} />
            <Statistic title={t("dashboard.titles.labhours")} value={totalLAB} />
            <Statistic title={t("dashboard.titles.larhours")} value={totalLAR} />
            <Statistic title={t("appointments.labels.inproduction")} value={data && data.length} />
          </Space>
        }
        extra={
          <Space wrap>
            <Button onClick={() => refetch && refetch()}>
              <SyncOutlined />
            </Button>
            <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
            <ProductionBoardKanbanCardSettings associationSettings={associationSettings} />
          </Space>
        }
      />
      {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
      <ProductionListDetailComponent jobs={data} />
      {cardSettings.stickyheader ? (
        <StickyContainer>
          <Board
            data={boardLanes}
            draggable
            handleDragEnd={handleDragEnd}
            style={{ height: "100%", backgroundColor: "transparent" }}
            components={components}
          />
        </StickyContainer>
      ) : (
        <div>
          <Board
            data={boardLanes}
            draggable
            handleDragEnd={handleDragEnd}
            style={{ height: "100%", backgroundColor: "transparent" }}
            components={components}
          />
        </div>
      )}
    </Container>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent);

const Container = styled.div`
  .react-trello-card-skeleton,
  .react-trello-card,
  .react-trello-card-adder-form {
    box-sizing: border-box;
    max-width: ${(props) => props.width}px;
    min-width: ${(props) => props.width}px;
  }
`;