trithuc-mvc-react 1.0.13 → 1.2.0

package/components/DataManagement/FormField.jsx

@@ -198,7 +198,7 @@ function FormField({
         <Controller
           name={name}
           control={control}
-          // defaultValue={true}
+          defaultValue={true}
           render={({ field }) => <FormControlLabel control={<Switch {...field} checked={field.value} />} label={label} />}
         />
       );

package/components/DataManagement/TableHead.jsx

@@ -2,6 +2,7 @@ import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead } from "@mui/m
 import { useDataTable, usePermission } from "./hooks";
 export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
   const { canEdit } = usePermission();
+  const { disableStatus } = useDataTable();
   return (
     <MuiTableHead sx={{ height: 56, visibility: numSelected > 0 ? "hidden" : "visible" }}>
       <TableRow>
@@ -18,8 +19,8 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
             {headCell.label}
           </TableCell>
         ))}
-        {canEdit && <TableCell>Kích hoạt</TableCell>}
-        <TableCell>Thao tác</TableCell>
+        {!disableStatus && canEdit && <TableCell>Kích hoạt</TableCell>}
+        <TableCell sx={{minWidth: '136px'}}>Thao tác</TableCell>
       </TableRow>
     </MuiTableHead>
   );

package/components/DataManagement/TableRowRender.jsx

@@ -6,10 +6,15 @@ import { useDataTable, usePermission } from "./hooks";
 
 // material
 import { styled } from "@mui/material/styles";
+import MoreMenu from "../MoreMenu";
+
+
+
 
 export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit }) => {
-  const { selectedField, columns } = useDataTable();
+  const { selectedField, columns, statusKey, disableStatus, tableActions } = useDataTable();
   const { canEdit, canDelete } = usePermission();
+  console.log("tableActions", tableActions);
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell padding="checkbox">
@@ -23,19 +28,20 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
           valueGetter = (row) => {
             return row[field];
           },
+          renderCell,
           valueFormat = (e) => e
         }) => {
           return (
             <TableCell key={`${row[selectedField]}-${field}`} align={alignRight ? "right" : "left"}>
-              {valueFormat(valueGetter(row))}
+              {renderCell ? renderCell(row) : valueFormat(valueGetter(row))}
             </TableCell>
           );
         }
       )}
-      {canEdit && (
+      {!disableStatus && canEdit && (
         <TableCell>
           <Switch
-            checked={row.Status}
+            checked={row[statusKey]}
             onChange={() => {
               onChangeStatus(row[selectedField]);
             }}
@@ -64,6 +70,8 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
             </IconButton>
           </Tooltip>
         )}
+
+        {<MoreMenu actions={tableActions} data={row}/>}
       </TableCell>
     </TableRow>
   );

package/components/DataManagement/index.jsx

@@ -27,10 +27,32 @@ DataManagement.propTypes = {
       onChangeAfter: PropTypes.func,
       filters: PropTypes.array
     })
-  )
+  ),
+  editorFields: PropTypes.array,
+  validationSchema: PropTypes.object,
+  disableStatus: PropTypes.bool,
+  statusKey: PropTypes.string,
+  tableActions: PropTypes.array,
+  disableEditor: PropTypes.bool,
+  onAddClick: PropTypes.func
 };
 
-function DataManagement({ columns = [], title, tableName, selectedField = "Id", filters, editorFields, validationSchema = {} }) {
+function DataManagement({
+  columns = [],
+  title,
+  tableName,
+  selectedField = "Id",
+  filters,
+  editorFields = [],
+  validationSchema = {},
+  statusKey = "Status",
+  disableStatus = false,
+  tableActions = [],
+  disableEditor = false,
+  onAddClick = () => {
+    
+  }
+}) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [dataSearch, setDataSearch] = useState({});
@@ -46,9 +68,13 @@ function DataManagement({ columns = [], title, tableName, selectedField = "Id",
       setOpenEditorDialog,
       dataSearch,
       setDataSearch,
-      validationSchema
+      validationSchema,
+      statusKey,
+      disableStatus,
+
+      tableActions
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema]);
+  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions]);
   const permissionValues = useMemo(() => {
     return {
       Permission,
@@ -88,9 +114,12 @@ function DataManagement({ columns = [], title, tableName, selectedField = "Id",
                   <Button
                     variant="contained"
                     startIcon={<Add />}
-                    onClick={() => {
-                      setOpenEditorDialog(true);
-                      setSelectedEditItem(null);
+                    onClick={(e) => {
+                      if (!disableEditor) {
+                        setOpenEditorDialog(true);
+                        setSelectedEditItem(null);
+                      }
+                      onAddClick(e);
                     }}
                   >
                     Thêm
@@ -101,7 +130,9 @@ function DataManagement({ columns = [], title, tableName, selectedField = "Id",
             <FilterGod filters={filters} />
             <DataTable />
           </FormProvider>
-          <EditorDialog open={openEditorDialog} onClose={() => setOpenEditorDialog(false)} defaultValues={selectedEditItem} fields={editorFields} />
+          {disableEditor || (
+            <EditorDialog open={openEditorDialog} onClose={() => setOpenEditorDialog(false)} defaultValues={selectedEditItem} fields={editorFields} />
+          )}
         </PermissionContext.Provider>
       </DataTableContext.Provider>
     </>

package/components/MoreMenu.jsx

@@ -0,0 +1,50 @@
+import PropTypes from "prop-types";
+import { useRef, useState } from "react";
+
+// material
+import { Menu, MenuItem, IconButton, ListItemIcon, ListItemText } from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+// ----------------------------------------------------------------------
+
+MoreMenu.propTypes = {
+  onDelete: PropTypes.func,
+  userName: PropTypes.string,
+  actions: PropTypes.array,
+  data: PropTypes.any
+};
+
+export default function MoreMenu({ data, actions }) {
+  const ref = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (actions?.length == 0) {
+    return null;
+  }
+  return (
+    <>
+      <IconButton ref={ref} onClick={() => setIsOpen(true)}>
+        <MoreVertIcon />
+      </IconButton>
+
+      <Menu
+        open={isOpen}
+        anchorEl={ref.current}
+        onClose={() => setIsOpen(false)}
+        slotProps={{
+          paper: {
+            sx: { width: 200, maxWidth: "100%" }
+          }
+        }}
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+      >
+        {[...actions].map(({ title, onClick, element }) => (
+          <MenuItem key={title} onClick={() => onClick(data)} sx={{ color: "text.secondary" }}>
+            <ListItemIcon>{element}</ListItemIcon>
+            <ListItemText primary={title} primaryTypographyProps={{ variant: "body2" }} />
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

package/components/form/DynamicForm.jsx

@@ -0,0 +1,99 @@
+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 FormField from "./FormField";
+import { yupResolver } from "@hookform/resolvers/yup";
+EditorForm.propTypes = {
+  fields: PropTypes.array
+};
+function EditorForm({ fields, elementSize = "medium", submitRef, validationSchema, onSubmit }) {
+
+  const methods = useForm({ defaultValues: {}, resolver: yupResolver(validationSchema) });
+
+  const handleSubmit = (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];
+        }
+      });
+      
+      onSubmit(data);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <Box component={"form"} sx={{ pt: 2 }} onSubmit={methods.handleSubmit(handleSubmit)}>
+        <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/form/FormField.jsx

@@ -0,0 +1,241 @@
+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
+                noOptionsText="Không có dữ liệu"
+                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/package.json

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