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
| import { useState } from 'react';
| import {
| Form,
| ReferenceField,
| useNotify,
| useTheme,
| useTranslate,
| } from 'react-admin';
| import {
| Box,
| Divider,
| Stack,
| Tooltip,
| Typography,
| Avatar,
| } from '@mui/material';
| import { format, formatRelative } from 'date-fns';
| import { blueGrey } from '@mui/material/colors';
|
| export const Action = ({ data }) => {
| const notify = useNotify();
| const translate = useTranslate();
| const theme = useTheme();
| const [isHover, setHover] = useState(false);
| console.log(data);
|
| return (
| <Box
| onMouseEnter={() => setHover(true)}
| onMouseLeave={() => setHover(false)}
| pb={1}
| >
| <Stack direction="row" spacing={1} alignItems="center" width="100%">
| <Avatar
| sx={{
| width: 20,
| height: 20,
| fontSize: '.9rem'
| }}
| >
| {data.priority}
| </Avatar>
| <Typography color="text.secondary" variant="body2">
| {data.actionType$}
| </Typography>
| <Box flex={1}></Box>
| <Typography
| color="textSecondary"
| variant="body2"
| component="span"
| >
| {/* {formatRelative(new Date(data.ioTime), new Date())} */}
| {format(data.ioTime, 'yyyy-MM-dd HH:mm:ss') || '-'}
| </Typography>
| </Stack>
| <Stack
| sx={{
| paddingTop: '0.5em',
| display: 'flex',
| '& p:empty': {
| minHeight: '0.75em',
| },
| }}
| direction="row"
| >
| <Typography
| variant="body2"
| color="textSecondary"
| lineHeight={1.5}
| margin={0}
| >
| task: {data.taskId$}
| {/* // taskNo code val param action sts uuid
| {paragraph} */}
| </Typography>
| <Divider orientation="vertical" flexItem sx={{ height: '1.5em', marginX: 1 }} />
| <Typography
| variant="body2"
| color="textSecondary"
| lineHeight={1.5}
| margin={0}
| >
| code: {data.code}
| </Typography>
| </Stack>
| </Box>
| );
| };
|
|
