feat: input virtual can join other table

src/App.jsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 const Testing = () => {
         const token = API_TOKEN;
-        const [selectedVehicle, setSelectedVehicle] = useState(null);
+        const [selectedVehicle, setSelectedVehicle] = useState([]);
 
         return (
             <div style={{ padding: 8, marginTop: 12 }}>
@@ -14,29 +14,35 @@ const Testing = () => {
                         Authorization: `Bearer ${token}`,
                     }}
                 >
-{/*                     <ListVirtual
+                    <ListVirtual
                         id="company-select"
                         label="Company"
                         name="name"
                         url="/company"
-                        defaultValue={"442"}
+                        defaultValue={[442,722]}
                         size="small"
                         multiple
-                    /> */}
+                    /> 
                     <ListVirtual
                         label="License Plate"
                         name="license_plate"
                         url="/vehicle"
                         defaultValue={selectedVehicle}
                         getData={(data) => {
-                            if (data) {
+                            const ids = data.map(item => item.id);
-                                setSelectedVehicle(data.id);
+                            setSelectedVehicle(ids);
-                            }
                         }}
                         size="small"
                         filter={[
-                            {name:"company_id",value: "740","logic_operator":"=","operator":"AND"}
+                            {name:"company_id",value: "442,722","logic_operator":"IN","operator":"AND"}
                         ]}
+                        joins={[
+                            {
+                            table: "vehicle_type",
+                            columns: ["min_speed", "max_speed"],
+                            },
+                        ]}
+                        multiple
                     />
                 </ApiProvider>
             </div>

src/components/ListVirtual.jsx

@@ -36,7 +36,8 @@ export default function ListVirtual({
   filter,
 	isApiGo = false,
   multiple,
-  customSxTextField = {}
+  customSxTextField = {},
+  joins = [],
 }) {
   const headersRequest = useApiHeaders();
   const [open, setOpen] = useState(false);
@@ -72,6 +73,14 @@ export default function ListVirtual({
       filter.forEach(f => payload.where(f.logic_operator || "=", f.name, f.value, f.operator || "AND", f.value1 || null, f.table_name || null));
     }
 
+    if (Array.isArray(filter) && filter.some(f => f.name === "company_id")) {
+      payload.addJoin("company", ["name"]);
+    }
+
+    joins.forEach(join => {
+      payload.addJoin(join.table, join.columns);
+    });
+
     try {
       const res = await apiRequest.search(
 				url, 
@@ -121,51 +130,63 @@ export default function ListVirtual({
     }
   }, [open]);
 
-  const fetchById = async (id) => {
+  const fetchDefaultValue = async (value) => {
     setLoading(true);
 
-    const payload = new FilterTableBuilder()
+    const payload = new FilterTableBuilder().setPaging(0, lengthData);
-      .setPaging(0, 1)
+
-      .equal("id", id);
+    if (multiple) {
+      payload.in("id", value);        // value = [1,2,3]
+    } else {
+      payload.equal("id", value);     // value = 1
+    }
 
     try {
       const res = await apiRequest.search(
-				url, 
+        url,
-				payload.build(),
+        payload.build(),
         {
-          headers: headersRequest
+          headers: headersRequest,
         },
         isApiGo,
-			);
+      );
 
-      const data = res.data?.[0];
+      const data = res.data || [];
 
-      if (data) {
+      setSelected(multiple ? data : data[0] || null);
-        setSelected(data);
-      }
     } catch (err) {
       console.error(err);
+    } finally {
+      setLoading(false);
     }
-
-    setLoading(false);
   };
 
   useEffect(() => {
-    if (!defaultValue) return;
+    if (defaultValue == null) return;
 
     if (multiple) {
-      if (Array.isArray(defaultValue)) {
+      // kosong, jangan request
+      if (Array.isArray(defaultValue) && defaultValue.length === 0) {
+        setSelected([]);
+        return;
+      }
+
+      // object
+      if (
+        Array.isArray(defaultValue) &&
+        typeof defaultValue[0] === "object"
+      ) {
         setSelected(defaultValue);
-      } else {
+        return;
-        setSelected([defaultValue]);
       }
     } else {
-      if (Array.isArray(defaultValue)) {
+      if (typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
-        setSelected(defaultValue[0] || null);
-      } else {
         setSelected(defaultValue);
+        return;
       }
     }
+
+    fetchDefaultValue(defaultValue);
   }, [defaultValue, multiple]);
 
   const handleSelect = (row) => {
@@ -201,10 +222,9 @@ export default function ListVirtual({
   };
 
   const displayValue = multiple
-    ? (selected || [])
+    ? (selected?.length > 0
-        .map((x) => x[name]?.trim())
+        ? `${selected.length} ${label} selected`
-        .filter(Boolean)
+        : "")
-        .join(", ")
     : selected?.[name] || "";
 
   const isSelected = (row) => {
@@ -215,6 +235,60 @@ export default function ListVirtual({
     return (selected || []).some((x) => x.id === row.id);
   };
 
+  const handleSelectAll = async () => {
+    setLoading(true);
+
+    const pageSize = 1000;
+    const requests = [];
+
+    for (let offset = 0; offset < totalRecord; offset += pageSize) {
+      const payload = new FilterTableBuilder()
+        .setPaging(offset, pageSize)
+        .setOrder([name], true);
+
+      if (search) {
+        payload.like(name, search);
+      }
+
+      if (filter?.length) {
+        filter.forEach(f =>
+          payload.where(
+            f.logic_operator || "=",
+            f.name,
+            f.value,
+            f.operator || "AND",
+            f.value1 || null,
+            f.table_name || null
+          )
+        );
+      }
+
+      joins.forEach(join => {
+        payload.addJoin(join.table, join.columns);
+      });
+
+      requests.push(
+        apiRequest.search(
+          url,
+          payload.build(),
+          {
+            headers: headersRequest,
+          },
+          isApiGo
+        )
+      );
+    }
+
+    const responses = await Promise.all(requests);
+
+    const allRows = responses.flatMap(res => res.data || []);
+
+    setSelected(allRows);
+    getData?.(allRows);
+
+    setLoading(false);
+  };
+
   return (
     <>
       <TextField
@@ -293,7 +367,7 @@ export default function ListVirtual({
             <>            
               {multiple && (
                 <ListItemButton
-                  onClick={() => console.log("")}
+                  onClick={handleSelectAll}
                   sx={{ fontSize: 14 }}
                 >
                   Select All
@@ -309,7 +383,7 @@ export default function ListVirtual({
                     <Checkbox checked={isSelected(row)} />
                   )}
 
-                  <ListItemText primary={row[name]} />
+                  <ListItemText primary={row[name]} secondary={row.join?.company_name} />
                 </ListItemButton>
               ))}