trithuc-mvc-react 1.0.0

package/components/DataManagement/FormField.jsx

@@ -0,0 +1,240 @@
+import {
+  Autocomplete,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  InputLabel,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+  Switch,
+  TextField
+} from "@mui/material";
+import { Controller,  useFormContext } from "react-hook-form";
+// Grid version 2
+import PropTypes from "prop-types";
+import { DatePicker } from "@mui/x-date-pickers";
+import { useCallback, useEffect, } from "react";
+import moment from "moment/moment";
+import { DEFAULT_DATE_FORMAT } from "../../constants";
+
+
+FormField.propTypes = {
+  datas: PropTypes.array,
+  loading: PropTypes.bool
+};
+function FormField({
+  type = "text",
+  control,
+  label,
+  name,
+  loading,
+  datas = [],
+  onChange,
+  keyLabel,
+  keyValue,
+  keyValueLabel,
+  childrenFields,
+  size,
+  required = false
+}) {
+  const { setValue, register } = useFormContext();
+  const getValueObject = useCallback(
+    (value) => {
+      if (!value) return null;
+      const result = [...datas].find((item) => item[keyValue] == value);
+
+      return result;
+    },
+    [datas]
+  );
+
+  useEffect(() => {
+    if (keyValueLabel) {
+      register(keyValueLabel);
+    }
+  }, []);
+
+
+  switch (type) {
+    case "textarea":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <TextField
+                {...field}
+                multiline
+                label={label + (required ? "*" : "")}
+                error={Boolean(error)}
+                helperText={error?.message}
+                fullWidth
+                placeholder={label}
+                size={size}
+              />
+            );
+          }}
+        />
+      );
+
+    case "text":
+    case "number":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <TextField
+                {...field}
+                type={type}
+                label={label + (required ? "*" : "")}
+                error={Boolean(error)}
+                helperText={error?.message}
+                fullWidth
+                placeholder={label}
+                size={size}
+              />
+            );
+          }}
+        />
+      );
+
+    case "autocomplete": {
+      if (keyValueLabel) {
+        register(keyValueLabel);
+      }
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field: { onChange: onFieldChange, value }, fieldState: { error } }) => {
+            return (
+              <Autocomplete
+                disablePortal
+                loading={loading}
+                size={size}
+                options={datas ?? []}
+                onChange={(event, newValue) => {
+                  onFieldChange(newValue?.[keyValue]);
+                  onChange(newValue);
+                  if (keyValueLabel) {
+                    setValue(keyValueLabel, newValue?.[keyLabel]);
+                  }
+                }}
+                value={getValueObject(value)}
+                fullWidth
+                getOptionLabel={(option) => option[keyLabel]}
+                renderInput={(params) => <TextField {...params} label={label} error={Boolean(error)} helperText={error?.message} />}
+              />
+            );
+          }}
+        />
+      );
+    }
+
+    case "select":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field }) => (
+            <FormControl sx={{ minWidth: 160 }} fullWidth size={size}>
+              <InputLabel>{label}</InputLabel>
+              <Select {...field} label={label}>
+                {[...datas].map(({ label, value }) => (
+                  <MenuItem key={value} value={value}>
+                    {label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+      );
+    case "radios":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          defaultValue={null}
+          render={({ field }) => {
+            return (
+              <FormControl fullWidth size={size}>
+                <FormLabel>{label}</FormLabel>
+                <RadioGroup row {...field}>
+                  {[...datas].map(({ label, value }) => (
+                    <FormControlLabel key={value} value={value} control={<Radio />} label={label} />
+                  ))}
+                </RadioGroup>
+              </FormControl>
+            );
+          }}
+        />
+      );
+    case "checkbox":
+      return (
+        <>
+          <Controller
+            name={name}
+            control={control}
+            render={({ field }) => <FormControlLabel control={<Checkbox {...field} checked={field.value} />} label={label} />}
+          />
+
+          {/* {errors.terms && (
+                      <FormHelperText sx={{ px: 2 }} error>
+                        {errors.terms.message}
+                      </FormHelperText>
+                    )} */}
+        </>
+      );
+    case "switch":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          defaultValue={true}
+          render={({ field }) => <FormControlLabel control={<Switch {...field} checked={field.value} />} label={label} />}
+        />
+      );
+    case "date":
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field, fieldState: { error } }) => {
+            if (field.value && typeof field.value === "string") {
+              field.value = moment(field.value);
+            }
+            return (
+              <DatePicker
+                label={label + (required ? "*" : "")}
+                {...field}
+                format={DEFAULT_DATE_FORMAT}
+                slotProps={{
+                  textField: {
+                    fullWidth: true, error: Boolean(error),
+                    helperText: error?.message
+                  },
+                  popper: {
+                    disablePortal: false,
+                    popperOptions: {
+                      strategy: 'fixed'
+                    },
+                  }
+                }}
+
+
+              />
+            );
+          }}
+        />
+      );
+  }
+}
+
+export default FormField;

