trithuc-mvc-react 1.6.6 → 1.6.8

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 } = 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,21 +91,27 @@ const DataTable = () => {
   const handlEdit = (item) => {
     setOpenEditorDialog(true);
     setSelectedEditItem(item);
+    onEditClick(item);
+
+  };
+  const handlViewDetail = (item) => {
+    setOpenViewDialog(true);
+    setSelectedEditItem(item);
   };
   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);
@@ -147,7 +153,7 @@ const DataTable = () => {
           ids: selected
         });
       })
-      .catch(() => {});
+      .catch(() => { });
   };
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));
@@ -180,6 +186,7 @@ const DataTable = () => {
                   selected={isSelected(row[selectedField])}
                   onSelect={handleSelect}
                   onEdit={handlEdit}
+                  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/FilterElement.jsx

@@ -29,7 +29,6 @@ export function FilterElement({ name, type, label, keyValue, keyLabel, childrenF
 
   switch (type) {
     case "search":
-      console.log(size)
       return (
         <OutlinedInput
           {...rest}

package/components/DataManagement/FormField.jsx

@@ -40,7 +40,8 @@ function FormField({
   keyValueLabel,
   childrenFields,
   size,
-  required = false
+  required = false,
+  disabled = false
 }) {
   const { setValue, register } = useFormContext();
   const getValueObject = useCallback(
@@ -71,6 +72,7 @@ function FormField({
               <TextField
                 {...field}
                 multiline
+                disabled={disabled}
                 label={label + (required ? "*" : "")}
                 error={Boolean(error)}
                 helperText={error?.message}
@@ -98,6 +100,7 @@ function FormField({
                 helperText={error?.message}
                 fullWidth
                 placeholder={label}
+                disabled={disabled}
                 size={size}
               />
             );
@@ -115,6 +118,7 @@ function FormField({
           render={({ field: { onChange: onFieldChange, value }, fieldState: { error } }) => {
             return (
               <Autocomplete
+                disabled={disabled}
                 disablePortal
                 noOptionsText="Không có dữ liệu"
                 loading={loading}
@@ -145,7 +149,7 @@ function FormField({
           render={({ field }) => (
             <FormControl sx={{ minWidth: 160 }} fullWidth size={size}>
               <InputLabel>{label}</InputLabel>
-              <Select {...field} label={label}>
+              <Select {...field} label={label} disabled={disabled}>
                 {[...datas].map(({ label, value }) => (
                   <MenuItem key={value} value={value}>
                     {label}
@@ -162,6 +166,7 @@ function FormField({
           name={name}
           control={control}
           defaultValue={null}
+          disabled={disabled}
           render={({ field }) => {
             return (
               <FormControl fullWidth size={size}>
@@ -182,7 +187,7 @@ function FormField({
           <Controller
             name={name}
             control={control}
-            render={({ field }) => <FormControlLabel control={<Checkbox {...field} checked={field.value} />} label={label} />}
+            render={({ field }) => <FormControlLabel disabled={disabled} control={<Checkbox {...field} checked={field.value} />} label={label} />}
           />
 
           {/* {errors.terms && (
@@ -197,6 +202,7 @@ function FormField({
         <Controller
           name={name}
           control={control}
+          disabled={disabled}
           defaultValue={true}
           render={({ field }) => <FormControlLabel control={<Switch {...field} checked={field.value} />} label={label} />}
         />
@@ -212,6 +218,7 @@ function FormField({
             }
             return (
               <DatePicker
+                disabled={disabled}
                 label={label + (required ? "*" : "")}
                 {...field}
                 format={DEFAULT_DATE_FORMAT}
@@ -271,7 +278,7 @@ function FormField({
           render={({ field, fieldState: { error } }) => {
             return (
               <>
-                <UploadMultipleFile  {...field} name="DinhKem" />
+                <UploadMultipleFile  {...field} name="DinhKem" disabled={disabled} />
               </>
             );
           }}

package/components/DataManagement/TableRowRender.jsx

@@ -2,14 +2,15 @@ import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar, us
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { EditOutlined } from "@mui/icons-material";
 import { useDataTable, usePermission } from "./hooks";
+import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
 
 // material
 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(() => {
@@ -26,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">
@@ -72,11 +73,17 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
         {canEdit && (
           <Tooltip title="Chỉnh sửa">
             <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
-              <EditOutlined color="primary" />
+              <EditOutlined fontSize="inherit" color="primary" />
+            </IconButton>
+          </Tooltip>
+        )}
+        {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"}
@@ -84,7 +91,7 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
                 onDelete(row[selectedField]);
               }}
             >
-              <DeleteOutlineIcon color="error" />
+              <DeleteOutlineIcon fontSize="inherit" color="error" />
             </IconButton>
           </Tooltip>
         )}

package/components/DataManagement/ViewDetailDialog.jsx

@@ -0,0 +1,100 @@
+import Button from "@mui/material/Button";
+
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+
+import { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import EditorForm from "trithuc-mvc-react/components/DataManagement/EditorForm";
+import { useDataTable, usePermission } from "trithuc-mvc-react/components/DataManagement/hooks";
+ViewDetailDialog.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+import { Stack, Typography, List, ListItem, ListItemText, ListItemIcon, Link, Grid } from "@mui/material";
+import TextSnippetOutlinedIcon from "@mui/icons-material/TextSnippetOutlined";
+export const FieldView = ({ label, value }) => {
+  return (
+    <Stack direction="column">
+      <Typography variant="body2" sx={{ color: "text.secondary", }}>
+        {label}
+      </Typography>
+      <Typography variant="subtitle2">{value}</Typography>
+    </Stack>
+  );
+};
+
+export const ListFileView = ({ files }) => {
+  let hasFile = files?.length > 0;
+
+  if (!hasFile) {
+    return <Typography variant="subtitle2">Chưa có file</Typography>;
+  }
+  return (
+    <List disablePadding sx={{ ...(hasFile && { my: 3 }) }}>
+      {files?.map(({ urlFile, tenFile, Size }) => {
+        return (
+          <ListItem
+            key={urlFile}
+            // {...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>
+            <ListItemText
+              primary={<Link href={urlFile} >{tenFile}</Link>}
+              secondary={Size}
+              primaryTypographyProps={{ variant: "subtitle2" }}
+              secondaryTypographyProps={{ variant: "caption" }}
+            />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+function ViewDetailDialog({ open, onClose = () => { }, fields = [] }) {
+
+  const fieldsView  = fields.map(field=>({...field, disabled: true}));
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
+      <DialogTitle>
+        Xem
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500]
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent dividers={true}>
+        <EditorForm fields={fieldsView} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Đóng</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+export default ViewDetailDialog;

package/components/DataManagement/index.jsx

@@ -9,10 +9,11 @@ import { Add, Refresh } from "@mui/icons-material";
 
 import { FormProvider, useForm } from "react-hook-form";
 import EditorDialog from "./EditorDialog";
+import ViewDetailDialog from "./ViewDetailDialog";
 
 import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
-import { useDataTable } from "./hooks";
+
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -56,8 +57,8 @@ function DataManagement({
   disableCellThaoTac = false,
   tableActions = [],
   disableEditor = false,
-  onAddClick = () => {},
-  onEditClick = () => {},
+  onAddClick = () => { },
+  onEditClick = () => { },
   tabPanel,
   backParentNavigator,
   slotProps = {
@@ -68,6 +69,7 @@ function DataManagement({
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
+  const [openViewDialog, setOpenViewDialog] = useState(false);
 
   const [Permission, setPermission] = useState(null);
 
@@ -89,11 +91,7 @@ function DataManagement({
     return elementSize;
   }, [upXL]);
 
-  useEffect(() => {
-    if (selectedEditItem && disableEditor) {
-      onEditClick(selectedEditItem);
-    }
-  }, [selectedEditItem]);
+
   useEffect(() => {
     setDataSearch({ ...dataSearch, ...defaults });
   }, [filters]);
@@ -107,6 +105,7 @@ function DataManagement({
       selectedEditItem,
       setSelectedEditItem,
       setOpenEditorDialog,
+      setOpenViewDialog,
       dataSearch,
       setDataSearch,
       validationSchema,
@@ -114,9 +113,10 @@ function DataManagement({
       disableStatus,
       disableCellThaoTac,
       disableAdd,
-      tableActions
+      tableActions,
+      onEditClick
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions]);
+  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions, openViewDialog, setOpenViewDialog, onEditClick]);
   const permissionValues = useMemo(() => {
     return {
       Permission,
@@ -147,28 +147,28 @@ function DataManagement({
                       setValue("Search");
                     }}
                   >
-                    <Refresh />
+                    <Refresh fontSize="inherit" />
                   </IconButton>
                 </Tooltip>
 
                 <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
                 {(!Permission || Permission.Create) && (
-                    (!disableAdd) && (
-                      <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 fontSize="inherit" />}
+                      onClick={(e) => {
+                        if (!disableEditor) {
+                          setOpenEditorDialog(true);
+                          setSelectedEditItem(null);
+                        }
+                        onAddClick(e);
+                      }}
+                    >
+                      Thêm
+                    </Button>
+                  )
                 )}
               </Stack>
             </Stack>
@@ -188,6 +188,7 @@ function DataManagement({
               fields={editorFields}
             />
           )}
+          <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
         </PermissionContext.Provider>
       </DataTableContext.Provider>
     </>

package/package.json

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