#

luxiaotao1123

2024-09-29 2ab3366ad79370c1fbe7b665e6a50148463ab640

 zy-acs-flow/src/page/mission/MissionShow.jsx

@@ -1,9 +1,203 @@
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 = () => {
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;

    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>
        </>
    )
}