trithuc-mvc-react 3.3.7 → 3.3.8

package/components/DataManagement/TableRowRenderSM.jsx

@@ -1,12 +1,13 @@
 import { EditOutlined } from "@mui/icons-material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
-import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, useMediaQuery } from "@mui/material";
+import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, Typography, useMediaQuery } from "@mui/material";
 import { styled, useTheme } from "@mui/material/styles";
 import { useMemo } from "react";
 import { usePermission } from "../../hooks";
 import MoreMenu from "../MoreMenu";
 import { useDataTable } from "./hooks";
+import { fontSize } from "@mui/system";
 
 export const TableRowRenderSM = ({
   index,
@@ -56,105 +57,139 @@ export const TableRowRenderSM = ({
           overflowWrap: "break-word"
         }}
       >
-        {/* Hiển thị các cột dữ liệu */}
-        {columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
-          const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
-          return (
-            <div key={`${row[selectedField]}-${field}`}>
-              <strong>{label}: </strong>
-              {value}
-            </div>
-          );
-        })}
-
-        {/* Công tắc trạng thái */}
-        {!disableStatus && canEdit && (
-          <Box sx={{ mt: 1 }}>
-            <Switch
-              checked={row[statusKey]}
-              onChange={() => onChangeStatus(row[selectedField])}
-              inputProps={{ "aria-label": "controlled" }}
-            />
-          </Box>
-        )}
+        <Box
+          display="flex"
+          flexDirection="column"
+          gap={1}
+          border="1px solid"
+          borderColor="divider"
+          borderRadius={2}
+          boxShadow={1}
+          p={2}
+          bgcolor="background.paper"
+          sx={{
+            transition: "all 0.2s ease",
+            "&:hover": {
+              boxShadow: 3,
+              borderColor: "primary.light"
+            }
+          }}
+        >
+          {/* Hiển thị các cột dữ liệu */}
+          <Grid container spacing={1}>
+            {columns.map(
+              ({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
+                const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
+                return (
+                  <Grid size={12} key={`${row[selectedField]}-${field}`}>
+                    <strong>{label}: </strong> {value}
+                  </Grid>
+                );
+              }
+            )}
+          </Grid>
+          {/* Công tắc trạng thái */}
+          {!disableStatus && canEdit && (
+            <Box sx={{ mt: 1 }}>
+              <Switch
+                checked={row[statusKey]}
+                onChange={() => onChangeStatus(row[selectedField])}
+                inputProps={{ "aria-label": "controlled" }}
+              />
+            </Box>
+          )}
 
-        {/* Các nút thao tác */}
-        <Grid container spacing={0.5} sx={{ width: "100%", pt: 2, pb: 2 }}>
-          {!disableCellThaoTac && (
-            <>
-              {!disableEdit && canEdit && (
-                <Grid size={4}>
+          {/* Các nút thao tác */}
+          <Box
+            mt={2}
+            pt={1}
+            display="flex"
+            gap={1}
+            flexWrap="wrap"
+            justifyContent="flex-end"
+            borderTop="1px solid"
+            borderColor="divider"
+          >
+            {!disableCellThaoTac && (
+              <>
+                {!disableEdit && canEdit && (
                   <Button
-                    fullWidth
                     size="small"
-                    variant="outlined"
+                    variant="contained"
                     color="primary"
                     onClick={() => onEdit(row)}
-                    startIcon={<EditOutlined fontSize="inherit" />}
-                    sx={buttonStyle}
+                    startIcon={<EditOutlined />}
+                    sx={modernButtonStyle}
                   >
                     Cập nhật
                   </Button>
-                </Grid>
-              )}
-              {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
-                <Grid size={4}>
+                )}
+
+                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
                   <Button
-                    fullWidth
                     size="small"
                     variant="outlined"
                     color="info"
                     onClick={() => onView(row)}
                     startIcon={<RemoveRedEyeOutlinedIcon />}
-                    sx={buttonStyle}
+                    sx={modernButtonStyle}
                   >
                     Xem
                   </Button>
-                </Grid>
-              )}
-              {!disableDelete && canDelete && (
-                <Grid size={4}>
+                )}
+
+                {!disableDelete && canDelete && (
                   <Button
-                    fullWidth
                     size="small"
                     variant="outlined"
                     color="error"
                     onClick={() => onDelete(row[selectedField])}
-                    startIcon={<DeleteOutlineIcon fontSize="inherit" />}
-                    sx={buttonStyle}
+                    startIcon={<DeleteOutlineIcon />}
+                    sx={modernButtonStyle}
                   >
                     Xóa
                   </Button>
-                </Grid>
-              )}
-              {tableActionsOnTable.map(
-                ({ title, size, onClick, element, visible = true }, idx) =>
-                  (typeof visible === "function" ? visible(row) : visible) && (
-                    <Grid key={row.Id} size={4}>
+                )}
+
+                {tableActionsOnTable.map(
+                  ({ title, size, onClick, element, visible = true }, idx) =>
+                    (typeof visible === "function" ? visible(row) : visible) && (
                       <Button
-                        fullWidth
                         key={idx}
                         size="small"
                         variant="outlined"
                         onClick={() => onClick(row)}
                         startIcon={element}
-                        sx={{
-                          ...buttonStyle
-                        }}
+                        sx={modernButtonStyle}
                       >
                         {title === "xem chi tiết" ? "Xem" : title}
                       </Button>
-                    </Grid>
-                  )
-              )}
-              <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
-            </>
-          )}
-        </Grid>
+                    )
+                )}
+
+                <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+              </>
+            )}
+          </Box>
+        </Box>
       </TableCell>
     </TableRow>
   );
 };
+const modernButtonStyle = {
+  fontWeight: 400,
+  fontSize: "0.7rem",
+  borderRadius: 2,
+  minWidth: 90,
+  textTransform: "none",
+  px: 1,
+  py: 0.5,
+  boxShadow: "none",
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    boxShadow: "0px 2px 6px rgba(0,0,0,0.1)"
+  }
+};
 
 // Button style dùng chung
 const buttonStyle = {

package/package.json

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