trithuc-mvc-react 1.8.6 → 1.8.7

package/components/DataManagement/TableToolbar.jsx

@@ -16,9 +16,11 @@ const TableToolbar = ({ selected, multipleActions = [], numSelected, onSelectAll
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
   const actions = useMemo(() => {
-    const actions = [...multipleActions].filter(({ permissionType }) => {
-      return !(permissionType == "action" && !canAction);
-    });
+    const actions = [...multipleActions]
+      .filter((element) => !!element)
+      .filter(({ permissionType }) => {
+        return !(permissionType == "action" && !canAction);
+      });
 
     return actions;
   }, [canAction, multipleActions]);

package/components/table/TablePagination.jsx

@@ -1,34 +1,45 @@
-import { TablePagination, useMediaQuery, useTheme } from "@mui/material";
+import { Grid, TablePagination, Typography, 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
+    count: PropTypes.number,
+    rowsPerPage: PropTypes.number,
+    page: PropTypes.number,
+    onPageChange: PropTypes.func,
+    onRowsPerPageChange: PropTypes.func
 };
 
 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={function defaultLabelDisplayedRows({ from, to, count }) {
-        return `${from}–${to} của ${count !== -1 ? count : `more than ${to}`}`;
-      }}
-    />
-  );
+    const theme = useTheme();
+    const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
+    return (
+        <>
+            <Grid container>
+                <Grid item alignSelf={"center"} sx={{ pl: 2}}>
+                    <Typography variant="body1">
+                        Tổng số lượng: <span>{count}</span>
+                    </Typography>
+                </Grid>
+                <Grid item xs>
+                    <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={function defaultLabelDisplayedRows({ from, to, count }) {
+                            return `${from}–${to} của ${count !== -1 ? count : `more than ${to}`}`;
+                        }}
+                    />
+                </Grid>
+            </Grid>
+        </>
+    );
 }
 export default TablePaginationCustom;

package/package.json

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