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

added a column for checkboxes to be able to select rows which can be controled by the parent

Browse source
This commit is contained in:
csawatzky 2025-03-18 15:50:42 -06:00
parent b7c2354b83
commit 6221313baf
4 changed files with 281 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/bin/BinStorageConditions.tsx
View file

@ -369,7 +369,6 @@ export default function BinStorageConditions(props: Props) {
//this will display at all times
const tempDisplay = () => {
console.log(tempTargets)
let sliderEdge = 40;
let mark: Mark[] = [];

17
src/common/ResponsiveTable.tsx
View file

@ -88,6 +88,8 @@ interface Props<T> {
hideKeys?: boolean;
onRowClick?: (row: T) => void;
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
}
export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@ -110,7 +112,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
renderMobile,
hideKeys,
onRowClick,
actions
actions,
rowSelect,
selectedRows
} = props
const classes = useStyles();
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
@ -399,6 +403,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
</TableCell>
</TableRow>
<TableRow sx={ hideKeys ? { display: "none" } : undefined } >
{ rowSelect && <TableCell></TableCell> }
{ renderGutter && <TableCell></TableCell>}
{ columns ?
columns.map((column, index) => {
@ -435,6 +440,16 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
return (
<React.Fragment key={"row-"+index}>
<TableRow onClick={() => onRowClick&&onRowClick(row)} className={onRowClick ? classes.rowHover : undefined}>
{rowSelect &&
<TableCell>
<Checkbox
checked={selectedRows ? selectedRows.includes(index) : false}
onClick={(event) => {event.stopPropagation()}}
onChange={(e, checked) => {
rowSelect(row, index, checked)
}}/>
</TableCell>
}
{renderGutter &&
<TableCell width={1}>
<IconButton sx={{

365
src/objects/ObjectDescriber.ts → src/objects/ObjectDescriber.tsx
View file

@ -1,10 +1,11 @@
import { Column } from "common/ResponsiveTable";
import { Option } from "common/SearchSelect";
import GrainDescriber from "grain/GrainDescriber";
import { Column } from "material-table";
//import { Column } from "material-table";
import { Bin, BinYard, Field } from "models";
import { Gate } from "models/Gate";
//import { Gate } from "models/Gate";
import { GrainBag } from "models/GrainBag";
import { ObjectHeater } from "models/ObjectHeater";
//import { ObjectHeater } from "models/ObjectHeater";
import { pond } from "protobuf-ts/pond";
import { getDistanceUnit, getTemperatureUnit } from "utils";
@ -52,12 +53,14 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
tableColumns: [
{
title: "Name",
cellStyle: {padding: "16px"},
render: row => {
return row.settings.name;
return (<div>{row.settings.name}</div>);
}
},
{
title: "Grain",
cellStyle: {padding: "16px"},
render: row => {
let grain = row.settings.inventory?.grainType;
if (grain) {
@ -67,6 +70,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
},
{
title: "Bin Height",
cellStyle: {padding: "16px"},
render: row => {
let d = row.settings.specs?.heightCm;
if (d) {
@ -80,6 +84,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
},
{
title: "Bin Diameter",
cellStyle: {padding: "16px"},
render: row => {
let d = row.settings.specs?.diameterCm;
if (d) {
@ -93,30 +98,35 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
},
{
title: "Custom Grain Name",
cellStyle: {padding: "16px"},
render: row => {
return row.settings.inventory?.customTypeName;
}
},
{
title: "Grain Variant",
cellStyle: {padding: "16px"},
render: row => {
return row.settings.inventory?.grainSubtype;
}
},
{
title: "Grain Bushels",
cellStyle: {padding: "16px"},
render: row => {
return row.settings.inventory?.grainBushels;
}
},
{
title: "Grain Capacity",
cellStyle: {padding: "16px"},
render: row => {
return row.settings.specs?.bushelCapacity;
}
},
{
title: "High Temp Warning",
cellStyle: {padding: "16px"},
render: row => {
let t = row.settings.highTemp;
if (t) {
@ -130,6 +140,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
},
{
title: "Low Temp Warning",
cellStyle: {padding: "16px"},
render: row => {
let t = row.settings.lowTemp;
if (t) {
@ -166,7 +177,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
{
title: "Name",
render: row => {
return row.settings.name;
return (<div>{row.settings.name}</div>)
}
},
{
@ -212,7 +223,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
{
title: "Name",
render: row => {
return row.settings.fieldName;
return (<div>{row.settings.fieldName}</div>)
}
},
{
@ -276,108 +287,108 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_GATE,
{
name: "Gate",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [
{
title: "Name",
render: row => {
if (row.name) {
return row.name.toString();
}
}
},
{
title: "PCA Type",
render: row => {
return row.settings.pcaType;
}
},
{
title: "Hourly APU Cost",
render: row => {
if (row.settings.hourlyApuCost) {
return "$" + row.settings.hourlyApuCost.toFixed(2);
}
}
},
{
title: "Hourly PCA Cost",
render: row => {
if (row.settings.hourlyPcaCost) {
return "$" + row.settings.hourlyPcaCost.toFixed(2);
}
}
},
{
title: "Upper Flow",
render: row => {
return row.settings.upperFlow;
}
},
{
title: "Lower Flow",
render: row => {
return row.settings.lowerFlow;
}
},
{
title: "Duct Name",
render: row => {
return row.settings.ductName;
}
},
{
title: "Duct Length",
render: row => {
return row.settings.ductLength + " m";
}
},
{
title: "Duct Diameter",
render: row => {
return row.settings.ductDiameter + " mm";
}
},
{
title: "Friction Factor",
render: row => {
return row.settings.frictionFactor;
}
},
{
title: "Thermal Conductivity",
render: row => {
return row.settings.thermalConductivity + " W/mK";
}
},
{
title: "Thermal Resistance",
render: row => {
return row.settings.thermalResistance + " K/W";
}
}
] as Column<Gate>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["PCA Type", { order: "pcaType", numerical: false }],
["Hourly APU Cost", { order: "hourlyApuCost", numerical: true }],
["Hourly PCA Cost", { order: "hourlyPcaCost", numerical: true }],
["Upper Flow", { order: "upperFlow", numerical: true }],
["Lower Flow", { order: "lowerFlow", numerical: true }],
["Duct Name", { order: "ductName", numerical: false }],
["Duct Length", { order: "ductLength", numerical: true }],
["Duct Diameter", { order: "ductDiameter", numerical: true }],
["Friction Factor", { order: "frictionFactor", numerical: true }],
["Thermal Conductivity", { order: "thermalConductivity", numerical: true }],
["Thermal Resistance", { order: "thermalResistance", numerical: true }]
])
}
],
// [
// pond.ObjectType.OBJECT_TYPE_GATE,
// {
// name: "Gate",
// inventoryGroup: "",
// isTransactionObject: false,
// tableColumns: [
// {
// title: "Name",
// render: row => {
// if (row.name) {
// return row.name.toString();
// }
// }
// },
// {
// title: "PCA Type",
// render: row => {
// return row.settings.pcaType;
// }
// },
// {
// title: "Hourly APU Cost",
// render: row => {
// if (row.settings.hourlyApuCost) {
// return "$" + row.settings.hourlyApuCost.toFixed(2);
// }
// }
// },
// {
// title: "Hourly PCA Cost",
// render: row => {
// if (row.settings.hourlyPcaCost) {
// return "$" + row.settings.hourlyPcaCost.toFixed(2);
// }
// }
// },
// {
// title: "Upper Flow",
// render: row => {
// return row.settings.upperFlow;
// }
// },
// {
// title: "Lower Flow",
// render: row => {
// return row.settings.lowerFlow;
// }
// },
// {
// title: "Duct Name",
// render: row => {
// return row.settings.ductName;
// }
// },
// {
// title: "Duct Length",
// render: row => {
// return row.settings.ductLength + " m";
// }
// },
// {
// title: "Duct Diameter",
// render: row => {
// return row.settings.ductDiameter + " mm";
// }
// },
// {
// title: "Friction Factor",
// render: row => {
// return row.settings.frictionFactor;
// }
// },
// {
// title: "Thermal Conductivity",
// render: row => {
// return row.settings.thermalConductivity + " W/mK";
// }
// },
// {
// title: "Thermal Resistance",
// render: row => {
// return row.settings.thermalResistance + " K/W";
// }
// }
// ] as Column<Gate>[],
// tableSort: new Map([
// ["Name", { order: "name", numerical: false }],
// ["PCA Type", { order: "pcaType", numerical: false }],
// ["Hourly APU Cost", { order: "hourlyApuCost", numerical: true }],
// ["Hourly PCA Cost", { order: "hourlyPcaCost", numerical: true }],
// ["Upper Flow", { order: "upperFlow", numerical: true }],
// ["Lower Flow", { order: "lowerFlow", numerical: true }],
// ["Duct Name", { order: "ductName", numerical: false }],
// ["Duct Length", { order: "ductLength", numerical: true }],
// ["Duct Diameter", { order: "ductDiameter", numerical: true }],
// ["Friction Factor", { order: "frictionFactor", numerical: true }],
// ["Thermal Conductivity", { order: "thermalConductivity", numerical: true }],
// ["Thermal Resistance", { order: "thermalResistance", numerical: true }]
// ])
// }
// ],
[
pond.ObjectType.OBJECT_TYPE_GRAIN_BAG,
{
@ -389,7 +400,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
title: "Name",
render: row => {
if (row.title) {
return row.title.toString();
return (<div>{row.title.toString()}</div>);
}
}
},
@ -496,74 +507,74 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_HEATER,
{
name: "Heater",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [
{
title: "Name",
render: row => {
if (row.name) {
return row.name.toString();
}
}
},
{
title: "Make",
render: row => {
return row.settings.make;
}
},
{
title: "Model",
render: row => {
return row.settings.model;
}
},
{
title: "Fuel Type",
render: row => {
let fuelMap = new Map<pond.FuelType, string>([
[pond.FuelType.FUEL_TYPE_DIESEL, "Diesel"],
[pond.FuelType.FUEL_TYPE_GASOLINE, "Gasoline"],
[pond.FuelType.FUEL_TYPE_PROPANE, "Propane"]
]);
return fuelMap.get(row.settings.fuelType);
}
},
{
title: "Tank Size",
render: row => {
return row.settings.tankSize + " G";
}
},
{
title: "Fuel Consumption",
render: row => {
return row.settings.fuelConsumption + " G/hr";
}
},
{
title: "Air Circulation",
render: row => {
return row.settings.airCirculation + " CFM";
}
}
] as Column<ObjectHeater>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["Make", { order: "make", numerical: false }],
["Model", { order: "model", numerical: false }],
["Fuel Type", { order: "fuelType", numerical: false }],
["Tank Size", { order: "tankSize", numerical: true }],
["Fuel Consumption", { order: "fuelConsumption", numerical: true }],
["Air Circulation", { order: "airCirculation", numerical: true }]
])
}
],
// [
// pond.ObjectType.OBJECT_TYPE_HEATER,
// {
// name: "Heater",
// inventoryGroup: "",
// isTransactionObject: false,
// tableColumns: [
// {
// title: "Name",
// render: row => {
// if (row.name) {
// return row.name.toString();
// }
// }
// },
// {
// title: "Make",
// render: row => {
// return row.settings.make;
// }
// },
// {
// title: "Model",
// render: row => {
// return row.settings.model;
// }
// },
// {
// title: "Fuel Type",
// render: row => {
// let fuelMap = new Map<pond.FuelType, string>([
// [pond.FuelType.FUEL_TYPE_DIESEL, "Diesel"],
// [pond.FuelType.FUEL_TYPE_GASOLINE, "Gasoline"],
// [pond.FuelType.FUEL_TYPE_PROPANE, "Propane"]
// ]);
// return fuelMap.get(row.settings.fuelType);
// }
// },
// {
// title: "Tank Size",
// render: row => {
// return row.settings.tankSize + " G";
// }
// },
// {
// title: "Fuel Consumption",
// render: row => {
// return row.settings.fuelConsumption + " G/hr";
// }
// },
// {
// title: "Air Circulation",
// render: row => {
// return row.settings.airCirculation + " CFM";
// }
// }
// ] as Column<ObjectHeater>[],
// tableSort: new Map([
// ["Name", { order: "name", numerical: false }],
// ["Make", { order: "make", numerical: false }],
// ["Model", { order: "model", numerical: false }],
// ["Fuel Type", { order: "fuelType", numerical: false }],
// ["Tank Size", { order: "tankSize", numerical: true }],
// ["Fuel Consumption", { order: "fuelConsumption", numerical: true }],
// ["Air Circulation", { order: "airCirculation", numerical: true }]
// ])
// }
// ],
[
pond.ObjectType.OBJECT_TYPE_HOMEMARKER,
{

111
src/objects/ObjectTable.tsx
View file

@ -24,6 +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 BulkGateSettings from "./bulkEditForms/bulkGateSettings";
interface customButton {
@ -49,13 +50,15 @@ export default function ObjectTable(props: Props) {
const [pageSize, setPageSize] = useState(10); //offset would be determined by the pageSize * tablePage, limit is just pageSize
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 [currentSearchText, setCurrentSearchText] = useState<string | undefined>();
const [currentSearchText, setCurrentSearchText] = useState<string>("");
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
const [tableLoading, setTableLoading] = useState(false);
//the api's to load all the objects available to look at in this table
const binAPI = useBinAPI();
@ -94,7 +97,8 @@ export default function ObjectTable(props: Props) {
isNumerical
)
.then(resp => {
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);
});
@ -211,13 +215,25 @@ export default function ObjectTable(props: Props) {
]);
useEffect(() => {
if (preLoadedData) {
setTableData(preLoadedData);
if (preLoadedData && currentSearchText === "") {
setLoadedData(preLoadedData);
setObjectTotal(preLoadedData.length);
} else {
load();
}
}, [load, preLoadedData]);
}, [load, preLoadedData, currentSearchText]);
useEffect(()=>{
let start = pageSize * (tablePage)
let end = pageSize * (tablePage + 1)
let currentData: any[] = []
loadedData.forEach((object,i) => {
if (i >= start && i < end ) {
currentData.push(object)
}
})
setTableData(currentData)
},[loadedData, pageSize, tablePage])
const bulkEditForm = (type: pond.ObjectType) => {
switch (type) {
@ -248,34 +264,34 @@ export default function ObjectTable(props: Props) {
}
};
const actionToolbar = () => {
return (
<Box width="100%" padding={2}>
<SearchBar
value={currentSearchText ?? ""}
onChange={val => {
setCurrentSearchText(val);
}}
/>
{selectedObjects.length > 0 && <Box paddingTop={2}>{bulkEditForm(currentType)}</Box>}
<Grid container direction="row" spacing={2} style={{ marginTop: 2 }}>
{customButtons &&
selectedObjects.length > 0 &&
customButtons.map((button, i) => (
<Grid size={{ xs: 3 }} key={i}>
<Button
style={{ width: "100%" }}
variant="contained"
color="primary"
onClick={() => button.function(selectedObjects)}>
{button.label}
</Button>
</Grid>
))}
</Grid>
</Box>
);
};
// const actionToolbar = () => {
// return (
// <Box width="100%" padding={2}>
// <SearchBar
// value={currentSearchText ?? ""}
// onChange={val => {
// setCurrentSearchText(val);
// }}
// />
// {selectedObjects.length > 0 && <Box paddingTop={2}>{bulkEditForm(currentType)}</Box>}
// <Grid container direction="row" spacing={2} style={{ marginTop: 2 }}>
// {customButtons &&
// selectedObjects.length > 0 &&
// customButtons.map((button, i) => (
// <Grid size={{ xs: 3 }} key={i}>
// <Button
// style={{ width: "100%" }}
// variant="contained"
// color="primary"
// onClick={() => button.function(selectedObjects)}>
// {button.label}
// </Button>
// </Grid>
// ))}
// </Grid>
// </Box>
// );
// };
const handleRowsPerPageChange = (event: any) => {
const newRowsPerPage = parseInt(event.target.value, 10); // Get selected value
@ -299,7 +315,7 @@ export default function ObjectTable(props: Props) {
if (op?.value) {
setCurrentType(op.value);
setTablePage(0);
setCurrentSearchText(undefined);
setCurrentSearchText("");
}
}}
/>
@ -319,11 +335,38 @@ export default function ObjectTable(props: Props) {
<ResponsiveTable
rows={tableData}
columns={ObjectDescriber(currentType).tableColumns}
onRowClick={rowClickFunction}
total={objectTotal}
pageSize={pageSize}
page={tablePage}
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)
}}
selectedRows={selectedPageRows.get(tablePage)}
/>
{/* <MaterialTable
isLoading={tableLoading}