Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-30 01:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(train-scheduling): implement container movement between wagons

Browse Source 
- Added functionality to move containers between wagons in the train scheduling system.
- Introduced  API endpoint and service method to handle container movement.
- Updated  component to support drag-and-drop for rearranging containers.
- Enhanced  to allow moving containers to other wagons via a context menu.
- Implemented UI feedback for container movement actions, including loading states and success/error notifications.
- Updated relevant types and constants to accommodate new container movement logic.
- Added tests for the rule engine to ensure proper handling of hazardous bookings.
This commit is contained in:
Marshal
2026-07-21 23:02:06 +00:00
parent 00a81fda15
commit 835c9e111c
35 changed files with 1896 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/InteractiveTrainConsist.tsx
View File

@@ -1,3 +1,4 @@
import { useState } from "react";
import { Badge, Box, Group, HoverCard, Stack, Text } from "@mantine/core";
import {
Building2,
@@ -14,6 +15,15 @@ import { freightBrand } from "@/theme/freight-brand";
type Wagon = NonNullable<TrainScheduleDetail["trainSet"]>["wagons"][number];
type Locomotive = NonNullable<TrainScheduleDetail["trainSet"]>["locomotive"];
export interface ContainerMove {
itemId: string;
targetWagonId: string;
/** Present when the drop landed on another container — swap the two. */
swapWithItemId?: string;
}
type DragState = { itemId: string; sourceWagonId: string } | null;
interface InteractiveTrainConsistProps {
wagons: Wagon[];
locomotive: Locomotive | null | undefined;
@@ -23,8 +33,16 @@ interface InteractiveTrainConsistProps {
onSelectWagon: (wagon: Wagon) => void;
/** Booking id to highlight across the train (e.g. selected in the side panel). */
highlightBookingId?: string | null;
/** Containers become draggable between wagons (drop on a container = swap). */
canRearrange?: boolean;
onMoveContainer?: (move: ContainerMove) => void;
}
const wagonItems = (wagon: Wagon) =>
(wagon.allocations ?? [])
.flatMap((a) => a.containerItems ?? [])
.sort((a, b) => (a.positionOnWagon ?? 99) - (b.positionOnWagon ?? 99));
const CONTAINER_GRADIENTS = [
"linear-gradient(180deg, var(--mantine-color-cyan-5), var(--mantine-color-cyan-7))",
"linear-gradient(180deg, var(--mantine-color-blue-5), var(--mantine-color-blue-7))",
@@ -151,16 +169,27 @@ function WagonCar({
selected,
highlighted,
onSelect,
drag,
onDragChange,
onMoveContainer,
canRearrange,
}: {
wagon: Wagon;
company: string | null;
selected: boolean;
highlighted: boolean;
onSelect: () => void;
drag: DragState;
onDragChange: (drag: DragState) => void;
onMoveContainer?: (move: ContainerMove) => void;
canRearrange: boolean;
}) {
const [dropHover, setDropHover] = useState(false);
const allocation = wagon.allocations?.[0];
const isEmpty = !allocation;
const isBulk = (allocation?.loadType ?? "").toUpperCase().includes("BULK");
const isBulk = (wagon.allocations ?? []).some((a) =>
(a.loadType ?? "").toUpperCase().includes("BULK"),
);
// GROSS on both sides: cargo + tare vs rated payload + tare.
const tare = wagon.tareWeightTons ?? 0;
const assigned =
@@ -170,10 +199,19 @@ function WagonCar({
const accent = isEmpty ? "gray" : isBulk ? "orange" : "cyan";
const accentVar = `var(--mantine-color-${accent}-6)`;
const containerNumbers = (allocation?.containerItems ?? []).map(
(c) => c.containerNumber?.trim() || "—",
const items = wagonItems(wagon);
const blocks = items.slice(0, 2);
const containerNumbers = items.map((c) => c.containerNumber?.trim() || "—");
// Where a dragged container may land: another wagon, not bulk-loaded, with a
// free half (the API re-checks TEU/weight — this only paints the hint).
const dropEligible = Boolean(
drag && drag.sourceWagonId !== wagon.id && !isBulk && items.length < 2,
);
const blocks = containerNumbers.slice(0, 2);
const endDrag = () => {
onDragChange(null);
setDropHover(false);
};
const ringColor = selected
? freightBrand.primary
@@ -189,6 +227,21 @@ function WagonCar({
style={{ width: 120, flexShrink: 0, cursor: "pointer" }}
>
<Box
onDragOver={(e) => {
if (dropEligible) {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
setDropHover(true);
}
}}
onDragLeave={() => setDropHover(false)}
onDrop={(e) => {
if (dropEligible && drag) {
e.preventDefault();
onMoveContainer?.({ itemId: drag.itemId, targetWagonId: wagon.id });
}
endDrag();
}}
style={{
position: "relative",
height: 70,
@@ -205,10 +258,16 @@ function WagonCar({
: isEmpty
? "none"
: "0 3px 10px rgba(15,41,27,0.08)",
outline: dropHover
? "2px solid var(--mantine-color-cyan-6)"
: dropEligible
? "2px dashed var(--mantine-color-cyan-4)"
: "none",
outlineOffset: 2,
overflow: "hidden",
display: "flex",
flexDirection: "column",
transition: "box-shadow 120ms ease",
transition: "box-shadow 120ms ease, outline-color 120ms ease",
}}
>
{/* top accent strip */}
@@ -274,28 +333,84 @@ function WagonCar({
</Stack>
) : (
<Group gap={3} justify="center" wrap="nowrap" style={{ width: "100%" }}>
{(blocks.length ? blocks : ["—"]).map((cn, i) => (
{blocks.length ? (
blocks.map((item, i) => {
const isDragged = drag?.itemId === item.id;
const swapEligible = Boolean(drag && drag.itemId !== item.id);
return (
<Box
key={item.id}
draggable={canRearrange}
onDragStart={(e) => {
e.stopPropagation();
e.dataTransfer.effectAllowed = "move";
// Firefox needs data set for the drag to start.
e.dataTransfer.setData("text/plain", item.id);
onDragChange({ itemId: item.id, sourceWagonId: wagon.id });
}}
onDragEnd={endDrag}
onDragOver={(e) => {
if (swapEligible) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "move";
}
}}
onDrop={(e) => {
if (swapEligible && drag) {
e.preventDefault();
e.stopPropagation();
onMoveContainer?.({
itemId: drag.itemId,
targetWagonId: wagon.id,
swapWithItemId: item.id,
});
}
endDrag();
}}
style={{
flex: 1,
minWidth: 0,
height: 26,
borderRadius: 4,
background: CONTAINER_GRADIENTS[i % CONTAINER_GRADIENTS.length],
border: `1px solid ${CONTAINER_BORDERS[i % CONTAINER_BORDERS.length]}`,
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.3)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "0 2px",
cursor: canRearrange ? "grab" : undefined,
opacity: isDragged ? 0.35 : 1,
transition: "opacity 120ms ease",
}}
>
<Text size="8px" fw={700} c="white" truncate style={{ maxWidth: "100%" }}>
{item.containerNumber?.trim() || "—"}
</Text>
</Box>
);
})
) : (
<Box
key={i}
style={{
flex: 1,
minWidth: 0,
height: 26,
borderRadius: 4,
background: CONTAINER_GRADIENTS[i % CONTAINER_GRADIENTS.length],
border: `1px solid ${CONTAINER_BORDERS[i % CONTAINER_BORDERS.length]}`,
background: CONTAINER_GRADIENTS[0],
border: `1px solid ${CONTAINER_BORDERS[0]}`,
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.3)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "0 2px",
}}
>
<Text size="8px" fw={700} c="white" truncate style={{ maxWidth: "100%" }}>
{cn}
<Text size="8px" fw={700} c="white">
—
</Text>
</Box>
))}
)}
</Group>
)}
</Box>
@@ -447,7 +562,10 @@ export const InteractiveTrainConsist = ({
selectedWagonId,
onSelectWagon,
highlightBookingId,
canRearrange = false,
onMoveContainer,
}: InteractiveTrainConsistProps) => {
const [drag, setDrag] = useState<DragState>(null);
return (
<Box
style={{
@@ -477,6 +595,10 @@ export const InteractiveTrainConsist = ({
selected={selectedWagonId === wagon.id}
highlighted={Boolean(highlightBookingId && bookingId === highlightBookingId)}
onSelect={() => onSelectWagon(wagon)}
drag={drag}
onDragChange={setDrag}
onMoveContainer={onMoveContainer}
canRearrange={canRearrange}
/>
</Group>
);

54
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainConsistView.tsx
View File

@@ -1,13 +1,15 @@
import { useMemo, useState } from "react";
import { Badge, Box, Group, Paper, Stack, Text, ThemeIcon } from "@mantine/core";
import { MousePointerClick, TrainFront } from "lucide-react";
import { isAxiosError } from "axios";
import { Hand, MousePointerClick, TrainFront } from "lucide-react";
import type { TrainScheduleDetail } from "@/types/trainScheduling";
import { TrainStatsBar } from "./TrainStatsBar";
import { WagonCard } from "./WagonCard";
import { InteractiveTrainConsist } from "./InteractiveTrainConsist";
import { InteractiveTrainConsist, type ContainerMove } from "./InteractiveTrainConsist";
import { RemoveBookingModal } from "./RemoveBookingModal";
import { useMutation } from "@tanstack/react-query";
import { api } from "@/services/api";
import { useToast } from "@/hooks/use-toast";
import { freightBrand } from "@/theme/freight-brand";
type Wagon = NonNullable<TrainScheduleDetail["trainSet"]>["wagons"][number];
@@ -47,6 +49,7 @@ export const TrainConsistView = ({
}: TrainConsistViewProps) => {
const [selectedWagonId, setSelectedWagonId] = useState<string | null>(null);
const [removeModalOpen, setRemoveModalOpen] = useState(false);
const { toast } = useToast();
const unassignMutation = useMutation(
api.trainScheduling.unassignBooking.mutationOptions(),
@@ -54,9 +57,37 @@ export const TrainConsistView = ({
const removeWagonMutation = useMutation(
api.trainScheduling.removeWagonSlot.mutationOptions(),
);
const moveContainerMutation = useMutation(
api.trainScheduling.moveContainerItem.mutationOptions(),
);
const trainSet = scheduleDetail.trainSet;
const wagons = trainSet?.wagons ?? [];
const canRearrange = !["DISPATCHED", "ARRIVED"].includes(scheduleDetail.status);
const handleMoveContainer = async (move: ContainerMove) => {
if (moveContainerMutation.isPending) return;
try {
await moveContainerMutation.mutateAsync({
scheduleId,
itemId: move.itemId,
targetTrainSetWagonId: move.targetWagonId,
swapWithItemId: move.swapWithItemId,
});
toast({ title: move.swapWithItemId ? "Containers swapped" : "Container moved" });
} catch (error) {
const message = isAxiosError(error)
? ((error.response?.data as { message?: string | string[] } | undefined)?.message ?? null)
: null;
toast({
title: "Could not move container",
description: Array.isArray(message)
? message.join(", ")
: (message ?? "The move was rejected — check the wagon's space and load."),
variant: "destructive",
});
}
};
// Join company/customer name from schedule bookings by booking id.
const companyByBooking = useMemo(() => {
@@ -152,13 +183,21 @@ export const TrainConsistView = ({
</div>
</Group>
<Group gap="md" wrap="nowrap" visibleFrom="sm">
{canRearrange ? (
<Group gap={5} wrap="nowrap">
<Hand size={12} color="var(--mantine-color-cyan-7)" />
<Text size="xs" c="dimmed">
Drag a container to move it — drop on a container to swap
</Text>
</Group>
) : null}
<LegendDot color="cyan" label="Container" />
<LegendDot color="orange" label="Bulk" />
<LegendDot color="gray" label="Empty" dashed />
</Group>
</Group>
<Box p="md">
<Box p="md" style={{ opacity: moveContainerMutation.isPending ? 0.6 : 1 }}>
<InteractiveTrainConsist
wagons={wagons}
locomotive={trainSet?.locomotive}
@@ -166,6 +205,8 @@ export const TrainConsistView = ({
selectedWagonId={selectedWagonId}
onSelectWagon={(w) => setSelectedWagonId((prev) => (prev === w.id ? null : w.id))}
highlightBookingId={highlightBookingId}
canRearrange={canRearrange && !moveContainerMutation.isPending}
onMoveContainer={(move) => void handleMoveContainer(move)}
/>
</Box>
</Paper>
@@ -178,7 +219,7 @@ export const TrainConsistView = ({
Editing wagon #{selectedWagon.sequenceNo}
</Badge>
<Text size="xs" c="dimmed">
Update container numbers or remove the booking
Update container numbers, move containers to another wagon, or remove the booking
</Text>
</Group>
<WagonCard
@@ -192,6 +233,8 @@ export const TrainConsistView = ({
scheduleStatus={scheduleDetail.status}
onRemoveBooking={handleRemoveBooking}
onRemoveWagon={handleRemoveWagon}
wagons={wagons}
onMoveContainer={canRearrange ? (move) => void handleMoveContainer(move) : undefined}
/>
</Box>
) : wagons.length ? (
@@ -209,7 +252,8 @@ export const TrainConsistView = ({
<MousePointerClick size={13} />
</ThemeIcon>
<Text size="xs" c="dimmed">
Click a wagon in the train to edit container numbers or remove its booking.
Click a wagon to edit its containers — or drag a container between wagons to
rearrange the load.
</Text>
</Group>
</Paper>

103
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/WagonCard.tsx
View File

@@ -1,5 +1,19 @@
import { Badge, Box, Button, Card, Group, Progress, Stack, Text, ThemeIcon } from "@mantine/core";
import {
ActionIcon,
Badge,
Box,
Button,
Card,
Group,
Menu,
Progress,
Stack,
Text,
ThemeIcon,
Tooltip,
} from "@mantine/core";
import {
ArrowLeftRight,
Building2,
Container as ContainerIcon,
Fuel,
@@ -10,6 +24,7 @@ import {
} from "lucide-react";
import type { TrainScheduleDetail } from "@/types/trainScheduling";
import { ContainerNumberInput } from "./ContainerNumberInput";
import type { ContainerMove } from "./InteractiveTrainConsist";
import { freightBrand } from "@/theme/freight-brand";
type Wagon = NonNullable<TrainScheduleDetail["trainSet"]>["wagons"][number];
@@ -21,8 +36,17 @@ interface WagonCardProps {
scheduleStatus?: string;
onRemoveBooking: (wagon: Wagon) => void;
onRemoveWagon: (wagonId: string) => void;
/** All wagons of the consist — targets for the per-container move menu. */
wagons?: Wagon[];
onMoveContainer?: (move: ContainerMove) => void;
}
const itemCountOf = (w: Wagon) =>
(w.allocations ?? []).reduce((sum, a) => sum + (a.containerItems?.length ?? 0), 0);
const isBulkWagon = (w: Wagon) =>
(w.allocations ?? []).some((a) => (a.loadType ?? "").toUpperCase().includes("BULK"));
export const WagonCard = ({
wagon,
company,
@@ -30,6 +54,8 @@ export const WagonCard = ({
scheduleStatus,
onRemoveBooking,
onRemoveWagon,
wagons,
onMoveContainer,
}: WagonCardProps) => {
const isDispatched = scheduleStatus === "DISPATCHED";
const allocation = wagon.allocations?.[0];
@@ -108,20 +134,67 @@ export const WagonCard = ({
Containers
</Text>
<Stack gap={6}>
{allocation.containerItems.map((item, idx) => (
<Group key={item.id} gap={8} wrap="nowrap">
<ContainerIcon size={13} color="var(--mantine-color-cyan-7)" />
<Text size="xs" c="dimmed">
#{idx + 1}
</Text>
<ContainerNumberInput
value={item.containerNumber ?? null}
itemId={item.id}
scheduleId={scheduleId}
disabled={isDispatched}
/>
</Group>
))}
{allocation.containerItems.map((item, idx) => {
const targets = (wagons ?? []).filter(
(w) => w.id !== wagon.id && !isBulkWagon(w) && itemCountOf(w) < 2,
);
return (
<Group key={item.id} gap={8} wrap="nowrap">
<ContainerIcon size={13} color="var(--mantine-color-cyan-7)" />
<Text size="xs" c="dimmed">
#{idx + 1}
</Text>
<ContainerNumberInput
value={item.containerNumber ?? null}
itemId={item.id}
scheduleId={scheduleId}
disabled={isDispatched}
/>
{!isDispatched && onMoveContainer ? (
<Menu shadow="md" width={220} position="bottom-end" withinPortal>
<Menu.Target>
<Tooltip label="Move to another wagon" withArrow>
<ActionIcon variant="light" color="cyan" size="sm">
<ArrowLeftRight size={13} />
</ActionIcon>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>Move to wagon</Menu.Label>
{targets.length ? (
targets.map((w) => {
const count = itemCountOf(w);
return (
<Menu.Item
key={w.id}
onClick={() =>
onMoveContainer({
itemId: item.id,
targetWagonId: w.id,
})
}
>
<Group gap={6} wrap="nowrap" justify="space-between">
<Text size="xs" fw={600}>
#{w.sequenceNo} ·{" "}
{w.physicalWagonNumber ?? w.wagonType?.code ?? "Wagon"}
</Text>
<Badge size="xs" variant="light" color={count ? "cyan" : "gray"}>
{count ? `${count}/2` : "empty"}
</Badge>
</Group>
</Menu.Item>
);
})
) : (
<Menu.Item disabled>No wagon has free space</Menu.Item>
)}
</Menu.Dropdown>
</Menu>
) : null}
</Group>
);
})}
</Stack>
</Box>
) : null}