qualiteer/src/views/Jobs.jsx

import { useState, useContext, useEffect } from "react";
import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import JobBox from "./components/JobBox.jsx";
import JobTestSelector from "./components/JobTestSelector.jsx";

import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";

import DialogTitle from "@mui/material/DialogTitle";

import ClickAwayListener from "@mui/material/ClickAwayListener";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";

import PageviewIcon from "@mui/icons-material/Pageview";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";

export default function Jobs() {
  const {
    state: jobState,
    dispatch: jobDispatch,
    jobUpdate,
    jobCreate,
  } = useContext(JobContext);

  const { state: store, updateStore } = useContext(StoreContext);
  const [quickOpen, setQuickOpen] = useState(false);
  const [jobDialogOpen, setJobDialogOpen] = useState(false);

  const actions = [
    { name: "Suite", icon: <ViewCarouselIcon /> },
    { name: "Compound", icon: <ViewColumnIcon /> },
    { name: "Manual", icon: <PageviewIcon /> },
  ];
  
  const quickOpenClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if(!store.simplifiedControls) return setQuickOpen(!quickOpen);
    setJobDialogOpen(true);
  }
  const quickOpenClose = () => setQuickOpen(false);


  const handleClickOpen = () => setJobDialogOpen(true);
  const handleClose = () => setJobDialogOpen(false);
  const [queued, setQueued] = useState([]);
  useEffect(() => {
  }, [jobState.jobs]);

  return (
    <div className="jobs">
      {jobState.jobs.map((v, i) => (
        <JobBox key={i} job={v} />
      ))}

      <Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
        <DialogTitle>New Job</DialogTitle>
        <DialogContent>
          <span>Some Selectors</span>
          <JobTestSelector queued={queued} availableTests={store.catalog} setQueued={setQueued} />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose} autoFocus>
            Start
          </Button>
        </DialogActions>
      </Dialog>

      <ClickAwayListener onClickAway={quickOpenClose}>
        <SpeedDial
          ariaLabel="New Job"
          sx={{ position: "fixed", bottom: 16, right: 16 }}
          icon={<SpeedDialIcon />}
          onClick={quickOpenClick}
          open={quickOpen}
        >
          {actions.map((action) => (
            <SpeedDialAction
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={handleClickOpen}
            />
          ))}
        </SpeedDial>
      </ClickAwayListener>
    </div>
  );
}