added optional custom card function to the binslist so that on the map page we can have the map move to the bin and open the bin drawer when the card is clicked from the yard drawer

src/bin/BinsList.tsx

@@ -23,6 +23,12 @@ interface Props {
   //startingTranslate: number;
   valDisplay?: "high" | "low" | "average";
   insert?: boolean
+  /**
+   * optional function for when you want clicking the card to do something other than navigate to the bin page
+   * @param bin the bin model for the card that was clicked
+   * @returns void
+   */
+  cardClickFunction?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((_theme) => {
@@ -40,7 +46,7 @@ const useStyles = makeStyles((_theme) => {
 });
 
 export default function BinsList(props: Props) {
-  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert } = props;
+  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert, cardClickFunction } = props;
   const classes = useStyles();
   // const history = useHistory();
   const navigate = useNavigate()
@@ -53,6 +59,14 @@ export default function BinsList(props: Props) {
     navigate(path, { state: {bin: bins[i]} });
   };
 
+  const cardClicked = (index: number) => {
+    if(cardClickFunction) {
+      cardClickFunction(bins[index])
+    }else{
+      goToBin(index)
+    }
+  }
+
   const leftArrow = () => {
     const visibility = useContext(VisibilityContext);
     //const isFirstVisible = visibility.useIsVisible('first', false)
@@ -95,7 +109,7 @@ export default function BinsList(props: Props) {
             key={i} 
             className={classes.gridListTile} 
             onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
             <BinCardV2
               bin={b}
@@ -129,7 +143,7 @@ export default function BinsList(props: Props) {
               key={i}
               className={classes.gridListTile}
               onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
               <BinCardV2
                 bin={b}

src/bin/BinyardDisplay.tsx

@@ -42,6 +42,11 @@ import BinsList from "./BinsList";
 interface Props {
   yardKey: string;
   insert?: boolean;
+  /**
+   * function to run when a bin card is clicked, when not passed in will default to attempting to navigate to the bin page by adding the bin key to the url
+   * @param bin the selected bin model
+   */
+  binClicked?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -82,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export default function BinyardDisplay(props: Props) {
-  const { yardKey, insert } = props;
+  const { yardKey, insert, binClicked } = props;
   const classes = useStyles();
   const binAPI = useBinAPI();
   const theme = useTheme();
@@ -321,6 +326,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={grainBins}
                   duplicateBin={duplicateBin}
                   title={"Grain Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -338,6 +344,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={fertBins}
                   duplicateBin={duplicateBin}
                   title={"Fertilizer Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -355,6 +362,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={emptyBins}
                   duplicateBin={duplicateBin}
                   title={"Empty Bins"}
+                  cardClickFunction={binClicked}
                   // loadMore={newTranslation => {
                   //   //only triggered in the scroll view so this will never trigger in grid view
                   //   if (yardBins.length < binTotal) {

src/maps/mapDrawers/BinYardDrawer.tsx

@@ -1,6 +1,7 @@
 import BinyardDisplay from "bin/BinyardDisplay";
 import DisplayDrawer from "common/DisplayDrawer";
 import MapMarkerSettings from "maps/MapMarkerSettings";
+import { Bin } from "models";
 //import Bins from "pages/Bins";
 import { pond } from "protobuf-ts/pond";
 import { useBinYardAPI, useGlobalState, useSnackbar } from "providers";
@@ -14,10 +15,11 @@ interface Props {
   removeMarker: (key: string) => void;
   updateMarker: (key: string, objectSettings: pond.BinYardSettings) => void;
   moveMap: (long: number, lat: number) => void;
+  binClicked: (bin: Bin) => void
 }
 
 export default function BinYardDrawer(props: Props) {
-  const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap } = props;
+  const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap, binClicked } = props;
   const [{as}] = useGlobalState();
   const [yard, setYard] = useState<pond.BinYardSettings>(pond.BinYardSettings.create());
   const [openMarkerSettings, setOpenMarkerSettings] = useState(false);
@@ -85,7 +87,12 @@ export default function BinYardDrawer(props: Props) {
 
   const drawerBody = () => {
     //return <Bins insert yardFilter={yard.key} />;
-    return <BinyardDisplay insert yardKey={yard.key} />;
+    return (
+      <BinyardDisplay 
+        insert 
+        yardKey={yard.key} 
+        binClicked={binClicked}/>
+    )
   };
 
   /**

src/maps/mapObjectControllers/AgMapController.tsx

@@ -1659,6 +1659,18 @@ import { Result } from "@mapbox/mapbox-gl-geocoder";
           <React.Fragment>
             <BinYardDrawer
               open={yardDrawer}
+              binClicked={(bin) => {
+                //move the map to the correct bin location, assuming the bin was plotted on the map
+                let location = bin.location()
+                if(location !== null && location !== undefined){
+                  moveMap(location.latitude, location.longitude, zoomLevels.close, isMobile)
+                }
+                //close the yarddrawer
+                setYardDrawer(false)
+                //open the bin drawer using the correct bin
+                setObjectKey(bin.key())
+                setBinDrawer(true)
+              }}
               onClose={() => {
                 if (new Date().valueOf() > endTime) {
                   setYardDrawer(false);