trithuc-mvc-react 1.5.9 → 1.6.3

package/api/index.js

@@ -60,3 +60,12 @@ export const exportExcel = async ({ tableName,data }) => {
   });
   return res.data;
 };
+
+export const uploadFile = async (formData) => {
+  const res = await api.post("/Handler/fileUploader.ashx", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data"
+    }
+  });
+  return res.data;
+};

package/components/DataManagement/EditorForm.jsx

@@ -15,14 +15,14 @@ import { yupResolver } from "@hookform/resolvers/yup";
 EditorForm.propTypes = {
   fields: PropTypes.array
 };
-function EditorForm({ fields,  submitRef }) {
+function EditorForm({ fields, submitRef }) {
   const queryClient = useQueryClient();
   const { tableName, selectedEditItem, setOpenEditorDialog, validationSchema } = useDataTable();
 
   const methods = useForm({ defaultValues: {}, resolver: yupResolver(validationSchema) });
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
-  const elementSize = downXl ? "small": "medium";
+  const elementSize = downXl ? "small" : "medium";
   useEffect(() => {
     if (selectedEditItem) {
       methods.setValue("Id", selectedEditItem.Id);
@@ -37,6 +37,8 @@ function EditorForm({ fields,  submitRef }) {
           methods.setValue(keyValueLabel, selectedEditItem[keyValueLabel]);
         } else if (type === "date") {
           methods.setValue(field, selectedEditItem[field]);
+        } else if (type === "file") {
+          methods.setValue(field, selectedEditItem[field] ? JSON.parse(selectedEditItem[field]) : []);
         } else {
           methods.setValue(field, selectedEditItem[field]);
         }
@@ -67,20 +69,22 @@ function EditorForm({ fields,  submitRef }) {
     }
   });
   const onSubmit = (data) => {
-    fields
-      .filter(({ type }) => type === "date")
-      .forEach(({ field }) => {
+    fields.reduce((data, { type, field, datas, keyValueLabel, keyValue, keyLabel }) => {
+      if (type === "date") {
         if (data[field]) {
           data[field] = moment(data[field]).toDate();
         }
-      });
-    fields
-      .filter(({ type }) => type === "autocomplete")
-      .forEach(({ field, datas, keyValueLabel, keyValue, keyLabel }) => {
+      } else if (type === "autocomplete") {
         if (data[field] && !data[keyValueLabel] && keyValueLabel) {
           data[keyValueLabel] = datas.find((item) => item[keyValue] == data[field])?.[keyLabel];
         }
-      });
+      } else if (type === "file") {
+        if (data[field]) {
+          data[field] = JSON.stringify(data[field]);
+        }
+      }
+      return data;
+    }, data);
 
     saveMutation.mutate({
       tableName,
@@ -103,7 +107,7 @@ function EditorForm({ fields,  submitRef }) {
               childrenFields,
               datas,
               loading = false,
-              onChange = () => {},
+              onChange = () => { },
               keyLabel,
               keyValue,
               keyValueLabel,

package/components/DataManagement/FormField.jsx

@@ -19,6 +19,7 @@ import { DatePicker } from "@mui/x-date-pickers";
 import { useCallback, useEffect, } from "react";
 import moment from "moment/moment";
 import { DEFAULT_DATE_FORMAT } from "../../constants";
+import UploadMultipleFile from "./upload/UploadMultipleFile";
 
 
 FormField.propTypes = {
@@ -235,7 +236,6 @@ function FormField({
           }}
         />
       );
-
     case "trangThaiXuLy":
       return (
         <Controller
@@ -262,6 +262,20 @@ function FormField({
           }}
         />
       );
+    case "file":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <>
+                <UploadMultipleFile  {...field} name="DinhKem" />
+              </>
+            );
+          }}
+        />
+      );
   }
 }
 

package/components/DataManagement/index.jsx

@@ -32,6 +32,7 @@ DataManagement.propTypes = {
   editorFields: PropTypes.array,
   validationSchema: PropTypes.object,
   disableStatus: PropTypes.bool,
+  disableAdd: PropTypes.bool,
   statusKey: PropTypes.string,
   tableActions: PropTypes.array,
   disableEditor: PropTypes.bool,
@@ -50,6 +51,7 @@ function DataManagement({
   validationSchema = {},
   statusKey = "Status",
   disableStatus = false,
+  disableAdd = false,
   tableActions = [],
   disableEditor = false,
   onAddClick = () => {},
@@ -107,7 +109,7 @@ function DataManagement({
       validationSchema,
       statusKey,
       disableStatus,
-
+      disableAdd,
       tableActions
     };
   }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions]);
@@ -119,7 +121,6 @@ function DataManagement({
   }, [Permission, setPermission]);
   const methods = useForm({ defaultValues: {} });
   const { reset, setValue } = methods;
-
   return (
     <>
       <DataTableContext.Provider value={values}>
@@ -148,20 +149,22 @@ function DataManagement({
 
                 <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
                 {(!Permission || Permission.Create) && (
-                  <Button
-                    size={elementSize}
-                    variant="contained"
-                    startIcon={<Add />}
-                    onClick={(e) => {
-                      if (!disableEditor) {
-                        setOpenEditorDialog(true);
-                        setSelectedEditItem(null);
-                      }
-                      onAddClick(e);
-                    }}
-                  >
-                    Thêm
-                  </Button>
+                    (!disableAdd) && (
+                      <Button
+                        size={elementSize}
+                        variant="contained"
+                        startIcon={<Add />}
+                        onClick={(e) => {
+                          if (!disableEditor) {
+                            setOpenEditorDialog(true);
+                            setSelectedEditItem(null);
+                          }
+                          onAddClick(e);
+                        }}
+                      >
+                        Thêm
+                      </Button>
+                    )
                 )}
               </Stack>
             </Stack>

package/components/DataManagement/upload/UploadAvatar.jsx

@@ -0,0 +1,147 @@
+import { isString } from 'lodash';
+import PropTypes from 'prop-types';
+import { Icon, addIcon } from '@iconify/react';
+import { useDropzone } from 'react-dropzone';
+import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
+// material
+import { alpha, styled } from '@mui/material/styles';
+import { Box, Typography, Paper } from '@mui/material';
+// utils
+
+function fData(number) {
+  // return numeral(number).format("0.0 b");
+  return number;
+}
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('div')(({ theme }) => ({
+  width: 144,
+  height: 144,
+  margin: 'auto',
+  borderRadius: '50%',
+  padding: theme.spacing(1),
+  border: `1px dashed ${theme.palette.grey[500_32]}`
+}));
+
+const DropZoneStyle = styled('div')({
+  zIndex: 0,
+  width: '100%',
+  height: '100%',
+  outline: 'none',
+  display: 'flex',
+  overflow: 'hidden',
+  borderRadius: '50%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '& > *': { width: '100%', height: '100%' },
+  '&:hover': {
+    cursor: 'pointer',
+    '& .placeholder': {
+      zIndex: 9
+    }
+  }
+});
+
+const PlaceholderStyle = styled('div')(({ theme }) => ({
+  display: 'flex',
+  position: 'absolute',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  color: theme.palette.text.secondary,
+  backgroundColor: theme.palette.background.neutral,
+  transition: theme.transitions.create('opacity', {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shorter
+  }),
+  '&:hover': { opacity: 0.72 }
+}));
+
+// ------------------------------------------100/*/----------------------------
+
+UploadAvatar.propTypes = {
+  error: PropTypes.bool,
+  file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  caption: PropTypes.node,
+  sx: PropTypes.object
+};
+  const ShowRejectionItems = ({ fileRejections }) => (
+    <Paper
+      variant="outlined"
+      sx={{
+        py: 1,
+        px: 2,
+        my: 2,
+        borderColor: "error.light",
+        bgcolor: (theme) => alpha(theme.palette.error.main, 0.08)
+      }}
+    >
+      {fileRejections.map(({ file, errors }) => {
+        const { path, size } = file;
+        return (
+          <Box key={path} sx={{ my: 1 }}>
+            <Typography variant="subtitle2" noWrap>
+              {path} - {fData(size)}
+            </Typography>
+            {errors.map((e) => (
+              <Typography key={e.code} variant="caption" component="p">
+                - {e.message}
+              </Typography>
+            ))}
+          </Box>
+        );
+      })}
+    </Paper>
+  );
+export default function UploadAvatar({ error, file, caption, sx, ...other }) {
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    multiple: false,
+    ...other
+  });
+
+
+  // console.log(file);
+  return (
+    <>
+      <RootStyle sx={sx}>
+        <DropZoneStyle
+          {...getRootProps()}
+          sx={{
+            ...(isDragActive && { opacity: 0.72 }),
+            ...((isDragReject || error) && {
+              color: "error.main",
+              borderColor: "error.light",
+              bgcolor: "error.lighter"
+            })
+          }}
+        >
+          <input {...getInputProps()} />
+
+          {file && <Box component="img" alt="avatar" src={isString(file) ? file : file.preview} sx={{ zIndex: 8, objectFit: "cover" }} />}
+
+          <PlaceholderStyle
+            className="placeholder"
+            sx={{
+              ...(file && {
+                opacity: 0,
+                color: "common.white",
+                bgcolor: "grey.900",
+                "&:hover": { opacity: 0.72 }
+              })
+            }}
+          >
+            <Box icon={AddAPhotoIcon} sx={{ width: 24, height: 24, mb: 1 }} >
+              <AddAPhotoIcon />
+            </Box>
+            <Typography variant="caption">Chọn hình</Typography>
+          </PlaceholderStyle>
+        </DropZoneStyle>
+      </RootStyle>
+
+      {caption}
+
+      {fileRejections.length > 0 && <ShowRejectionItems fileRejections={fileRejections} />}
+    </>
+  );
+}

package/components/DataManagement/upload/UploadMultiFile.jsx

@@ -0,0 +1,237 @@
+import { isString } from "lodash";
+import PropTypes from "prop-types";
+// import { Icon } from "@iconify/react";
+import { useDropzone } from "react-dropzone";
+
+import CloseIcon from "@mui/icons-material/Close";
+import TextSnippetOutlinedIcon from "@mui/icons-material/TextSnippetOutlined";
+// import { motion, AnimatePresence } from 'framer-motion';
+// material
+import { alpha, styled } from "@mui/material/styles";
+import {
+  Box,
+  List,
+  Stack,
+  Paper,
+  Button,
+  ListItem,
+  Typography,
+  ListItemIcon,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  Avatar,
+  Link
+} from "@mui/material";
+// utils
+import { bytesToSize, fData } from "../../../utils";
+import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
+//
+// import { MIconButton } from '../@material-extend';
+// import { varFadeInRight } from "../animate";
+// import { UploadIllustration } from '../../assets';
+
+// ----------------------------------------------------------------------
+let URL_APPLICATION = document.querySelector("#URL_APPLICATION").value;
+
+const DropZoneStyle = styled("div")(({ theme }) => ({
+  outline: "none",
+  display: "flex",
+  textAlign: "center",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: theme.spacing(5, 1),
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.background.neutral,
+  border: `1px dashed ${theme.palette.grey[500_32]}`,
+  "&:hover": { opacity: 0.72, cursor: "pointer" },
+  [theme.breakpoints.up("md")]: { textAlign: "left", flexDirection: "row" }
+}));
+
+// ----------------------------------------------------------------------
+
+UploadMultiFile.propTypes = {
+  error: PropTypes.bool,
+  showPreview: PropTypes.bool,
+  files: PropTypes.array,
+  onRemove: PropTypes.func,
+  onRemoveAll: PropTypes.func,
+  sx: PropTypes.object
+};
+
+export default function UploadMultiFile({ error, showPreview = false, files, onRemove, onRemoveAll, sx, ...other }) {
+  const hasFile = files && files.length > 0;
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    ...other
+  });
+
+  const ShowRejectionItems = () => (
+    <Paper
+      variant="outlined"
+      sx={{
+        py: 1,
+        px: 2,
+        mt: 3,
+        borderColor: "error.light",
+        bgcolor: (theme) => alpha(theme.palette.error.main, 0.08)
+      }}
+    >
+      {fileRejections.map(({ file, errors }) => {
+        const { path, size } = file;
+        return (
+          <Box key={path} sx={{ my: 1 }}>
+            <Typography variant="subtitle2" noWrap>
+              {path} - {fData(size)}
+            </Typography>
+            {errors.map((e) => (
+              <Typography key={e.code} variant="caption" component="p">
+                - {e.message}
+              </Typography>
+            ))}
+          </Box>
+        );
+      })}
+    </Paper>
+  );
+
+  return (
+    <Box sx={{ width: "100%", ...sx }}>
+      <DropZoneStyle
+        {...getRootProps()}
+        sx={{
+          ...(isDragActive && { opacity: 0.72 }),
+          ...((isDragReject || error) && {
+            color: "error.main",
+            borderColor: "error.light",
+            bgcolor: "error.lighter"
+          })
+        }}
+      >
+        <input {...getInputProps()} />
+
+        {/* <UploadIllustration sx={{ width: 220 }} /> */}
+        <Stack direction={"row"} alignItems={"center"}>
+          <Avatar>
+            <FileUploadOutlinedIcon />
+          </Avatar>
+          <Box sx={{ p: 1, ml: { md: 2 } }}>
+            <Typography gutterBottom variant="h5">
+              Click hoặc kéo và thả file
+            </Typography>
+
+            {/* <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            Drop files here or click&nbsp;
+            <Typography variant="body2" component="span" sx={{ color: "primary.main", textDecoration: "underline" }}>
+              browse
+            </Typography>
+            &nbsp;thorough your machine
+          </Typography> */}
+          </Box>
+        </Stack>
+      </DropZoneStyle>
+
+      {fileRejections.length > 0 && <ShowRejectionItems />}
+
+      <List disablePadding sx={{ ...(hasFile && { my: 3 }) }}>
+        {files?.map((file) => {
+          let name, size;
+          if (file.tenFile) {
+            name = file.tenFile;
+            size = file.Size;
+          } else {
+            name = file.name;
+            size = bytesToSize(file.size);
+          }
+          const { preview, tenFile, Size } = file;
+          const key = isString(file) ? file : name;
+
+          if (showPreview) {
+            return (
+              <ListItem
+                key={key}
+                // {...varFadeInRight}
+                sx={{
+                  p: 0,
+                  m: 0.5,
+                  width: 80,
+                  height: 80,
+                  borderRadius: 1.5,
+                  overflow: "hidden",
+                  position: "relative",
+                  display: "inline-flex"
+                }}
+              >
+                <Paper
+                  variant="outlined"
+                  component="img"
+                  src={isString(file) ? file : preview}
+                  sx={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute" }}
+                />
+                <Box sx={{ top: 6, right: 6, position: "absolute" }}>
+                  <IconButton
+                    size="small"
+                    onClick={() => onRemove(file)}
+                    sx={{
+                      p: "2px",
+                      color: "common.white",
+                      bgcolor: (theme) => alpha(theme.palette.grey[900], 0.72),
+                      "&:hover": {
+                        bgcolor: (theme) => alpha(theme.palette.grey[900], 0.48)
+                      }
+                    }}
+                  >
+                    <CloseIcon />
+                    {/* <Icon icon={closeFill} /> */}
+                  </IconButton>
+                </Box>
+              </ListItem>
+            );
+          }
+
+          return (
+            <ListItem
+              key={key}
+              // {...varFadeInRight}
+              sx={{
+                my: 1,
+                py: 0.75,
+                px: 2,
+                borderRadius: 1,
+                border: (theme) => `solid 1px ${theme.palette.divider}`,
+                bgcolor: "background.paper"
+              }}
+            >
+              <ListItemIcon>
+                {/* <Icon icon={fileFill} width={28} height={28} /> */}
+                <TextSnippetOutlinedIcon color="info" />
+              </ListItemIcon>
+              <Link href={URL_APPLICATION + file?.urlFile}>
+                <ListItemText
+                  primary={isString(file) ? file : name}
+                  secondary={isString(file) ? "" : size}
+                  primaryTypographyProps={{ variant: "subtitle2" }}
+                  secondaryTypographyProps={{ variant: "caption" }}
+                />
+              </Link>
+              <ListItemSecondaryAction>
+                <IconButton edge="end" size="small" onClick={() => onRemove(file)}>
+                  <CloseIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+          );
+        })}
+      </List>
+
+      {hasFile && (
+        <Stack direction="row" justifyContent="flex-end">
+          <Button onClick={onRemoveAll} sx={{ mr: 1.5 }} color="error">
+            Gỡ hết
+          </Button>
+          {/* <Button variant="contained">Upload files</Button> */}
+        </Stack>
+      )}
+    </Box>
+  );
+}

package/components/DataManagement/upload/UploadMultipleFile.jsx

@@ -0,0 +1,60 @@
+import { CardContent, CardHeader, FormHelperText, LinearProgress, Card } from "@mui/material";
+
+import { Controller, useFormContext } from "react-hook-form";
+import UploadMultiFile from "trithuc-mvc-react/components/DataManagement/upload/UploadMultiFile";
+import { useCallback, useState } from "react";
+import { saveFilesToServer } from "@/utils";
+
+const UploadMultipleFile = ({ name, label }) => {
+  const { control, getValues, setValue } = useFormContext();
+  const [isLoadingUpfile, setIsLoadingUpfile] = useState(false);
+
+  const handleDrop = useCallback(
+    async (acceptedFiles) => {
+      const olds = getValues(name) ?? [];
+      setIsLoadingUpfile(true);
+      const data = await saveFilesToServer(acceptedFiles);
+      setValue(name, [...olds, ...data]);
+      setIsLoadingUpfile(false);
+    },
+    [setValue]
+  );
+  const handleRemoveAll = () => {
+    setValue(name, []);
+  };
+
+  const handleRemove = (file) => {
+    const filteredItems = getValues(name).filter((_file) => _file.urlFile !== file.urlFile);
+    setValue(name, filteredItems);
+  };
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => {
+        return (
+          <>
+
+            <UploadMultiFile
+              maxSize={3145728}
+              accept="*"
+              files={field.value}
+              onDrop={handleDrop}
+              onRemove={handleRemove}
+              onRemoveAll={handleRemoveAll}
+              error={Boolean(error)}
+            />
+            {isLoadingUpfile && <LinearProgress />}
+            {error?.message && (
+              <FormHelperText error sx={{ px: 2 }}>
+                {error.message}
+              </FormHelperText>
+            )}
+          </>
+        );
+      }}
+    />
+  );
+};
+export default UploadMultipleFile ;

