added update to comments with characters counter
This commit is contained in:
GotthardG
@ -23,14 +23,11 @@ interface ShipmentDetailsProps {
|
||||
}
|
||||
|
||||
const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
isCreatingShipment,
|
||||
sx,
|
||||
selectedShipment,
|
||||
selectedDewar,
|
||||
setSelectedDewar,
|
||||
setSelectedShipment,
|
||||
refreshShipments,
|
||||
defaultContactPerson
|
||||
}) => {
|
||||
const [localSelectedDewar, setLocalSelectedDewar] = useState<Dewar | null>(null);
|
||||
const [isAddingDewar, setIsAddingDewar] = useState<boolean>(false);
|
||||
@ -200,146 +197,152 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{
|
||||
selectedShipment
|
||||
? (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{ marginTop: 2, marginBottom: 2 }}>
|
||||
<Typography variant="h5">{selectedShipment.shipment_name}</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Main contact person: {contactPerson ? `${contactPerson.firstname} ${contactPerson.lastname}` : 'N/A'}
|
||||
</Typography>
|
||||
<Typography variant="body1">Number of Pucks: {totalPucks}</Typography>
|
||||
<Typography variant="body1">Number of Samples: {totalSamples}</Typography>
|
||||
<Typography variant="body1">Shipment Date: {selectedShipment.shipment_date}</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<TextField
|
||||
label="Comments"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
value={comments}
|
||||
onChange={(e) => setComments(e.target.value)}
|
||||
sx={{
|
||||
marginBottom: 2,
|
||||
'& .MuiInputBase-root': {
|
||||
color: isCommentsEdited ? 'inherit' : 'rgba(0, 0, 0, 0.6)',
|
||||
},
|
||||
}}
|
||||
helperText={`${MAX_COMMENTS_LENGTH - comments.length} characters remaining`}
|
||||
error={comments.length > MAX_COMMENTS_LENGTH}
|
||||
/>
|
||||
<Box sx={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 1 }}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleSaveComments}
|
||||
disabled={comments.length > MAX_COMMENTS_LENGTH}
|
||||
>
|
||||
<CheckIcon />
|
||||
</IconButton>
|
||||
<IconButton color="secondary" onClick={handleCancelEdit}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
: <Typography variant="h5" color="error">No shipment selected</Typography>
|
||||
}
|
||||
|
||||
{localSelectedDewar && !isAddingDewar && (
|
||||
<DewarDetails
|
||||
dewar={localSelectedDewar}
|
||||
trackingNumber={localSelectedDewar.tracking_number || ''}
|
||||
setTrackingNumber={(value) => {
|
||||
setLocalSelectedDewar((prev) => (prev ? { ...prev, tracking_number: value as string } : prev));
|
||||
}}
|
||||
initialContactPersons={selectedShipment?.contact_person ? [selectedShipment.contact_person] : []}
|
||||
initialReturnAddresses={selectedShipment?.return_address ? [selectedShipment.return_address] : []}
|
||||
defaultContactPerson={contactPerson}
|
||||
defaultReturnAddress={selectedShipment?.return_address}
|
||||
shipmentId={selectedShipment?.shipment_id || ''}
|
||||
refreshShipments={refreshShipments}
|
||||
/>
|
||||
{selectedShipment ? (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{ marginTop: 2, marginBottom: 2 }}>
|
||||
<Typography variant="h5">{selectedShipment.shipment_name}</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Main contact person: {contactPerson ? `${contactPerson.firstname} ${contactPerson.lastname}` : 'N/A'}
|
||||
</Typography>
|
||||
<Typography variant="body1">Number of Pucks: {totalPucks}</Typography>
|
||||
<Typography variant="body1">Number of Samples: {totalSamples}</Typography>
|
||||
<Typography variant="body1">Shipment Date: {selectedShipment.shipment_date}</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<TextField
|
||||
label="Comments"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
value={comments}
|
||||
onChange={(e) => setComments(e.target.value)}
|
||||
sx={{
|
||||
marginBottom: 2,
|
||||
'& .MuiInputBase-root': {
|
||||
color: isCommentsEdited ? 'inherit' : 'rgba(0, 0, 0, 0.6)',
|
||||
},
|
||||
}}
|
||||
helperText={`${MAX_COMMENTS_LENGTH - comments.length} characters remaining`}
|
||||
error={comments.length > MAX_COMMENTS_LENGTH}
|
||||
/>
|
||||
<Box sx={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 1 }}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleSaveComments}
|
||||
disabled={comments.length > MAX_COMMENTS_LENGTH}
|
||||
>
|
||||
<CheckIcon />
|
||||
</IconButton>
|
||||
<IconButton color="secondary" onClick={handleCancelEdit}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : (
|
||||
<Typography variant="h5" color="error">No shipment selected</Typography>
|
||||
)}
|
||||
|
||||
<Stack spacing={1}>
|
||||
{selectedShipment?.dewars?.map((dewar) => (
|
||||
<Button
|
||||
key={dewar.id}
|
||||
onClick={() => handleDewarSelection(dewar)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 1,
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: 1,
|
||||
backgroundColor: localSelectedDewar?.id === dewar.id ? '#f0f0f0' : '#fff',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 2 }}>
|
||||
{dewar.qrcode ? (
|
||||
<QRCode value={dewar.qrcode} size={70} />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: 70,
|
||||
height: 70,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px dashed #ccc',
|
||||
borderRadius: 1,
|
||||
color: 'text.secondary'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">No QR Code</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<React.Fragment key={dewar.id}>
|
||||
<Button
|
||||
onClick={() => handleDewarSelection(dewar)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
padding: localSelectedDewar?.id === dewar.id ? 2 : 1,
|
||||
textTransform: 'none',
|
||||
width: '100%',
|
||||
backgroundColor: localSelectedDewar?.id === dewar.id ? '#f0f0f0' : '#fff',
|
||||
transition: 'all 0.3s',
|
||||
overflow: 'hidden',
|
||||
border: localSelectedDewar?.id === dewar.id ? '2px solid #000' : undefined,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 2 }}>
|
||||
{dewar.qrcode ? (
|
||||
<QRCode value={dewar.qrcode} size={70} />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: 70,
|
||||
height: 70,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px dashed #ccc',
|
||||
borderRadius: 1,
|
||||
color: 'text.secondary'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">No QR Code</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<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>
|
||||
<Typography variant="body2">Tracking Number: {dewar.tracking_number}</Typography>
|
||||
<Typography variant="body2">
|
||||
Contact Person: {dewar.contact_person?.firstname ? `${dewar.contact_person.firstname} ${dewar.contact_person.lastname}` : 'N/A'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<CustomStepper dewar={dewar} />
|
||||
|
||||
</Box>
|
||||
|
||||
<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>
|
||||
<Typography variant="body2">Tracking Number: {dewar.tracking_number}</Typography>
|
||||
<Typography variant="body2">
|
||||
Contact Person: {dewar.contact_person?.firstname ? `${dewar.contact_person.firstname} ${dewar.contact_person.lastname}` : 'N/A'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<CustomStepper dewar={dewar} />
|
||||
{localSelectedDewar?.id === dewar.id && (
|
||||
<Button
|
||||
onClick={() => handleDeleteDewar(dewar.id)}
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteDewar(dewar.id);
|
||||
}}
|
||||
color="error"
|
||||
sx={{
|
||||
minWidth: '40px',
|
||||
height: '40px',
|
||||
marginLeft: 2,
|
||||
padding: 0,
|
||||
alignSelf: 'center',
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</Button>
|
||||
</Button>
|
||||
|
||||
{localSelectedDewar?.id === dewar.id && (
|
||||
<Box sx={{ padding: 2, border: '1px solid #ccc', borderRadius: '4px' }}>
|
||||
<DewarDetails
|
||||
dewar={localSelectedDewar}
|
||||
trackingNumber={localSelectedDewar.tracking_number || ''}
|
||||
setTrackingNumber={(value) => {
|
||||
setLocalSelectedDewar((prev) => (prev ? { ...prev, tracking_number: value as string } : prev));
|
||||
}}
|
||||
initialContactPersons={selectedShipment?.contact_person ? [selectedShipment.contact_person] : []}
|
||||
initialReturnAddresses={selectedShipment?.return_address ? [selectedShipment.return_address] : []}
|
||||
defaultContactPerson={contactPerson}
|
||||
defaultReturnAddress={selectedShipment?.return_address}
|
||||
shipmentId={selectedShipment?.shipment_id || ''}
|
||||
refreshShipments={refreshShipments}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user