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

finished the mobile view for the field page and some minor functionality changes

Browse source
This commit is contained in:
csawatzky 2025-10-16 16:20:30 -06:00
parent 06da0aad25
commit a2971c6e44
4 changed files with 246 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/harvestPlan/HarvestPlanTable.tsx
View file

@ -1,13 +1,29 @@
import { Box, Typography } from "@mui/material"
import { ExpandMore } from "@mui/icons-material"
import { Accordion, AccordionDetails, AccordionSummary, Box, Theme, Typography } from "@mui/material"
import { makeStyles } from "@mui/styles"
import ResponsiveTable, { Column } from "common/ResponsiveTable"
import GrainDescriber from "grain/GrainDescriber"
import { HarvestPlan } from "models"
import { cloneDeep } from "lodash"
import { Field, HarvestPlan } from "models"
import { useHarvestPlanAPI } from "providers"
import { useCallback, useEffect, useState } from "react"
import { getThemeType } from "theme"
interface Props {
field?: string
field: Field
}
const useStyles = makeStyles((theme: Theme) => ({
dark: {
backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)",
padding: 5
},
light: {
backgroundColor: getThemeType() === "light" ? "rgb(235, 235, 235)" : "rgb(60, 60, 60)",
padding: 5
}
}));
export default function HarvestPlanTable(props: Props){
const {field} = props
const harvestAPI = useHarvestPlanAPI()
@ -15,9 +31,10 @@ export default function HarvestPlanTable(props: Props){
const [pageSize, setPageSize] = useState(10)
const [loadedPlans, setLoadedPlans] = useState<HarvestPlan[]>([])
const [total, setTotal] = useState(0)
const classes = useStyles()
useEffect(()=>{
harvestAPI.listHarvestPlans(pageSize, page*pageSize, "asc", "harvestYear", field).then(resp => {
harvestAPI.listHarvestPlans(pageSize, page*pageSize, "desc", "harvestYear", field.key()).then(resp => {
if(resp.data.harvestPlan){
setLoadedPlans(resp.data.harvestPlan.map(hp => HarvestPlan.create(hp)))
}
@ -106,6 +123,80 @@ export default function HarvestPlanTable(props: Props){
setPage={(page)=>{
setPage(page)
}}
loadMore={() => {
harvestAPI.listHarvestPlans(pageSize, loadedPlans.length, "desc", "harvestYear", field.key()).then(resp => {
let currentPlans = cloneDeep(loadedPlans)
let newPlans: HarvestPlan[] = []
if(resp.data.harvestPlan){
newPlans = resp.data.harvestPlan.map(hp => HarvestPlan.create(hp))
}
setLoadedPlans(currentPlans.concat(newPlans))
})
}}
renderMobile={(row, index) => {
// since these are more about previous harvest plans i am only showing the final tallys rather than the breakdowns
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMore />}>
<Typography sx={{fontWeight: 650}}>
{row.settings.title} - {row.harvestYear()}
</Typography>
</AccordionSummary>
<AccordionDetails>
{/* grain */}
<Box className={classes.light} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Grain:</Typography>
<Typography variant="subtitle1">{GrainDescriber(row.cropType()).name}</Typography>
</Box>
{/* variant */}
<Box className={classes.dark} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Variant:</Typography>
<Typography variant="subtitle1">{row.grainType()}</Typography>
</Box>
{/* yield target */}
{/* <Box className={classes.dark} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Yield Target:</Typography>
<Typography variant="subtitle1">{row.yieldTarget()}bu</Typography>
</Box> */}
{/* actual yield */}
<Box className={classes.light} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Actual Yield:</Typography>
<Typography variant="subtitle1">{row.actualYield()}bu</Typography>
</Box>
{/* bushel price */}
<Box className={classes.dark} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Bushel Price:</Typography>
<Typography variant="subtitle1">${row.bushelPrice()}</Typography>
</Box>
{/* material cost */}
<Box className={classes.light} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Material Cost:</Typography>
<Typography variant="subtitle1">${row.totalMaterialCost() * field.acres()}</Typography>
</Box>
{/* equipment cost */}
<Box className={classes.dark} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Equipment Cost:</Typography>
<Typography variant="subtitle1">${row.totalEquipmentCost() * field.acres()}</Typography>
</Box>
{/* pre-seed materials */}
{/* pre-seed equpment */}
{/* seed materials */}
{/* seed equpment */}
{/* post-seed materials */}
{/* post-seed equpment */}
{/* harvest materials */}
{/* harvest equpment */}
{/* fall materials */}
{/* fall equpment */}
{/* total cost */}
<Box className={classes.light} style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="subtitle1">Total Cost:</Typography>
<Typography variant="subtitle1">${(row.totalEquipmentCost() + row.totalMaterialCost()) * field.acres()}</Typography>
</Box>
</AccordionDetails>
</Accordion>
)
}}
/>
)
}