#

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { useState, useEffect } from 'react';
import { Draggable } from '@hello-pangea/dnd';
import { Box, Card, Typography, Avatar, Divider, Stack, Slider, useTheme } from '@mui/material';
import { ReferenceField, useRedirect, useTranslate } from 'react-admin';
import { blueGrey } from '@mui/material/colors';
import { styled } from '@mui/material/styles';
 
export const MissionCard = ({ mission, index }) => {
    if (!mission) return null;
 
    return (
        <Draggable draggableId={String(mission.id)} index={index}>
            {(provided, snapshot) => (
                <MissionCardContent
                    provided={provided}
                    snapshot={snapshot}
                    mission={mission}
                />
            )}
        </Draggable>
    );
};
 
export const MissionCardContent = ({ provided, snapshot, mission }) => {
    const theme = useTheme();
    const translate = useTranslate();
    const redirect = useRedirect();
    const handleClick = () => {
        redirect(`/mission/${mission.id}/show`, undefined, undefined, undefined, {
            _scrollToTop: false,
        });
    };
 
    const [sliderValue, setSliderValue] = useState(mission.progress || 0);
 
    useEffect(() => {
        setSliderValue(mission.progress || 0);
    }, [mission.progress]);
 
    const handleSliderChange = (event, newValue) => {
        setSliderValue(newValue);
    };
 
    return (
        <Box
            sx={{ marginBottom: 1, cursor: 'pointer' }}
            {...provided?.draggableProps}
            {...provided?.dragHandleProps}
            ref={provided?.innerRef}
            onClick={handleClick}
        >
            <Card
                style={{
                    opacity: snapshot?.isDragging ? 0.9 : 1,
                    transform: snapshot?.isDragging ? 'rotate(-2deg)' : '',
                    transition: '0.3s',
                }}
                elevation={snapshot?.isDragging ? 3 : 1}
            >
                <Box padding={2} pb={1} display="flex" flexDirection="column">
                    <Box display="flex" alignItems="center" mb={1.5}>
                        <Avatar
                            sx={{
                                width: 40,
                                height: 28,
                                bgcolor: theme.palette.primary.main,
                            }}
                            variant="rounded"
                        >
                            {mission.agv}
                        </Avatar>
                        <Divider orientation="vertical" flexItem sx={{ margin: '0 8px' }} />
                        <Typography variant="body1" noWrap>
                            {mission.groupNo}
                        </Typography>
                    </Box>
                    <Box>
                        <Stack direction="row" justifyContent="space-between" mb={1}>
                            <Typography variant="caption" color="textSecondary">
                                {translate('table.field.mission.backpack')} : {mission.backpack}
                            </Typography>
                            <Typography variant="caption" color="textPrimary">
                                {translate('table.field.mission.code')}: {mission.currCode}
                            </Typography>
                        </Stack>
                        <Divider orientation="horizontal" flexItem />
                        <Stack direction="row" justifyContent="space-between" >
                            <Typography variant="overline">
                                {translate('table.field.mission.task')}: [{mission.taskNos.join(',')}]
                            </Typography>
                        </Stack>
                        <Stack pl={0.5} pr={0.5} direction="row" spacing={1} alignItems="center" mb={.6}>
                            <Slider
                                aria-label="Progress"
                                // defaultValue={mission.progress}
                                value={sliderValue}
                                onChange={handleSliderChange}
                                getAriaValueText={(value) => {
                                    return `${value}%`;
                                }}
                                color="secondary"
                                size="small"
                                marks
                            />
                        </Stack>
                    </Box>
                </Box>
            </Card>
        </Box>
    );
};