trithuc-mvc-react 1.6.4 → 1.6.6

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/TableRowRender.jsx

@@ -71,7 +71,7 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
       {!disableCellThaoTac && <TableCell align="center">
         {canEdit && (
           <Tooltip title="Chỉnh sửa">
-            <IconButton onClick={() => onEdit(row)}>
+            <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
               <EditOutlined color="primary" />
             </IconButton>
           </Tooltip>
@@ -79,7 +79,7 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
 
         {canDelete && (
           <Tooltip title="Xóa">
-            <IconButton
+            <IconButton size={downXl ? "small" : "medium"}
               onClick={() => {
                 onDelete(row[selectedField]);
               }}
@@ -90,7 +90,7 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
         )}
         {tableActionsOnTable.map(({ title, onClick, element }) => (
           <Tooltip key={title} title={title}>
-            <IconButton
+            <IconButton size={downXl ? "small" : "medium"}
               onClick={() => {
                 onClick(row);
               }}

package/components/DataManagement/TableToolbar.jsx

@@ -1,4 +1,4 @@
-import { Checkbox, IconButton, Tooltip, Typography, Box } from "@mui/material";
+import { Checkbox, IconButton, Tooltip, Typography, Box, useMediaQuery } from "@mui/material";
 import { Delete } from "@mui/icons-material";
 import { usePermission } from "./hooks";
 import PropTypes from "prop-types";
@@ -10,6 +10,7 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
   const theme = useTheme();
   const isLight = theme.palette.mode === "light";
   const { canDeleteMulti } = usePermission();
+  const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
   return (
     numSelected > 0 && (
@@ -39,7 +40,7 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
 
         {canDeleteMulti && (
           <Tooltip title="Xóa tất cả" onClick={onDeleteMultiple}>
-            <IconButton>
+            <IconButton size={downXl ? "small" : "medium"} >
               <Delete color="primary" />
             </IconButton>
           </Tooltip>

package/components/DataManagement/index.jsx

@@ -59,6 +59,7 @@ function DataManagement({
   onAddClick = () => {},
   onEditClick = () => {},
   tabPanel,
+  backParentNavigator,
   slotProps = {
     header: {
       sx: {}
@@ -175,6 +176,7 @@ function DataManagement({
             <Card>
               {tabPanel}
               <FilterGod filters={filters} elementSize={elementSize} />
+              {backParentNavigator}
               <DataTable />
             </Card>
           </FormProvider>

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.4",
+  "version": "1.6.6",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"