qualiteer/src/views/jobs/Jobs.jsx

import { useState, useContext, useEffect } from "react";
import { useLocation } from "react-router-dom";

import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext from "../../ctx/JobContext.jsx";
import JobBox from "./JobBox.jsx";
import JobTestSelector from "./JobTestSelector.jsx";
import JobView from "./JobView.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 Toolbar from "@mui/material/Toolbar";
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,
    jobBuilder,
  } = useContext(JobContext);
  const location = useLocation();
  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 [queued, setQueued] = useState([]);
  useEffect(() => {}, [jobState.jobs, location]);

  const handleClose = (confirmed) => () => {
    setJobDialogOpen(false);
    if (!confirmed) return;
    jobBuilder(queued);
  };

  return (
    <div className="jobs">
      {location.hash === "" &&
        jobState.jobs.map((v, i) => (
          <a
            key={i}
            href={`/qualiteer/jobs#${v.name}`}
            style={{ textDecoration: "none" }}
          >
            <JobBox job={v} />
          </a>
        ))}
      {jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (
        <JobView
          job={jobState.jobs.find((job) => job.name === location.hash.slice(1))}
        />
      )}

      <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
        <Toolbar />
        <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(true)} 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>
  );
}