109 lines
4.2 KiB
JavaScript
109 lines
4.2 KiB
JavaScript
import React, { useContext, useState, useEffect } from "react";
|
|
import {useNavigate} from "react-router-dom";
|
|
import StoreContext from "../../../ctx/StoreContext.jsx";
|
|
import JobContext from "../../../ctx/JobContext.jsx";
|
|
|
|
import Dialog from "@mui/material/Dialog";
|
|
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";
|
|
|
|
import IndividualSelector from "./IndividualSelector.jsx";
|
|
import IndividualConfirm from "./IndividualConfirm.jsx";
|
|
|
|
import GroupSelector from "./GroupSelector.jsx";
|
|
import GroupConfirm from "./GroupConfirm.jsx";
|
|
|
|
import PipelineSelector from "./PipelineSelector.jsx";
|
|
import PipelineTrackSelector from "./PipelineTrackSelector.jsx";
|
|
import PipelineConfirm from "./PipelineConfirm.jsx";
|
|
|
|
|
|
|
|
export default function JobBuilder() {
|
|
const navigate = useNavigate();
|
|
const { state: store } = useContext(StoreContext);
|
|
const { jobFactory } = useContext(JobContext);
|
|
const [quickOpen, setQuickOpen] = useState(false);
|
|
const [jobDialogOpen, setJobDialogOpen] = useState(false);
|
|
|
|
const quickOpenClick = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
|
|
setBuilderPage("individualSelect");
|
|
setJobDialogOpen(true);
|
|
};
|
|
|
|
const quickOpenClose = () => setQuickOpen(false);
|
|
const handleClickOpen = (page)=> () =>{
|
|
setBuilderPage(page);
|
|
setJobDialogOpen(true);
|
|
}
|
|
const [builderPage, setBuilderPage] = useState();
|
|
const [cache, setCache] = useState({});
|
|
|
|
const handleClose = (confirmed) => () => {
|
|
setJobDialogOpen(false);
|
|
if (!confirmed) return;
|
|
const jobId = jobFactory(cache);
|
|
if(store.focusJob)
|
|
navigate(`/qualiteer/jobs#${jobId}`);
|
|
};
|
|
|
|
// Pull info from url if possible?
|
|
const actions = [
|
|
{ name: "Suite", icon: <ViewCarouselIcon />, page: "groupSelect" },
|
|
{ name: "Compound", icon: <ViewColumnIcon />, page: "pipelineSelect" },
|
|
{ name: "Manual", icon: <PageviewIcon />, page: "individualSelect" },
|
|
];
|
|
|
|
const changePage = (page) => () => setBuilderPage(page);
|
|
|
|
const pages = {
|
|
individualSelect: <IndividualSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("individualConfirm")}/>,
|
|
individualConfirm: <IndividualConfirm cache={cache} setCache={setCache} back={changePage("individualSelect")} start={handleClose(true)}/>,
|
|
groupSelect: <GroupSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("groupConfirm")}/>,
|
|
groupConfirm: <GroupConfirm cache={cache} setCache={setCache} back={changePage("groupSelect")} start={handleClose(true)}/>,
|
|
pipelineSelect: <PipelineSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("pipelineTrackSelect")}/>,
|
|
pipelineTrackSelect: <PipelineTrackSelector cache={cache} setCache={setCache} back={changePage("pipelineSelect")} next={changePage("pipelineConfirm")}/>,
|
|
pipelineConfirm: <PipelineConfirm cache={cache} back={changePage("pipelineTrackSelect")} next={handleClose(true)}/>
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
|
|
<Toolbar />
|
|
<DialogTitle>New Job</DialogTitle>
|
|
{pages[builderPage]}
|
|
</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(action.page)}
|
|
/>
|
|
))}
|
|
</SpeedDial>
|
|
</ClickAwayListener>
|
|
</React.Fragment>
|
|
);
|
|
}
|