trithuc-mvc-react 1.0.0

package/api/index.js

@@ -0,0 +1,57 @@
+import axios from "axios";
+const api = axios.create({
+  baseURL: "/",
+  transitional: {
+    silentJSONParsing: false
+  },
+  responseType: "json"
+});
+export default api;
+
+export const getDatasFromTable = async ({ tableName, page, pageSize, data }) => {
+  const res = await api.get(`/Admin/${tableName}/LoadData`, {
+    params: {
+      json: JSON.stringify(data),
+      page,
+      pageSize
+    }
+  });
+  return res.data;
+};
+export const getDataFromTable = async ({ tableName, id }) => {
+  const res = await api.get(`/Admin/${tableName}/GetDetail`, {
+    params: {
+      id
+    }
+  });
+  return res.data;
+};
+export const deleteDataFromTable = async ({ tableName, id }) => {
+  const res = await api.post(`/Admin/${tableName}/Delete`, {
+    id
+  });
+  return res.data;
+};
+export const deleteMultipleDataFromTable = async ({ tableName, ids }) => {
+  const res = await api.post(`/Admin/${tableName}/DeleteMulti`, {
+    ids
+  });
+  return res.data;
+};
+export const saveDataToTable = async ({ tableName, data }) => {
+  const res = await api.post(`/Admin/${tableName}/SaveData`, {
+    json: JSON.stringify({ ...data })
+  });
+  return res.data;
+};
+export const changeStatusDataToTable = async ({ tableName, id }) => {
+  const res = await api.post(`/Admin/${tableName}/ChangeStatus`, {
+    id
+  });
+  return res.data;
+};
+
+export const exportExcel = async ({ tableName }) => {
+  const res = await api.get(`/Admin/${tableName}/ExportData`);
+  return res.data;
+};

package/components/DataManagement/DataTable.jsx

