trithuc-mvc-react 1.0.13 → 1.1.0

package/components/DataManagement/FormField.jsx

@@ -198,7 +198,7 @@ function FormField({
         <Controller
           name={name}
           control={control}
-          // defaultValue={true}
+          defaultValue={true}
           render={({ field }) => <FormControlLabel control={<Switch {...field} checked={field.value} />} label={label} />}
         />
       );

package/components/DataManagement/TableHead.jsx

@@ -2,6 +2,7 @@ import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead } from "@mui/m
 import { useDataTable, usePermission } from "./hooks";
 export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
   const { canEdit } = usePermission();
+  const { disableStatus } = useDataTable();
   return (
     <MuiTableHead sx={{ height: 56, visibility: numSelected > 0 ? "hidden" : "visible" }}>
       <TableRow>
@@ -18,8 +19,8 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
             {headCell.label}
           </TableCell>
         ))}
-        {canEdit && <TableCell>Kích hoạt</TableCell>}
-        <TableCell>Thao tác</TableCell>
+        {!disableStatus && canEdit && <TableCell>Kích hoạt</TableCell>}
+        <TableCell sx={{minWidth: '136px'}}>Thao tác</TableCell>
       </TableRow>
     </MuiTableHead>
   );

package/components/DataManagement/TableRowRender.jsx

@@ -6,10 +6,15 @@ import { useDataTable, usePermission } from "./hooks";
 
 // material
 import { styled } from "@mui/material/styles";
+import MoreMenu from "../MoreMenu";
+
+
+
 
 export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit }) => {
-  const { selectedField, columns } = useDataTable();
+  const { selectedField, columns, statusKey, disableStatus, tableActions } = useDataTable();
   const { canEdit, canDelete } = usePermission();
+  console.log("tableActions", tableActions);
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell padding="checkbox">
@@ -32,10 +37,10 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
           );
         }
       )}
-      {canEdit && (
+      {!disableStatus && canEdit && (
         <TableCell>
           <Switch
-            checked={row.Status}
+            checked={row[statusKey]}
             onChange={() => {
               onChangeStatus(row[selectedField]);
             }}
@@ -64,6 +69,8 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
             </IconButton>
           </Tooltip>
         )}
+
+        {<MoreMenu actions={tableActions} data={row}/>}
       </TableCell>
     </TableRow>
   );

package/components/DataManagement/index.jsx

@@ -27,10 +27,26 @@ DataManagement.propTypes = {
       onChangeAfter: PropTypes.func,
       filters: PropTypes.array
     })
-  )
+  ),
+  editorFields: PropTypes.array,
+  validationSchema: PropTypes.object,
+  disableStatus: PropTypes.bool,
+  statusKey: PropTypes.string,
+  tableActions: PropTypes.array
 };
 
-function DataManagement({ columns = [], title, tableName, selectedField = "Id", filters, editorFields, validationSchema = {} }) {
+function DataManagement({
+  columns = [],
+  title,
+  tableName,
+  selectedField = "Id",
+  filters,
+  editorFields,
+  validationSchema = {},
+  statusKey = "Status",
+  disableStatus = false,
+  tableActions = []
+}) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [dataSearch, setDataSearch] = useState({});
@@ -46,9 +62,12 @@ function DataManagement({ columns = [], title, tableName, selectedField = "Id",
       setOpenEditorDialog,
       dataSearch,
       setDataSearch,
-      validationSchema
+      validationSchema,
+      statusKey,
+      disableStatus,
+      tableActions
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema]);
+  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions]);
   const permissionValues = useMemo(() => {
     return {
       Permission,

package/components/MoreMenu.jsx

@@ -0,0 +1,50 @@
+import PropTypes from "prop-types";
+import { useRef, useState } from "react";
+
+// material
+import { Menu, MenuItem, IconButton, ListItemIcon, ListItemText } from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+// ----------------------------------------------------------------------
+
+MoreMenu.propTypes = {
+  onDelete: PropTypes.func,
+  userName: PropTypes.string,
+  actions: PropTypes.array,
+  data: PropTypes.any
+};
+
+export default function MoreMenu({ data, actions }) {
+  const ref = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (actions?.length == 0) {
+    return null;
+  }
+  return (
+    <>
+      <IconButton ref={ref} onClick={() => setIsOpen(true)}>
+        <MoreVertIcon />
+      </IconButton>
+
+      <Menu
+        open={isOpen}
+        anchorEl={ref.current}
+        onClose={() => setIsOpen(false)}
+        slotProps={{
+          paper: {
+            sx: { width: 200, maxWidth: "100%" }
+          }
+        }}
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+      >
+        {[...actions].map(({ title, onClick, element }) => (
+          <MenuItem key={title} onClick={() => onClick(data)} sx={{ color: "text.secondary" }}>
+            <ListItemIcon>{element}</ListItemIcon>
+            <ListItemText primary={title} primaryTypographyProps={{ variant: "body2" }} />
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

package/package.json

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