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

updated the object table on the bins page and added a custom elemnt to the responsive table component between the actions/title and the column headers

Browse source
This commit is contained in:
csawatzky 2025-03-19 13:20:31 -06:00
parent b66ad8bb8c
commit 326d4b44c6
4 changed files with 73 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/common/ResponsiveTable.tsx
View file

@ -90,6 +90,7 @@ interface Props<T> {
actions?: string | JSX.Element;
rowSelect?: (row: T, index: number, checked: boolean) => void; //row select function that passes the the row back up, when this function is passed in render a column of checkboxes
selectedRows?: number[]; //which rows are selected will need to be controlled by the parent in order to keep track between page changes
customElement?: JSX.Element //element that will be placed in the table head between the table actions and the column header rows
}
export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@ -114,7 +115,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
onRowClick,
actions,
rowSelect,
selectedRows
selectedRows,
customElement
} = props
const classes = useStyles();
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
@ -371,6 +373,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
<TableContainer className={classes.tableContainer} component={Paper}>
<Table>
<TableHead>
{/* table actions */}
<TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
<TableCell colSpan={10000} sx={{ border: "none" }}>
<Grid2 container justifyContent="space-between">
@ -402,6 +405,16 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
</Grid2>
</TableCell>
</TableRow>
{/* custom element */}
{customElement &&
<TableRow>
<TableCell colSpan={10000} sx={{ border: "none" }}>
{customElement}
</TableCell>
</TableRow>
}
{/* column headers */}
<TableRow sx={ hideKeys ? { display: "none" } : undefined } >
{ rowSelect && <TableCell></TableCell> }
{ renderGutter && <TableCell></TableCell>}

2
src/objects/ObjectDescriber.tsx
View file

