trithuc-mvc-react 1.6.3 → 1.6.5

package/components/DataManagement/EditorForm.jsx

@@ -82,6 +82,10 @@ function EditorForm({ fields, submitRef }) {
         if (data[field]) {
           data[field] = JSON.stringify(data[field]);
         }
+      } else if (type == "avatar") {
+        if (data[field]?.urlFile) {
+          data[field] = data[field].urlFile;
+        }
       }
       return data;
     }, data);

package/components/DataManagement/FormField.jsx

@@ -20,6 +20,7 @@ import { useCallback, useEffect, } from "react";
 import moment from "moment/moment";
 import { DEFAULT_DATE_FORMAT } from "../../constants";
 import UploadMultipleFile from "./upload/UploadMultipleFile";
+import RhfUploadAvatar from "./upload/RhfUploadAvatar";
 
 
 FormField.propTypes = {
@@ -276,6 +277,20 @@ function FormField({
           }}
         />
       );
+    case "avatar":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <>
+                <RhfUploadAvatar name={"AnhDaiDien"} />
+              </>
+            );
+          }}
+        />
+      );
   }
 }
 

package/components/DataManagement/TableHead.jsx

@@ -2,7 +2,7 @@ import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead, useTheme, use
 import { useDataTable, usePermission } from "./hooks";
 export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
   const { canEdit } = usePermission();
-  const { disableStatus } = useDataTable();
+  const { disableStatus,disableCellThaoTac } = useDataTable();
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
   return (
@@ -23,7 +23,7 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
           </TableCell>
         ))}
         {!disableStatus && canEdit && <TableCell sx={{ textAlign: "center" }}>Kích hoạt</TableCell>}
-        <TableCell sx={{ minWidth: "136px", textAlign: "center" }}>Thao tác</TableCell>
+        {!disableCellThaoTac && <TableCell sx={{ minWidth: "136px", textAlign: "center" }}>Thao tác</TableCell>}
       </TableRow>
     </MuiTableHead>
   );

package/components/DataManagement/TableRowRender.jsx

@@ -9,7 +9,7 @@ import MoreMenu from "../MoreMenu";
 import { useMemo } from "react";
 
 export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit }) => {
-  const { selectedField, columns, statusKey, disableStatus, tableActions } = useDataTable();
+  const { selectedField, columns, statusKey, disableStatus, tableActions,disableCellThaoTac } = useDataTable();
   const { canEdit, canDelete, canView, canAction } = usePermission();
 
   const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
@@ -68,7 +68,7 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
         </TableCell>
       )}
 
-      <TableCell align="center">
+      {!disableCellThaoTac && <TableCell align="center">
         {canEdit && (
           <Tooltip title="Chỉnh sửa">
             <IconButton onClick={() => onEdit(row)}>
@@ -101,7 +101,7 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
         ))}
 
         {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
-      </TableCell>
+      </TableCell>}
     </TableRow>
   );
 };

package/components/DataManagement/index.jsx

@@ -33,6 +33,7 @@ DataManagement.propTypes = {
   validationSchema: PropTypes.object,
   disableStatus: PropTypes.bool,
   disableAdd: PropTypes.bool,
+  disableCellThaoTac: PropTypes.bool,
   statusKey: PropTypes.string,
   tableActions: PropTypes.array,
   disableEditor: PropTypes.bool,
@@ -52,6 +53,7 @@ function DataManagement({
   statusKey = "Status",
   disableStatus = false,
   disableAdd = false,
+  disableCellThaoTac = false,
   tableActions = [],
   disableEditor = false,
   onAddClick = () => {},
@@ -109,6 +111,7 @@ function DataManagement({
       validationSchema,
       statusKey,
       disableStatus,
+      disableCellThaoTac,
       disableAdd,
       tableActions
     };

package/components/DataManagement/upload/RhfUploadAvatar.jsx

@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+import { uploadFile } from "@/apis/index";
+import UploadAvatar from './UploadAvatar'
+import { FormHelperText, Typography } from "@mui/material/index";
+import bytesToSize from "@/utils/bytesToSize";
+import { Controller, useFormContext } from "react-hook-form";
+
+const RhfUploadAvatar = ({ name }) => {
+  const { control, setValue } = useFormContext();
+  const handleDrop = useCallback(
+    async (acceptedFiles) => {
+      const file = acceptedFiles[0];
+
+      const formData = new FormData();
+      formData.append("file", file);
+      const data = await uploadFile(formData);
+
+      if (file) {
+        setValue(name, {
+          ...file,
+          preview: URL.createObjectURL(file),
+          urlFile: JSON.parse(data[0])?.urlFile
+        });
+      }
+    },
+    [setValue, name]
+  );
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { value }, fieldState: { error } }) => (
+        <>
+          <UploadAvatar
+            accept="image/*"
+            file={value}
+            maxSize={3145728}
+            onDrop={handleDrop}
+            error={Boolean(error)}
+            helperText={error?.message}
+            caption={
+              <Typography
+                variant="caption"
+                sx={{
+                  mt: 2,
+                  mx: "auto",
+                  display: "block",
+                  textAlign: "center",
+                  color: "text.secondary"
+                }}
+              >
+                cho phép *.jpeg, *.jpg, *.png, *.gif
+                <br /> max size of {bytesToSize(3145728)}
+              </Typography>
+            }
+          />
+          <FormHelperText error sx={{ px: 2, textAlign: "center" }}>
+            {error?.message}
+          </FormHelperText>
+        </>
+      )}
+    />
+  );
+};
+export default RhfUploadAvatar;

package/package.json

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