trithuc-mvc-react 3.5.5 → 3.5.7

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,16 +412,18 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
             </Grid>
           </AdvancedSection>
         </Collapse>
+
+        {/* Action Buttons */}
         {filterButtons.length > 0 && (
           <>
-            <Divider sx={{ my: 3, opacity: 0.6 }} />
+            <Divider sx={{ my: "5px", opacity: 0.6 }} />
             <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2 }}>
               {filterButtons.map((btn, idx) => (
                 <ActionButton
                   key={idx}
                   size={elementSize}
-                  variant={btn.variant || "contained"}
-                  color={btn.color || "primary"}
+                  variant={btn.variant || "outlined"}
+                  color={btn.color || "#1976d2 !important"}
                   onClick={() => btn.onClick({ dataSearch })}
                   startIcon={btn.element}
                   disableElevation

package/components/DataManagement/TableRowRender.jsx

@@ -135,18 +135,20 @@ export const TableRowRender = ({
               </IconButton>
             </Tooltip>
           )}
-          {tableActionsOnTable.map(({ title, onClick, element, visible }) => (
-            <Tooltip key={title} title={title} hidden={typeof visible === "function" && !visible(row)}>
-              <IconButton
-                size={downXl ? "small" : "medium"}
-                onClick={() => {
-                  onClick(row);
-                }}
-              >
-                {element}
-              </IconButton>
-            </Tooltip>
-          ))}
+          {tableActionsOnTable.map(({ title, onClick, element, visible }) => {
+            // Kiểm tra điều kiện hiển thị ở đây
+            if (typeof visible === "function" && !visible(row)) {
+              return null;
+            }
+
+            return (
+              <Tooltip key={title} title={title}>
+                <IconButton size={downXl ? "small" : "medium"} onClick={() => onClick(row)}>
+                  {element}
+                </IconButton>
+              </Tooltip>
+            );
+          })}
 
           {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
         </TableCell>

package/components/DataManagement/TableRowRenderSM.jsx

@@ -148,15 +148,7 @@ export const TableRowRenderSM = ({
           )}
 
           {/* Các nút thao tác */}
-          <Box
-            mt={2}
-            pt={1}
-            borderTop="1px solid"
-            borderColor="divider"
-            display="flex"
-            flexDirection="column"
-            gap={1}
-          >
+          <Box mt={2} pt={1} borderTop="1px solid" borderColor="divider" display="flex" flexDirection="column" gap={1}>
             {!disableCellThaoTac && (
               <>
                 <Box display="grid" gridTemplateColumns={isMobile ? "repeat(3, 1fr)" : "auto"} gap={0.5}>
@@ -295,52 +287,56 @@ export const TableRowRenderSM = ({
                     </Tooltip>
                   )}
 
-                  {tableActionsOnTable.map(
-                    ({ title, onClick, element, visible = true }, idx) =>
-                      (typeof visible === "function" ? visible(row) : visible) && (
-                        <Tooltip key={idx} title={title} arrow placement="top">
-                          <span>
-                            <Button
-                              fullWidth
-                              size="small"
-                              variant="outlined"
-                              onClick={() => onClick(row)}
-                              startIcon={element}
-                              sx={{
-                                ...modernButtonStyle,
-                                minHeight: 36,
-                                paddingX: 1,
-                                gap: 0.5,
-                                whiteSpace: "normal",
+                  {tableActionsOnTable.map(({ title, onClick, element, visible = true }, idx) => {
+                    // Kiểm tra điều kiện hiển thị: nếu là function thì thực thi, nếu không thì lấy giá trị bool
+                    const isVisible = typeof visible === "function" ? visible(row) : visible;
 
-                                "& .MuiButton-startIcon": {
-                                  marginRight: 0.5,
-                                  marginLeft: 0,
-                                  alignSelf: "center"
-                                },
-                                "& .MuiButton-startIcon svg": {
-                                  fontSize: 18
-                                }
+                    if (!isVisible) return null;
+
+                    return (
+                      <Tooltip key={idx} title={title} arrow placement="top">
+                        <span>
+                          <Button
+                            fullWidth
+                            size="small"
+                            variant="outlined"
+                            onClick={() => onClick(row)}
+                            startIcon={element}
+                            sx={{
+                              ...modernButtonStyle,
+                              minHeight: 36,
+                              paddingX: 1,
+                              gap: 0.5,
+                              whiteSpace: "normal",
+                              "& .MuiButton-startIcon": {
+                                marginRight: 0.5,
+                                marginLeft: 0,
+                                alignSelf: "center"
+                              },
+                              "& .MuiButton-startIcon svg": {
+                                fontSize: 18
+                              }
+                            }}
+                          >
+                            <span
+                              style={{
+                                display: "-webkit-box",
+                                WebkitLineClamp: 2,
+                                WebkitBoxOrient: "vertical",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                lineHeight: 1.25,
+                                textAlign: "center"
                               }}
                             >
-                              <span
-                                style={{
-                                  display: "-webkit-box",
-                                  WebkitLineClamp: 2,
-                                  WebkitBoxOrient: "vertical",
-                                  overflow: "hidden",
-                                  textOverflow: "ellipsis",
-                                  lineHeight: 1.25,
-                                  textAlign: "center"
-                                }}
-                              >
-                                {title === "xem chi tiết" ? "Xem" : title}
-                              </span>
-                            </Button>
-                          </span>
-                        </Tooltip>
-                      )
-                  )}
+                              {/* Logic đổi tên title nếu cần */}
+                              {title.toLowerCase() === "xem chi tiết" ? "Xem" : title}
+                            </span>
+                          </Button>
+                        </span>
+                      </Tooltip>
+                    );
+                  })}
                 </Box>
 
                 {/* More menu luôn nằm riêng 1 hàng */}

package/package.json

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