trithuc-mvc-react 1.8.9 → 1.8.11

package/components/DataManagement/FilterElement.jsx

@@ -1,5 +1,5 @@
 import { Autocomplete, FormControl, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select, TextField } from "@mui/material";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { SearchOutlined } from "@mui/icons-material";
 import { useController, useFormContext } from "react-hook-form";
 import { debounce } from "lodash";
@@ -55,32 +55,38 @@ export function FilterElement({
         />
       );
 
-    case "autocomplete":
+    case "autocomplete": {
+      //Bùa bởi vì không hiện giá trị đầu tiên
+      let autocompleteValue = datas?.find((item) => item[keyValue] == dataSearch[name]);
+      autocompleteValue = autocompleteValue ? { ...autocompleteValue } : { [keyLabel]: "" };
       return (
         <Autocomplete
-          {...name}
+          key={name}
+          name={name}
           disablePortal
           loading={loading}
           noOptionsText="Không có dữ liệu"
           fullWidth
           options={datas ?? []}
-          onChange={(event, newValue) => {
+          onChange={(event, newValue, reason) => {
             let updateObject = { [name]: newValue?.[keyValue] };
+            onFieldChange(newValue?.[keyValue]);
 
-            onFieldChange(newValue);
             onChange(newValue);
+
             childrenFields?.forEach((childrenField) => {
               setValue(childrenField, null, { shouldTouch: true });
               updateObject[childrenField] = null;
             });
+
             setDataSearch({ ...dataSearch, ...updateObject });
           }}
-          value={value || null}
+          value={autocompleteValue}
           getOptionLabel={(option) => option?.[keyLabel]}
           renderInput={(params) => <TextField {...params} label={label} />}
         />
       );
-
+    }
     case "select":
       return (
         <FormControl sx={{ minWidth: 160 }} size="small" fullWidth>

package/components/DataManagement/index.jsx

@@ -16,191 +16,197 @@ import { FilterGod } from "./FilterGod";
 import { usePermission } from "../../hooks";
 
 DataManagement.propTypes = {
-    columns: PropTypes.array,
-    title: PropTypes.string,
-    tableName: PropTypes.string,
-    selectedField: PropTypes.string,
-    filters: 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
-        })
-    ),
-    editorFields: PropTypes.array,
-    validationSchema: PropTypes.object,
-    disableStatus: PropTypes.bool,
-    disableAdd: PropTypes.bool,
-    disableCellThaoTac: PropTypes.bool,
-    statusKey: PropTypes.string,
-    tableActions: PropTypes.array,
-    disableEditor: PropTypes.bool,
-    onAddClick: PropTypes.func,
-    onEditClick: PropTypes.func,
-    tabPanel: PropTypes.node
+  columns: PropTypes.array,
+  title: PropTypes.string,
+  tableName: PropTypes.string,
+  selectedField: PropTypes.string,
+  filters: 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
+    })
+  ),
+  editorFields: PropTypes.array,
+  validationSchema: PropTypes.object,
+  disableStatus: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableCellThaoTac: PropTypes.bool,
+  statusKey: PropTypes.string,
+  tableActions: PropTypes.array,
+  disableEditor: PropTypes.bool,
+  onAddClick: PropTypes.func,
+  onEditClick: PropTypes.func,
+  tabPanel: PropTypes.node
+};
+const getDefaultValues = (filters = []) => {
+  const defaultValues = {};
+  filters.forEach(({ defaultValue, field }) => {
+    defaultValues[field] = defaultValue;
+  });
+  return defaultValues;
 };
