- Optimization and Edgecases
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -3,7 +3,7 @@ import { useApolloClient } from "@apollo/client";
|
||||
import Board from "../../components/trello-board/index";
|
||||
import { Button, notification, Skeleton, Space, Statistic } from "antd";
|
||||
import { PageHeader } from "@ant-design/pro-layout";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { useEffect, useMemo, useState, useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -49,13 +49,11 @@ export function ProductionBoardKanbanComponent({
|
||||
associationSettings
|
||||
}) {
|
||||
const [boardLanes, setBoardLanes] = useState({ lanes: [] });
|
||||
|
||||
const [filter, setFilter] = useState({ search: "", employeeId: null });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isMoving, setIsMoving] = useState(false);
|
||||
|
||||
const orientation = associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal";
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -65,13 +63,12 @@ export function ProductionBoardKanbanComponent({
|
||||
}, [associationSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
const newBoardData = createFakeBoardData(
|
||||
const newBoardData = createBoardData(
|
||||
[...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
|
||||
data,
|
||||
filter
|
||||
);
|
||||
|
||||
// Build Board Lanes Data
|
||||
newBoardData.lanes = newBoardData.lanes.map((lane) => ({
|
||||
...lane,
|
||||
title: `${lane.title} (${lane.cards.length})`
|
||||
@@ -89,13 +86,7 @@ export function ProductionBoardKanbanComponent({
|
||||
|
||||
const client = useApolloClient();
|
||||
|
||||
/**
|
||||
* Get Card By ID
|
||||
* @param data
|
||||
* @param cardId
|
||||
* @returns {*|any|null}
|
||||
*/
|
||||
const getCardByID = (data, cardId) => {
|
||||
const getCardByID = useCallback((data, cardId) => {
|
||||
for (const lane of data.lanes) {
|
||||
for (const card of lane.cards) {
|
||||
if (card.id === cardId) {
|
||||
@@ -104,88 +95,90 @@ export function ProductionBoardKanbanComponent({
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onDragEnd = async ({ type, source, destination, draggableId }) => {
|
||||
logImEXEvent("kanban_drag_end");
|
||||
const onDragEnd = useCallback(
|
||||
async ({ type, source, destination, draggableId }) => {
|
||||
logImEXEvent("kanban_drag_end");
|
||||
|
||||
// Early gate, also if the card is already moving bail
|
||||
if (!type || type !== "lane" || !source || !destination || isMoving) return;
|
||||
if (!type || type !== "lane" || !source || !destination || isMoving) return;
|
||||
|
||||
setIsMoving(true);
|
||||
setIsMoving(true);
|
||||
|
||||
const targetLane = boardLanes.lanes.find((lane) => lane.id === destination.droppableId);
|
||||
const sourceLane = boardLanes.lanes.find((lane) => lane.id === source.droppableId);
|
||||
const targetLane = boardLanes.lanes.find((lane) => lane.id === destination.droppableId);
|
||||
const sourceLane = boardLanes.lanes.find((lane) => lane.id === source.droppableId);
|
||||
|
||||
const sameColumnTransfer = source.droppableId === destination.droppableId;
|
||||
const sourceCard = getCardByID(boardLanes, draggableId);
|
||||
const sameColumnTransfer = source.droppableId === destination.droppableId;
|
||||
const sourceCard = getCardByID(boardLanes, draggableId);
|
||||
|
||||
const movedCardWillBeFirst = destination.index === 0;
|
||||
const movedCardWillBeLast = destination.index > targetLane.cards.length - 1;
|
||||
const movedCardWillBeFirst = destination.index === 0;
|
||||
const movedCardWillBeLast = destination.index > targetLane.cards.length - 1;
|
||||
|
||||
const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
|
||||
const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
|
||||
|
||||
const oldChildCard = sourceLane.cards[destination.index + 1];
|
||||
const oldChildCard = sourceLane.cards[destination.index + 1];
|
||||
|
||||
const newChildCard = movedCardWillBeLast
|
||||
? null
|
||||
: targetLane.cards[
|
||||
sameColumnTransfer
|
||||
? destination.index - destination.index > 0
|
||||
? destination.index
|
||||
: destination.index + 1
|
||||
: destination.index
|
||||
];
|
||||
const newChildCard = movedCardWillBeLast
|
||||
? null
|
||||
: targetLane.cards[
|
||||
sameColumnTransfer
|
||||
? destination.index - destination.index > 0
|
||||
? destination.index
|
||||
: destination.index + 1
|
||||
: destination.index
|
||||
];
|
||||
|
||||
const oldChildCardNewParent = oldChildCard ? sourceCard.metadata.kanbanparent : null;
|
||||
const oldChildCardNewParent = oldChildCard ? sourceCard.metadata.kanbanparent : null;
|
||||
|
||||
let movedCardNewKanbanParent;
|
||||
if (movedCardWillBeFirst) {
|
||||
movedCardNewKanbanParent = "-1";
|
||||
} else if (movedCardWillBeLast) {
|
||||
movedCardNewKanbanParent = lastCardInTargetLane.id;
|
||||
} else if (!!newChildCard) {
|
||||
movedCardNewKanbanParent = newChildCard.metadata.kanbanparent;
|
||||
} else {
|
||||
console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
|
||||
}
|
||||
const newChildCardNewParent = newChildCard ? draggableId : null;
|
||||
try {
|
||||
const update = await client.mutate({
|
||||
mutation: generate_UPDATE_JOB_KANBAN(
|
||||
oldChildCard ? oldChildCard.id : null,
|
||||
oldChildCardNewParent,
|
||||
draggableId,
|
||||
movedCardNewKanbanParent,
|
||||
targetLane.id,
|
||||
newChildCard ? newChildCard.id : null,
|
||||
newChildCardNewParent
|
||||
)
|
||||
});
|
||||
let movedCardNewKanbanParent;
|
||||
if (movedCardWillBeFirst) {
|
||||
movedCardNewKanbanParent = "-1";
|
||||
} else if (movedCardWillBeLast) {
|
||||
movedCardNewKanbanParent = lastCardInTargetLane.id;
|
||||
} else if (!!newChildCard) {
|
||||
movedCardNewKanbanParent = newChildCard.metadata.kanbanparent;
|
||||
} else {
|
||||
console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
|
||||
}
|
||||
const newChildCardNewParent = newChildCard ? draggableId : null;
|
||||
try {
|
||||
const update = await client.mutate({
|
||||
mutation: generate_UPDATE_JOB_KANBAN(
|
||||
oldChildCard ? oldChildCard.id : null,
|
||||
oldChildCardNewParent,
|
||||
draggableId,
|
||||
movedCardNewKanbanParent,
|
||||
targetLane.id,
|
||||
newChildCard ? newChildCard.id : null,
|
||||
newChildCardNewParent
|
||||
)
|
||||
});
|
||||
|
||||
insertAuditTrail({
|
||||
jobid: draggableId,
|
||||
operation: AuditTrailMapping.jobstatuschange(targetLane.id),
|
||||
type: "jobstatuschange"
|
||||
});
|
||||
insertAuditTrail({
|
||||
jobid: draggableId,
|
||||
operation: AuditTrailMapping.jobstatuschange(targetLane.id),
|
||||
type: "jobstatuschange"
|
||||
});
|
||||
|
||||
if (update.errors) {
|
||||
if (update.errors) {
|
||||
notification["error"]({
|
||||
message: t("production.errors.boardupdate", {
|
||||
message: JSON.stringify(update.errors)
|
||||
})
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
notification["error"]({
|
||||
message: t("production.errors.boardupdate", {
|
||||
message: JSON.stringify(update.errors)
|
||||
message: error.message
|
||||
})
|
||||
});
|
||||
} finally {
|
||||
setIsMoving(false);
|
||||
}
|
||||
} catch (error) {
|
||||
notification["error"]({
|
||||
message: t("production.errors.boardupdate", {
|
||||
message: error.message
|
||||
})
|
||||
});
|
||||
} finally {
|
||||
setIsMoving(false);
|
||||
}
|
||||
};
|
||||
},
|
||||
[boardLanes, client, getCardByID, insertAuditTrail, isMoving, t]
|
||||
);
|
||||
|
||||
const totalHrs = useMemo(
|
||||
() =>
|
||||
@@ -209,36 +202,45 @@ export function ProductionBoardKanbanComponent({
|
||||
[data]
|
||||
);
|
||||
|
||||
const Header = ({ title }) => (
|
||||
<div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3" }}>
|
||||
<UnorderedListOutlined style={{ marginRight: "5px" }} /> {title}
|
||||
</div>
|
||||
const Header = useCallback(
|
||||
({ title }) => (
|
||||
<div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3" }}>
|
||||
<UnorderedListOutlined style={{ marginRight: "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,
|
||||
orientation: false
|
||||
};
|
||||
const cardSettings = useMemo(
|
||||
() =>
|
||||
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,
|
||||
orientation: false
|
||||
},
|
||||
[associationSettings]
|
||||
);
|
||||
|
||||
const components = {
|
||||
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
|
||||
LaneHeader: Header
|
||||
};
|
||||
const components = useMemo(
|
||||
() => ({
|
||||
Card: (cardProps) => (
|
||||
<ProductionBoardCard card={cardProps} technician={technician} bodyshop={bodyshop} cardSettings={cardSettings} />
|
||||
),
|
||||
LaneHeader: Header
|
||||
}),
|
||||
[Header, bodyshop, cardSettings, technician]
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <Skeleton active />;
|
||||
|
||||
Reference in New Issue
Block a user