trithuc-mvc-react 2.9.2 → 2.9.4

package/components/DataManagement/DataTableSM.jsx

@@ -292,7 +292,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
       <Grid container>
         {!hasTabpanel && (
           <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
-            <Typography variant="body1">
+            <Typography variant="body1" sx={{ fontSize: "0.7rem" }}>
               Tổng số lượng: <span>{total}</span>
             </Typography>
           </Grid>

package/components/DataManagement/TableRowRenderSM.jsx

@@ -1,7 +1,7 @@
 import { EditOutlined } from "@mui/icons-material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
-import { Box, Grid, IconButton, Switch, TableCell, TableRow, Toolbar, Tooltip, useMediaQuery } from "@mui/material";
+import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, Tooltip, useMediaQuery } from "@mui/material";
 import { styled, useTheme } from "@mui/material/styles";
 import { useMemo } from "react";
 import { usePermission } from "../../hooks";
@@ -48,24 +48,6 @@ export const TableRowRenderSM = ({
 
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
-      {/* <TableCell padding="checkbox">
-        <Checkbox
-          checked={selected}
-          size={downXl ? "small" : "medium"}
-          onChange={(event) => onSelect(event, row[selectedField])}
-        />
-      </TableCell>
-      {sttLuyKe ? (
-        page === 0 ? (
-          <TableCell align="center">{index + 1}</TableCell>
-        ) : (
-          <TableCell align="center">{rowsPerPage * page + index + 1}</TableCell>
-        )
-      ) : (
-        <TableCell align="center">{index + 1}</TableCell>
-      )} */}
-
-      {/* Hiển thị dữ liệu từ cột thành hàng */}
       <TableCell colSpan={columns.length} align="left">
         {columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
           const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
@@ -85,54 +67,115 @@ export const TableRowRenderSM = ({
             inputProps={{ "aria-label": "controlled" }}
           />
         )}
-        <Grid item xs={12} sm={12} md={12} lg={12}>
+        <Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ pt: 1 }}>
           {!disableCellThaoTac && (
             <Box display="flex" flexDirection="row" alignItems="center" justifyContent="flex-end">
-              <Box display="flex" gap={1}>
-                {!disableEdit && canEdit && (
-                  <Tooltip title="Chỉnh sửa">
-                    <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
-                      <EditOutlined fontSize="inherit" color="primary" />
-                    </IconButton>{" "}
-                    sửa
-                  </Tooltip>
-                )}
-                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
-                  <Tooltip title="Xem chi tiết">
-                    <IconButton onClick={() => onView(row)}>
-                      <RemoveRedEyeOutlinedIcon color="info" />
-                    </IconButton>{" "}
-                    Xem
-                  </Tooltip>
-                )}
-                {!disableDelete && canDelete && (
-                  <Tooltip title="Xóa">
-                    <IconButton
-                      size={downXl ? "small" : "medium"}
-                      onClick={() => {
-                        onDelete(row[selectedField]);
-                      }}
-                    >
-                      <DeleteOutlineIcon fontSize="inherit" color="error" />
-                    </IconButton>{" "}
-                    Xóa
-                  </Tooltip>
-                )}
+              <Box
+                sx={{
+                  maxWidth: "100%", // Giới hạn chiều rộng bằng với chiều rộng màn hình
+                  overflowX: "auto", // Cho phép cuộn ngang nếu hàng nút vượt quá chiều rộng
+                  whiteSpace: "nowrap" // Giữ các nút trên một dòng
+                }}
+              >
+                <Box display="flex" gap={1} alignItems="center">
+                  {!disableEdit && canEdit && (
+                    <Tooltip title="Chỉnh sửa">
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="primary"
+                        onClick={() => onEdit(row)}
+                        startIcon={<EditOutlined fontSize="inherit" />}
+                        sx={{
+                          borderRadius: 14,
+                          minWidth: 60,
+                          padding: "2px 8px",
+                          height: "20px",
+                          fontSize: "0.6rem",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        }}
+                      >
+                        Sửa
+                      </Button>
+                    </Tooltip>
+                  )}
+                  {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                    <Tooltip title="Xem chi tiết">
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="info"
+                        onClick={() => onView(row)}
+                        startIcon={<RemoveRedEyeOutlinedIcon />}
+                        sx={{
+                          borderRadius: 14,
+                          minWidth: 60,
+                          padding: "2px 8px",
+                          height: "20px",
+                          fontSize: "0.6rem",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        }}
+                      >
+                        Xem
+                      </Button>
+                    </Tooltip>
+                  )}
+                  {!disableDelete && canDelete && (
+                    <Tooltip title="Xóa">
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="error"
+                        onClick={() => {
+                          onDelete(row[selectedField]);
+                        }}
+                        startIcon={<DeleteOutlineIcon fontSize="inherit" />}
+                        sx={{
+                          borderRadius: 14,
+                          minWidth: 60,
+                          padding: "2px 8px",
+                          height: "20px",
+                          fontSize: "0.6rem",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        }}
+                      >
+                        Xóa
+                      </Button>
+                    </Tooltip>
+                  )}
+                  {tableActionsOnTable.map(({ title, onClick, element }) => (
+                    <Tooltip key={title} title={title}>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        onClick={() => {
+                          onClick(row);
+                        }}
+                        startIcon={element}
+                        sx={{
+                          borderRadius: 14,
+                          minWidth: 60,
+                          padding: "2px 8px",
+                          height: "20px",
+                          fontSize: "0.6rem",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        }}
+                      >
+                        {title.toLowerCase() === "xem chi tiết" ? "Xem" : title}
+                      </Button>
+                    </Tooltip>
+                  ))}
+                  <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+                </Box>
               </Box>
-              {/* Hiển thị các hành động khác trong MoreMenu */}
-              {tableActionsOnTable.map(({ title, onClick, element }) => (
-                <Tooltip key={title} title={title}>
-                  <IconButton
-                    size={downXl ? "small" : "medium"}
-                    onClick={() => {
-                      onClick(row);
-                    }}
-                  >
-                    {element}
-                  </IconButton>
-                </Tooltip>
-              ))}
-              <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
             </Box>
           )}
         </Grid>

