Adjusted stepper for shipment tracking
This commit is contained in:
GotthardG
@ -1,25 +1,25 @@
|
||||
import React from 'react';
|
||||
import {Box, Typography, Button, Stack, TextField} from '@mui/material';
|
||||
import { Box, Typography, Button, Stack, TextField } from '@mui/material';
|
||||
import QRCode from 'react-qr-code';
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import {Dewar, Shipment_Input, DefaultService} from "../../openapi";
|
||||
import {SxProps} from "@mui/system";
|
||||
import { Dewar, Shipment_Input, DefaultService } from "../../openapi";
|
||||
import { SxProps } from "@mui/system";
|
||||
import CustomStepper from "./DewarStepper";
|
||||
import DewarDetails from './DewarDetails';
|
||||
|
||||
|
||||
|
||||
interface ShipmentDetailsProps {
|
||||
isCreatingShipment: boolean;
|
||||
selectedShipment: Shipment_Input;
|
||||
selectedDewar: Dewar | null;
|
||||
setSelectedDewar: React.Dispatch<React.SetStateAction<Dewar | null>>;
|
||||
setSelectedShipment: React.Dispatch<React.SetStateAction<Shipment_Input>>;
|
||||
sx?: SxProps;
|
||||
}
|
||||
|
||||
const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
selectedShipment,
|
||||
setSelectedDewar,
|
||||
setSelectedShipment,
|
||||
sx = {},
|
||||
}) => {
|
||||
const [localSelectedDewar, setLocalSelectedDewar] = React.useState<Dewar | null>(null);
|
||||
@ -33,11 +33,9 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
const totalSamples = selectedShipment.dewars.reduce((acc, dewar) => acc + (dewar.number_of_samples || 0), 0);
|
||||
|
||||
const handleDewarSelection = (dewar: Dewar) => {
|
||||
if (setSelectedDewar) {
|
||||
const newSelection = localSelectedDewar?.id === dewar.id ? null : dewar;
|
||||
setLocalSelectedDewar(newSelection);
|
||||
setSelectedDewar(newSelection);
|
||||
}
|
||||
const newSelection = localSelectedDewar?.id === dewar.id ? null : dewar;
|
||||
setLocalSelectedDewar(newSelection);
|
||||
setSelectedDewar(newSelection);
|
||||
};
|
||||
|
||||
const handleDeleteDewar = () => {
|
||||
@ -45,41 +43,72 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
const confirmed = window.confirm('Are you sure you want to delete this dewar?');
|
||||
if (confirmed) {
|
||||
const updatedDewars = selectedShipment.dewars.filter(dewar => dewar.tracking_number !== localSelectedDewar.tracking_number);
|
||||
console.log('Updated Dewars:', updatedDewars);
|
||||
setSelectedShipment((prev) => ({ ...prev, dewars: updatedDewars }));
|
||||
setLocalSelectedDewar(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleNewDewarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const {name, value} = e.target;
|
||||
const { name, value } = e.target;
|
||||
setNewDewar((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const addDewarToList = (currentDewars: Array<Dewar>, newDewar: Dewar): Array<Dewar> => {
|
||||
return [...currentDewars, newDewar];
|
||||
};
|
||||
|
||||
const updateDewarsState = (prev: Shipment_Input, createdDewar: Dewar): Shipment_Input => {
|
||||
const updatedDewars = addDewarToList(prev.dewars, createdDewar);
|
||||
return { ...prev, dewars: updatedDewars };
|
||||
};
|
||||
|
||||
const handleAddDewar = async () => {
|
||||
if (selectedShipment && newDewar.dewar_name) {
|
||||
try {
|
||||
const newDewarToPost: Dewar = {
|
||||
...newDewar as Dewar,
|
||||
dewar_name: newDewar.dewar_name.trim() || 'Unnamed Dewar',
|
||||
number_of_pucks: newDewar.number_of_pucks ?? 0,
|
||||
number_of_samples: newDewar.number_of_samples ?? 0,
|
||||
return_address: selectedShipment.return_address,
|
||||
contact_person: selectedShipment.contact_person,
|
||||
status: 'In preparation',
|
||||
shippingStatus: 'not shipped',
|
||||
arrivalStatus: 'not arrived',
|
||||
qrcode: newDewar.qrcode || 'N/A',
|
||||
};
|
||||
|
||||
await DefaultService.createDewarDewarsPost(newDewarToPost);
|
||||
// Create a new dewar
|
||||
const createdDewar = await DefaultService.createDewarDewarsPost(newDewarToPost);
|
||||
|
||||
console.log('Created Dewar:', createdDewar);
|
||||
|
||||
// Check IDs before calling backend
|
||||
console.log('Adding dewar to shipment:', {
|
||||
shipment_id: selectedShipment.shipment_id,
|
||||
dewar_id: createdDewar.id,
|
||||
});
|
||||
|
||||
// Make an API call to associate the dewar with the shipment
|
||||
const updatedShipment = await DefaultService.addDewarToShipmentShipmentsShipmentIdAddDewarPost(
|
||||
selectedShipment.shipment_id,
|
||||
createdDewar.id
|
||||
);
|
||||
|
||||
if (updatedShipment) {
|
||||
setSelectedShipment(updatedShipment);
|
||||
} else {
|
||||
throw new Error("Failed to update shipment with new dewar");
|
||||
}
|
||||
|
||||
setIsAddingDewar(false);
|
||||
setNewDewar({dewar_name: '', tracking_number: ''});
|
||||
setNewDewar({ dewar_name: '', tracking_number: '' });
|
||||
|
||||
} catch (error) {
|
||||
alert("Failed to add dewar. Please try again.");
|
||||
console.error("Error adding dewar:", error);
|
||||
alert("Failed to add dewar or update shipment. Please try again.");
|
||||
console.error("Error adding dewar or updating shipment:", error);
|
||||
}
|
||||
} else {
|
||||
alert('Please fill in the Dewar Name');
|
||||
@ -87,19 +116,19 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{...sx, padding: 2, textAlign: 'left'}}>
|
||||
<Box sx={{ ...sx, padding: 2, textAlign: 'left' }}>
|
||||
{!localSelectedDewar && !isAddingDewar && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => setIsAddingDewar(true)}
|
||||
sx={{marginBottom: 2}}
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
Add Dewar
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isAddingDewar && (
|
||||
<Box sx={{marginBottom: 2, width: '20%'}}>
|
||||
<Box sx={{ marginBottom: 2, width: '20%' }}>
|
||||
<Typography variant="h6">Add New Dewar</Typography>
|
||||
<TextField
|
||||
label="Dewar Name"
|
||||
@ -107,9 +136,9 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
value={newDewar.dewar_name}
|
||||
onChange={handleNewDewarChange}
|
||||
fullWidth
|
||||
sx={{marginBottom: 2}}
|
||||
sx={{ marginBottom: 2 }}
|
||||
/>
|
||||
<Button variant="contained" color="primary" onClick={handleAddDewar} sx={{marginRight: 2}}>
|
||||
<Button variant="contained" color="primary" onClick={handleAddDewar} sx={{ marginRight: 2 }}>
|
||||
Save Dewar
|
||||
</Button>
|
||||
<Button variant="outlined" color="secondary" onClick={() => setIsAddingDewar(false)}>
|
||||
@ -129,7 +158,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
dewar={localSelectedDewar}
|
||||
trackingNumber={localSelectedDewar.tracking_number || ''}
|
||||
setTrackingNumber={(value) => {
|
||||
setLocalSelectedDewar((prev) => prev ? {...prev, tracking_number: value} : prev);
|
||||
setLocalSelectedDewar((prev) => prev ? { ...prev, tracking_number: value as string } : prev);
|
||||
}}
|
||||
contactPersons={selectedShipment.contact_person}
|
||||
returnAddresses={selectedShipment.return_address}
|
||||
@ -161,7 +190,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
}}
|
||||
>
|
||||
{dewar.qrcode ? (
|
||||
<QRCode value={dewar.qrcode} size={70}/>
|
||||
<QRCode value={dewar.qrcode} size={70} />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
@ -180,7 +209,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{flexGrow: 1, marginRight: 0}}>
|
||||
<Box sx={{ flexGrow: 1, marginRight: 0 }}>
|
||||
<Typography variant="body1">{dewar.dewar_name}</Typography>
|
||||
<Typography variant="body2">Number of Pucks: {dewar.number_of_pucks || 0}</Typography>
|
||||
<Typography variant="body2">Number of Samples: {dewar.number_of_samples || 0}</Typography>
|
||||
@ -207,7 +236,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
alignSelf: 'center',
|
||||
}}
|
||||
>
|
||||
<DeleteIcon/>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user