fix: listvirtual last data if has more data request again

2026-06-23 14:48:39 +07:00
parent 1797af7ba9
commit a6371b64fa
7 changed files with 4562 additions and 3663 deletions
@@ -11,7 +11,8 @@ import {
  ListItemText,
  Typography,
  InputAdornment,
-  IconButton
+  IconButton,
+  Checkbox
 } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import FilterTableBuilder from "../utils/filterTableBuilder";
@@ -34,6 +35,7 @@ export default function ListVirtual({
  helperText,
  filter,
 	isApiGo = false,
+  multiple
 }) {
  const headersRequest = useApiHeaders();
  const [open, setOpen] = useState(false);
@@ -79,6 +81,8 @@ export default function ListVirtual({
        isApiGo,
 			);
      const incomingData = res.data || [];
+
+      console.log("res", res)
      
      setRows(prev => isAppend ? [...prev, ...incomingData] : incomingData);
      setTotalRecord(res.totalRecord || 0);
@@ -92,12 +96,24 @@ export default function ListVirtual({

  const handleScroll = (e) => {
    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    
+
+    console.log({
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+      rows: rows.length,
+      totalRecord,
+      loading,
+    });
+
    const isAtBottom = scrollHeight - scrollTop <= clientHeight + 20;
-    
+
    if (isAtBottom && !loading && rows.length < totalRecord) {
      const nextOffset = offset + lengthData;
-      fetchData(search, nextOffset, true); 
+
+      console.log("LOAD MORE", nextOffset);
+
+      fetchData(search, nextOffset, true);
    }
  };

@@ -149,27 +165,67 @@ export default function ListVirtual({
  useEffect(() => {
    if (!defaultValue) return;

-    if (typeof defaultValue === "object") {
-      setSelected(defaultValue);
+    if (multiple) {
+      if (Array.isArray(defaultValue)) {
+        setSelected(defaultValue);
+      } else {
+        setSelected([defaultValue]);
+      }
    } else {
-      fetchById(defaultValue);
+      if (Array.isArray(defaultValue)) {
+        setSelected(defaultValue[0] || null);
+      } else {
+        setSelected(defaultValue);
+      }
    }
-  }, [defaultValue]);
+  }, [defaultValue, multiple]);

  const handleSelect = (row) => {
-    setSelected(row);
-    setOpen(false);
-    setSearch("");
-    getData && getData(row);
+    if (!multiple) {
+      setSelected(row);
+      setOpen(false);
+      setSearch("");
+      getData?.(row);
+      return;
+    }
+
+    setSelected((prev) => {
+      const current = Array.isArray(prev) ? prev : [];
+
+      const exists = current.some((x) => x.id === row.id);
+
+      const result = exists
+        ? current.filter((x) => x.id !== row.id)
+        : [...current, row];
+
+      getData?.(result);
+
+      return result;
+    });
  };

  const handleClear = () => {
-    setSelected(null);
+    setSelected(multiple ? [] : null);
    setSearch("");
    setRows([]);
-    getData && getData(null);
+
+    getData?.(multiple ? [] : null);
+  };
+
+  const displayValue = multiple
+    ? (selected || [])
+        .map((x) => x[name]?.trim())
+        .filter(Boolean)
+        .join(", ")
+    : selected?.[name] || "";
+
+  const isSelected = (row) => {
+    if (!multiple) {
+      return selected?.id === row.id;
+    }
+
+    return (selected || []).some((x) => x.id === row.id);
  };
-  const displayValue = selected ? selected[name] : value || "";

  return (
    <>
@@ -216,7 +272,20 @@ export default function ListVirtual({
        <DialogTitle sx={{ fontSize: 14 }}>Search {label}</DialogTitle>
        <DialogContent 
          onScroll={handleScroll} 
-          sx={{ height: 400, overflowY: "auto", py: 0 }}
+          sx={{
+            '& .MuiTypography-root': {
+              fontSize: 14,
+            },
+            '& .MuiInputBase-input': {
+              fontSize: 14,
+            },
+            '& .MuiInputLabel-root': {
+              fontSize: 14,
+            },
+            '& .MuiButton-root': {
+              fontSize: 14,
+            },
+          }}
        >
          <TextField
            fullWidth
@@ -232,17 +301,35 @@ export default function ListVirtual({
          />

          <List disablePadding>
-            {rows.map((row, i) => (
-              <ListItemButton key={`${row.id}-${i}`} onClick={() => handleSelect(row)}>
-                <ListItemText primary={row[name]} slotProps={{ primary: { fontSize: 14 } }} />
-              </ListItemButton>
-            ))}
-            
-            {loading && (
-               <Typography variant="caption" sx={{ display: 'block', textAlign: 'center', p: 1 }}>
-                 Loading more...
-               </Typography>
-            )}
+            <>            
+              {multiple && (
+                <ListItemButton
+                  onClick={() => console.log("")}
+                  sx={{ fontSize: 14 }}
+                >
+                  Select All
+                </ListItemButton>
+              )}
+
+              {rows.map((row, i) => (
+                <ListItemButton
+                  key={`${row.id}-${i}`}
+                  onClick={() => handleSelect(row)}
+                >
+                  {multiple && (
+                    <Checkbox checked={isSelected(row)} />
+                  )}
+
+                  <ListItemText primary={row[name]} />
+                </ListItemButton>
+              ))}
+              
+              {loading && (
+                <Typography variant="caption" sx={{ display: 'block', textAlign: 'center', p: 1 }}>
+                  Loading more...
+                </Typography>
+              )}
+            </>
          </List>

          {!loading && rows.length === 0 && (