feat(list-virtual): enchance UI

2026-08-11 11:20:24 +07:00
parent ceeef16de9
commit 467fbb89c9
3 changed files with 3741 additions and 3568 deletions
@@ -8,11 +8,13 @@ import {
  Button,
  List,
  ListItemButton,
+  ListItemIcon,
  ListItemText,
  Typography,
  InputAdornment,
  IconButton,
-  Checkbox
+  Checkbox,
+  CircularProgress,
 } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import FilterTableBuilder from "../utils/filterTableBuilder";
@@ -45,6 +47,7 @@ export default function ListVirtual({
  const [rows, setRows] = useState([]);
  const [selected, setSelected] = useState(null);
  const [loading, setLoading] = useState(false);
+  const [selectAllLoading, setSelectAllLoading] = useState(false);
  const [offset, setOffset] = useState(0);
  const [totalRecord, setTotalRecord] = useState(0);

@@ -222,8 +225,10 @@ export default function ListVirtual({
  };

  const displayValue = multiple
-    ? (selected?.length > 0
+    ? (selected?.length > 1
        ? `${selected.length} ${label} selected`
+        : selected?.length === 1
+        ? selected[0][name]
        : "")
    : selected?.[name] || "";

@@ -235,58 +240,76 @@ export default function ListVirtual({
    return (selected || []).some((x) => x.id === row.id);
  };

+  // Whether every record matching the current search/filter is currently selected
+  const isAllSelected =
+    multiple && totalRecord > 0 && (selected?.length || 0) === totalRecord;
+
+  const isPartiallySelected =
+    multiple && (selected?.length || 0) > 0 && !isAllSelected;
+
  const handleSelectAll = async () => {
-    setLoading(true);
+    // Toggle off: if everything is already selected, clicking again clears selection
+    if (isAllSelected) {
+      setSelected([]);
+      getData?.([]);
+      return;
+    }

-    const pageSize = 1000;
-    const requests = [];
+    setSelectAllLoading(true);

-    for (let offset = 0; offset < totalRecord; offset += pageSize) {
-      const payload = new FilterTableBuilder()
-        .setPaging(offset, pageSize)
-        .setOrder([name], true);
+    try {
+      const pageSize = 1000;
+      const requests = [];

-      if (search) {
-        payload.like(name, search);
-      }
+      for (let pageOffset = 0; pageOffset < totalRecord; pageOffset += pageSize) {
+        const payload = new FilterTableBuilder()
+          .setPaging(pageOffset, pageSize)
+          .setOrder([name], true);

-      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
+        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
          )
        );
      }

-      joins.forEach(join => {
-        payload.addJoin(join.table, join.columns);
-      });
+      const responses = await Promise.all(requests);

-      requests.push(
-        apiRequest.search(
-          url,
-          payload.build(),
-          {
-            headers: headersRequest,
-          },
-          isApiGo
-        )
-      );
+      const allRows = responses.flatMap(res => res.data || []);
+
+      setSelected(allRows);
+      getData?.(allRows);
+    } catch (err) {
+      console.error("Select All Error:", err);
+    } finally {
+      setSelectAllLoading(false);
    }
-
-    const responses = await Promise.all(requests);
-
-    const allRows = responses.flatMap(res => res.data || []);
-
-    setSelected(allRows);
-    getData?.(allRows);
-
-    setLoading(false);
  };

  return (
@@ -365,12 +388,34 @@ export default function ListVirtual({

          <List disablePadding>
            <>            
-              {multiple && (
+              {multiple && rows.length > 0 && (
                <ListItemButton
                  onClick={handleSelectAll}
+                  disabled={selectAllLoading || totalRecord === 0}
                  sx={{ fontSize: 14 }}
                >
-                  Select All
+                  <ListItemIcon sx={{ minWidth: 36 }}>
+                    {selectAllLoading ? (
+                      <CircularProgress size={18} />
+                    ) : (
+                      <Checkbox
+                        edge="start"
+                        checked={isAllSelected}
+                        indeterminate={isPartiallySelected}
+                        tabIndex={-1}
+                        disableRipple
+                      />
+                    )}
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={
+                      selectAllLoading
+                        ? "Selecting all..."
+                        : isAllSelected
+                        ? "Unselect All"
+                        : "Select All"
+                    }
+                  />
                </ListItemButton>
              )}

@@ -378,6 +423,7 @@ export default function ListVirtual({
                <ListItemButton
                  key={`${row.id}-${i}`}
                  onClick={() => handleSelect(row)}
+                  disabled={selectAllLoading}
                >
                  {multiple && (
                    <Checkbox checked={isSelected(row)} />
@@ -403,8 +449,18 @@ export default function ListVirtual({
        </DialogContent>

        <DialogActions>
-          <Button onClick={handleClear} size="small">Clear</Button>
-          <Button onClick={() => setOpen(false)} size="small">Cancel</Button>
+          <Button onClick={handleClear} disabled={selectAllLoading}>Clear</Button>
+          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button
+            onClick={() => {
+              getData?.(selected ?? (multiple ? [] : null));
+              setOpen(false);
+            }}
+            variant="contained"
+            disabled={selectAllLoading}
+          >
+            Save
+          </Button>
        </DialogActions>
      </Dialog>
    </>