package/components/DataManagement/upload/UploadSingleFile.jsx

@@ -0,0 +1,129 @@
+import { isString } from "lodash";
+import PropTypes from "prop-types";
+import { useDropzone } from "react-dropzone";
+// material
+import { alpha, styled } from "@mui/material/styles";
+import { Paper, Box, Typography } from "@mui/material";
+// utils
+// import { fData } from '../../utils/formatNumber';
+//
+// import { UploadIllustration } from '../../assets';
+import { fData } from "../../utils";
+
+// ----------------------------------------------------------------------
+
+const DropZoneStyle = styled("div")(({ theme }) => ({
+  outline: "none",
+  display: "flex",
+  overflow: "hidden",
+  textAlign: "center",
+  position: "relative",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: theme.spacing(5, 0),
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create("padding"),
+  backgroundColor: theme.palette.background.neutral,
+  border: `1px dashed ${theme.palette.grey[500_32]}`,
+  "&:hover": {
+    opacity: 0.72,
+    cursor: "pointer"
+  },
+  [theme.breakpoints.up("md")]: { textAlign: "left", flexDirection: "row" }
+}));
+
+// ----------------------------------------------------------------------
+
+UploadSingleFile.propTypes = {
+  error: PropTypes.bool,
+  file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  sx: PropTypes.object
+};
+const ShowRejectionItems = ({ fileRejections }) => (
+  <Paper
+    variant="outlined"
+    sx={{
+      py: 1,
+      px: 2,
+      mt: 3,
+      borderColor: "error.light",
+      bgcolor: (theme) => alpha(theme.palette.error.main, 0.08)
+    }}
+  >
+    {fileRejections.map(({ file, errors }) => {
+      const { path, size } = file;
+      return (
+        <Box key={path} sx={{ my: 1 }}>
+          <Typography variant="subtitle2" noWrap>
+            {path} - {fData(size)}
+          </Typography>
+          {errors.map((e) => (
+            <Typography key={e.code} variant="caption" component="p">
+              - {e.message}
+            </Typography>
+          ))}
+        </Box>
+      );
+    })}
+  </Paper>
+);
+export default function UploadSingleFile({ error, file, sx, ...other }) {
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    multiple: false,
+    ...other
+  });
+
+  return (
+    <Box sx={{ width: "100%", ...sx }}>
+      <DropZoneStyle
+        {...getRootProps()}
+        sx={{
+          ...(isDragActive && { opacity: 0.72 }),
+          ...((isDragReject || error) && {
+            color: "error.main",
+            borderColor: "error.light",
+            bgcolor: "error.lighter"
+          }),
+          ...(file && { padding: "12% 0" })
+        }}
+      >
+        <input {...getInputProps()} />
+
+        {/* <UploadIllustration sx={{ width: 220 }} /> */}
+
+        <Box sx={{ p: 3, ml: { md: 2 } }}>
+          <Typography gutterBottom variant="h5">
+            Drop or Select file
+          </Typography>
+
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            Drop files here or click&nbsp;
+            <Typography variant="body2" component="span" sx={{ color: "primary.main", textDecoration: "underline" }}>
+              browse
+            </Typography>
+            &nbsp;thorough your machine
+          </Typography>
+        </Box>
+
+        {file && (
+          <Box
+            component="img"
+            alt="file preview"
+            src={isString(file) ? file : file.preview}
+            sx={{
+              top: 8,
+              borderRadius: 1,
+              objectFit: "cover",
+              position: "absolute",
+              width: "calc(100% - 16px)",
+              height: "calc(100% - 16px)"
+            }}
+          />
+        )}
+      </DropZoneStyle>
+
+      {/* {fileRejections.length > 0 && <ShowRejectionItems fileRejections={fileRejections} />} */}
+    </Box>
+  );
+}

