trithuc-mvc-react 3.5.5 → 3.5.6

package/components/DataManagement/FilterElement.jsx

@@ -1,6 +1,15 @@
 import { SearchOutlined } from "@mui/icons-material";
 import ClearIcon from "@mui/icons-material/Clear";
-import { Autocomplete, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import {
+  Autocomplete,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField
+} from "@mui/material";
 import { debounce } from "lodash";
 import { useCallback } from "react";
 import { useController, useFormContext } from "react-hook-form";
@@ -78,7 +87,7 @@ export function FilterElement({
       if (multiple) {
         const autocompleteValue = multiple
           ? datas.filter((item) => (value || []).includes(item[keyValue]))
-          : datas.find((item) => item[keyValue] === value) ?? null;
+          : (datas.find((item) => item[keyValue] === value) ?? null);
 
         const parsedValue = multiple ? autocompleteValue : autocompleteValue;
 
@@ -155,7 +164,28 @@ export function FilterElement({
     }
     case "select":
       return (
-        <FormControl sx={{ minWidth: 160 }} size="small" fullWidth>
+        <FormControl
+          sx={{
+            minWidth: 160,
+            // Ép chiều cao của toàn bộ FormControl
+            "& .MuiInputBase-root": {
+              height: "37px" // Bạn có thể chỉnh 36px hoặc 38px cho vừa mắt
+            },
+            "& .MuiOutlinedInput-input": {
+              paddingY: "0px" // Đảm bảo text bên trong căn giữa khi thu nhỏ chiều cao
+            },
+            "& .MuiInputLabel-root": {
+              // Điều chỉnh vị trí label khi thu nhỏ để không bị đè lên border
+              lineHeight: "1em",
+              top: "-2px"
+            },
+            "& .MuiInputLabel-shrink": {
+              top: "0px"
+            }
+          }}
+          size="small"
+          fullWidth
+        >
           <InputLabel shrink={true}>{label}</InputLabel>
           <Select
             {...rest}
@@ -166,6 +196,11 @@ export function FilterElement({
             placeholder={placeholder}
             value={value}
             displayEmpty
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                height: "40px !important"
+              }
+            }}
             onChange={(e) => {
               handleChange(e);
               onFieldChange(e);

package/components/DataManagement/FilterGod.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState, useMemo, useCallback } from "react";
 import {
   Box,
   Button,
@@ -11,10 +11,14 @@ import {
   Grid,
   useTheme,
   Tooltip,
-  Zoom
+  Zoom,
+  IconButton,
+  Slider
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
+import { Clear as ClearIcon } from "@mui/icons-material";
+import { DatePicker } from "@mui/x-date-pickers";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
@@ -22,6 +26,7 @@ import KeyboardArrowUpRoundedIcon from "@mui/icons-material/KeyboardArrowUpRound
 import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
 import moment from "moment";
 import { debounce } from "lodash";
+import { toast } from "react-toastify";
 import "dayjs/locale/vi";
 
 import { FilterElement } from "./FilterElement";
@@ -87,10 +92,17 @@ const ActionButton = styled(Button)(({ theme }) => ({
   }
 }));
 
-export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "small", setPage = () => {} }) => {
+export const FilterGod = ({
+  tableName,
+  filters = [],
+  filterButtons = [],
+  elementSize = "small",
+  setPage = () => {}
+}) => {
   const theme = useTheme();
   const { setDataSearch, dataSearch } = useDataTable();
-  // Đoạn code hoàn chỉnh cho useMemo trong FilterGod
+
+  // 1. Phân loại bộ lọc (Sửa logic: isAdvanced là bộ lọc ẩn)
   const { basicFilters, advancedFilters } = useMemo(() => {
     return {
       // Ưu tiên hiển thị các bộ lọc có gắn tag isAdvanced: true
@@ -104,63 +116,138 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
   }, [filters]);
 
   const [showAdvanced, setShowAdvanced] = useState(
-    () => JSON.parse(localStorage.getItem(`${tableName}-showAdvanced`)) ?? false
+    () => JSON.parse(localStorage.getItem(`${tableName}-isFilterVisible`)) ?? false
   );
 
   useEffect(() => {
-    localStorage.setItem(`${tableName}-showAdvanced`, JSON.stringify(showAdvanced));
-  }, [showAdvanced]);
+    localStorage.setItem(`${tableName}-isFilterVisible`, JSON.stringify(showAdvanced));
+  }, [showAdvanced, tableName]);
+
+  // 2. Hàm xóa giá trị lọc
+  const handleClear = useCallback(
+    (fieldKey) => {
+      setDataSearch((prev) => ({ ...prev, [fieldKey]: null }));
+      setPage(0);
+    },
+    [setDataSearch, setPage]
+  );
 
+  // 3. Render Date Range với Validation
   const renderDateRange = (filter) => {
     const { field, label } = filter;
     const [label1, label2] = Array.isArray(label) ? label : ["Từ ngày", "Đến ngày"];
 
-    const handleDateChange = debounce((newValue, fieldKey) => {
+    const handleDateChange = debounce((newValue, fieldKey, compareKey, compareType) => {
       let formattedDate = null;
+
       if (newValue && moment(newValue).isValid()) {
+        const year = moment(newValue).year();
+        if (year < 1000) return; // Tránh xử lý khi đang gõ dở năm
+
         formattedDate = fieldKey.toLowerCase().includes("from")
           ? moment(newValue).startOf("day").format("YYYY-MM-DD HH:mm")
           : moment(newValue).endOf("day").format("YYYY-MM-DD HH:mm");
+
+        // Logic so sánh ngày
+        const compareDate = dataSearch?.[compareKey] ? moment(dataSearch[compareKey]) : null;
+        if (compareDate) {
+          const isInvalid =
+            (compareType === "min" && moment(formattedDate).isBefore(compareDate)) ||
+            (compareType === "max" && moment(formattedDate).isAfter(compareDate));
+
+          if (isInvalid) {
+            toast.error(
+              compareType === "min" ? "Ngày đến không được nhỏ hơn ngày từ." : "Ngày từ không được lớn hơn ngày đến."
+            );
+            setDataSearch((prev) => ({ ...prev, [fieldKey]: null }));
+            return;
+          }
+        }
       }
+
       setDataSearch((prev) => ({ ...prev, [fieldKey]: formattedDate }));
       setPage(0);
     }, 500);
 
-    const innerDatePicker = (fieldKey, lbl) => (
+    const innerDatePicker = (fieldKey, label, compareKey, compareType) => (
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="vi">
         <DatePicker
-          label={lbl}
+          label={label}
           format="DD/MM/YYYY"
-          value={dataSearch?.[fieldKey] ? moment(dataSearch?.[fieldKey]) : null}
-          onChange={(val) => handleDateChange(val, fieldKey)}
+          desktopModeMediaQuery="@media (min-width: 0px)"
+          views={["year", "month", "day"]}
+          mask="__/__/____"
+          minDate={compareType === "min" ? (dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null) : null}
+          maxDate={compareType === "max" ? (dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null) : null}
+          InputLabelProps={{ shrink: true }}
           slotProps={{
             textField: {
               fullWidth: true,
               size: elementSize,
-              sx: {
-                "& .MuiOutlinedInput-root": {
-                  borderRadius: "6px",
-                  backgroundColor: alpha(theme.palette.common.white, 0.5)
-                }
+              InputLabelProps: { shrink: true },
+              InputProps: {
+                startAdornment: (
+                  <IconButton size="small" onClick={() => handleClear(fieldKey)} sx={{ ml: -1 }}>
+                    <ClearIcon fontSize="small" />
+                  </IconButton>
+                )
               }
-            }
+            },
+            actionBar: { actions: ["clear"] }
           }}
+          value={dataSearch?.[fieldKey] ? moment(dataSearch[fieldKey]) : null}
+          onChange={(val) => handleDateChange(val, fieldKey, compareKey, compareType)}
         />
       </LocalizationProvider>
     );
 
     return (
       <Grid container spacing={1} key={field.toString()}>
-        <Grid size={{ xs: 12, sm: 6 }}>{innerDatePicker(field[0], label1)}</Grid>
-        <Grid size={{ xs: 12, sm: 6 }}>{innerDatePicker(field[1], label2)}</Grid>
+        <Grid size={{ xs: 12, sm: 6 }}>{innerDatePicker(field[0], label1, field[1], "max")}</Grid>
+        <Grid size={{ xs: 12, sm: 6 }}>{innerDatePicker(field[1], label2, field[0], "min")}</Grid>
       </Grid>
     );
   };
 
+  // 4. Render Slider Range
+  const renderSliderRange = (filter) => {
+    const { field, label, marks, defaultValue } = filter;
+
+    const handleSliderChange = debounce((value) => {
+      setDataSearch((prev) => ({
+        ...prev,
+        [field[0]]: value[0],
+        [field[1]]: value[1]
+      }));
+      setPage(0);
+    }, 400);
+
+    return (
+      <Box sx={{ px: 2, pt: 1 }} key={field.toString()}>
+        <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, mb: 1, display: "block" }}>
+          {label}
+        </Typography>
+        <Slider
+          onChange={(_, value) => handleSliderChange(value)}
+          size={elementSize}
+          marks={marks}
+          defaultValue={defaultValue}
+          valueLabelDisplay="auto"
+          max={marks?.[marks.length - 1]?.value || 100}
+          step={null}
+          sx={{
+            "& .MuiSlider-markLabel": { fontSize: "0.7rem" },
+            "& .MuiSlider-valueLabel": { borderRadius: "6px" }
+          }}
+        />
+      </Box>
+    );
+  };
+
   return (
     <Box sx={{ mb: 1 }}>
       <MainCard elevation={0}>
-        {/* Header Header */}
+        {/* Header Section */}
         <Box sx={{ mb: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <Tooltip
             title={
@@ -237,7 +324,7 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
               <Typography
                 sx={{
                   fontWeight: 700,
-                  fontSize: "0.85rem",
+                  fontSize: "0.75rem !important",
                   letterSpacing: "0.2px",
                   color: "text.primary",
                   position: "relative",
@@ -254,7 +341,7 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
                   }
                 }}
               >
-                Bộ Lọc Dữ Liệu
+                BỘ LỌC DỮ LIỆU
               </Typography>
             </Box>
           </Tooltip>
@@ -293,11 +380,13 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
         </Box>
 
         {/* 1. Basic Filters */}
-        <Grid container spacing={2.5}>
+        <Grid container spacing={2}>
           {basicFilters.map((f) => (
             <Grid key={f.field.toString()} size={f.size || { xs: 12, md: 4, lg: 3 }}>
               {f.type === "date-range" ? (
                 renderDateRange(f)
+              ) : f.type === "slider-range" ? (
+                renderSliderRange(f)
               ) : (
                 <FilterElement {...f} name={f.field.toString()} setPage={setPage} size={elementSize} />
               )}
@@ -308,11 +397,13 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
         {/* 2. Advanced Filters */}
         <Collapse in={showAdvanced} timeout={400}>
           <AdvancedSection>
-            <Grid container spacing={2.5}>
+            <Grid container spacing={2}>
               {advancedFilters.map((f) => (
                 <Grid key={f.field.toString()} size={f.size || { xs: 12, md: 4, lg: 3 }}>
                   {f.type === "date-range" ? (
                     renderDateRange(f)
+                  ) : f.type === "slider-range" ? (
+                    renderSliderRange(f)
                   ) : (
                     <FilterElement {...f} name={f.field.toString()} setPage={setPage} size={elementSize} />
                   )}
@@ -321,6 +412,8 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
             </Grid>
           </AdvancedSection>
         </Collapse>
+
+        {/* Action Buttons */}
         {filterButtons.length > 0 && (
           <>
             <Divider sx={{ my: 3, opacity: 0.6 }} />

package/package.json

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