Basic MultiJobs

src/views/jobs/builder/JobBuilder.jsx

@@ -1,11 +1,9 @@
 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 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";
 
@@ -18,9 +16,22 @@ import PageviewIcon from "@mui/icons-material/Pageview";
 import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";
 
-export default function JobBuilder(props) {
-  const { state: store, updateStore } = useContext(StoreContext);
+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);
 
@@ -28,39 +39,51 @@ export default function JobBuilder(props) {
     e.preventDefault();
     e.stopPropagation();
     if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
+    setBuilderPage("individualSelect");
     setJobDialogOpen(true);
   };
 
   const quickOpenClose = () => setQuickOpen(false);
-  const handleClickOpen = () => setJobDialogOpen(true);
-
+  const handleClickOpen = (page)=> () =>{     
+    setBuilderPage(page);
+    setJobDialogOpen(true);
+   }
+  const [builderPage, setBuilderPage] = useState();
   const [cache, setCache] = useState({});
 
   const handleClose = (confirmed) => () => {
     setJobDialogOpen(false);
     if (!confirmed) return;
-    jobBuilder(cache);
+    const jobId = jobFactory(cache);
+    if(store.focusJob)
+    navigate(`/qualiteer/jobs#${jobId}`);
   };
 
   // Pull info from url if possible?
   const actions = [
-    { name: "Suite", icon: <ViewCarouselIcon /> },
-    { name: "Compound", icon: <ViewColumnIcon /> },
-    { name: "Manual", icon: <PageviewIcon /> },
+    { 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>
-        <DialogContent></DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose()}>Cancel</Button>
-          <Button onClick={handleClose(true)} autoFocus>
-            Start
-          </Button>
-        </DialogActions>
+        {pages[builderPage]}
       </Dialog>
 
       <ClickAwayListener onClickAway={quickOpenClose}>
@@ -76,7 +99,7 @@ export default function JobBuilder(props) {
               key={action.name}
               icon={action.icon}
               tooltipTitle={action.name}
-              onClick={handleClickOpen}
+              onClick={handleClickOpen(action.page)}
             />
           ))}
         </SpeedDial>