56 lines
1.6 KiB
React
56 lines
1.6 KiB
React
|
import { useState, useContext } from "react";
|
||
|
|
import StoreContext from "../ctx/StoreContext.jsx";
|
||
|
|
import JobContext from "../ctx/JobContext.jsx";
|
||
|
|
|
||
|
|
|
||
|
|
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 quickOpenClick = () => setQuickOpen(!quickOpen);
|
||
|
|
const quickOpenClose = () => setQuickOpen(false);
|
||
|
|
|
||
|
|
const actions = [
|
||
|
|
{name: "Suite", icon: <ViewCarouselIcon/>}, {name: "Compound", icon: <ViewColumnIcon/>}, {name: "Manual", icon: <PageviewIcon/>}
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="jobs">
|
||
|
|
<ClickAwayListener onClickAway={quickOpenClose}>
|
||
|
|
<SpeedDial
|
||
|
|
ariaLabel="New Job"
|
||
|
|
sx={{ position: 'absolute', bottom: 16, right: 16 }}
|
||
|
|
icon={<SpeedDialIcon />}
|
||
|
|
onClick={quickOpenClick}
|
||
|
|
open={quickOpen}
|
||
|
|
>
|
||
|
|
{actions.map((action) => (
|
||
|
|
<SpeedDialAction
|
||
|
|
key={action.name}
|
||
|
|
icon={action.icon}
|
||
|
|
tooltipTitle={action.name}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</SpeedDial>
|
||
|
|
</ClickAwayListener>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|