adding the harvest plan stuff to the field page

src/pages/Field.tsx

@@ -1,10 +1,10 @@
-import { Field, HarvestPlan } from "models";
-import { useGlobalState } from "providers";
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { Field, fieldScope, HarvestPlan, teamScope } from "models";
+import { useFieldAPI, useGlobalState, useHarvestPlanAPI } from "providers";
+import { useCallback, useEffect, useState } from "react";
+import { useLocation, useParams } from "react-router-dom";
 import PageContainer from "./PageContainer";
-import { useMobile } from "hooks";
-import { Box, Grid2, IconButton } from "@mui/material";
+import { useMobile, useSnackbar, useUserAPI } from "hooks";
+import { Box, Card, Grid2, IconButton } from "@mui/material";
 import FieldActions from "field/FieldActions";
 import { Settings } from "@mui/icons-material";
 import { pond } from "protobuf-ts/pond";
@@ -12,28 +12,82 @@ import FieldMinimap from "field/Fieldminimap";
 import Weather from "weather/weather";
 import TaskViewer from "tasks/TaskViewer";
 import HarvestPlanDisplay from "harvestPlan/HarvestPlanDisplay";
+import { cloneDeep } from "lodash";
+import HarvestPlanTable from "harvestPlan/HarvestPlanTable";
 
 export default function FieldPage() {
     const { state } = useLocation();
     //const [{ as }] = useGlobalState()
+    const fieldAPI = useFieldAPI();
+    const userAPI = useUserAPI();
+    const [{as, user}] = useGlobalState();
+    const {openSnack} = useSnackbar();
+    const fieldID = useParams<{ fieldID: string }>()?.fieldID ?? "";
     const [field, setField] = useState<Field>(state?.field ? Field.create(state.field) : Field.create())
     const [permissions, setPermissions] = useState<pond.Permission[]>(state?.permissions ? state.permissions : [])
     const isMobile = useMobile()
     const [openFieldSettings, setOpenFieldSettings] = useState(false)
     const [planLoading, setPlanLoading] = useState(false)
     const [hPlan, setHPlan] = useState<HarvestPlan>(HarvestPlan.create());
+    const [loading, setLoading] = useState(false)
+    const hPlanAPI = useHarvestPlanAPI();
 
-    const loadField = () => {
+    const loadField = useCallback(() => {
 
-    }
+    },[as])
 
     useEffect(()=>{
-      if(state.field){
+      // if already loading do nothing
+      if(loading) return
+      //if the field is passed through in the state just use it
+      if(state?.field){
         let field = Field.create(state.field)
+        field.permissions = state.permissions
         setField(field)
         setPermissions(state.permissions)
+        return
       }
-    },[state.field])
+      //otherwise load the field
+      setLoading(true)
+      fieldAPI.getField(fieldID, as).then(resp => {
+        setField(Field.create(resp.data))
+
+      }).catch(err => {
+        openSnack("Failed to load Field")
+      }).finally(() => {
+        setLoading(false)
+      })
+      //also get the permissions
+      let scope = fieldScope(fieldID);
+      if (as) {
+        scope = teamScope(as)
+      }
+      userAPI.getUser(user.id(), scope).then(resp => {
+        let f = cloneDeep(field) 
+        f.permissions = resp.permissions
+        setField(f)
+        setPermissions(resp.permissions);
+      });
+    },[loadField, fieldID, as])
+
+    useEffect(() => {
+      if (field.key() !== "") {
+        hPlanAPI
+          .listHarvestPlans(1, 0, "desc", "createDate", field.key(), as)
+          .then(resp => {
+            if (resp.data.harvestPlan.length > 0) {
+              let plan = resp.data.harvestPlan[0];
+              setHPlan(HarvestPlan.any(plan));
+            } else {
+              setHPlan(HarvestPlan.create());
+            }
+            setPlanLoading(false);
+          })
+          .catch(err => {
+            //openSnack("Failed to load plan");
+          });
+      }
+    }, [field, as, hPlanAPI]);
 
     const fieldActions = () => {
       return (
@@ -60,14 +114,12 @@ export default function FieldPage() {
     }
 
     const harvestPlans = () => {
-      console.log(permissions)
       return (
         <HarvestPlanDisplay
           plan={hPlan}
           permissions={permissions}
           planField={field}
           loading={planLoading}
-          fieldList={[field]}
           changePlan={updatedPlan => {
             if (updatedPlan) {
               setHPlan(updatedPlan);
@@ -87,18 +139,31 @@ export default function FieldPage() {
 
     const desktopView = () => {
       return (
-        <Grid2 container>
+        <Grid2 container spacing={1}>
           <Grid2 size={4}>
-            {map()}
+            <Card raised>
+              {map()}
+            </Card>
           </Grid2>
           <Grid2 size={3}>
+            <Card raised>
             {weather()}
+            </Card>
           </Grid2>
           <Grid2 size={5}>
+            <Card raised>
             {tasks()}
+            </Card>
           </Grid2>
-          <Grid2 size={12}>
+          <Grid2 size={4}>
+            <Card raised>
             {harvestPlans()}
+            </Card>
+          </Grid2>
+          <Grid2 size={8}>
+            <Card>
+              <HarvestPlanTable field={field.key()}/>
+            </Card>
           </Grid2>
         </Grid2>
       )
@@ -116,8 +181,10 @@ export default function FieldPage() {
 
     return (
       <PageContainer>
+        <Box padding={2}>
         {fieldActions()}
         {isMobile ? mobileView() : desktopView()}
+        </Box>
       </PageContainer>
     )
 }