trithuc-mvc-react 1.3.0 → 1.5.0

package/api/index.js

@@ -18,6 +18,7 @@ export const getDatasFromTable = async ({ tableName, page, pageSize, data }) =>
   });
   return res.data;
 };
+
 export const getDataFromTable = async ({ tableName, id }) => {
   const res = await api.get(`/Admin/${tableName}/GetDetail`, {
     params: {

package/components/DataManagement/DataTable.jsx

@@ -1,15 +1,10 @@
-import { Table, TableBody, TableContainer } from "@mui/material";
+import { Table, TableBody, TableCell, TableContainer, TableRow } from "@mui/material";
 import TablePaginationCustom from "../table/TablePagination";
 import { useMemo, useState } from "react";
 
 import { TableHead } from "./TableHead";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import {
-  changeStatusDataToTable,
-  deleteDataFromTable,
-  deleteMultipleDataFromTable,
-  getDatasFromTable,
-} from "../../api";
+import { changeStatusDataToTable, deleteDataFromTable, deleteMultipleDataFromTable, getDatasFromTable } from "../../api";
 import TableRowsLoader from "../table/TableRowsLoader";
 import { toast } from "react-toastify";
 import { useConfirm } from "material-ui-confirm";
@@ -33,14 +28,14 @@ const DataTable = () => {
         tableName: tableName,
         page: page + 1,
         pageSize: rowsPerPage,
-        data: dataSearch,
+        data: dataSearch
       }),
     keepPreviousData: true,
     onSuccess: ({ PermissionModel, status }) => {
       if (!Permission && status) {
         setPermission(PermissionModel);
       }
-    },
+    }
   });
   const changeStatusMutation = useMutation(changeStatusDataToTable, {
     onSuccess: () => {
@@ -49,7 +44,7 @@ const DataTable = () => {
     },
     onError: () => {
       toast.error(" Có lỗi xảy ra !");
-    },
+    }
   });
   const deleteMutation = useMutation(deleteDataFromTable, {
     onSuccess: ({ status }) => {
@@ -63,7 +58,7 @@ const DataTable = () => {
     },
     onError: () => {
       toast.error(" Có lỗi xảy ra !");
-    },
+    }
   });
   const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
     onSuccess: () => {
@@ -73,7 +68,7 @@ const DataTable = () => {
     },
     onError: () => {
       toast.error(" Có lỗi xảy ra !");
-    },
+    }
   });
 
   const handleDelete = (id) => {
@@ -81,7 +76,7 @@ const DataTable = () => {
       .then(() => {
         deleteMutation.mutate({
           id,
-          tableName,
+          tableName
         });
       })
       .catch(() => {});
@@ -89,7 +84,7 @@ const DataTable = () => {
   const handleChangeStatus = (Id) => {
     changeStatusMutation.mutate({
       tableName,
-      id: Id,
+      id: Id
     });
   };
   const handlEdit = (item) => {
@@ -101,7 +96,7 @@ const DataTable = () => {
     let total = data?.total ?? 0;
     return {
       rows: rows,
-      total,
+      total
     };
   }, [data]);
 
@@ -142,7 +137,7 @@ const DataTable = () => {
       .then(() => {
         deleteMultipleMutation.mutate({
           tableName,
-          ids: selected,
+          ids: selected
         });
       })
       .catch(() => {});
@@ -157,12 +152,7 @@ const DataTable = () => {
           onDeleteMultiple={handleDeleteMultiple}
         />
         <Table className="border">
-          <TableHead
-            headLabel={columns}
-            onSelectAllClick={handleSelectAllClick}
-            numSelected={selected?.length}
-            rowCount={rows.length}
-          />
+          <TableHead headLabel={columns} onSelectAllClick={handleSelectAllClick} numSelected={selected?.length} rowCount={rows.length} />
           {isLoading ? (
             <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
           ) : (
@@ -179,6 +169,12 @@ const DataTable = () => {
                   onDelete={handleDelete}
                 />
               ))}
+              
+              {rows?.length == 0 && (
+                <TableRow>
+                  <TableCell colSpan={columns.length + 4} align="center">Không có dữ liệu</TableCell>
+                </TableRow>
+              )}
             </TableBody>
           )}
         </Table>

package/components/DataManagement/FilterElement.jsx

@@ -11,7 +11,7 @@ import { useController, useFormContext } from "react-hook-form";
 import { debounce } from "lodash";
 import { useDataTable } from "./hooks";
 
-export function FilterElement({ name, type, label, keyValue, keyLabel, childrenFields, datas, loading = false, onChange = () => { } }) {
+export function FilterElement({ name, type, label, keyValue, keyLabel, childrenFields, datas, loading = false, onChange = () => { }, size= "small" }) {
   const { control, setValue } = useFormContext();
 
   const {
@@ -38,11 +38,14 @@ export function FilterElement({ name, type, label, keyValue, keyLabel, childrenF
             onFieldChange(e);
             handleFilterChangeDebounce(name, e.target.value);
           }}
-          size="small"
+          size={size}
           placeholder={label}
-          startAdornment={<InputAdornment position="start">
-            <SearchOutlined />
-          </InputAdornment>} />
+          startAdornment={
+            <InputAdornment position="start">
+              <SearchOutlined />
+            </InputAdornment>
+          }
+        />
       );
 
     case "autocomplete":
@@ -51,7 +54,7 @@ export function FilterElement({ name, type, label, keyValue, keyLabel, childrenF
           {...name}
           disablePortal
           loading={loading}
-          size="small"
+          size={size}
           noOptionsText="Không có dữ liệu"
           fullWidth
           options={datas ?? []}
@@ -81,6 +84,7 @@ export function FilterElement({ name, type, label, keyValue, keyLabel, childrenF
             id="demo-simple-select"
             name={name}
             fullWidth
+            size={size}
             label={label}
             value={value ?? ""}
             onChange={(e) => {

package/components/DataManagement/FilterGod.jsx

@@ -1,11 +1,11 @@
-import {  Slider, Toolbar } from "@mui/material";
+import { Slider, Toolbar } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import Grid from "@mui/material/Unstable_Grid2";
 import DateRangePicker from "../date/DateRangePicker";
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
 
-export const FilterGod = ({ filters }) => {
+export const FilterGod = ({ filters, elementSize = "medium" }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
   const { setDataSearch, dataSearch } = useDataTable();
@@ -18,7 +18,8 @@ export const FilterGod = ({ filters }) => {
       sx={{
         px: 1,
         my: 2,
-        display: "block"
+        display: "flex",
+        alignItems: "center"
       }}
     >
       <Grid
@@ -26,7 +27,8 @@ export const FilterGod = ({ filters }) => {
         rowSpacing={2}
         columnSpacing={{ xs: 2 }}
         sx={{
-          px: 1
+          px: 1,
+          flex: 1
         }}
       >
         {filters.map(({ field, ...rest }) => {
@@ -41,7 +43,7 @@ export const FilterGod = ({ filters }) => {
                       [field[1]]: value[1]
                     }));
                   }}
-                  size="small"
+                  size={elementSize}
                   value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
                 />
               </Grid>
@@ -50,9 +52,16 @@ export const FilterGod = ({ filters }) => {
 
           if (rest.type === "slider-range") {
             return (
-              <Grid key={field.toString()} xs={12} sm={6} md={4} xl={3} sx={{
-                px:4
-              }}>
+              <Grid
+                key={field.toString()}
+                xs={12}
+                sm={6}
+                md={4}
+                xl={3}
+                sx={{
+                  px: 4
+                }}
+              >
                 <Slider
                   onChange={(e, value) => {
                     setDataSearch({
@@ -61,7 +70,7 @@ export const FilterGod = ({ filters }) => {
                       [field[1]]: value[1]
                     });
                   }}
-                  size="small"
+                  size={elementSize}
                   marks={rest.marks}
                   defaultValue={rest.defaultValue}
                   valueLabelDisplay="auto"
@@ -73,7 +82,7 @@ export const FilterGod = ({ filters }) => {
           }
           return (
             <Grid key={field} xs={12} sm={6} md={4} xl={3}>
-              <FilterElement name={field} {...rest} />
+              <FilterElement name={field} {...rest} size={elementSize} />
             </Grid>
           );
         })}

package/components/DataManagement/FormField.jsx

@@ -218,18 +218,20 @@ function FormField({
                 format={DEFAULT_DATE_FORMAT}
                 slotProps={{
                   textField: {
-                    fullWidth: true, error: Boolean(error),
+                    fullWidth: true,
+                    error: Boolean(error),
                     helperText: error?.message
                   },
                   popper: {
                     disablePortal: false,
                     popperOptions: {
-                      strategy: 'fixed'
-                    },
+                      strategy: "fixed"
+                    }
+                  },
+                  actionBar: {
+                    actions: ["clear"]
                   }
                 }}
-
-
               />
             );
           }}

package/components/DataManagement/TableRowRender.jsx

@@ -3,18 +3,30 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { EditOutlined } from "@mui/icons-material";
 import { useDataTable, usePermission } from "./hooks";
 
-
 // material
 import { styled } 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 } = useDataTable();
-  const { canEdit, canDelete } = usePermission();
-  console.log("tableActions", tableActions);
+  const { canEdit, canDelete, canView, canAction } = usePermission();
+
+  const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
+    const tableActionsAfterFilter = [...tableActions].filter(({ permissionType }) => {
+      if (permissionType == "view" && !canView) {
+        return false;
+      }
+      if (permissionType == "action" && !canAction) {
+        return false;
+      }
+      return true;
+    });
+    const tableActionsOnTable = tableActionsAfterFilter.filter(({ isOnTable = false }) => isOnTable);
+    const tableActionsOnMoreMenu = tableActionsAfterFilter.filter(({ isOnTable = false }) => !isOnTable);
+    return { tableActionsOnTable, tableActionsOnMoreMenu };
+  }, [canView, canAction, tableActions]);
+
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell padding="checkbox">
@@ -70,8 +82,19 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
             </IconButton>
           </Tooltip>
         )}
+        {tableActionsOnTable.map(({ title, onClick, element }) => (
+          <Tooltip key={title} title={title}>
+            <IconButton
+              onClick={() => {
+                onClick(row);
+              }}
+            >
+              {element}
+            </IconButton>
+          </Tooltip>
+        ))}
 
-        {<MoreMenu actions={tableActions} data={row}/>}
+        {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
       </TableCell>
     </TableRow>
   );
@@ -86,5 +109,3 @@ export const RootStyle = styled(Toolbar)(({ theme }) => ({
   height: 56,
   minHeight: 50
 }));
-
-

package/components/DataManagement/hooks.js

@@ -6,14 +6,16 @@ export function useDataTable() {
 }
 export function usePermission() {
   const { Permission, setPermission } = useContext(PermissionContext);
-  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate } = useMemo(() => {
+  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView } = useMemo(() => {
     const canEdit = !Permission || Permission.Edit;
     const canDelete = !Permission || Permission.Delete;
     const canDeleteMulti = !Permission || Permission.DeleteMulti;
     const canSave = !Permission || Permission.Save;
     const canCreate = !Permission || Permission.Create;
-    return { canEdit, canDelete, canDeleteMulti, canSave, canCreate };
+    const canAction = !Permission || Permission.Action;
+    const canView = !Permission || Permission.View;
+    return { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView };
   }, [Permission]);
 
-  return { Permission, setPermission, canEdit, canDelete, canDeleteMulti, canSave, canCreate };
+  return { Permission, setPermission, canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView };
 }

package/components/DataManagement/index.jsx

@@ -1,4 +1,4 @@
-import { Button, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import { Button, Card, IconButton, Stack, Tooltip, Typography } from "@mui/material";
 
 import { useEffect, useMemo, useState } from "react";
 
@@ -34,7 +34,10 @@ DataManagement.propTypes = {
   statusKey: PropTypes.string,
   tableActions: PropTypes.array,
   disableEditor: PropTypes.bool,
-  onAddClick: PropTypes.func
+  onAddClick: PropTypes.func,
+  onEditClick: PropTypes.func,
+  tabPanel: PropTypes.node,
+  filterSize: PropTypes.oneOf(["small", "medium"])
 };
 
 function DataManagement({
@@ -42,20 +45,21 @@ function DataManagement({
   title,
   tableName,
   selectedField = "Id",
-  filters : tableFilters = [],
+  filters: tableFilters = [],
   editorFields = [],
   validationSchema = {},
   statusKey = "Status",
   disableStatus = false,
   tableActions = [],
   disableEditor = false,
-  onAddClick = () => {
-    
-  }
+  onAddClick = () => {},
+  onEditClick = () => {},
+  tabPanel,
+  filterSize = "medium"
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
- 
+
   const [Permission, setPermission] = useState(null);
 
   const { defaults, filters } = useMemo(() => {
@@ -67,12 +71,17 @@ function DataManagement({
       return prev;
     }, {});
     return { defaults, filters };
-
   }, [tableFilters]);
-  useEffect(() => {
-    setDataSearch({ ...dataSearch,...defaults });
 
+  useEffect(() => {
+    if (selectedEditItem && disableEditor) {
+      onEditClick(selectedEditItem);
+    }
+  }, [selectedEditItem]);
+  useEffect(() => {
+    setDataSearch({ ...dataSearch, ...defaults });
   }, [filters]);
+
   const [dataSearch, setDataSearch] = useState({ ...defaults });
   const values = useMemo(() => {
     return {
@@ -105,7 +114,7 @@ function DataManagement({
       <DataTableContext.Provider value={values}>
         <PermissionContext.Provider value={permissionValues}>
           <FormProvider {...methods}>
-            <Stack direction="row" justifyContent={"space-between"} sx={{ px: 2, pt: 2 }}>
+            <Stack direction="row" justifyContent={"space-between"} sx={{ mb: 4 }}>
               <Typography variant="h4">{title}</Typography>
               <Stack direction="row" spacing={1}>
                 <Tooltip title="Làm mới">
@@ -113,7 +122,7 @@ function DataManagement({
                     variant="outlined"
                     color="primary"
                     onClick={() => {
-                      setDataSearch({...defaults});
+                      setDataSearch({ ...defaults });
                       [...filters].forEach((filter) => {
                         filter?.onChange?.();
                       });
@@ -143,11 +152,19 @@ function DataManagement({
                 )}
               </Stack>
             </Stack>
-            <FilterGod filters={filters} />
-            <DataTable />
+            <Card>
+              {tabPanel}
+              <FilterGod filters={filters} elementSize={filterSize} />
+              <DataTable />
+            </Card>
           </FormProvider>
           {disableEditor || (
-            <EditorDialog open={openEditorDialog} onClose={() => setOpenEditorDialog(false)} defaultValues={selectedEditItem} fields={editorFields} />
+            <EditorDialog
+              open={openEditorDialog}
+              onClose={() => setOpenEditorDialog(false)}
+              defaultValues={selectedEditItem}
+              fields={editorFields}
+            />
           )}
         </PermissionContext.Provider>
       </DataTableContext.Provider>

package/components/MoreMenu.jsx

@@ -7,8 +7,6 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 // ----------------------------------------------------------------------
 
 MoreMenu.propTypes = {
-  onDelete: PropTypes.func,
-  userName: PropTypes.string,
   actions: PropTypes.array,
   data: PropTypes.any
 };

package/constants/index.js

@@ -1 +1,2 @@
 export const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
+export const DEFAULT_DATETIME_FORMAT = "dd MMM yyyy HH:mm";

package/package.json

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