#

vincentlu

2025-05-13 ebd2f4397a92c6a5096de1b86d59154363344720

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { Link, Stack, Typography, Avatar } from '@mui/material';
import {
    useDataProvider,
    useTranslate,
} from 'react-admin';
import { getTaskStsColor } from '@/utils/color-util';
import { blueGrey } from "@mui/material/colors";
 
export const TaskList = ({ taskIds }) => {
    const dataProvider = useDataProvider();
 
    const [tasks, setTasks] = useState([]);
 
    useEffect(() => {
        if (taskIds?.length > 0) {
            dataProvider.getMany('task', { ids: taskIds }).then(res => {
                if (res.data?.length > 0) {
                    setTasks(res.data);
                }
            })
        }
    }, [taskIds])
 
    if (!taskIds?.length) return <div style={{ height: '2em' }} />;
 
    return (
        <Stack direction="row" flexWrap="wrap" gap={3} mt={1}>
            {tasks.map(task => (
                <Stack direction="row" key={task.id} gap={1}>
                    <Avatar
                        alt={task.seqNum}
                        // variant="square"
                        sx={{
                            '& img': { objectFit: 'contain' },
                            fontSize: '1rem',
                            width: 55,
                            height: 40,
                            bgcolor: blueGrey[400],
                            // bgcolor: getTaskStsColor(task.taskSts$),
                        }}
                    >
                        {task.seqNum}
                    </Avatar>
                    <Stack>
                        <Typography variant="body2" color="inherit">
                            {task.taskType$}
                        </Typography>
                        <Typography variant="caption" color="text.secondary">
                            {task.oriDesc || ''} - {task.destDesc || ''}
                        </Typography>
                    </Stack>
                </Stack>
            ))}
        </Stack>
    );
};