added selection dialog if multiple action requested

fkie · Aug 28, 2024 · 1e7c1b7 · 1e7c1b7
1 parent fc0079e
commit 1e7c1b7
Show file tree

Hide file tree

Showing 2 changed files with 260 additions and 110 deletions.
diff --git a/fkie_mas_gui/src/renderer/components/SelectionModal/ListSelectionModal.jsx b/fkie_mas_gui/src/renderer/components/SelectionModal/ListSelectionModal.jsx
@@ -5,19 +5,22 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  Divider,
+  FormControlLabel,
   List,
   ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Stack,
 } from "@mui/material";
 import PropTypes from "prop-types";
 import { useRef, useState } from "react";
 import DraggablePaper from "../UI/DraggablePaper";
 
-function ListSelectionModal({ list, setList, onConfirmCallback }) {
+function ListSelectionModal({ title = "Confirm Selection", list, onConfirmCallback, onCancelCallback = null }) {
   const [open, setOpen] = useState(true);
-  const [selectedItems, setSelectedItems] = useState(list);
+  const [selectedItems, setSelectedItems] = useState(list.length < 5 ? list : []);
 
   const handleToggle = (value) => () => {
     const currentIndex = selectedItems.indexOf(value);
@@ -34,14 +37,16 @@ function ListSelectionModal({ list, setList, onConfirmCallback }) {
 
   const handleClose = (event, reason) => {
     if (reason && reason === "backdropClick") return;
-    setList(null);
-    setSelectedItems(null);
+    setSelectedItems([]);
     setOpen(false);
+    if (reason !== "confirmed" && onCancelCallback) {
+      onCancelCallback();
+    }
   };
 
   const onConfirm = () => {
     onConfirmCallback(selectedItems);
-    handleClose();
+    handleClose(null, "confirmed");
   };
 
   const dialogRef = useRef(null);
@@ -60,42 +65,62 @@ function ListSelectionModal({ list, setList, onConfirmCallback }) {
       aria-labelledby="draggable-dialog-title"
     >
       <DialogTitle className="handle" style={{ cursor: "move" }} id="draggable-dialog-title">
-        Confirm Selection
+        {title}
       </DialogTitle>
 
       {selectedItems && (
-        <DialogContent scroll="paper" aria-label="list">
-          <List
-            sx={{
-              width: "100%",
-              maxHeight: 400,
-              overflow: "auto",
-              bgcolor: "background.paper",
-            }}
-          >
-            {list &&
-              list.map((node) => {
-                const labelId = `checkbox-list-label-${node}`;
+        <Stack spacing={0}>
+          <DialogContent scroll="paper" aria-label="list">
+            <List
+              sx={{
+                width: "100%",
+                maxHeight: 400,
+                overflow: "auto",
+                bgcolor: "background.paper",
+              }}
+            >
+              {list &&
+                list.map((node) => {
+                  const labelId = `checkbox-list-label-${node}`;
 
-                return (
-                  <ListItem key={node} disablePadding>
-                    <ListItemButton role={undefined} onClick={handleToggle(node)} dense>
-                      <ListItemIcon>
-                        <Checkbox
-                          edge="start"
-                          checked={selectedItems.indexOf(node) !== -1}
-                          tabIndex={-1}
-                          disableRipple
-                          inputProps={{ "aria-labelledby": labelId }}
-                        />
-                      </ListItemIcon>
-                      <ListItemText id={labelId} primary={node} />
-                    </ListItemButton>
-                  </ListItem>
-                );
-              })}
-          </List>
-        </DialogContent>
+                  return (
+                    <ListItem key={node} disablePadding>
+                      <ListItemButton role={undefined} onClick={handleToggle(node)} dense>
+                        <ListItemIcon>
+                          <Checkbox
+                            edge="start"
+                            checked={selectedItems.indexOf(node) !== -1}
+                            tabIndex={-1}
+                            disableRipple
+                            inputProps={{ "aria-labelledby": labelId }}
+                            sx={{ padding: 0 }}
+                          />
+                        </ListItemIcon>
+                        <ListItemText id={labelId} primary={node} />
+                      </ListItemButton>
+                    </ListItem>
+                  );
+                })}
+            </List>
+          </DialogContent>
+          <FormControlLabel
+            label="Select all"
+            control={
+              <Checkbox
+                checked={selectedItems.length === list.length}
+                indeterminate={selectedItems.length > 0 && selectedItems.length < list.length}
+                sx={{ marginLeft: "0.8em", paddingBottom: 0, marginBottom: 0 }}
+                onChange={(event) => {
+                  if (event.target.checked) {
+                    setSelectedItems(list);
+                  } else {
+                    setSelectedItems([]);
+                  }
+                }}
+              />
+            }
+          />
+        </Stack>
       )}
 
       <DialogActions>
@@ -112,9 +137,10 @@ function ListSelectionModal({ list, setList, onConfirmCallback }) {
 }
 
 ListSelectionModal.propTypes = {
+  title: PropTypes.string,
   list: PropTypes.array.isRequired,
-  setList: PropTypes.func.isRequired,
   onConfirmCallback: PropTypes.func.isRequired,
+  onCancelCallback: PropTypes.func,
 };
 
 export default ListSelectionModal;