trithuc-mvc-react 1.1.0 → 1.3.0

package/components/DataManagement/TableRowRender.jsx

@@ -28,11 +28,12 @@ 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>
           );
         }

package/components/DataManagement/index.jsx

@@ -1,6 +1,6 @@
 import { Button, IconButton, Stack, Tooltip, Typography } from "@mui/material";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { DataTableContext, PermissionContext } from "./context";
 import PropTypes from "prop-types";
@@ -32,7 +32,9 @@ DataManagement.propTypes = {
   validationSchema: PropTypes.object,
   disableStatus: PropTypes.bool,
   statusKey: PropTypes.string,
-  tableActions: PropTypes.array
+  tableActions: PropTypes.array,
+  disableEditor: PropTypes.bool,
+  onAddClick: PropTypes.func
 };
 
 function DataManagement({
@@ -40,18 +42,38 @@ function DataManagement({
   title,
   tableName,
   selectedField = "Id",
-  filters,
-  editorFields,
+  filters : tableFilters = [],
+  editorFields = [],
   validationSchema = {},
   statusKey = "Status",
   disableStatus = false,
-  tableActions = []
+  tableActions = [],
+  disableEditor = false,
+  onAddClick = () => {
+    
+  }
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
-  const [dataSearch, setDataSearch] = useState({});
+ 
   const [Permission, setPermission] = useState(null);
 
+  const { defaults, filters } = useMemo(() => {
+    const filters = tableFilters.filter(({ type }) => type !== "default");
+    const defaultFilters = tableFilters.filter(({ type }) => type === "default");
+
+    const defaults = defaultFilters.reduce((prev, { field, value }) => {
+      prev[field] = value;
+      return prev;
+    }, {});
+    return { defaults, filters };
+
+  }, [tableFilters]);
+  useEffect(() => {
+    setDataSearch({ ...dataSearch,...defaults });
+
+  }, [filters]);
+  const [dataSearch, setDataSearch] = useState({ ...defaults });
   const values = useMemo(() => {
     return {
       tableName,
@@ -65,6 +87,7 @@ function DataManagement({
       validationSchema,
       statusKey,
       disableStatus,
+
       tableActions
     };
   }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions]);
@@ -90,7 +113,7 @@ function DataManagement({
                     variant="outlined"
                     color="primary"
                     onClick={() => {
-                      setDataSearch({});
+                      setDataSearch({...defaults});
                       [...filters].forEach((filter) => {
                         filter?.onChange?.();
                       });
@@ -107,9 +130,12 @@ function DataManagement({
                   <Button
                     variant="contained"
                     startIcon={<Add />}
-                    onClick={() => {
-                      setOpenEditorDialog(true);
-                      setSelectedEditItem(null);
+                    onClick={(e) => {
+                      if (!disableEditor) {
+                        setOpenEditorDialog(true);
+                        setSelectedEditItem(null);
+                      }
+                      onAddClick(e);
                     }}
                   >
                     Thêm
@@ -120,7 +146,9 @@ function DataManagement({
             <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/form/DynamicForm.jsx

@@ -0,0 +1,95 @@
+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 moment from "moment/moment";
+
+
+import FormField from "./FormField";
+import { yupResolver } from "@hookform/resolvers/yup";
+DynamicForm.propTypes = {
+  fields: PropTypes.array
+};
+function DynamicForm({ 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 DynamicForm;

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.1.0",
+  "version": "1.3.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"