@ -114,7 +114,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
title: "Grain Bushels",
cellStyle: {padding: "16px"},
render: row => {
return row.settings.inventory?.grainBushels;
return (<div>{row.settings.inventory ? isNaN(row.settings.inventory.grainBushels) ? 0 : row.settings.inventory.grainBushels : 0}</div>);
}
},
{

90
src/objects/ObjectTable.tsx
View file

@ -24,7 +24,7 @@ import TeamSearch from "teams/TeamSearch";
import BulkBinSettings from "./bulkEditForms/bulkBinSettings";
import BulkGrainBagSettings from "./bulkEditForms/bulkGrainBagSettings";
import ResponsiveTable from "common/ResponsiveTable";
import { cloneDeep } from "lodash";
import { cloneDeep, indexOf } from "lodash";
//import BulkGateSettings from "./bulkEditForms/bulkGateSettings";
interface customButton {
@ -51,11 +51,12 @@ export default function ObjectTable(props: Props) {
const [tablePage, setTablePage] = useState(0);
const [tableData, setTableData] = useState<any[]>([]);
const [loadedData, setLoadedData] = useState<any[]>([]);
const [selectedObjects, setSelectedObjects] = useState<any[]>([]);
const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc");
//const [selectedObjects, setSelectedObjects] = useState<any[]>([]);
const [selectedObjects, setSelectedObjects] = useState<Map<string, any>>(new Map());
//const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc");
const [currentSearchText, setCurrentSearchText] = useState<string>("");
const [currentOrder, setCurrentOrder] = useState<string | undefined>();
const [isNumerical, setIsNumerical] = useState<boolean | undefined>();
//const [currentOrder, setCurrentOrder] = useState<string | undefined>();
//const [isNumerical, setIsNumerical] = useState<boolean | undefined>();
const [{ user, as }] = useGlobalState();
const [selectedUser, setSelectedUser] = useState<string>(as ?? user.id());
const [selectedPageRows, setSelectedPageRows] = useState<Map<number, number[]>>(new Map())//key is the page value is an array of row indexes for that page
@ -89,16 +90,15 @@ export default function ObjectTable(props: Props) {
.listBins(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
"asc",
"name",
search,
selectedUser,
undefined,
isNumerical
undefined
)
.then(resp => {
setLoadedData(resp.data.bins.map(b => Bin.create(b)))
//setTableData(resp.data.bins.map(b => Bin.create(b)));
//setLoadedData(resp.data.bins.map(b => Bin.create(b)))
setTableData(resp.data.bins.map(b => Bin.create(b)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
@ -198,11 +198,11 @@ export default function ObjectTable(props: Props) {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
currentDirection,
currentOrder,
//currentDirection,
//currentOrder,
currentType,
selectedUser,
isNumerical,
//isNumerical,
pageSize,
tablePage,
currentSearchText,
@ -240,8 +240,14 @@ export default function ObjectTable(props: Props) {
case pond.ObjectType.OBJECT_TYPE_BIN:
return (
<BulkBinSettings
selectedBins={selectedObjects as pond.Bin[]}
selectedBins={Array.from(selectedObjects.values()) as pond.Bin[]}
extraButtons={customButtons?.map(b => (
<Button variant="contained" onClick={() => {b.function(Array.from(selectedObjects.values()))}}>{b.label}</Button>
))}
refreshCallback={reLoad => {
//setSelectedObjects([])
setSelectedObjects(new Map())
setSelectedPageRows(new Map())
if (reLoad) {
load();
}
@ -258,7 +264,7 @@ export default function ObjectTable(props: Props) {
// }
// }}
// />
null
undefined
);
default:
}
@ -299,6 +305,30 @@ export default function ObjectTable(props: Props) {
setTablePage(0)
}
const rowSelected = (row: any, index: number, checked: boolean) => {
//when a row is selected add it to the map for the page
let selected = cloneDeep(selectedObjects)
let pageMap = cloneDeep(selectedPageRows)
let pageSelect = pageMap.get(tablePage)
if(checked){ //add the page/index to the map
if(pageSelect){
pageSelect.push(index)
}else{
pageMap.set(tablePage, [index])
}
//handle the row data to add it to a list of objects that are selected
selected.set(tablePage + ":" + index, row)
}else{ //remove the page/index from the map
if(pageSelect){
pageSelect.splice(pageSelect.indexOf(index))
}
//remove the selected object from the array
selected.delete(tablePage + ":" + index)
}
setSelectedObjects(selected)
setSelectedPageRows(pageMap)
}
return (
<Box padding={2}>
{showControls && (
@ -310,7 +340,8 @@ export default function ObjectTable(props: Props) {
selected={selectedType}
options={SearchableObjects()}
changeSelection={op => {
setSelectedObjects([]);
//setSelectedObjects([]);
setSelectedObjects(new Map());
setSelectedType(op);
if (op?.value) {
setCurrentType(op.value);
@ -343,29 +374,8 @@ export default function ObjectTable(props: Props) {
setPage={setTablePage}
handleRowsPerPageChange={handleRowsPerPageChange}
setSearchText={setCurrentSearchText}
rowSelect={(row, index, checked) => {
//when a row is selected add it to the map for the page
// console.log(row)
// console.log(checked)
// console.log(index)
let pageMap = cloneDeep(selectedPageRows)
let pageSelect = pageMap.get(tablePage)
if(checked){ //add the page/index to the map
if(pageSelect){
pageSelect.push(index)
}else{
pageMap.set(tablePage, [index])
}
//handle the row data to add it to a list of objects that are selected
}else{ //remove the page/index from the map
if(pageSelect){
pageSelect.splice(pageSelect.indexOf(index))
}
}
console.log(pageMap)
setSelectedPageRows(pageMap)
}}
customElement={bulkEditForm(currentType)}
rowSelect={rowSelected}
selectedRows={selectedPageRows.get(tablePage)}
/>
{/* <MaterialTable

10
src/objects/bulkEditForms/bulkBinSettings.tsx
View file

@ -9,10 +9,11 @@ import { fahrenheitToCelsius, getDistanceUnit, getTemperatureUnit } from "utils"
interface Props {
selectedBins: pond.Bin[];
refreshCallback: (reLoad: boolean) => void;
extraButtons?: JSX.Element[]
}
export default function BulkBinSettings(props: Props) {
const { selectedBins, refreshCallback } = props;
const { selectedBins, refreshCallback, extraButtons } = props;
const binAPI = useBinAPI();
const { openSnack } = useSnackbar();
const gridItemWidth = 3;
@ -83,7 +84,7 @@ export default function BulkBinSettings(props: Props) {
return (
<React.Fragment>
<Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
<Grid width={"100%"} container direction="row" spacing={2} alignContent="center" alignItems="center">
{/* first row */}
<Grid size={{ xs: gridItemWidth }}>
<TextField
@ -240,6 +241,11 @@ export default function BulkBinSettings(props: Props) {
Update selected Bins
</Button>
</Grid>
{extraButtons?.map((button, index) => (
<Grid key={"exButton" + index} size={{ xs: gridItemWidth }}>
{button}
</Grid>
))}
</Grid>
</React.Fragment>
);