package/components/DataManagement/TableHead.jsx

@@ -0,0 +1,26 @@
+import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead } from "@mui/material";
+import { useDataTable, usePermission } from "./hooks";
+export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
+  const { canEdit } = usePermission();
+  return (
+    <MuiTableHead sx={{ height: 56, visibility: numSelected > 0 ? "hidden" : "visible" }}>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+          />
+        </TableCell>
+        <TableCell sx={{ fontWeight: 700 }}>STT</TableCell>
+        {headLabel.map((headCell) => (
+          <TableCell key={headCell.field} align={headCell.alignRight ? "right" : "left"} sx={{ fontWeight: 700 }}>
+            {headCell.label}
+          </TableCell>
+        ))}
+        {canEdit && <TableCell>Kích hoạt</TableCell>}
+        <TableCell>Thao tác</TableCell>
+      </TableRow>
+    </MuiTableHead>
+  );
+}

package/components/DataManagement/TableRowRender.jsx

@@ -0,0 +1,82 @@
+import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar } from "@mui/material";
+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";
+
+export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit }) => {
+  const { selectedField, columns } = useDataTable();
+  const { canEdit, canDelete } = usePermission();
+  return (
+    <TableRow hover key={row[selectedField]} selected={selected}>
+      <TableCell padding="checkbox">
+        <Checkbox checked={selected} onChange={(event) => onSelect(event, row[selectedField])} />
+      </TableCell>
+      <TableCell>{index + 1}</TableCell>
+      {columns.map(
+        ({
+          field,
+          alignRight = false,
+          valueGetter = (row) => {
+            return row[field];
+          },
+          valueFormat = (e) => e
+        }) => {
+          return (
+            <TableCell key={`${row[selectedField]}-${field}`} align={alignRight ? "right" : "left"}>
+              {valueFormat(valueGetter(row))}
+            </TableCell>
+          );
+        }
+      )}
+      {canEdit && (
+        <TableCell>
+          <Switch
+            checked={row.Status}
+            onChange={() => {
+              onChangeStatus(row[selectedField]);
+            }}
+            inputProps={{ "aria-label": "controlled" }}
+          />
+        </TableCell>
+      )}
+
+      <TableCell>
+        {canEdit && (
+          <Tooltip title="Chỉnh sửa">
+            <IconButton onClick={() => onEdit(row)}>
+              <EditOutlined color="primary" />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        {canDelete && (
+          <Tooltip title="Xóa">
+            <IconButton
+              onClick={() => {
+                onDelete(row[selectedField]);
+              }}
+            >
+              <DeleteOutlineIcon color="error" />
+            </IconButton>
+          </Tooltip>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+};
+
+// ----------------------------------------------------------------------
+
+export const RootStyle = styled(Toolbar)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: theme.spacing(0, 1, 0, 1),
+  height: 56,
+  minHeight: 50
+}));
+
+

package/components/DataManagement/TableToolbar.jsx

@@ -0,0 +1,57 @@
+import { Checkbox, IconButton, Tooltip, Typography, Box } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import { usePermission } from "./hooks";
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material/styles";
+import { RootStyle } from "./TableRowRender";
+
+// ----------------------------------------------------------------------
+TableToolbar.propTypes = {
+  numSelected: PropTypes.number,
+  filterName: PropTypes.string,
+  onFilterName: PropTypes.func
+};
+
+export const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultiple }) => {
+  const theme = useTheme();
+  const isLight = theme.palette.mode === "light";
+  const { canDeleteMulti } = usePermission();
+
+  return (
+    numSelected > 0 && (
+      <RootStyle
+        variant="dense"
+        disableGutters={true}
+        padding="checkbox"
+        sx={{
+          position: "absolute",
+          paddingLeft: 1,
+          width: "100%",
+          ...(numSelected > 0 && {
+            color: isLight ? "primary.main" : "text.primary",
+            bgcolor: isLight ? "primary.lighter" : "primary.dark"
+          })
+        }}
+      >
+        <Box padding="checkbox" sx={{ display: "flex", alignItems: "center" }}>
+          <Checkbox
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+          />
+          <Typography component="div" variant="subtitle1" style={{ p: 4 }}>
+            đã chọn {numSelected} mục
+          </Typography>
+        </Box>
+
+        {canDeleteMulti && (
+          <Tooltip title="Xóa tất cả" onClick={onDeleteMultiple}>
+            <IconButton>
+              <Delete color="primary" />
+            </IconButton>
+          </Tooltip>
+        )}
+      </RootStyle>
+    )
+  );
+};

