trithuc-mvc-react 2.9.3 → 2.9.5
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.
|
@@ -247,7 +247,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
|
|
|
247
247
|
multipleActions={multipleActions}
|
|
248
248
|
/>
|
|
249
249
|
|
|
250
|
-
<Table
|
|
250
|
+
<Table size={downXL ? "small" : "medium"}>
|
|
251
251
|
<TableHead
|
|
252
252
|
headLabel={columns}
|
|
253
253
|
onSelectAllClick={handleSelectAllClick}
|
|
@@ -292,7 +292,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
|
|
|
292
292
|
<Grid container>
|
|
293
293
|
{!hasTabpanel && (
|
|
294
294
|
<Grid item alignSelf={"center"} sx={{ pl: 2 }}>
|
|
295
|
-
<Typography variant="body1">
|
|
295
|
+
<Typography variant="body1" sx={{ fontSize: "0.7rem" }}>
|
|
296
296
|
Tổng số lượng: <span>{total}</span>
|
|
297
297
|
</Typography>
|
|
298
298
|
</Grid>
|
|
@@ -70,67 +70,111 @@ export const TableRowRenderSM = ({
|
|
|
70
70
|
<Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ pt: 1 }}>
|
|
71
71
|
{!disableCellThaoTac && (
|
|
72
72
|
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="flex-end">
|
|
73
|
-
<Box
|
|
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
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
73
|
+
<Box
|
|
74
|
+
sx={{
|
|
75
|
+
maxWidth: "100%", // Giới hạn chiều rộng bằng với chiều rộng màn hình
|
|
76
|
+
overflowX: "auto", // Cho phép cuộn ngang nếu hàng nút vượt quá chiều rộng
|
|
77
|
+
whiteSpace: "nowrap" // Giữ các nút trên một dòng
|
|
78
|
+
}}
|
|
79
|
+
>
|
|
80
|
+
<Box display="flex" gap={1} alignItems="center">
|
|
81
|
+
{!disableEdit && canEdit && (
|
|
82
|
+
<Tooltip title="Chỉnh sửa">
|
|
83
|
+
<Button
|
|
84
|
+
size="small"
|
|
85
|
+
variant="outlined"
|
|
86
|
+
color="primary"
|
|
87
|
+
onClick={() => onEdit(row)}
|
|
88
|
+
startIcon={<EditOutlined fontSize="inherit" />}
|
|
89
|
+
sx={{
|
|
90
|
+
borderRadius: 14,
|
|
91
|
+
minWidth: 60,
|
|
92
|
+
padding: "2px 8px",
|
|
93
|
+
height: "20px",
|
|
94
|
+
fontSize: "0.6rem",
|
|
95
|
+
whiteSpace: "nowrap",
|
|
96
|
+
overflow: "hidden",
|
|
97
|
+
textOverflow: "ellipsis"
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
Sửa
|
|
101
|
+
</Button>
|
|
102
|
+
</Tooltip>
|
|
103
|
+
)}
|
|
104
|
+
{canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
|
|
105
|
+
<Tooltip title="Xem chi tiết">
|
|
106
|
+
<Button
|
|
107
|
+
size="small"
|
|
108
|
+
variant="outlined"
|
|
109
|
+
color="info"
|
|
110
|
+
onClick={() => onView(row)}
|
|
111
|
+
startIcon={<RemoveRedEyeOutlinedIcon />}
|
|
112
|
+
sx={{
|
|
113
|
+
borderRadius: 14,
|
|
114
|
+
minWidth: 60,
|
|
115
|
+
padding: "2px 8px",
|
|
116
|
+
height: "20px",
|
|
117
|
+
fontSize: "0.6rem",
|
|
118
|
+
whiteSpace: "nowrap",
|
|
119
|
+
overflow: "hidden",
|
|
120
|
+
textOverflow: "ellipsis"
|
|
121
|
+
}}
|
|
122
|
+
>
|
|
123
|
+
Xem
|
|
124
|
+
</Button>
|
|
125
|
+
</Tooltip>
|
|
126
|
+
)}
|
|
127
|
+
{!disableDelete && canDelete && (
|
|
128
|
+
<Tooltip title="Xóa">
|
|
129
|
+
<Button
|
|
130
|
+
size="small"
|
|
131
|
+
variant="outlined"
|
|
132
|
+
color="error"
|
|
133
|
+
onClick={() => {
|
|
134
|
+
onDelete(row[selectedField]);
|
|
135
|
+
}}
|
|
136
|
+
startIcon={<DeleteOutlineIcon fontSize="inherit" />}
|
|
137
|
+
sx={{
|
|
138
|
+
borderRadius: 14,
|
|
139
|
+
minWidth: 60,
|
|
140
|
+
padding: "2px 8px",
|
|
141
|
+
height: "20px",
|
|
142
|
+
fontSize: "0.6rem",
|
|
143
|
+
whiteSpace: "nowrap",
|
|
144
|
+
overflow: "hidden",
|
|
145
|
+
textOverflow: "ellipsis"
|
|
146
|
+
}}
|
|
147
|
+
>
|
|
148
|
+
Xóa
|
|
149
|
+
</Button>
|
|
150
|
+
</Tooltip>
|
|
151
|
+
)}
|
|
152
|
+
{tableActionsOnTable.map(({ title, onClick, element }) => (
|
|
153
|
+
<Tooltip key={title} title={title}>
|
|
154
|
+
<Button
|
|
155
|
+
size="small"
|
|
156
|
+
variant="outlined"
|
|
157
|
+
onClick={() => {
|
|
158
|
+
onClick(row);
|
|
159
|
+
}}
|
|
160
|
+
startIcon={element}
|
|
161
|
+
sx={{
|
|
162
|
+
borderRadius: 14,
|
|
163
|
+
minWidth: 60,
|
|
164
|
+
padding: "2px 8px",
|
|
165
|
+
height: "20px",
|
|
166
|
+
fontSize: "0.6rem",
|
|
167
|
+
whiteSpace: "nowrap",
|
|
168
|
+
overflow: "hidden",
|
|
169
|
+
textOverflow: "ellipsis"
|
|
170
|
+
}}
|
|
171
|
+
>
|
|
172
|
+
{title.toLowerCase() === "xem chi tiết" ? "Xem" : title}
|
|
173
|
+
</Button>
|
|
174
|
+
</Tooltip>
|
|
175
|
+
))}
|
|
176
|
+
<MoreMenu actions={tableActionsOnMoreMenu} data={row} />
|
|
177
|
+
</Box>
|
|
134
178
|
</Box>
|
|
135
179
|
</Box>
|
|
136
180
|
)}
|
|
@@ -1,34 +1,53 @@
|
|
|
1
|
-
import { TablePagination, useMediaQuery, useTheme } from "@mui/material";
|
|
1
|
+
import { Box, TablePagination, useMediaQuery, useTheme } from "@mui/material";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
|
|
4
|
-
TablePaginationCustom.propsType = {
|
|
5
|
-
count: PropTypes.number,
|
|
6
|
-
rowsPerPage: PropTypes.number,
|
|
7
|
-
page: PropTypes.number,
|
|
8
|
-
onPageChange: PropTypes.func,
|
|
9
|
-
onRowsPerPageChange: PropTypes.func
|
|
10
|
-
};
|
|
11
4
|
function defaultLabelDisplayedRows({ from, to, count }) {
|
|
12
|
-
|
|
5
|
+
return `${from}–${to} của ${count !== -1 ? count : `nhiều hơn ${to}`}`;
|
|
13
6
|
}
|
|
7
|
+
|
|
14
8
|
function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsPerPageChange, ...rest }) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
9
|
+
const theme = useTheme();
|
|
10
|
+
const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<Box sx={{ overflowX: "auto", width: "100%" }}>
|
|
14
|
+
<TablePagination
|
|
15
|
+
{...rest}
|
|
16
|
+
rowsPerPageOptions={[5, 10, 25, 100]}
|
|
17
|
+
component="div"
|
|
18
|
+
count={count}
|
|
19
|
+
rowsPerPage={rowsPerPage}
|
|
20
|
+
page={page}
|
|
21
|
+
onPageChange={onPageChange}
|
|
22
|
+
onRowsPerPageChange={onRowsPerPageChange}
|
|
23
|
+
showFirstButton
|
|
24
|
+
showLastButton
|
|
25
|
+
labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
|
|
26
|
+
labelDisplayedRows={defaultLabelDisplayedRows}
|
|
27
|
+
sx={{
|
|
28
|
+
"& .MuiTablePagination-toolbar": {
|
|
29
|
+
paddingLeft: matchsDownMD ? "5px" : "14px",
|
|
30
|
+
paddingRight: matchsDownMD ? "5px" : "14px",
|
|
31
|
+
fontSize: matchsDownMD ? "0.65rem" : "0.8rem" // Giảm kích thước font khi trên màn hình nhỏ
|
|
32
|
+
},
|
|
33
|
+
"& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
|
|
34
|
+
fontSize: matchsDownMD ? "0.65rem" : "0.8rem"
|
|
35
|
+
},
|
|
36
|
+
"& .MuiTablePagination-select": {
|
|
37
|
+
minWidth: matchsDownMD ? "50px" : "70px"
|
|
38
|
+
}
|
|
39
|
+
}}
|
|
40
|
+
/>
|
|
41
|
+
</Box>
|
|
42
|
+
);
|
|
33
43
|
}
|
|
44
|
+
|
|
45
|
+
TablePaginationCustom.propTypes = {
|
|
46
|
+
count: PropTypes.number.isRequired,
|
|
47
|
+
rowsPerPage: PropTypes.number.isRequired,
|
|
48
|
+
page: PropTypes.number.isRequired,
|
|
49
|
+
onPageChange: PropTypes.func.isRequired,
|
|
50
|
+
onRowsPerPageChange: PropTypes.func.isRequired
|
|
51
|
+
};
|
|
52
|
+
|
|
34
53
|
export default TablePaginationCustom;
|