trithuc-mvc-react 3.2.3 → 3.2.4

package/components/DataManagement/DataTable.jsx

@@ -288,6 +288,15 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
 
   return (
     <>
+      <Grid container>
+        {!hasTabpanel && (
+          <Grid alignSelf={"center"} sx={{ pl: 2 }}>
+            <Typography variant="body1">
+              Tổng số lượng: <span>{total}</span>
+            </Typography>
+          </Grid>
+        )}
+      </Grid>
       <TableContainer sx={{ position: "relative" }}>
         <TableToolbar
           onSelectAllClick={handleSelectAllClick}
@@ -342,14 +351,6 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
       </TableContainer>
 
       <Grid container>
-        {!hasTabpanel && (
-          <Grid alignSelf={"center"} sx={{ pl: 2 }}>
-            <Typography variant="body1">
-              Tổng số lượng: <span>{total}</span>
-            </Typography>
-          </Grid>
-        )}
-
         <Grid size={12}>
           <TablePaginationCustom
             count={total}

package/components/DataManagement/DataTableSM.jsx

@@ -298,6 +298,15 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
 
   return (
     <>
+      <Grid container>
+        {!hasTabpanel && (
+          <Grid alignSelf={"center"} sx={{ pl: 2 }}>
+            <Typography variant="body1">
+              Tổng số lượng: <span>{total}</span>
+            </Typography>
+          </Grid>
+        )}
+      </Grid>
       <TableContainer sx={{ position: "relative" }}>
         <TableToolbar
           onSelectAllClick={handleSelectAllClick}
@@ -352,14 +361,6 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
       </TableContainer>
 
       <Grid container>
-        {!hasTabpanel && (
-          <Grid alignSelf={"center"} sx={{ pl: 2 }}>
-            <Typography variant="body1" sx={{ fontSize: "0.7rem" }}>
-              Tổng số lượng: <span>{total}</span>
-            </Typography>
-          </Grid>
-        )}
-
         <Grid size={12}>
           <TablePaginationCustom
             count={total}

package/components/DataManagement/FilterElement.jsx

@@ -14,6 +14,7 @@ export function FilterElement({
   keyLabel,
   childrenFields,
   datas,
+  multiple = false,
   loading = false,
   onChange = () => {},
   size = "small",
@@ -74,35 +75,83 @@ export function FilterElement({
       );
 
     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
-          key={name}
-          name={name}
-          disablePortal
-          loading={loading}
-          noOptionsText="Không có dữ liệu"
-          fullWidth
-          options={datas ?? []}
-          onChange={(event, newValue) => {
-            let updateObject = { [name]: newValue?.[keyValue] };
-            onFieldChange(newValue?.[keyValue]);
-            onChange(newValue);
-            setPage(0);
-            childrenFields?.forEach((childrenField) => {
-              setValue(childrenField, null, { shouldTouch: true });
-              updateObject[childrenField] = null;
-            });
+      if (multiple) {
+        const autocompleteValue = multiple
+          ? datas.filter((item) => (value || []).includes(item[keyValue]))
+          : datas.find((item) => item[keyValue] === value) ?? null;
 
-            setDataSearch({ ...dataSearch, ...updateObject });
-          }}
-          value={autocompleteValue}
-          getOptionLabel={(option) => option?.[keyLabel]}
-          renderInput={(params) => <TextField {...params} label={label} placeholder={placeholder} />}
-        />
-      );
+        const parsedValue = multiple ? autocompleteValue : autocompleteValue;
+
+        return (
+          <Autocomplete
+            key={name}
+            name={name}
+            disablePortal
+            multiple={multiple}
+            loading={loading}
+            noOptionsText="Không có dữ liệu"
+            fullWidth
+            options={datas}
+            value={parsedValue}
+            onChange={(event, newValue) => {
+              // ✅ Khai báo biến trước khi sử dụng
+              const updateObject = {
+                [name]: multiple ? JSON.stringify(newValue.map((item) => item[keyValue])) : newValue?.[keyValue]
+              };
+
+              if (multiple) {
+                onFieldChange(newValue.map((item) => item[keyValue]));
+              } else {
+                onFieldChange(newValue?.[keyValue]);
+              }
+
+              onChange(newValue);
+              setPage(0);
+
+              // ✅ Xử lý các trường con (nếu có)
+              childrenFields?.forEach((childrenField) => {
+                setValue(childrenField, null, { shouldTouch: true });
+                updateObject[childrenField] = null;
+              });
+
+              // ✅ Cập nhật state tìm kiếm
+              setDataSearch({ ...dataSearch, ...updateObject });
+            }}
+            getOptionLabel={(option) => option?.[keyLabel] || ""}
+            renderInput={(params) => <TextField {...params} label={label} placeholder={placeholder} />}
+          />
+        );
+      } else {
+        //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
+            key={name}
+            name={name}
+            disablePortal
+            loading={loading}
+            noOptionsText="Không có dữ liệu"
+            fullWidth
+            options={datas ?? []}
+            onChange={(event, newValue) => {
+              let updateObject = { [name]: newValue?.[keyValue] };
+              onFieldChange(newValue?.[keyValue]);
+              onChange(newValue);
+              setPage(0);
+              childrenFields?.forEach((childrenField) => {
+                setValue(childrenField, null, { shouldTouch: true });
+                updateObject[childrenField] = null;
+              });
+
+              setDataSearch({ ...dataSearch, ...updateObject });
+            }}
+            value={autocompleteValue}
+            getOptionLabel={(option) => option?.[keyLabel]}
+            renderInput={(params) => <TextField {...params} label={label} placeholder={placeholder} />}
+          />
+        );
+      }
     }
     case "select":
       return (

package/components/DataManagement/index.jsx

@@ -459,7 +459,6 @@ function DataManagement({
             {viewMode === "bieudo" && bieuDo}
           </Card>
         </FormProvider>
-
         {/* nôi dung form */}
         {disableEditor || (
           <EditorDialog

package/package.json

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