package/package.json

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

package/utils/bytesToSize.js

@@ -0,0 +1,11 @@
+export default (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};

package/utils/formFields.jsx

@@ -0,0 +1,47 @@
+import moment from "moment";
+
+/**
+ * Returns an object with default values for the given fields.
+ *
+ * @param {Array<{ fieldName: string, defaultValue?: string, type?: string }>} fields - The list of fields.
+ * @returns {Record<string, string[] | null | string>} - The object with default values.
+ */
+export const getDefaultValues = (fields) => {
+  return fields.reduce((acc, { fieldName, defaultValue = "", type = "text" }) => {
+    switch (type) {
+      case "file":
+        acc[fieldName] = [];
+        break;
+      case "date":
+        acc[fieldName] = null;
+        break;
+      default:
+        acc[fieldName] = defaultValue;
+        break;
+    }
+    return acc;
+  }, {});
+};
+
+/**
+ * Converts field values in a form data object based on their type.
+ * @param {Array<{ fieldName: string, type: string }>} fields - The list of fields to handle.
+ * @param {Object} formData - The form data object to update.
+ * @returns {void}
+ */
+export const handleFieldTypesBeforeSubmit = (fields, formData) => {
+   const updatedFormData = { ...formData };
+
+   for (const { fieldName, type } of fields) {
+     switch (type) {
+       case "date":
+         updatedFormData[fieldName] = moment(formData[fieldName]).toDate();
+         break;
+       case "file":
+         updatedFormData[fieldName] = JSON.stringify(formData[fieldName]);
+         break;
+     }
+   }
+
+   return updatedFormData;
+};

package/utils/index.js

@@ -0,0 +1,32 @@
+import moment from "moment";
+import bytesToSize from "./bytesToSize";
+import { uploadFile } from "trithuc-mvc-react/api";
+export { bytesToSize };
+export * from "./formFields";
+export function fDateTime(date) {
+  return moment(date).format("DD/MM/yyyy HH:mm");
+}
+
+export function fData(number) {
+  // return numeral(number).format("0.0 b");
+  return number;
+}
+
+export const saveFilesToServer = async (files) => {
+  try {
+    const formData = new FormData();
+    files.forEach((file, i) => {
+      formData.append(`file${i}`, file);
+    });
+
+    const data = await uploadFile(formData);
+
+    return data.map((item) => {
+      return JSON.parse(item);
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+