trithuc-mvc-react 2.1.1 → 2.3.1

package/components/DataManagement/EditorForm.jsx

@@ -28,13 +28,27 @@ function EditorForm({ fields, submitRef }) {
     if (selectedEditItem) {
       setValue("Id", selectedEditItem.Id);
 
-      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue }) => {
+      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue, ...rest }) => {
+        let value = selectedEditItem[field];
+
         if (type == "autocomplete") {
+          if (rest.multiple) {
+            console.log("setvalue multiple", field, value);
+            try {
+              value = JSON.parse(value);
+              if (!(value instanceof Array)) {
+                value = [];
+              }
+            } catch (error) {
+              value = [];
+            }
+          }
+
           onChange?.({
-            [keyValue]: selectedEditItem[field]
+            [keyValue]: value
           });
 
-          setValue(field, selectedEditItem ? selectedEditItem[field] : defaultValue);
+          setValue(field, selectedEditItem ? value : defaultValue);
           setValue(keyValueLabel, selectedEditItem[keyValueLabel]);
         } else if (type === "date") {
           setValue(field, selectedEditItem[field]);
@@ -93,6 +107,10 @@ function EditorForm({ fields, submitRef }) {
         if (data[field] && !data[keyValueLabel] && keyValueLabel) {
           data[keyValueLabel] = datas.find((item) => item[keyValue] == data[field])?.[keyLabel];
         }
+
+        if (data[field] instanceof Array) {
+          data[field] = JSON.stringify(data[field]);
+        }
       } else if (type === "file") {
         if (data[field]) {
           data[field] = JSON.stringify(data[field]);

package/components/DataManagement/FormField.jsx

@@ -41,15 +41,21 @@ function FormField({
   size,
   required = false,
   disabled = false,
+  multiple = false,
   ...rest
 }) {
-  const { setValue, register } = useFormContext();
+  const { setValue, resetField, register, ...restForm } = useFormContext();
   const getValueObject = useCallback(
     (value) => {
-      if (!value) return null;
-      const result = [...datas].find((item) => item[keyValue] == value);
-
-      return result;
+      if (multiple) {
+        if (!value) return [];
+        const result = [...datas].filter((item) => value.some((v) => v == item[keyValue]));
+        return result;
+      } else {
+        if (!value) return null;
+        const result = [...datas].find((item) => item[keyValue] == value);
+        return result;
+      }
     },
     [datas]
   );
@@ -110,6 +116,47 @@ function FormField({
       if (keyValueLabel) {
         register(keyValueLabel);
       }
+
+      if (multiple) {
+        return (
+          <Controller
+            name={name}
+            control={control}
+            render={({ field: { onChange: onFieldChange, value }, fieldState: { error } }) => {
+              return (
+                <Autocomplete
+                  multiple
+                  disabled={disabled}
+                  disablePortal
+                  noOptionsText="Không có dữ liệu"
+                  loading={loading}
+                  size={size}
+                  options={datas ?? []}
+                  onChange={(event, newValue) => {
+                    console.log(newValue);
+                    onFieldChange(newValue.map((item) => item[keyValue]));
+
+                    onChange(newValue, {
+                      formMethods: {
+                        setValue,
+                        resetField,
+                        ...restForm
+                      }
+                    });
+                  }}
+                  value={getValueObject(value)}
+                  fullWidth
+                  getOptionLabel={(option) => option[keyLabel]}
+                  renderInput={(params) => (
+                    <TextField {...params} label={label} error={Boolean(error)} helperText={error?.message} />
+                  )}
+                  {...rest}
+                />
+              );
+            }}
+          />
+        );
+      }
       return (
         <Controller
           name={name}
@@ -125,7 +172,14 @@ function FormField({
                 options={datas ?? []}
                 onChange={(event, newValue) => {
                   onFieldChange(newValue?.[keyValue]);
-                  onChange(newValue);
+
+                  onChange(newValue, {
+                    formMethods: {
+                      setValue,
+                      resetField,
+                      ...restForm
+                    }
+                  });
                   if (keyValueLabel) {
                     setValue(keyValueLabel, newValue?.[keyLabel]);
                   }

package/package.json

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