diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx index e779ed2..6124e55 100644 --- a/src/common/ResponsiveTable.tsx +++ b/src/common/ResponsiveTable.tsx @@ -90,6 +90,7 @@ interface Props { 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(props: Props) { @@ -114,7 +115,8 @@ export default function ResponsiveTable(props: Props) { 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(props: Props) { + {/* table actions */} @@ -402,6 +405,16 @@ export default function ResponsiveTable(props: Props) { + {/* custom element */} + {customElement && + + + {customElement} + + + } + + {/* column headers */} { rowSelect && } { renderGutter && } diff --git a/src/objects/ObjectDescriber.tsx b/src/objects/ObjectDescriber.tsx index 3ea4a90..643482a 100644 --- a/src/objects/ObjectDescriber.tsx +++ b/src/objects/ObjectDescriber.tsx @@ -114,7 +114,7 @@ export const ObjectExtensions: Map = new Map([ title: "Grain Bushels", cellStyle: {padding: "16px"}, render: row => { - return row.settings.inventory?.grainBushels; + return (
{row.settings.inventory ? isNaN(row.settings.inventory.grainBushels) ? 0 : row.settings.inventory.grainBushels : 0}
); } }, { diff --git a/src/objects/ObjectTable.tsx b/src/objects/ObjectTable.tsx index a4a0437..7a7b677 100644 --- a/src/objects/ObjectTable.tsx +++ b/src/objects/ObjectTable.tsx @@ -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([]); const [loadedData, setLoadedData] = useState([]); - const [selectedObjects, setSelectedObjects] = useState([]); - const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc"); + //const [selectedObjects, setSelectedObjects] = useState([]); + const [selectedObjects, setSelectedObjects] = useState>(new Map()); + //const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc"); const [currentSearchText, setCurrentSearchText] = useState(""); - const [currentOrder, setCurrentOrder] = useState(); - const [isNumerical, setIsNumerical] = useState(); + //const [currentOrder, setCurrentOrder] = useState(); + //const [isNumerical, setIsNumerical] = useState(); const [{ user, as }] = useGlobalState(); const [selectedUser, setSelectedUser] = useState(as ?? user.id()); const [selectedPageRows, setSelectedPageRows] = useState>(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 ( ( + + ))} 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 ( {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)} /> {/* 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 ( - + {/* first row */} + {extraButtons?.map((button, index) => ( + + {button} + + ))} );