#

luxiaotao1123

2024-10-07 56e8529fc6ef8fee3d7494b24f33165cb79e4cc2

#

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

@@ -1,17 +1,12 @@
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,
@@ -24,14 +19,22 @@
    Typography,
    Avatar,
    useTheme,
    TableContainer,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Paper,
    Toolbar,
    Tooltip,
    Checkbox,
    IconButton,
} from '@mui/material';
import { alpha } from '@mui/material/styles';
import { Link } from 'react-router-dom';
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 ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';

const MissionResend = ({ open, id }) => {
@@ -133,6 +136,8 @@
                            </Box>
                        )}

                        <ActionTable actionIds={record?.actionIds} />

                    </Box>
                </Box>
            </Stack>
@@ -140,4 +145,210 @@
    )
};

const headCells = [
    {
        id: 'name',
        numeric: false,
        disablePadding: true,
        label: 'Dessert (100g serving)',
    },
    {
        id: 'calories',
        numeric: true,
        disablePadding: false,
        label: 'Calories',
    },
    {
        id: 'fat',
        numeric: true,
        disablePadding: false,
        label: 'Fat (g)',
    },
    {
        id: 'carbs',
        numeric: true,
        disablePadding: false,
        label: 'Carbs (g)',
    },
    {
        id: 'protein',
        numeric: true,
        disablePadding: false,
        label: 'Protein (g)',
    },
];

const ActionTable = ({ actionIds }) => {
    const dataProvider = useDataProvider();
    const [actions, setActions] = useState([]);
    const [selected, setSelected] = React.useState([]);

    useEffect(() => {
        if (actionIds?.length > 0) {
            dataProvider.getMany('action', { ids: actionIds }).then(res => {
                if (res.data?.length > 0) {
                    setActions(res.data);
                }
            })
        }
    }, [actionIds])

    const handleSelectAllClick = (event) => {
        if (event.target.checked) {
            const newSelected = actions.map((n) => n.id);
            setSelected(newSelected);
            return;
        }
        setSelected([]);
    };

    const handleClick = (event, id) => {
        const selectedIndex = selected.indexOf(id);
        let newSelected = [];

        if (selectedIndex === -1) {
            newSelected = newSelected.concat(selected, id);
        } else if (selectedIndex === 0) {
            newSelected = newSelected.concat(selected.slice(1));
        } else if (selectedIndex === selected.length - 1) {
            newSelected = newSelected.concat(selected.slice(0, -1));
        } else if (selectedIndex > 0) {
            newSelected = newSelected.concat(
                selected.slice(0, selectedIndex),
                selected.slice(selectedIndex + 1),
            );
        }
        setSelected(newSelected);
    };


    return (
        <>
            <Box sx={{ width: '100%' }}>
                <Paper sx={{ width: '100%', mb: 2 }}>
                    <Toolbar
                        sx={[
                            {
                                pl: { sm: 2 },
                                pr: { xs: 1, sm: 1 },
                            },
                            selected.length > 0 && {
                                bgcolor: (theme) =>
                                    alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
                            },
                        ]}
                    >
                        {selected.length > 0 ? (
                            <Typography
                                sx={{ flex: '1 1 100%' }}
                                color="inherit"
                                variant="subtitle1"
                                component="div"
                            >
                                {selected.length} selected
                            </Typography>
                        ) : (
                            <Typography
                                sx={{ flex: '1 1 100%' }}
                                variant="h6"
                                id="tableTitle"
                                component="div"
                            >
                                Actions
                            </Typography>
                        )}
                        {selected.length > 0 && (
                            <Tooltip title="Delete">
                                <IconButton>
                                    <Button
                                        onClick={() => {
                                            alert('clicked');
                                        }}
                                    >
                                        ss
                                    </Button>
                                </IconButton>
                            </Tooltip>
                        )}
                    </Toolbar>
                    <TableContainer>
                        <Table
                            sx={{ minWidth: 750 }}
                            aria-labelledby="tableTitle"
                            // size={dense ? 'small' : 'medium'}
                            size="small"
                        >
                            <TableHead>
                                <TableRow>
                                    <TableCell padding="checkbox">
                                        <Checkbox
                                            color="primary"
                                            indeterminate={selected.length > 0 && selected.length < actions.length}
                                            checked={actions.length > 0 && selected.length === actions.length}
                                            onChange={handleSelectAllClick}
                                            inputProps={{
                                                'aria-label': 'select all desserts',
                                            }}
                                        />
                                    </TableCell>
                                    {headCells.map((headCell) => (
                                        <TableCell
                                            key={headCell.id}
                                            align={headCell.numeric ? 'right' : 'left'}
                                            padding={headCell.disablePadding ? 'none' : 'normal'}
                                        >
                                            {headCell.label}
                                        </TableCell>
                                    ))}
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {actions?.map((row, index) => {
                                    const isItemSelected = selected.includes(row.id);
                                    const labelId = `action-table-checkbox-${index}`;

                                    return (
                                        <TableRow
                                            hover
                                            onClick={(event) => handleClick(event, row.id)}
                                            role="checkbox"
                                            aria-checked={isItemSelected}
                                            tabIndex={-1}
                                            key={row.id}
                                            selected={isItemSelected}
                                            sx={{ cursor: 'pointer' }}
                                        >
                                            <TableCell padding="checkbox">
                                                <Checkbox
                                                    color="primary"
                                                    checked={isItemSelected}
                                                    inputProps={{
                                                        'aria-labelledby': labelId,
                                                    }}
                                                />
                                            </TableCell>
                                            <TableCell
                                                component="th"
                                                id={labelId}
                                                scope="row"
                                                padding="none"
                                            >
                                                {row.name}
                                            </TableCell>
                                            <TableCell align="right">{row.calories}</TableCell>
                                            <TableCell align="right">{row.fat}</TableCell>
                                            <TableCell align="right">{row.carbs}</TableCell>
                                            <TableCell align="right">{row.protein}</TableCell>
                                        </TableRow>
                                    );
                                })}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Paper>
            </Box>
        </>
    )
}

export default MissionResend;