trithuc-mvc-react 1.6.7 → 1.6.9

package/components/DataManagement/DataTable.jsx

@@ -14,7 +14,7 @@ import TableToolbar from "./TableToolbar";
 import { useDataTable, usePermission } from "./hooks";
 
 const DataTable = () => {
-  const { tableName, selectedField, columns, dataSearch, setOpenEditorDialog, setSelectedEditItem,setOpenViewDialog } = useDataTable();
+  const { tableName, selectedField, columns, dataSearch, setOpenEditorDialog, setSelectedEditItem, setOpenViewDialog, onEditClick } = useDataTable();
   const { setPermission, Permission } = usePermission();
   const queryClient = useQueryClient();
   const confirm = useConfirm();
@@ -80,7 +80,7 @@ const DataTable = () => {
           tableName
         });
       })
-      .catch(() => {});
+      .catch(() => { });
   };
   const handleChangeStatus = (Id) => {
     changeStatusMutation.mutate({
@@ -91,6 +91,8 @@ const DataTable = () => {
   const handlEdit = (item) => {
     setOpenEditorDialog(true);
     setSelectedEditItem(item);
+    onEditClick(item);
+
   };
   const handlViewDetail = (item) => {
     setOpenViewDialog(true);
@@ -99,17 +101,17 @@ const DataTable = () => {
   const { rows, total } = useMemo(() => {
     let rows = data?.data ?? [];
     let total = data?.total ?? 0;
-   
+
     return {
       rows: rows,
       total
     };
   }, [data]);
 
-  useEffect(()=>{
+  useEffect(() => {
     let PermissionModel = data?.PermissionModel;
-    PermissionModel&&setPermission(PermissionModel);
-  },[rows])
+    PermissionModel && setPermission(PermissionModel);
+  }, [rows])
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -151,7 +153,7 @@ const DataTable = () => {
           ids: selected
         });
       })
-      .catch(() => {});
+      .catch(() => { });
   };
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));
@@ -184,7 +186,7 @@ const DataTable = () => {
                   selected={isSelected(row[selectedField])}
                   onSelect={handleSelect}
                   onEdit={handlEdit}
-                  onViewDetail={handlViewDetail}
+                  onView={handlViewDetail}
                   onChangeStatus={handleChangeStatus}
                   onDelete={handleDelete}
                 />

package/components/DataManagement/EditorForm.jsx

@@ -115,7 +115,8 @@ function EditorForm({ fields, submitRef }) {
               keyLabel,
               keyValue,
               keyValueLabel,
-              required
+              required,
+              disabled=false
             }) => {
               return (
                 <Grid item md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
@@ -133,6 +134,7 @@ function EditorForm({ fields, submitRef }) {
                     keyValue={keyValue}
                     size={elementSize}
                     required={required}
+                    disabled={disabled}
                   />
                 </Grid>
               );

package/components/DataManagement/FormField.jsx

@@ -292,7 +292,7 @@ function FormField({
           render={({ field, fieldState: { error } }) => {
             return (
               <>
-                <RhfUploadAvatar name={"AnhDaiDien"} />
+                <RhfUploadAvatar name={"AnhDaiDien"} disabled={disabled}/>
               </>
             );
           }}

package/components/DataManagement/TableRowRender.jsx

@@ -9,8 +9,8 @@ import { styled, useTheme } from "@mui/material/styles";
 import MoreMenu from "../MoreMenu";
 import { useMemo } from "react";
 
-export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit }) => {
-  const { selectedField, columns, statusKey, disableStatus, tableActions,disableCellThaoTac } = useDataTable();
+export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit, onView }) => {
+  const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac } = useDataTable();
   const { canEdit, canDelete, canView, canAction } = usePermission();
 
   const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
@@ -27,8 +27,8 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
     const tableActionsOnMoreMenu = tableActionsAfterFilter.filter(({ isOnTable = false }) => !isOnTable);
     return { tableActionsOnTable, tableActionsOnMoreMenu };
   }, [canView, canAction, tableActions]);
- const theme = useTheme();
- const downXl = useMediaQuery(theme.breakpoints.down("xl"));
+  const theme = useTheme();
+  const downXl = useMediaQuery(theme.breakpoints.down("xl"));
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell padding="checkbox">
@@ -77,13 +77,13 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
             </IconButton>
           </Tooltip>
         )}
