trithuc-mvc-react 3.2.2 → 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

@@ -9,10 +9,12 @@ export function FilterElement({
   name,
   type,
   label,
+  placeholder,
   keyValue,
   keyLabel,
   childrenFields,
   datas,
+  multiple = false,
   loading = false,
   onChange = () => {},
   size = "small",
@@ -43,6 +45,7 @@ export function FilterElement({
       return (
         <TextField
           {...rest}
+          label={label}
           fullWidth
           value={value ?? ""}
           onChange={(e) => {
@@ -50,7 +53,7 @@ export function FilterElement({
             handleFilterChangeDebounce(name, e.target.value);
             setPage(0);
           }}
-          placeholder={label}
+          placeholder={placeholder}
           variant="outlined"
           InputProps={{
             startAdornment: (
@@ -72,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} />}
-        />
-      );
+        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 (
@@ -112,6 +163,7 @@ export function FilterElement({
             fullWidth
             size={size}
             label={label}
+            placeholder={placeholder}
             value={value}
             displayEmpty
             onChange={(e) => {

package/components/DataManagement/FilterGod.jsx

@@ -54,7 +54,7 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
 
         <AccordionDetails>
           <Grid container spacing={1}>
-            {filters.map(({ field, label, size, ...rest }) => {
+            {filters.map(({ field, label, placeHolder, size, ...rest }) => {
               if (rest.type === "date-range") {
                 const [label1, label2] = Array.isArray(label) ? label : ["Từ ngày", "Đến ngày"];
                 const handleClear = (key) => {
@@ -183,7 +183,7 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
               }
               return (
                 <Grid key={field.toString()} size={{ ...size }}>
-                  <FilterElement name={field.toString()} {...rest} setPage={setPage} />
+                  <FilterElement name={field.toString()} label={label} placeholder={placeHolder} {...rest} setPage={setPage} />
                 </Grid>
               );
             })}

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.2",
+  "version": "3.2.4",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"