admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Clear stage prior to implementing replacement for collapsed lanes (with virtual lists)

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-06-28 15:08:26 -04:00
parent 8207a52b6b
commit 2f493c63f8
5 changed files with 313 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
client/src/components/production-board-kanban/production-board-kanban.component.jsx
View File

@@ -6,7 +6,6 @@ import { PageHeader } from "@ant-design/pro-layout";
import React, { useEffect, useMemo, 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";
@@ -64,7 +63,7 @@ export function ProductionBoardKanbanComponent({
}, [associationSettings]);
useEffect(() => {
const boardData = createBoardData(
const boardData = createFakeBoardData(
[...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
data,
filter
@@ -114,89 +113,90 @@ export function ProductionBoardKanbanComponent({
};
// TODO, refine and use action
const onDragEnd = async ({ draggableId, type, source, reason, mode, destination, combine }) => {
//cardId, sourceLaneId, targetLaneId, position, cardDetails
logImEXEvent("kanban_drag_end");
// Early Gate
if (!type || type !== "lane" || !source || !destination) return;
setIsMoving(true);
const sameColumnTransfer = source.droppableId === destination.droppableId;
const targetLane = boardLanes.lanes[Number.parseInt(destination.droppableId)];
const sourceLane = boardLanes.lanes[Number.parseInt(source.droppableId)];
const sourceCard = getCardByID(boardLanes, draggableId);
const movedCardWillBeFirst = destination.index === 0;
const movedCardWillBeLast = destination.index > targetLane.cards.length - 1;
const movedCardIsFirstNewCard = movedCardWillBeFirst && movedCardWillBeLast;
const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
const oldChildCard = sourceLane.cards[destination.index + 1];
const onDragEnd = async (...args) => {
console.dir(args);
// //cardId, sourceLaneId, targetLaneId, position, cardDetails
// logImEXEvent("kanban_drag_end");
//
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;
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"
});
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: error.message
})
});
} finally {
setIsMoving(false);
}
// // Early Gate
// if (!type || type !== "lane" || !source || !destination) return;
//
// setIsMoving(true);
//
// const sameColumnTransfer = source.droppableId === destination.droppableId;
// const targetLane = boardLanes.lanes[Number.parseInt(destination.droppableId)];
// const sourceLane = boardLanes.lanes[Number.parseInt(source.droppableId)];
// const sourceCard = getCardByID(boardLanes, draggableId);
//
// const movedCardWillBeFirst = destination.index === 0;
// const movedCardWillBeLast = destination.index > targetLane.cards.length - 1;
// const movedCardIsFirstNewCard = movedCardWillBeFirst && movedCardWillBeLast;
//
// const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 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 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
// )
// });
//
// insertAuditTrail({
// jobid: draggableId,
// operation: AuditTrailMapping.jobstatuschange(targetLane.id),
// type: "jobstatuschange"
// });
//
// 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: error.message
// })
// });
// } finally {
// setIsMoving(false);
// }
// };
};
const totalHrs = useMemo(
() =>
data
@@ -219,45 +219,7 @@ export function ProductionBoardKanbanComponent({
[data]
);
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" }}>
<UnorderedListOutlined style={{ marginRight: "5px" }} /> {title}
</div>
)}
</Sticky>
);
const NormalHeader = ({ title }) => (
const Header = ({ title }) => (
<div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3" }}>
<UnorderedListOutlined style={{ marginRight: "5px" }} /> {title}
</div>
@@ -285,7 +247,7 @@ export function ProductionBoardKanbanComponent({
const components = {
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
LaneHeader: cardSettings.stickyheader && orientation === "horizontal" ? StickyHeader : NormalHeader
LaneHeader: Header
};
if (loading) {
@@ -293,7 +255,7 @@ export function ProductionBoardKanbanComponent({
}
return (
<Container width={width}>
<div>
<IndefiniteLoading loading={isMoving} />
<PageHeader
title={
@@ -316,41 +278,15 @@ export function ProductionBoardKanbanComponent({
/>
{cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
<ProductionListDetailComponent jobs={data} />
{cardSettings.stickyheader ? (
<StickyContainer>
<Board
data={boardLanes}
onDragEnd={onDragEnd}
style={{ height: "100%", backgroundColor: "transparent", overflowY: "auto" }}
components={components}
orientation={orientation}
collapsibleLanes
/>
</StickyContainer>
) : (
<div>
<Board
data={boardLanes}
onDragEnd={onDragEnd}
style={{ backgroundColor: "transparent", overflowY: "auto" }}
components={components}
collapsibleLanes
orientation={orientation}
/>
</div>
)}
</Container>
<Board
data={boardLanes}
onDragEnd={onDragEnd}
components={components}
collapsibleLanes
orientation={orientation}
/>
</div>
);
}
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;
}
`;

28
client/src/components/production-board-kanban/production-board-kanban.styles.scss
View File

@@ -2,12 +2,12 @@
padding: 5px;
}
.react-trello-card {
border-radius: 3px;
background-color: #fff;
padding: 4px;
margin-bottom: 7px;
}
//.react-trello-card {
// border-radius: 3px;
// background-color: #fff;
// padding: 4px;
// margin-bottom: 7px;
//}
// .react-trello-card-skeleton,
// .react-trello-card,
@@ -33,12 +33,12 @@
justify-content: space-between;
}
.react-trello-column {
padding: 10px;
border-radius: 2px;
background-color: #eee;
margin: 5px;
}
//.react-trello-column {
// padding: 10px;
// border-radius: 2px;
// background-color: #eee;
// margin: 5px;
//}
.react-trello-column input:focus {
outline: none;
@@ -84,6 +84,10 @@
width: 100%;
padding: 0px;
}
.height-preserving-container:empty {
min-height: calc(var(--child-height));
box-sizing: border-box;
}
.react-trello-card-adder-form__title:focus {
outline: none;