feat input virtual

src/components/ListVirtual.jsx

@@ -0,0 +1,256 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import {
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  List,
+  ListItemButton,
+  ListItemText,
+  Typography,
+  InputAdornment,
+  IconButton
+} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import FilterTableBuilder from "../utils/filterTableBuilder";
+import { apiRequest } from "../api/request";
+
+export default function ListVirtual({
+  id,
+  label,
+  name,
+  url,
+  lengthData = 100,
+  getData,
+  defaultValue,
+  value,
+  required,
+  disabled,
+  error = false,
+  size = 'medium',
+  helperText,
+  filter,
+	isApiGo = false,
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [rows, setRows] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [totalRecord, setTotalRecord] = useState(0);
+
+    const debounce = (fn, delay = 400) => {
+			let timeout;
+
+			return (...args) => {
+				clearTimeout(timeout);
+
+				timeout = setTimeout(() => {
+					fn(...args);
+				}, delay);
+			};
+    };
+
+  const fetchData = useCallback(async (keyword = "", currentOffset = 0, isAppend = false) => {
+    setLoading(true);
+
+    const payload = new FilterTableBuilder()
+      .setPaging(currentOffset, lengthData)
+      .setOrder([name], true);
+
+    if (keyword) payload.like(name, keyword);
+    
+    if (filter && filter.length > 0) {
+        filter.forEach(f => payload.where(f.logic_operator || "=", f.name, f.value, f.operator || "AND", f.value1 || null, f.table_name || null));
+    }
+
+    try {
+      const res = await apiRequest.search(
+				url, 
+				payload.build(),
+				{},
+				{ isApiGo }
+			);
+      const incomingData = res.data || [];
+      
+      setRows(prev => isAppend ? [...prev, ...incomingData] : incomingData);
+      setTotalRecord(res.totalRecord || 0);
+      setOffset(currentOffset);
+    } catch (err) {
+      console.error("Fetch Error:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [url, name, lengthData, filter]);
+
+  const handleScroll = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    
+    const isAtBottom = scrollHeight - scrollTop <= clientHeight + 20;
+    
+    if (isAtBottom && !loading && rows.length < totalRecord) {
+      const nextOffset = offset + lengthData;
+      fetchData(search, nextOffset, true); 
+    }
+  };
+
+  const debouncedFetch = useMemo(
+    () =>
+      debounce((keyword) => {
+        setOffset(0); 
+        fetchData(keyword, 0, false);
+      }, 400),
+    [fetchData]
+  );
+
+  useEffect(() => {
+    if (open) {
+        setOffset(0);
+        fetchData(search, 0, false);
+    }
+  }, [open]);
+
+  const fetchById = async (id) => {
+    setLoading(true);
+
+    const payload = new FilterTableBuilder()
+      .setPaging(0, 1)
+      .equal("id", id);
+
+    try {
+			const res = await apiRequest.search(
+				url,
+				payload.build(),
+				{},
+				{ isApiGo }
+			);
+
+      const data = res.data?.[0];
+
+      if (data) {
+        setSelected(data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (!defaultValue) return;
+
+    if (typeof defaultValue === "object") {
+      setSelected(defaultValue);
+    } else {
+      fetchById(defaultValue);
+    }
+  }, [defaultValue]);
+
+  const handleSelect = (row) => {
+    setSelected(row);
+    setOpen(false);
+    setSearch("");
+    getData && getData(row);
+  };
+
+  const handleClear = () => {
+    setSelected(null);
+    setSearch("");
+    setRows([]);
+    getData && getData(null);
+  };
+  const displayValue = selected ? selected[name] : value || "";
+
+  return (
+    <>
+      <TextField
+        id={id}
+        label={label}
+        value={displayValue}
+        fullWidth
+        required={required}
+        disabled={disabled}
+        size={size}
+        helperText={helperText}
+        error={!!error}
+        onClick={() => !disabled && setOpen(true)}
+        sx={{
+          '& .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'error.main',
+          }
+        }}
+        slotProps={{
+          input: {
+            endAdornment: selected && (
+              <InputAdornment position="end">
+                <IconButton 
+                  size="small"  
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClear();
+                  }}>
+                  <ClearIcon sx={{ fontSize: 16 }} />
+                </IconButton>
+              </InputAdornment>
+            )
+          },
+          formHelperText: {
+            sx: {
+              marginLeft: 0,
+            }
+          }
+        }}
+      />
+
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+        <DialogTitle sx={{ fontSize: 14 }}>Search {label}</DialogTitle>
+        <DialogContent 
+          onScroll={handleScroll} 
+          sx={{ height: 400, overflowY: "auto", py: 0 }}
+        >
+          <TextField
+            fullWidth
+            autoFocus
+            placeholder={`Search ${label}`}
+            size="small"
+            sx={{ my: 2, position: 'sticky', top: 0, zIndex: 10, bgcolor: 'background.paper' }}
+            onChange={(e) => {
+              const val = e.target.value;
+              setSearch(val);
+              debouncedFetch(val);
+            }}
+          />
+
+          <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>
+            )}
+          </List>
+
+          {!loading && rows.length === 0 && (
+            <Typography sx={{ textAlign: "center", fontSize: 12, color: "text.secondary", py: 3 }}>
+              No Data
+            </Typography>
+          )}
+        </DialogContent>
+
+        <DialogActions>
+          <Button onClick={handleClear} size="small">Clear</Button>
+          <Button onClick={() => setOpen(false)} size="small">Cancel</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}