-       {/* {canView && (
-          <Tooltip title="Xem chi tiết">
-            <IconButton onClick={() => onViewDetail(row)}>
+        {canView && !tableActions?.some(({ permissionType }) => permissionType == "view") && (
+          <Tooltip title="Xem chi tiết modal">
+            <IconButton onClick={() => onView(row)}>
               <RemoveRedEyeOutlinedIcon color="info" />
             </IconButton>
           </Tooltip>
-        )} */}
+        )}
         {canDelete && (
           <Tooltip title="Xóa">
             <IconButton size={downXl ? "small" : "medium"}

package/components/DataManagement/ViewDetailDialog.jsx

@@ -74,7 +74,7 @@ function ViewDetailDialog({ open, onClose = () => { }, fields = [] }) {
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
       <DialogTitle>
-        Xem
+        Xem chi tiết
         <IconButton
           aria-label="close"
           onClick={onClose}

package/components/DataManagement/index.jsx

@@ -13,7 +13,7 @@ import ViewDetailDialog from "./ViewDetailDialog";
 
 import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
-import { useDataTable } from "./hooks";
+
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -57,8 +57,8 @@ function DataManagement({
   disableCellThaoTac = false,
   tableActions = [],
   disableEditor = false,
-  onAddClick = () => {},
-  onEditClick = () => {},
+  onAddClick = () => { },
+  onEditClick = () => { },
   tabPanel,
   backParentNavigator,
   slotProps = {
@@ -91,11 +91,7 @@ function DataManagement({
     return elementSize;
   }, [upXL]);
 
-  useEffect(() => {
-    if (selectedEditItem && disableEditor) {
-      onEditClick(selectedEditItem);
-    }
-  }, [selectedEditItem]);
+
   useEffect(() => {
     setDataSearch({ ...dataSearch, ...defaults });
   }, [filters]);
@@ -109,6 +105,7 @@ function DataManagement({
       selectedEditItem,
       setSelectedEditItem,
       setOpenEditorDialog,
+      setOpenViewDialog,
       dataSearch,
       setDataSearch,
       validationSchema,
@@ -117,10 +114,9 @@ function DataManagement({
       disableCellThaoTac,
       disableAdd,
       tableActions,
-      openViewDialog,
-      setOpenViewDialog
+      onEditClick
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions, openViewDialog, setOpenViewDialog]);
+  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions, openViewDialog, setOpenViewDialog, onEditClick]);
   const permissionValues = useMemo(() => {
     return {
       Permission,
@@ -157,22 +153,22 @@ function DataManagement({
 
                 <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
                 {(!Permission || Permission.Create) && (
-                    (!disableAdd) && (
-                      <Button
-                        size={elementSize}
-                        variant="contained"
-                        startIcon={<Add fontSize="inherit"/>}
-                        onClick={(e) => {
-                          if (!disableEditor) {
-                            setOpenEditorDialog(true);
-                            setSelectedEditItem(null);
-                          }
-                          onAddClick(e);
-                        }}
-                      >
-                        Thêm
-                      </Button>
-                    )
+                  (!disableAdd) && (
+                    <Button
+                      size={elementSize}
+                      variant="contained"
+                      startIcon={<Add fontSize="inherit" />}
+                      onClick={(e) => {
+                        if (!disableEditor) {
+                          setOpenEditorDialog(true);
+                          setSelectedEditItem(null);
+                        }
+                        onAddClick(e);
+                      }}
+                    >
+                      Thêm
+                    </Button>
+                  )
                 )}
               </Stack>
             </Stack>
@@ -192,7 +188,7 @@ function DataManagement({
               fields={editorFields}
             />
           )}
-           <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
+          <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
         </PermissionContext.Provider>
       </DataTableContext.Provider>
     </>

package/components/DataManagement/upload/RhfUploadAvatar.jsx

@@ -5,7 +5,7 @@ import { FormHelperText, Typography } from "@mui/material/index";
 import bytesToSize from "@/utils/bytesToSize";
 import { Controller, useFormContext } from "react-hook-form";
 
-const RhfUploadAvatar = ({ name }) => {
+const RhfUploadAvatar = ({ name, disabled }) => {
   const { control, setValue } = useFormContext();
   const handleDrop = useCallback(
     async (acceptedFiles) => {
@@ -35,7 +35,7 @@ const RhfUploadAvatar = ({ name }) => {
             accept="image/*"
             file={value}
             maxSize={3145728}
-            onDrop={handleDrop}
+            onDrop={!disabled ? handleDrop : () => { }}
             error={Boolean(error)}
             helperText={error?.message}
             caption={

package/components/DataManagement/upload/UploadMultipleFile.jsx

@@ -5,7 +5,7 @@ import UploadMultiFile from "trithuc-mvc-react/components/DataManagement/upload/
 import { useCallback, useState } from "react";
 import { saveFilesToServer } from "@/utils";
 
-const UploadMultipleFile = ({ name, label }) => {
+const UploadMultipleFile = ({ name, label, disabled }) => {
   const { control, getValues, setValue } = useFormContext();
   const [isLoadingUpfile, setIsLoadingUpfile] = useState(false);
 
@@ -37,12 +37,13 @@ const UploadMultipleFile = ({ name, label }) => {
           <>
 
             <UploadMultiFile
+              disabled={disabled}
               maxSize={3145728}
               accept="*"
               files={field.value}
-              onDrop={handleDrop}
-              onRemove={handleRemove}
-              onRemoveAll={handleRemoveAll}
+              onDrop={!disabled ? handleDrop : () => { }} // disabled lúc ở model view thì ko được chọn ảnh
+              onRemove={!disabled ?handleRemove : () => { }}
+              onRemoveAll={!disabled? handleRemoveAll: () => { }}
               error={Boolean(error)}
             />
             {isLoadingUpfile && <LinearProgress />}
@@ -57,4 +58,4 @@ const UploadMultipleFile = ({ name, label }) => {
     />
   );
 };
-export default UploadMultipleFile ;
+export default UploadMultipleFile;

package/package.json

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