import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
import {
|
DeleteButton,
|
EditButton,
|
ReferenceArrayField,
|
ReferenceField,
|
ReferenceManyField,
|
ShowBase,
|
useDataProvider,
|
useNotify,
|
useRecordContext,
|
useRedirect,
|
useRefresh,
|
useUpdate,
|
} from 'react-admin';
|
import {
|
Box,
|
Button,
|
Chip,
|
Dialog,
|
DialogContent,
|
Divider,
|
Stack,
|
Typography,
|
} from '@mui/material';
|
import DialogCloseButton from "../components/DialogCloseButton";
|
|
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 CLOSE_TOP_WITH_ARCHIVED = 14;
|
const MissionShowContent = ({ handleClose }) => {
|
const record = useRecordContext();
|
if (!record) return null;
|
console.log(record);
|
|
return (
|
<>
|
<DialogCloseButton
|
onClose={handleClose}
|
/>
|
<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}>
|
<Typography variant="h5">
|
{record.name}
|
</Typography>
|
</Stack>
|
<Stack
|
gap={1}
|
direction="row"
|
pr={record.archived_at ? 0 : 6}
|
>
|
</Stack>
|
</Stack>
|
|
<Box display="flex" m={2}>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
Expected closing date
|
</Typography>
|
<Stack
|
direction="row"
|
alignItems="center"
|
gap={1}
|
>
|
<Typography variant="body2">
|
</Typography>
|
{new Date(record.expected_closing_date) <
|
new Date() ? (
|
<Chip
|
label="Past"
|
color="error"
|
size="small"
|
/>
|
) : null}
|
</Stack>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
Budget
|
</Typography>
|
<Typography variant="body2">
|
</Typography>
|
</Box>
|
|
{record.category && (
|
<Box
|
display="flex"
|
mr={5}
|
flexDirection="column"
|
>
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
Category
|
</Typography>
|
<Typography variant="body2">
|
{record.category}
|
</Typography>
|
</Box>
|
)}
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
Stage
|
</Typography>
|
<Typography variant="body2">
|
</Typography>
|
</Box>
|
</Box>
|
|
{!!record.contact_ids?.length && (
|
<Box m={2}>
|
<Box
|
display="flex"
|
mr={5}
|
flexDirection="column"
|
minHeight={48}
|
>
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
Contacts
|
</Typography>
|
<ReferenceArrayField
|
source="contact_ids"
|
reference="contacts_summary"
|
>
|
<ContactList />
|
</ReferenceArrayField>
|
</Box>
|
</Box>
|
)}
|
|
{record.description && (
|
<Box m={2} sx={{ whiteSpace: 'pre-line' }}>
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
Description
|
</Typography>
|
<Typography variant="body2">
|
{record.description}
|
</Typography>
|
</Box>
|
)}
|
|
<Box m={2}>
|
<Divider />
|
</Box>
|
</Box>
|
</Box>
|
</Stack>
|
</>
|
)
|
}
|
|
export default MissionShow;
|
