trithuc-mvc-react 1.6.5 → 1.6.7

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 } = useDataTable();
   const { setPermission, Permission } = usePermission();
   const queryClient = useQueryClient();
   const confirm = useConfirm();
@@ -92,6 +92,10 @@ const DataTable = () => {
     setOpenEditorDialog(true);
     setSelectedEditItem(item);
   };
+  const handlViewDetail = (item) => {
+    setOpenViewDialog(true);
+    setSelectedEditItem(item);
+  };
   const { rows, total } = useMemo(() => {
     let rows = data?.data ?? [];
     let total = data?.total ?? 0;
@@ -180,6 +184,7 @@ const DataTable = () => {
                   selected={isSelected(row[selectedField])}
                   onSelect={handleSelect}
                   onEdit={handlEdit}
+                  onViewDetail={handlViewDetail}
                   onChangeStatus={handleChangeStatus}
                   onDelete={handleDelete}
                 />

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,6 +2,7 @@ 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";
@@ -71,26 +72,32 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
       {!disableCellThaoTac && <TableCell align="center">
         {canEdit && (
           <Tooltip title="Chỉnh sửa">
-            <IconButton onClick={() => onEdit(row)}>
-              <EditOutlined color="primary" />
+            <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
+              <EditOutlined fontSize="inherit" color="primary" />
             </IconButton>
           </Tooltip>
         )}
-
+       {/* {canView && (
+          <Tooltip title="Xem chi tiết">
+            <IconButton onClick={() => onViewDetail(row)}>
+              <RemoveRedEyeOutlinedIcon color="info" />
+            </IconButton>
+          </Tooltip>
+        )} */}
         {canDelete && (
           <Tooltip title="Xóa">
-            <IconButton
+            <IconButton size={downXl ? "small" : "medium"}
               onClick={() => {
                 onDelete(row[selectedField]);
               }}
             >
-              <DeleteOutlineIcon color="error" />
+              <DeleteOutlineIcon fontSize="inherit" color="error" />
             </IconButton>
           </Tooltip>
         )}
         {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/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,6 +9,7 @@ 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";
@@ -59,6 +60,7 @@ function DataManagement({
   onAddClick = () => {},
   onEditClick = () => {},
   tabPanel,
+  backParentNavigator,
   slotProps = {
     header: {
       sx: {}
@@ -67,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);
 
@@ -113,9 +116,11 @@ function DataManagement({
       disableStatus,
       disableCellThaoTac,
       disableAdd,
-      tableActions
+      tableActions,
+      openViewDialog,
+      setOpenViewDialog
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions]);
+  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions, openViewDialog, setOpenViewDialog]);
   const permissionValues = useMemo(() => {
     return {
       Permission,
@@ -146,7 +151,7 @@ function DataManagement({
                       setValue("Search");
                     }}
                   >
-                    <Refresh />
+                    <Refresh fontSize="inherit" />
                   </IconButton>
                 </Tooltip>
 
@@ -156,7 +161,7 @@ function DataManagement({
                       <Button
                         size={elementSize}
                         variant="contained"
-                        startIcon={<Add />}
+                        startIcon={<Add fontSize="inherit"/>}
                         onClick={(e) => {
                           if (!disableEditor) {
                             setOpenEditorDialog(true);
@@ -175,6 +180,7 @@ function DataManagement({
             <Card>
               {tabPanel}
               <FilterGod filters={filters} elementSize={elementSize} />
+              {backParentNavigator}
               <DataTable />
             </Card>
           </FormProvider>
@@ -186,6 +192,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.5",
+  "version": "1.6.7",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"