-
 function DataManagement({
-    columns = [],
-    title,
-    tableName,
-    selectedField = "Id",
-    filters: tableFilters = [],
-    editorFields = [],
-    validationSchema = {},
-    statusKey = "Status",
-    disableStatus = false,
-    disableAdd = false,
-    disableCellThaoTac = false,
-
-    tableActions = [],
-    multipleActions = [],
-
-    disableEditor = false,
-    onAddClick = () => {},
-    onEditClick = () => {},
-    tabPanel,
-    backParentNavigator,
-    slotProps = {
-        header: {
-            sx: {}
-        }
+  columns = [],
+  title,
+  tableName,
+  selectedField = "Id",
+  filters: tableFilters = [],
+  editorFields = [],
+  validationSchema = {},
+  statusKey = "Status",
+  disableStatus = false,
+  disableAdd = false,
+  disableCellThaoTac = false,
+
+  tableActions = [],
+  multipleActions = [],
+
+  disableEditor = false,
+  onAddClick = () => {},
+  onEditClick = () => {},
+  tabPanel,
+  backParentNavigator,
+  slotProps = {
+    header: {
+      sx: {}
     }
+  }
 }) {
-    const [openEditorDialog, setOpenEditorDialog] = useState(false);
-    const [selectedEditItem, setSelectedEditItem] = useState(null);
-    const [openViewDialog, setOpenViewDialog] = useState(false);
-
-    const { canCreate } = usePermission(tableName);
-    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]);
-
-    const theme = useTheme();
-    const upXL = useMediaQuery(theme.breakpoints.up("xl"));
-    const elementSize = useMemo(() => {
-        const elementSize = upXL ? "medium" : "small";
-        return elementSize;
-    }, [upXL]);
-
-    useEffect(() => {
-        setDataSearch({ ...dataSearch, ...defaults });
-    }, [filters]);
-
-    const [dataSearch, setDataSearch] = useState({ ...defaults });
-    const values = useMemo(() => {
-        const hasTabpanel = !!tabPanel;
-        return {
-            tableName,
-            selectedField,
-            columns,
-            selectedEditItem,
-            setSelectedEditItem,
-            setOpenEditorDialog,
-            setOpenViewDialog,
-            dataSearch,
-            setDataSearch,
-            validationSchema,
-            statusKey,
-            disableStatus,
-            disableCellThaoTac,
-            disableAdd,
-            tableActions,
-            onEditClick,
-            hasTabpanel
-        };
-    }, [
-        tableName,
-        selectedField,
-        columns,
-        selectedEditItem,
-        dataSearch,
-        setDataSearch,
-        validationSchema,
-        tableActions,
-        openViewDialog,
-        setOpenViewDialog,
-        onEditClick,
-    ]);
-
-    const methods = useForm({ defaultValues: {} });
-    const { reset, setValue } = methods;
-
-    return (
-        <>
-            <DataTableContext.Provider value={values}>
-                <FormProvider {...methods}>
-                    <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
-                        <Typography variant="h4">{title}</Typography>
-                        <Stack direction="row" spacing={1}>
-                            <Tooltip title="Làm mới">
-                                <IconButton
-                                    variant="outlined"
-                                    color="primary"
-                                    size={elementSize}
-                                    onClick={() => {
-                                        setDataSearch({ ...defaults });
-                                        [...filters].forEach((filter) => {
-                                            filter?.onChange?.();
-                                        });
-                                        reset();
-                                        setValue("Search");
-                                    }}
-                                >
-                                    <Refresh fontSize="inherit" />
-                                </IconButton>
-                            </Tooltip>
-
-                            <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
-                            {canCreate && !disableAdd && (
-                                <Button
-                                    size={elementSize}
-                                    variant="contained"
-                                    startIcon={<Add fontSize="inherit" />}
-                                    onClick={(e) => {
-                                        if (!disableEditor) {
-                                            setOpenEditorDialog(true);
-                                            setSelectedEditItem(null);
-                                        }
-                                        onAddClick(e);
-                                    }}
-                                >
-                                    Thêm
-                                </Button>
-                            )}
-                        </Stack>
-                    </Stack>
-
-                    <Card>
-                        {tabPanel}
-                        <FilterGod filters={filters} elementSize={elementSize} />
-                        {backParentNavigator}
-
-                        <DataTable multipleActions={multipleActions} />
-                    </Card>
-                </FormProvider>
-
-                {disableEditor || (
-                    <EditorDialog
-                        open={openEditorDialog}
-                        onClose={() => setOpenEditorDialog(false)}
-                        defaultValues={selectedEditItem}
-                        fields={editorFields}
-                    />
-                )}
-                <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
-            </DataTableContext.Provider>
-        </>
-    );
+  const [openEditorDialog, setOpenEditorDialog] = useState(false);
+  const [selectedEditItem, setSelectedEditItem] = useState(null);
+  const [openViewDialog, setOpenViewDialog] = useState(false);
+
+  const { canCreate } = usePermission(tableName);
+  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]);
+
+  const theme = useTheme();
+  const upXL = useMediaQuery(theme.breakpoints.up("xl"));
+  const elementSize = useMemo(() => {
+    const elementSize = upXL ? "medium" : "small";
+    return elementSize;
+  }, [upXL]);
+
+  useEffect(() => {
+    setDataSearch({ ...dataSearch, ...defaults });
+  }, [filters]);
+
+  const [dataSearch, setDataSearch] = useState({ ...defaults, ...getDefaultValues(filters) });
+  const values = useMemo(() => {
+    const hasTabpanel = !!tabPanel;
+    return {
+      tableName,
+      selectedField,
+      columns,
+      selectedEditItem,
+      setSelectedEditItem,
+      setOpenEditorDialog,
+      setOpenViewDialog,
+      dataSearch,
+      setDataSearch,
+      validationSchema,
+      statusKey,
+      disableStatus,
+      disableCellThaoTac,
+      disableAdd,
+      tableActions,
+      onEditClick,
+      hasTabpanel
+    };
+  }, [
+    tableName,
+    selectedField,
+    columns,
+    selectedEditItem,
+    dataSearch,
+    setDataSearch,
+    validationSchema,
+    tableActions,
+    openViewDialog,
+    setOpenViewDialog,
+    onEditClick
+  ]);
+
+  const methods = useForm({ defaultValues: getDefaultValues(filters) });
+  const { reset, setValue } = methods;
+  console.log("filters", filters);
+  return (
+    <>
+      <DataTableContext.Provider value={values}>
+        <FormProvider {...methods}>
+          <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
+            <Typography variant="h4">{title}</Typography>
+            <Stack direction="row" spacing={1}>
+              <Tooltip title="Làm mới">
+                <IconButton
+                  variant="outlined"
+                  color="primary"
+                  size={elementSize}
+                  onClick={() => {
+                    setDataSearch({ ...defaults });
+                    [...filters].forEach((filter) => {
+                      filter?.onChange?.();
+                    });
+                    reset();
+                    setValue("Search");
+                  }}
+                >
+                  <Refresh fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+
+              <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
+              {canCreate && !disableAdd && (
+                <Button
+                  size={elementSize}
+                  variant="contained"
+                  startIcon={<Add fontSize="inherit" />}
+                  onClick={(e) => {
+                    if (!disableEditor) {
+                      setOpenEditorDialog(true);
+                      setSelectedEditItem(null);
+                    }
+                    onAddClick(e);
+                  }}
+                >
+                  Thêm
+                </Button>
+              )}
+            </Stack>
+          </Stack>
+
+          <Card>
+            {tabPanel}
+            <FilterGod filters={filters} elementSize={elementSize} />
+            {backParentNavigator}
+
+            <DataTable multipleActions={multipleActions} />
+          </Card>
+        </FormProvider>
+
+        {disableEditor || (
+          <EditorDialog
+            open={openEditorDialog}
+            onClose={() => setOpenEditorDialog(false)}
+            defaultValues={selectedEditItem}
+            fields={editorFields}
+          />
+        )}
+        <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
+      </DataTableContext.Provider>
+    </>
+  );
 }
 export default DataManagement;

package/package.json

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