@@ -0,0 +1,186 @@
+import { Table, TableBody, TableContainer } 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 TableRowsLoader from "../table/TableRowsLoader";
+import { toast } from "react-toastify";
+import { useConfirm } from "material-ui-confirm";
+
+import { TableRowRender } from "./TableRowRender";
+import { TableToolbar } from "./TableToolbar";
+import { useDataTable, usePermission } from "./hooks";
+
+const DataTable = () => {
+  const { tableName, selectedField, columns, dataSearch, setOpenEditorDialog, setSelectedEditItem } = useDataTable();
+  const { setPermission, Permission } = usePermission();
+  const queryClient = useQueryClient();
+  const confirm = useConfirm();
+  const [selected, setSelected] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const { data, isLoading } = useQuery({
+    queryKey: [tableName, page, rowsPerPage, dataSearch],
+    queryFn: () =>
+      getDatasFromTable({
+        tableName: tableName,
+        page: page + 1,
+        pageSize: rowsPerPage,
+        data: dataSearch
+      }),
+    keepPreviousData: true,
+    onSuccess: ({ PermissionModel, status }) => {
+      if (!Permission && status) {
+        setPermission(PermissionModel);
+      }
+    }
+  });
+  const changeStatusMutation = useMutation(changeStatusDataToTable, {
+    onSuccess: () => {
+      toast.success("Thay đổi trạng thái thành công !");
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+  const deleteMutation = useMutation(deleteDataFromTable, {
+    onSuccess: ({ status }) => {
+      if (status) {
+        toast.success("Xóa thành công !");
+      } else {
+        toast.error(" Có lỗi xảy ra !");
+      }
+
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+  const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
+    onSuccess: () => {
+      toast.success("Xóa thành công !");
+      setSelected([]);
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+
+  const handleDelete = (id) => {
+    confirm({ description: "Bạn có chắc chắn muốn xóa bản ghi này không?", title: "Xác nhận" })
+      .then(() => {
+        deleteMutation.mutate({
+          id,
+          tableName
+        });
+      })
+      .catch(() => {});
+  };
+  const handleChangeStatus = (Id) => {
+    changeStatusMutation.mutate({
+      tableName,
+      id: Id
+    });
+  };
+  const handlEdit = (item) => {
+    setOpenEditorDialog(true);
+    setSelectedEditItem(item);
+  };
+  const { rows, total } = useMemo(() => {
+    let rows = data?.data ?? [];
+    let total = data?.total ?? 0;
+    return {
+      rows: rows,
+      total
+    };
+  }, [data]);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+  const isSelected = (Id) => selected.indexOf(Id) !== -1;
+  const handleSelect = (event, Id) => {
+    const selectedIndex = selected.indexOf(Id);
+    let newSelected = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, Id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+
+    setSelected(newSelected);
+  };
+  const handleSelectAllClick = (event) => {
+    if (event.target.checked) {
+      const newSelected = rows.map((n) => n[selectedField]);
+      setSelected(newSelected);
+      return;
+    }
+    setSelected([]);
+  };
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+  const handleDeleteMultiple = () => {
+    confirm({ description: `Bạn có chắc chắn muốn xóa ${selected?.length} bản ghi này không?`, title: "Xác nhận" })
+      .then(() => {
+        deleteMultipleMutation.mutate({
+          tableName,
+          ids: selected
+        });
+      })
+      .catch(() => {});
+  };
+  return (
+    <>
+      <TableContainer sx={{ position: "relative" }}>
+        <TableToolbar
+          onSelectAllClick={handleSelectAllClick}
+          numSelected={selected?.length}
+          rowCount={rows.length}
+          onDeleteMultiple={handleDeleteMultiple}
+        />
+        <Table className="border">
+          <TableHead headLabel={columns} onSelectAllClick={handleSelectAllClick} numSelected={selected?.length} rowCount={rows.length} />
+          {isLoading ? (
+            <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
+          ) : (
+            <TableBody>
+              {[...rows].map((row, index) => (
+                <TableRowRender
+                  key={row.Id}
+                  index={index}
+                  row={row}
+                  selected={isSelected(row[selectedField])}
+                  onSelect={handleSelect}
+                  onEdit={handlEdit}
+                  onChangeStatus={handleChangeStatus}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </TableBody>
+          )}
+        </Table>
+      </TableContainer>
+      <TablePaginationCustom
+        count={total}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+    </>
+  );
+};
+export default DataTable;

package/components/DataManagement/EditorDialog.jsx

@@ -0,0 +1,64 @@
+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 "./EditorForm";
+import { usePermission } from "./hooks";
+EditorDialog.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  defaultValues: PropTypes.objectOf({})
+};
+function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [] }) {
+  const [isDisableBtnSave, setIsDisableBtnSave] = useState(false);
+  const { canSave } = usePermission();
+
+  useEffect(() => {}, [defaultValues]);
+
+  const handleSave = async () => {
+    submitRef.current.click();
+    setIsDisableBtnSave(true);
+
+    setIsDisableBtnSave(false);
+  };
+  const submitRef = useRef();
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth={true} scroll={'body'}>
+      <DialogTitle>
+        {defaultValues?.Id ? "Cập nhật" : "Thêm mới"}
+        <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={fields} submitRef={submitRef} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Đóng</Button>
+        {canSave && (
+          <Button onClick={handleSave} disabled={isDisableBtnSave}>
+            Lưu
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}
+export default EditorDialog;

package/components/DataManagement/EditorForm.jsx

@@ -0,0 +1,147 @@
+import { Box } from "@mui/material";
+import { FormProvider, useForm } from "react-hook-form";
+import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
+import PropTypes from "prop-types";
+
+import { useEffect } from "react";
+import moment from "moment/moment";
+
+import { useMutation, useQueryClient } from "react-query";
+import { saveDataToTable } from "../../api";
+import { toast } from "react-toastify";
+import { useDataTable } from "./hooks";
+import FormField from "./FormField";
+import { yupResolver } from "@hookform/resolvers/yup";
+EditorForm.propTypes = {
+  fields: PropTypes.array
+};
+function EditorForm({ fields, elementSize = "medium", submitRef }) {
+  const queryClient = useQueryClient();
+  const { tableName, selectedEditItem, setOpenEditorDialog, validationSchema } = useDataTable();
+
+  const methods = useForm({ defaultValues: {}, resolver: yupResolver(validationSchema) });
+
+  useEffect(() => {
+    if (selectedEditItem) {
+      methods.setValue("Id", selectedEditItem.Id);
+
+      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue }) => {
+        if (type == "autocomplete") {
+          onChange?.({
+            [keyValue]: selectedEditItem[field]
+          });
+        
+          methods.setValue(field, selectedEditItem ? selectedEditItem[field] : defaultValue );
+          methods.setValue(keyValueLabel, selectedEditItem[keyValueLabel]);
+        }else if(type === 'date'){
+          methods.setValue(field, selectedEditItem[field]);
+        } else {
+          methods.setValue(field, selectedEditItem[field]);
+        }
+      });
+
+    }else{
+      fields.forEach(({ field, defaultValue }) => {
+        methods.setValue(field, defaultValue );
+      });
+    }
+  }, [selectedEditItem]);
+
+  const saveMutation = useMutation(saveDataToTable, {
+    onSuccess: ({ status = false }, { data: { Id } }) => {
+      if (status) {
+        toast.success(Id == 0 ? "Thêm thành công!" : "Cập nhật thành công!");
+        queryClient.invalidateQueries(tableName);
+        setOpenEditorDialog(false);
+      } else {
+        toast.error(" Có lỗi xảy ra !");
+      }
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+  const onSubmit = (data) => {
+
+    fields
+      .filter(({ type }) => type === "date")
+      .forEach(({ field }) => {
+        if (data[field]) {
+          data[field] = moment(data[field]).toDate();
+        }
+      });
+      fields
+      .filter(({ type }) => type === "autocomplete")
+      .forEach(({ field, datas, keyValueLabel, keyValue, keyLabel }) => {
+        if (data[field] && !data[keyValueLabel] && keyValueLabel) {
+          data[keyValueLabel] = datas.find((item) => item[keyValue] == data[field])?.[keyLabel];
+        }
+      });
+
+    saveMutation.mutate({
+      tableName,
+      data: {
+        Id: 0,
+        ...data
+      }
+    });
+  };
+  return (
+    <FormProvider {...methods}>
+      <Box component={"form"} sx={{ pt: 2 }} onSubmit={methods.handleSubmit(onSubmit)}>
+        <Grid container spacing={2}>
+          {fields.map(
+            ({
+              field,
+              type = "text",
+              label,
+              childrenFields,
+              datas,
+              loading = false,
+              onChange = () => { },
+              keyLabel,
+              keyValue,
+              keyValueLabel,
+              required
+            }) => {
+              let sizes = {
+                xs: 12,
+                sm: 6,
+                md: 4
+              };
+              if (type == 'textarea') {
+                sizes = {
+                  xs: 12,
+                  sm: 12,
+                  md: 12
+                };
+              }
+              return (
+                <Grid {...sizes} key={field}>
+                  <FormField
+                    type={type}
+                    label={label}
+                    control={methods.control}
+                    name={field}
+                    loading={loading}
+                    onChange={onChange}
+                    keyLabel={keyLabel}
+                    keyValueLabel={keyValueLabel}
+                    datas={datas}
+                    childrenFields={childrenFields}
+                    keyValue={keyValue}
+                    size={elementSize}
+                    required={required}
+                  />
+                </Grid>
+              );
+            }
+          )}
+        </Grid>
+        <button ref={submitRef} type="submit" style={{ display: "none" }} />
+      </Box>
+    </FormProvider>
+  );
+}
+
+export default EditorForm;

package/components/DataManagement/ExportExcelButton.jsx

@@ -0,0 +1,27 @@
+import { toast } from "react-toastify";
+import { exportExcel } from "../../api";
+import { Button } from "@mui/material";
+import { Download } from "@mui/icons-material";
+
+const ExportExcelButton = ({ tableName })=>{
+     const handleExportExcel = async (tableName) => {
+       const data = await exportExcel({ tableName });
+       if (data.status) {
+         window.open(data.url, "_blank").focus();
+       } else {
+         toast.error("Xuất file thất bại!");
+       }
+     };
+    return (
+      <Button
+        variant="outlined"
+        startIcon={<Download />}
+        onClick={() => {
+          handleExportExcel(tableName);
+        }}
+      >
+        Excel
+      </Button>
+    );
+}
+export default ExportExcelButton;

package/components/DataManagement/FilterElement.jsx

@@ -0,0 +1,102 @@
+import {
+  Autocomplete, FormControl, InputAdornment,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select, TextField
+} from "@mui/material";
+import { useCallback } from "react";
+import { SearchOutlined } from "@mui/icons-material";
+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 = () => { } }) {
+  const { control, setValue } = useFormContext();
+
+  const {
+    field: { value, onChange: onFieldChange, ...rest }
+  } = useController({ control, name });
+
+  const { dataSearch, setDataSearch } = useDataTable();
+
+  const handleFilterChangeDebounce = useCallback(
+    debounce((name, value) => {
+      setDataSearch({ ...dataSearch, [name]: value });
+    }, 500),
+    [dataSearch]
+  );
+
+  switch (type) {
+    case "search":
+      return (
+        <OutlinedInput
+          {...rest}
+          fullWidth
+          value={value ?? ""}
+          onChange={(e) => {
+            onFieldChange(e);
+            handleFilterChangeDebounce(name, e.target.value);
+          }}
+          size="small"
+          placeholder={label}
+          startAdornment={<InputAdornment position="start">
+            <SearchOutlined />
+          </InputAdornment>} />
+      );
+
+    case "autocomplete":
+      return (
+        <Autocomplete
+          {...name}
+          disablePortal
+          loading={loading}
+          size="small"
+          fullWidth
+          options={datas ?? []}
+          onChange={(event, newValue) => {
+            let updateObject = { [name]: newValue?.[keyValue] };
+
+            onFieldChange(newValue);
+            onChange(newValue);
+            childrenFields?.forEach((childrenField) => {
+              setValue(childrenField, null, { shouldTouch: true });
+              updateObject[childrenField] = null;
+            });
+            setDataSearch({ ...dataSearch, ...updateObject });
+          }}
+          value={value || null}
+          getOptionLabel={(option) => option?.[keyLabel]}
+          renderInput={(params) => <TextField {...params} label={label} />} />
+      );
+
+    case "select":
+      return (
+        <FormControl sx={{ minWidth: 160 }} size="small" fullWidth>
+          <InputLabel id="demo-simple-select-label">{label}</InputLabel>
+          <Select
+            {...rest}
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            name={name}
+            fullWidth
+            label={label}
+            value={value ?? ""}
+            onChange={(e) => {
+              onFieldChange(e);
+              setDataSearch({ ...dataSearch, [name]: e.target.value });
+            }}
+          >
+            {[...datas].map(({ label, value }) => (
+              <MenuItem key={value} value={value}>
+                {label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      );
+
+    default:
+      return "";
+  }
+}

package/components/DataManagement/FilterGod.jsx

@@ -0,0 +1,83 @@
+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 }) => {
+  const { handleSubmit } = useFormContext();
+  const onSubmit = (data) => console.log(data);
+  const { setDataSearch, dataSearch } = useDataTable();
+
+  return (
+    <Toolbar
+      component={"form"}
+      disableGutters
+      onSubmit={handleSubmit(onSubmit)}
+      sx={{
+        px: 1,
+        my: 2,
+        display: "block"
+      }}
+    >
+      <Grid
+        container
+        rowSpacing={2}
+        columnSpacing={{ xs: 2 }}
+        sx={{
+          px: 1
+        }}
+      >
+        {filters.map(({ field, ...rest }) => {
+          if (rest.type === "date-range") {
+            return (
+              <Grid key={field.toString()} xs={12} sm={6} md={4} xl={3}>
+                <DateRangePicker
+                  onChange={(value) => {
+                    setDataSearch(({ previousState }) => ({
+                      ...previousState,
+                      [field[0]]: value[0],
+                      [field[1]]: value[1]
+                    }));
+                  }}
+                  size="small"
+                  value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
+                />
+              </Grid>
+            );
+          }
+
+          if (rest.type === "slider-range") {
+            return (
+              <Grid key={field.toString()} xs={12} sm={6} md={4} xl={3} sx={{
+                px:4
+              }}>
+                <Slider
+                  onChange={(e, value) => {
+                    setDataSearch({
+                      ...dataSearch,
+                      [field[0]]: value[0],
+                      [field[1]]: value[1]
+                    });
+                  }}
+                  size="small"
+                  marks={rest.marks}
+                  defaultValue={rest.defaultValue}
+                  valueLabelDisplay="auto"
+                  max={rest.marks[rest.marks.length - 1]?.value}
+                  step={null}
+                />
+              </Grid>
+            );
+          }
+          return (
+            <Grid key={field} xs={12} sm={6} md={4} xl={3}>
+              <FilterElement name={field} {...rest} />
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Toolbar>
+  );
+};