brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added draggable tabs common component, will be used to drag n drop re-order tabs

Browse source
This commit is contained in:
Carter 2025-03-20 12:53:27 -06:00
parent 906fe44ab5
commit ebf889fa7c
2 changed files with 74 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/bin/BinYards.tsx
View file

@ -7,7 +7,8 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
Grid,
Grid2 as Grid,
Grid2,
ListItemIcon,
ListItemText,
Menu,
@ -52,6 +53,7 @@ import ObjectUsers from "user/ObjectUsers";
import ObjectTeams from "teams/ObjectTeams";
import { GrainBag } from "models/GrainBag";
import { makeStyles } from "@mui/styles";
import DraggableTabs from "common/DraggableTabs";
const parentTab = {
"&": {
@ -114,11 +116,11 @@ const useStyles = makeStyles((theme: Theme) => {
},
tab: {
...parentTab,
width: theme.spacing(20),
minWidth: theme.spacing(20),
left: 0,
height: "100%",
background: theme.palette.background.paper
// width: theme.spacing(20),
// minWidth: theme.spacing(20),
// left: 0,
// height: "100%",
// background: theme.palette.background.paper
},
smallTab: {
...parentTab,
@ -157,13 +159,15 @@ const useStyles = makeStyles((theme: Theme) => {
left: theme.spacing(2),
color: "transparent",
textAlign: "left",
marginTop: "auto",
width: "80%",
backgroundImage: "linear-gradient(to right, white 70%, rgba(200, 200, 200, 0) 87.5%)",
backgroundClip: "text",
WebkitBackgroundClip: "text",
overflowX: "hidden",
whiteSpace: "nowrap",
top: 12
top: "auto",
bottom: "auto"
}
});
});
@ -184,7 +188,7 @@ interface Props {
}
export default function BinYard(props: Props) {
const { setYardFilter, loadBins, loadYards, grainBags, setShowing, yardsLoading } = props;
const { setYardFilter, loadBins, loadYards, /*gainBags,*/ setShowing, yardsLoading } = props;
const binYardAPI = useBinYardAPI();
const binAPI = useBinAPI();
// const userAPI = useUserAPI();
@ -349,7 +353,7 @@ export default function BinYard(props: Props) {
let newBinYards = binYards;
binYardAPI
.removeBinYard(binYards[index].key)
.then(resp => {
.then(_resp => {
newBinYards.splice(index, 1);
if (index + 1 === tab) {
tabChange(0);
@ -358,7 +362,7 @@ export default function BinYard(props: Props) {
}
setBinYards([...newBinYards]);
})
.catch(err => {
.catch(_err => {
error("Failed to delete bin yard");
});
};
@ -486,7 +490,7 @@ export default function BinYard(props: Props) {
];
permissionAPI
.updatePermissions(scope, users)
.then((response: any) => {
.then((_response: any) => {
success("Successfully updated permissions for " + label);
setLeaveYardDialogOpen(false);
loadYards();
@ -689,7 +693,7 @@ export default function BinYard(props: Props) {
}
/>
)}
<Tabs
<DraggableTabs
variant="scrollable"
scrollButtons="auto"
value={tab}
@ -703,11 +707,12 @@ export default function BinYard(props: Props) {
className={searchSelected ? classes.searchTabExpanded : classes.searchTab}
disableTouchRipple
disableFocusRipple
draggable={false}
label={
<Grid container direction="row" wrap="nowrap" spacing={2}>
<Grid item>{yardsLoading ? <CircularProgress size={20} /> : <Search />}</Grid>
<Grid>{yardsLoading ? <CircularProgress size={20} /> : <Search />}</Grid>
{searchSelected && (
<Grid item>
<Grid>
<TextField
onChange={e => {
loadYards(e.target.value);
@ -717,7 +722,7 @@ export default function BinYard(props: Props) {
)}
</Grid>
}
onClick={e => {
onClick={_e => {
setSearchSelected(true);
}}
/>
@ -725,6 +730,7 @@ export default function BinYard(props: Props) {
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
style={{ marginLeft: theme.spacing(1) }}
label="All"
draggable={false}
disableTouchRipple={true}
onClick={() => {
setShowing("all");
@ -746,24 +752,32 @@ export default function BinYard(props: Props) {
<Tab
classes={{ root: classes.tab, selected: classes.selectedTab }}
key={index}
draggable
sx={{
textAlign: "left",
}}
disableTouchRipple={true}
onClick={() => {
setShowing("bins");
}}
label={
<span>
<div className={classes.tabText}>{n.name}</div>
<MoreVert
onMouseEnter={() => setTabClick(false)}
onMouseLeave={() => setTabClick(true)}
className={classes.icon}
onClick={event => {
let target = event.currentTarget;
setMenuAnchorEl(target);
setYardIndex(index);
}}
/>
</span>
<Grid2 container spacing={3.5} >
<Grid2>
{n.name}
</Grid2>
<Grid2 alignItems={"center"}>
<MoreVert
onMouseEnter={() => setTabClick(false)}
onMouseLeave={() => setTabClick(true)}
className={classes.icon}
onClick={event => {
let target = event.currentTarget;
setMenuAnchorEl(target);
setYardIndex(index);
}}
/>
</Grid2>
</Grid2>
}
/>
</Tooltip>
@ -786,7 +800,7 @@ export default function BinYard(props: Props) {
}}
/>
)} */}
</Tabs>
</DraggableTabs>
</AppBar>
);
}

31
src/common/DraggableTabs.tsx Normal file
View file

@ -0,0 +1,31 @@
import { Tab, Tabs, TabsProps } from "@mui/material";
import React from "react";
interface DraggableTabsProps extends TabsProps {
children: React.ReactNode;
}
export default function DraggableTabs({children, ...tabsProps}: DraggableTabsProps) {
const enhancedChildren = React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === Tab) {
if (child.props.draggable === undefined || child.props.draggable === true) {
return React.cloneElement(child, {
...child.props,
draggable: true,
// onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, index),
onDragOver: (e: React.DragEvent<HTMLDivElement>) => e.preventDefault(),
// onDrop: (e: React.DragEvent<HTMLDivElement>) => handleDrop(e, index),
});
}
}
// Return non-Tab children unchanged
return child;
});
return (
<Tabs {...tabsProps}>
{enhancedChildren}
</Tabs>
)
}