import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
import {
|
useTranslate,
|
EditButton,
|
ReferenceArrayField,
|
ReferenceField,
|
ReferenceManyField,
|
ShowBase,
|
useDataProvider,
|
useNotify,
|
useRecordContext,
|
useRedirect,
|
useRefresh,
|
useUpdate,
|
} from 'react-admin';
|
import {
|
Box,
|
Button,
|
Chip,
|
Dialog,
|
DialogContent,
|
Divider,
|
Stack,
|
Typography,
|
Avatar,
|
useTheme,
|
} from '@mui/material';
|
import DialogCloseButton from "../components/DialogCloseButton";
|
import { blueGrey, blue } from '@mui/material/colors';
|
import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
|
import { format } from 'date-fns';
|
import { TaskList } from "./TaskList";
|
import { ActionsIterator } from "../action/ActionsIterator";
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
|
|
const MissionShow = ({ open, id }) => {
|
const redirect = useRedirect();
|
const handleClose = () => {
|
redirect('list', 'mission');
|
};
|
|
return (
|
<Dialog
|
open={open}
|
onClose={handleClose}
|
fullWidth
|
maxWidth="md"
|
sx={{
|
'& .MuiDialog-container': {
|
alignItems: 'flex-start',
|
},
|
}}
|
>
|
<DialogContent sx={{ padding: 0 }}>
|
{!!id ? (
|
<ShowBase id={id}>
|
<MissionShowContent handleClose={handleClose} />
|
</ShowBase>
|
) : null}
|
</DialogContent>
|
</Dialog>
|
)
|
}
|
|
const MissionShowContent = ({ handleClose }) => {
|
const theme = useTheme();
|
const record = useRecordContext();
|
const translate = useTranslate();
|
if (!record) return null;
|
|
return (
|
<>
|
<DialogCloseButton
|
onClose={handleClose}
|
top={12}
|
/>
|
<Stack gap={1}>
|
<Box display="flex" p={2}>
|
<Box flex="1">
|
<Stack
|
direction="row"
|
justifyContent="space-between"
|
mb={4}
|
>
|
<Stack direction="row" alignItems="center" gap={2}>
|
<Avatar
|
sx={{
|
width: 30,
|
height: 30,
|
bgcolor: theme.palette.primary.main,
|
}}
|
>
|
{record.agv}
|
</Avatar>
|
<Typography variant="h5">
|
{record.groupNo}
|
</Typography>
|
</Stack>
|
<Stack
|
gap={1}
|
direction="row"
|
pr={6}
|
>
|
<ResendButton record={record} />
|
</Stack>
|
</Stack>
|
|
<Box display="flex" m={2}>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.mission.lastSendDate')}
|
</Typography>
|
<Stack
|
direction="row"
|
alignItems="center"
|
gap={1}
|
>
|
<Typography variant="body2">
|
{format(record.sendTime, 'yyyy-MM-dd HH:mm:ss') || '-'}
|
</Typography>
|
</Stack>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.bus.busNo')}
|
</Typography>
|
<Typography variant="body2">
|
{record.busNo || '-'}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.segment.posType')}
|
</Typography>
|
<Typography variant="body2">
|
{translate(`page.mission.enums.posType.${record.posType}`)}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.mission.actionCount')}
|
</Typography>
|
<Typography variant="body2">
|
{record.actionCount || 'unknown'}
|
</Typography>
|
</Box>
|
</Box>
|
|
{!!record.taskIds?.length && (
|
<Box m={2}>
|
<Box
|
display="flex"
|
mr={5}
|
flexDirection="column"
|
minHeight={48}
|
>
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.mission.task')}
|
</Typography>
|
<ReferenceArrayField
|
source="contact_ids"
|
reference="contacts_summary"
|
>
|
<TaskList taskIds={record.taskIds} />
|
</ReferenceArrayField>
|
</Box>
|
</Box>
|
)}
|
|
{!!record.codeList?.length && (
|
<Box m={2} sx={{ whiteSpace: 'pre-line' }}>
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.mission.runPath')}
|
</Typography>
|
<Typography variant="body2" sx={{ whiteSpace: 'normal', overflow: 'hidden', display: 'flex', flexWrap: 'wrap' }}>
|
[ {record.codeList.map((code, index) => (
|
<span key={index} style={{
|
color: record.currCode === code ? theme.palette.primary.main : 'inherit',
|
}}>
|
{code}{index < record.codeList.length - 1 && ','}
|
</span>
|
))} ]
|
</Typography>
|
</Box>
|
)}
|
|
<Box m={2}>
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
{translate('table.field.mission.actions')}
|
</Typography>
|
<Divider />
|
<ActionsIterator actionIds={record.actionIds} />
|
</Box>
|
</Box>
|
</Box>
|
</Stack>
|
</>
|
)
|
};
|
|
const ResendButton = ({ record }) => {
|
const dataProvider = useDataProvider();
|
const redirect = useRedirect();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
const translate = useTranslate();
|
|
const handleClick = () => {
|
redirect(`/mission/${record.id}/resend`, undefined, undefined, undefined, {
|
_scrollToTop: false,
|
});
|
};
|
|
return (
|
<Button
|
onClick={handleClick}
|
// startIcon={<MoveToInboxIcon />}
|
endIcon={<ArrowForwardIosIcon />}
|
size="small"
|
>
|
{translate('common.action.resend')}
|
</Button>
|
);
|
};
|
|
export default MissionShow;
|
