trithuc-mvc-react 2.2.1 → 2.3.2

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, 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,6 +172,7 @@ function FormField({
                 options={datas ?? []}
                 onChange={(event, newValue) => {
                   onFieldChange(newValue?.[keyValue]);
+
                   onChange(newValue, {
                     formMethods: {
                       setValue,

package/components/DataManagement/index.jsx

@@ -18,6 +18,7 @@ import { usePermission } from "../../hooks";
 DataManagement.propTypes = {
   columns: PropTypes.array,
   title: PropTypes.string,
+  titleButtons: PropTypes.array,
   tableName: PropTypes.string,
   selectedField: PropTypes.string,
   filters: PropTypes.arrayOf(
@@ -52,6 +53,7 @@ const getDefaultValues = (filters = []) => {
 function DataManagement({
   columns = [],
   title,
+  titleButtons = [],
   tableName,
   selectedField = "Id",
   filters: tableFilters = [],
@@ -110,6 +112,7 @@ function DataManagement({
     return {
       tableName,
       selectedField,
+      titleButtons,
       columns,
       selectedEditItem,
       setSelectedEditItem,
@@ -130,6 +133,7 @@ function DataManagement({
   }, [
     tableName,
     selectedField,
+    titleButtons,
     columns,
     selectedEditItem,
     dataSearch,
@@ -170,6 +174,12 @@ function DataManagement({
                 </IconButton>
               </Tooltip>
 
+              {titleButtons?.map((button, index) => (
+                <div key={index}>
+                  {button}
+                  {/* Các phần tử khác có thể được thêm ở đây nếu cần */}
+                </div>
+              ))}
               <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
               {canCreate && !disableAdd && (
                 <Button
@@ -199,6 +209,7 @@ function DataManagement({
           </Card>
         </FormProvider>
 
+        {/* nôi dung form */}
         {disableEditor || (
           <EditorDialog
             open={openEditorDialog}
@@ -207,6 +218,7 @@ function DataManagement({
             fields={editorFields}
           />
         )}
+        {/* nôi dung view */}
         <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
       </DataTableContext.Provider>
     </>

package/package.json

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