trithuc-mvc-react 2.9.1 → 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.
|
@@ -255,7 +255,9 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
|
|
|
255
255
|
rowCount={rows.length}
|
|
256
256
|
/>
|
|
257
257
|
{isLoading ? (
|
|
258
|
-
<
|
|
258
|
+
<TableBody>
|
|
259
|
+
<TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
|
|
260
|
+
</TableBody>
|
|
259
261
|
) : (
|
|
260
262
|
<TableBody>
|
|
261
263
|
{[...rows].map((row, index) => (
|
|
@@ -254,7 +254,9 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
|
|
|
254
254
|
rowCount={rows.length}
|
|
255
255
|
/> */}
|
|
256
256
|
{isLoading ? (
|
|
257
|
-
<
|
|
257
|
+
<TableBody>
|
|
258
|
+
<TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
|
|
259
|
+
</TableBody>
|
|
258
260
|
) : (
|
|
259
261
|
<TableBody>
|
|
260
262
|
{[...rows].map((row, index) => (
|
|
@@ -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,51 +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
|
-
|
|
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>
|
|
97
86
|
</Tooltip>
|
|
98
87
|
)}
|
|
99
88
|
{canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
|
|
100
89
|
<Tooltip title="Xem chi tiết">
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
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>
|
|
104
100
|
</Tooltip>
|
|
105
101
|
)}
|
|
106
102
|
{!disableDelete && canDelete && (
|
|
107
103
|
<Tooltip title="Xóa">
|
|
108
|
-
<
|
|
109
|
-
size=
|
|
104
|
+
<Button
|
|
105
|
+
size="small"
|
|
106
|
+
variant="outlined"
|
|
107
|
+
color="error"
|
|
110
108
|
onClick={() => {
|
|
111
109
|
onDelete(row[selectedField]);
|
|
112
110
|
}}
|
|
111
|
+
startIcon={<DeleteOutlineIcon fontSize="inherit" />}
|
|
112
|
+
sx={{ borderRadius: 14, minWidth: 70, padding: "2px 8px", height: "25px" }}
|
|
113
113
|
>
|
|
114
|
-
|
|
115
|
-
</
|
|
114
|
+
Xóa
|
|
115
|
+
</Button>
|
|
116
116
|
</Tooltip>
|
|
117
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} />
|
|
118
134
|
</Box>
|
|
119
|
-
{/* Hiển thị các hành động khác trong MoreMenu */}
|
|
120
|
-
{tableActionsOnTable.map(({ title, onClick, element }) => (
|
|
121
|
-
<Tooltip key={title} title={title}>
|
|
122
|
-
<IconButton
|
|
123
|
-
size={downXl ? "small" : "medium"}
|
|
124
|
-
onClick={() => {
|
|
125
|
-
onClick(row);
|
|
126
|
-
}}
|
|
127
|
-
>
|
|
128
|
-
{element}
|
|
129
|
-
</IconButton>
|
|
130
|
-
</Tooltip>
|
|
131
|
-
))}
|
|
132
|
-
<MoreMenu actions={tableActionsOnMoreMenu} data={row} />
|
|
133
135
|
</Box>
|
|
134
136
|
)}
|
|
135
137
|
</Grid>
|