trithuc-mvc-react 1.0.12 → 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/components/date/StaticDateRangePicker.jsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import * as dateFns from "date-fns";
 import { Box, Paper, Stack } from "@mui/material";
+import viLocale from "date-fns/locale/vi";
 // import "tailwindcss/tailwind.css";
 
 const isBetween = (date, from, to, inclusivity) => {
@@ -18,7 +19,8 @@ const isBetween = (date, from, to, inclusivity) => {
     (isAfterEqual ? dateFns.isEqual(to, date) || dateFns.isAfter(to, date) : dateFns.isAfter(to, date))
   );
 };
-const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const days = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
+console.log(viLocale.localize.day);
 
 const StaticDateRangePicker = ({ value, onUpdate }) => {
   const [currCalendar, setCurrCalendar] = useState([]);
@@ -213,7 +215,6 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
     }
   };
 
-  const currTitle = currYear && currMonth ? dateFns.format(new Date(currYear, currMonth), "MMMM") + new Date(currYear, currMonth).getFullYear() : "";
   return (
     <Paper>
       <Box sx={{ display: "flex" }} className="date-range-piker-wrapper">
@@ -221,7 +222,9 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
           <div className="flex justify-between items-center">
             <h3 className="text-lg">
               {" "}
-              {dateFns.format(new Date(currYear, currMonth), "MMMM")} {new Date(currYear, currMonth).getFullYear()}
+              {dateFns.format(new Date(currYear, currMonth), "MMMMMM yyyy", {
+                locale: viLocale
+              })}
             </h3>
 
             <Stack direction="row" spacing={2} alignItems={"center"}>
@@ -325,11 +328,9 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
         <div className="drop-shadow-sm shadow-sm min-w-[10rem] p-3 rounded-lg border flex flex-col">
           <div className="flex justify-between items-center">
             <h3 className="text-lg">
-              {dateFns.format(dateFns.add(new Date(currYear, currMonth), { months: 1 }), "MMMM")}{" "}
-              {
-                dateFns.add(new Date(currYear, currMonth), { months: 1 }).getFullYear()
-                // moment({ month: currMonth }).add(1, "month").year()
-              }
+              {dateFns.format(dateFns.add(new Date(currYear, currMonth), { months: 1 }), "MMMM yyyy", {
+                locale: viLocale
+              })}
             </h3>
             <div className="flex gap-x-2 items-center">
               <button

package/package.json

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