package/components/DataManagement/context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+
+export const DataTableContext = createContext({ tableName: null });
+export const PermissionContext = createContext(null);

package/components/DataManagement/hooks.js

@@ -0,0 +1,19 @@
+import { useContext, useMemo } from "react";
+import { DataTableContext, PermissionContext } from "./context";
+
+export function useDataTable() {
+  return useContext(DataTableContext);
+}
+export function usePermission() {
+  const { Permission, setPermission } = useContext(PermissionContext);
+  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate } = 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 };
+  }, [Permission]);
+
+  return { Permission, setPermission, canEdit, canDelete, canDeleteMulti, canSave, canCreate };
+}

package/components/DataManagement/index.jsx

@@ -0,0 +1,107 @@
+import { Button, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+
+import { useMemo, useState } from "react";
+
+import { DataTableContext, PermissionContext } from "./context";
+import PropTypes from "prop-types";
+import DataTable from "./DataTable";
+import { Add, Refresh } from "@mui/icons-material";
+
+import { FormProvider, useForm } from "react-hook-form";
+import EditorDialog from "./EditorDialog";
+
+import ExportExcelButton from "./ExportExcelButton";
+import { FilterGod } from "./FilterGod";
+
+DataManagement.propTypes = {
+  columns: PropTypes.array,
+  title: PropTypes.string,
+  tableName: PropTypes.string,
+  selectedField: PropTypes.string,
+  filter: PropTypes.arrayOf(
+    PropTypes.shape({
+      field: PropTypes.string,
+      label: PropTypes.string,
+      placeHolder: PropTypes.string,
+      type: PropTypes.oneOf(["text", "number", "date", "autocomplete", "checkbox", "radio", "switch"]),
+      onChangeAfter: PropTypes.func,
+      filters: PropTypes.array
+    })
+  )
+};
+
+function DataManagement({ columns = [], title, tableName, selectedField = "Id", filters, editorFields, validationSchema = {} }) {
+  const [openEditorDialog, setOpenEditorDialog] = useState(false);
+  const [selectedEditItem, setSelectedEditItem] = useState(null);
+  const [dataSearch, setDataSearch] = useState({});
+  const [Permission, setPermission] = useState(null);
+
+  const values = useMemo(() => {
+    return {
+      tableName,
+      selectedField,
+      columns,
+      selectedEditItem,
+      setSelectedEditItem,
+      setOpenEditorDialog,
+      dataSearch,
+      setDataSearch,
+      validationSchema
+    };
+  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema]);
+  const permissionValues = useMemo(() => {
+    return {
+      Permission,
+      setPermission
+    };
+  }, [Permission, setPermission]);
+  const methods = useForm({ defaultValues: {} });
+  const { reset, setValue } = methods;
+
+  return (
+    <>
+      <DataTableContext.Provider value={values}>
+        <PermissionContext.Provider value={permissionValues}>
+          <FormProvider {...methods}>
+            <Stack direction="row" justifyContent={"space-between"} sx={{ px: 2, pt: 2 }}>
+              <Typography variant="h4">{title}</Typography>
+              <Stack direction="row" spacing={1}>
+                <Tooltip title="Làm mới">
+                  <IconButton
+                    variant="outlined"
+                    color="primary"
+                    onClick={() => {
+                      setDataSearch({});
+                      reset();
+                      setValue("Search");
+                    }}
+                  >
+                    <Refresh />
+                  </IconButton>
+                </Tooltip>
+
+                <ExportExcelButton tableName={tableName} />
+                {(!Permission || Permission.Create) && (
+                  <Button
+                    variant="contained"
+                    startIcon={<Add />}
+                    onClick={() => {
+                      setOpenEditorDialog(true);
+                      setSelectedEditItem(null);
+                    }}
+                  >
+                    Thêm
+                  </Button>
+                )}
+              </Stack>
+            </Stack>
+            <FilterGod filters={filters} />
+            <DataTable />
+          </FormProvider>
+          <EditorDialog open={openEditorDialog} onClose={() => setOpenEditorDialog(false)} defaultValues={selectedEditItem} fields={editorFields} />
+        </PermissionContext.Provider>
+      </DataTableContext.Provider>
+    </>
+  );
+}
+export default DataManagement;

package/components/date/DateRangePicker.jsx

@@ -0,0 +1,143 @@
+import { DateField } from "@mui/x-date-pickers";
+import { DEFAULT_DATE_FORMAT } from "../../constants";
+import { Popover, Popper, Stack, Typography } from "@mui/material";
+import StaticDateRangePicker from "./StaticDateRangePicker";
+import moment from "moment";
+import { memo, useEffect, useRef, useState } from "react";
+import * as dateFns from "date-fns";
+import ClickAwayListener from "@mui/base/ClickAwayListener";
+
+const DateRangePicker = ({ onChange = () => {}, value }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const [dateRange, setDateRange] = useState({
+    startDate: value?.[0],
+    endDate: value?.[1]
+  });
+
+  const handleFocus = (event) => {
+    setAnchorEl(containerRef.current);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleClickAway = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (dateFns.isBefore(dateRange.startDate, dateRange.endDate) || dateFns.isSameDay(dateRange.startDate, dateRange.endDate)) {
+      onChange([dateRange.startDate, dateRange.endDate]);
+    }
+  }, [dateRange]);
+
+  useEffect(() => {
+    if (!value) return;
+    if (dateFns.isSameDay(dateRange.startDate, value[0]) && dateFns.isSameDay(dateRange.endDate, value[1])) {
+      return;
+    }
+    setDateRange({
+      startDate: value?.[0],
+      endDate: value?.[1]
+    });
+  }, [value]);
+
+  return (
+    <>
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <Stack ref={containerRef} direction={"row"} alignContent={"center"} spacing={1}>
+          <DateField
+            sx={{ flex: 1 }}
+            format={DEFAULT_DATE_FORMAT}
+            onFocus={handleFocus}
+            label="From"
+            onChange={(value) => {
+              setDateRange((d) => ({
+                ...d,
+                startDate: value.toDate()
+              }));
+            }}
+            value={dateRange.startDate && moment(dateRange.startDate)}
+            size="small"
+            maxDate={dateRange.endDate ?? moment(dateRange.endDate)}
+          />
+          <Typography variant="body1" sx={{ height: "24px", alignSelf: "center" }}>
+            –
+          </Typography>
+          <DateField
+            sx={{ flex: 1 }}
+            format={DEFAULT_DATE_FORMAT}
+            label="To"
+            onFocus={handleFocus}
+            onChange={(value) => {
+              setDateRange((d) => ({
+                ...d,
+                endDate: value.toDate()
+              }));
+            
+            }}
+            value={dateRange.endDate && moment(dateRange.endDate)}
+            size="small"
+            minDate={dateRange.startDate ?? moment(dateRange.startDate)}
+          />
+
+          <Popper
+            sx={{
+              zIndex: 1036
+            }}
+            keepMounted
+            placement="bottom-start"
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            disablePortal={false}
+            modifiers={[
+              {
+                name: "flip",
+                enabled: true,
+                options: {
+                  altBoundary: true,
+                  rootBoundary: "viewport",
+                  padding: 8
+                }
+              },
+              {
+                name: "preventOverflow",
+                enabled: true,
+                options: {
+                  altAxis: true,
+                  altBoundary: true,
+                  tether: true,
+                  rootBoundary: "document",
+                  padding: 8
+                }
+              }
+            ]}
+          >
+            <StaticDateRangePicker
+              value={dateRange}
+              onUpdate={(value) => {
+                setDateRange(value);
+              }}
+            />
+          </Popper>
+        </Stack>
+      </ClickAwayListener>
+    </>
+  );
+};
+const DateRangePickerMemo = memo(DateRangePicker, (prevProps, nextProps) => {
+  try {
+    if (dateFns.isSameDay(prevProps.value[0], nextProps.value[0]) && dateFns.isSameDay(prevProps.value[1], nextProps.value[1])) {
+      return true; // props are equal
+    }
+  } catch (error) {
+    console.log(error);
+  }
+
+  return false; // props are not equal -> update the component
+});
+export default DateRangePickerMemo;