package/components/table/TablePagination.jsx

@@ -1,34 +1,53 @@
-import { TablePagination, useMediaQuery, useTheme } from "@mui/material";
+import { Box, TablePagination, useMediaQuery, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 
-TablePaginationCustom.propsType = {
-    count: PropTypes.number,
-    rowsPerPage: PropTypes.number,
-    page: PropTypes.number,
-    onPageChange: PropTypes.func,
-    onRowsPerPageChange: PropTypes.func
-};
 function defaultLabelDisplayedRows({ from, to, count }) {
-    return `${from}–${to} của ${count !== -1 ? count : `more than ${to}`}`;
+  return `${from}–${to} của ${count !== -1 ? count : `nhiều hơn ${to}`}`;
 }
+
 function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsPerPageChange, ...rest }) {
-    const theme = useTheme();
-    const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
-    return (
-        <TablePagination
-            {...rest}
-            rowsPerPageOptions={[5, 10, 25, 100]}
-            component="div"
-            count={count}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            onPageChange={onPageChange}
-            onRowsPerPageChange={onRowsPerPageChange}
-            showFirstButton={true}
-            showLastButton={true}
-            labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
-            labelDisplayedRows={defaultLabelDisplayedRows}
-        />
-    );
+  const theme = useTheme();
+  const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
+
+  return (
+    <Box sx={{ overflowX: "auto", width: "100%" }}>
+      <TablePagination
+        {...rest}
+        rowsPerPageOptions={[5, 10, 25, 100]}
+        component="div"
+        count={count}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={onPageChange}
+        onRowsPerPageChange={onRowsPerPageChange}
+        showFirstButton
+        showLastButton
+        labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+        labelDisplayedRows={defaultLabelDisplayedRows}
+        sx={{
+          "& .MuiTablePagination-toolbar": {
+            paddingLeft: matchsDownMD ? "5px" : "14px",
+            paddingRight: matchsDownMD ? "5px" : "14px",
+            fontSize: matchsDownMD ? "0.65rem" : "0.8rem" // Giảm kích thước font khi trên màn hình nhỏ
+          },
+          "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+            fontSize: matchsDownMD ? "0.65rem" : "0.8rem"
+          },
+          "& .MuiTablePagination-select": {
+            minWidth: matchsDownMD ? "50px" : "70px"
+          }
+        }}
+      />
+    </Box>
+  );
 }
+
+TablePaginationCustom.propTypes = {
+  count: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  onRowsPerPageChange: PropTypes.func.isRequired
+};
+
 export default TablePaginationCustom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "2.9.2",
+  "version": "2.9.4",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"