trithuc-mvc-react 2.9.2 → 2.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { EditOutlined } from "@mui/icons-material";
|
|
2
2
|
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
|
3
3
|
import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
|
|
4
|
-
import { Box,
|
|
4
|
+
import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, Tooltip, useMediaQuery } from "@mui/material";
|
|
5
5
|
import { styled, useTheme } from "@mui/material/styles";
|
|
6
6
|
import { useMemo } from "react";
|
|
7
7
|
import { usePermission } from "../../hooks";
|
|
@@ -48,24 +48,6 @@ export const TableRowRenderSM = ({
|
|
|
48
48
|
|
|
49
49
|
return (
|
|
50
50
|
<TableRow hover key={row[selectedField]} selected={selected}>
|
|
51
|
-
{/* <TableCell padding="checkbox">
|
|
52
|
-
<Checkbox
|
|
53
|
-
checked={selected}
|
|
54
|
-
size={downXl ? "small" : "medium"}
|
|
55
|
-
onChange={(event) => onSelect(event, row[selectedField])}
|
|
56
|
-
/>
|
|
57
|
-
</TableCell>
|
|
58
|
-
{sttLuyKe ? (
|
|
59
|
-
page === 0 ? (
|
|
60
|
-
<TableCell align="center">{index + 1}</TableCell>
|
|
61
|
-
) : (
|
|
62
|
-
<TableCell align="center">{rowsPerPage * page + index + 1}</TableCell>
|
|
63
|
-
)
|
|
64
|
-
) : (
|
|
65
|
-
<TableCell align="center">{index + 1}</TableCell>
|
|
66
|
-
)} */}
|
|
67
|
-
|
|
68
|
-
{/* Hiển thị dữ liệu từ cột thành hàng */}
|
|
69
51
|
<TableCell colSpan={columns.length} align="left">
|
|
70
52
|
{columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
|
|
71
53
|
const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
|
|
@@ -85,54 +67,71 @@ export const TableRowRenderSM = ({
|
|
|
85
67
|
inputProps={{ "aria-label": "controlled" }}
|
|
86
68
|
/>
|
|
87
69
|
)}
|
|
88
|
-
<Grid item xs={12} sm={12} md={12} lg={12}>
|
|
70
|
+
<Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ pt: 1 }}>
|
|
89
71
|
{!disableCellThaoTac && (
|
|
90
72
|
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="flex-end">
|
|
91
73
|
<Box display="flex" gap={1}>
|
|
92
74
|
{!disableEdit && canEdit && (
|
|
93
75
|
<Tooltip title="Chỉnh sửa">
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
76
|
+
<Button
|
|
77
|
+
size="small"
|
|
78
|
+
variant="outlined"
|
|
79
|
+
color="primary"
|
|
80
|
+
onClick={() => onEdit(row)}
|
|
81
|
+
startIcon={<EditOutlined fontSize="inherit" />}
|
|
82
|
+
sx={{ borderRadius: 14, minWidth: 70, padding: "2px 8px", height: "25px" }}
|
|
83
|
+
>
|
|
84
|
+
Sửa
|
|
85
|
+
</Button>
|
|
98
86
|
</Tooltip>
|
|
99
87
|
)}
|
|
100
88
|
{canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
|
|
101
89
|
<Tooltip title="Xem chi tiết">
|
|
102
|
-
<
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
90
|
+
<Button
|
|
91
|
+
size="small"
|
|
92
|
+
variant="outlined"
|
|
93
|
+
color="info"
|
|
94
|
+
onClick={() => onView(row)}
|
|
95
|
+
startIcon={<RemoveRedEyeOutlinedIcon />}
|
|
96
|
+
sx={{ borderRadius: 14, minWidth: 70, padding: "2px 8px", height: "25px" }}
|
|
97
|
+
>
|
|
98
|
+
Xem
|
|
99
|
+
</Button>
|
|
106
100
|
</Tooltip>
|
|
107
101
|
)}
|
|
108
102
|
{!disableDelete && canDelete && (
|
|
109
103
|
<Tooltip title="Xóa">
|
|
110
|
-
<
|
|
111
|
-
size=
|
|
104
|
+
<Button
|
|
105
|
+
size="small"
|
|
106
|
+
variant="outlined"
|
|
107
|
+
color="error"
|
|
112
108
|
onClick={() => {
|
|
113
109
|
onDelete(row[selectedField]);
|
|
114
110
|
}}
|
|
111
|
+
startIcon={<DeleteOutlineIcon fontSize="inherit" />}
|
|
112
|
+
sx={{ borderRadius: 14, minWidth: 70, padding: "2px 8px", height: "25px" }}
|
|
115
113
|
>
|
|
116
|
-
|
|
117
|
-
</
|
|
118
|
-
Xóa
|
|
114
|
+
Xóa
|
|
115
|
+
</Button>
|
|
119
116
|
</Tooltip>
|
|
120
117
|
)}
|
|
118
|
+
{tableActionsOnTable.map(({ title, onClick, element }) => (
|
|
119
|
+
<Tooltip key={title} title={title}>
|
|
120
|
+
<Button
|
|
121
|
+
size="small"
|
|
122
|
+
variant="outlined"
|
|
123
|
+
onClick={() => {
|
|
124
|
+
onClick(row);
|
|
125
|
+
}}
|
|
126
|
+
startIcon={element}
|
|
127
|
+
sx={{ borderRadius: 14, minWidth: 70, padding: "2px 8px", height: "25px" }}
|
|
128
|
+
>
|
|
129
|
+
{title}
|
|
130
|
+
</Button>
|
|
131
|
+
</Tooltip>
|
|
132
|
+
))}
|
|
133
|
+
<MoreMenu actions={tableActionsOnMoreMenu} data={row} />
|
|
121
134
|
</Box>
|
|
122
|
-
{/* Hiển thị các hành động khác trong MoreMenu */}
|
|
123
|
-
{tableActionsOnTable.map(({ title, onClick, element }) => (
|
|
124
|
-
<Tooltip key={title} title={title}>
|
|
125
|
-
<IconButton
|
|
126
|
-
size={downXl ? "small" : "medium"}
|
|
127
|
-
onClick={() => {
|
|
128
|
-
onClick(row);
|
|
129
|
-
}}
|
|
130
|
-
>
|
|
131
|
-
{element}
|
|
132
|
-
</IconButton>
|
|
133
|
-
</Tooltip>
|
|
134
|
-
))}
|
|
135
|
-
<MoreMenu actions={tableActionsOnMoreMenu} data={row} />
|
|
136
135
|
</Box>
|
|
137
136
|
)}
|
|
138
137
|
</Grid>
|