trithuc-mvc-react 1.8.10 → 1.9.1

package/components/DataManagement/EditorForm.jsx

@@ -134,7 +134,8 @@ function EditorForm({ fields, submitRef }) {
               keyValue,
               keyValueLabel,
               required,
-              disabled = false
+              disabled = false,
+              ...rest
             }) => {
               return (
                 <Grid item md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
@@ -153,6 +154,7 @@ function EditorForm({ fields, submitRef }) {
                     size={elementSize}
                     required={required}
                     disabled={disabled}
+                    {...rest}
                   />
                 </Grid>
               );

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,31 +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]);
+
             onChange(newValue);
+
             childrenFields?.forEach((childrenField) => {
               setValue(childrenField, null, { shouldTouch: true });
               updateObject[childrenField] = null;
             });
+
             setDataSearch({ ...dataSearch, ...updateObject });
           }}
-          value={datas?.find((item) => item[keyValue] === value)}
+          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/FormField.jsx

@@ -16,13 +16,12 @@ 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 { useCallback, useEffect } from "react";
 import moment from "moment/moment";
 import { DEFAULT_DATE_FORMAT } from "../../constants";
 import UploadMultipleFile from "./upload/UploadMultipleFile";
 import RhfUploadAvatar from "./upload/RhfUploadAvatar";
 
-
 FormField.propTypes = {
   datas: PropTypes.array,
   loading: PropTypes.bool
@@ -38,10 +37,11 @@ function FormField({
   keyLabel,
   keyValue,
   keyValueLabel,
-  childrenFields,
+
   size,
   required = false,
-  disabled = false
+  disabled = false,
+  ...rest
 }) {
   const { setValue, register } = useFormContext();
   const getValueObject = useCallback(
@@ -60,7 +60,6 @@ function FormField({
     }
   }, []);
 
-
   switch (type) {
     case "textarea":
       return (
@@ -134,7 +133,10 @@ function FormField({
                 value={getValueObject(value)}
                 fullWidth
                 getOptionLabel={(option) => option[keyLabel]}
-                renderInput={(params) => <TextField {...params} label={label} error={Boolean(error)} helperText={error?.message} />}
+                renderInput={(params) => (
+                  <TextField {...params} label={label} error={Boolean(error)} helperText={error?.message} />
+                )}
+                {...rest}
               />
             );
           }}
@@ -187,7 +189,9 @@ function FormField({
           <Controller
             name={name}
             control={control}
-            render={({ field }) => <FormControlLabel disabled={disabled} control={<Checkbox {...field} checked={field.value} />} label={label} />}
+            render={({ field }) => (
+              <FormControlLabel disabled={disabled} control={<Checkbox {...field} checked={field.value} />} label={label} />
+            )}
           />
 
           {/* {errors.terms && (
@@ -271,9 +275,7 @@ function FormField({
         />
       );
     case "file":
-      return (
-        <UploadMultipleFile name={name} label={label} disabled={disabled} />
-      );
+      return <UploadMultipleFile name={name} label={label} disabled={disabled} />;
     case "avatar":
       return (
         <Controller

package/components/DataManagement/index.jsx

@@ -44,8 +44,8 @@ DataManagement.propTypes = {
 };
 const getDefaultValues = (filters = []) => {
   const defaultValues = {};
-  filters.forEach((filter) => {
-    defaultValues[filter.field] = filter.defaultValue;
+  filters.forEach(({ defaultValue, field }) => {
+    defaultValues[field] = defaultValue;
   });
   return defaultValues;
 };
@@ -141,7 +141,7 @@ function DataManagement({
 
   const methods = useForm({ defaultValues: getDefaultValues(filters) });
   const { reset, setValue } = methods;
-  console.log("filters", filters);
+
   return (
     <>
       <DataTableContext.Provider value={values}>

package/package.json

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