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

finished the supported grain view for desktop and the mobile view for both

Browse source
This commit is contained in:
csawatzky 2026-01-06 10:41:07 -06:00
parent cd283a0ea1
commit eef687746e
2 changed files with 179 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/grain/CustomGrainForm.tsx
View file

@ -1,7 +1,7 @@
import {MenuItem, TextField } from "@mui/material"
import { cloneDeep } from "lodash"
import { pond } from "protobuf-ts/pond"
import React, { useEffect, useState } from "react"
import React, { useEffect, useRef, useState } from "react"
interface Props {
grainSettings?: pond.GrainSettings
@ -19,6 +19,7 @@ export default function CustomGrainForm(props: Props) {
const [constantC, setConstantC] = useState("0")
const [kgPerBushel, setKgPerBushel] = useState("0")
const [bushelsPerTonne, setBushelsPerTonne] = useState("0")
const valid = useRef(false)
useEffect(()=>{
if(grainSettings){
@ -34,20 +35,20 @@ export default function CustomGrainForm(props: Props) {
}
},[grainSettings])
const invalid = () => {
if (name === "") return true
if (group === "") return true
if (isNaN(parseFloat(constantA))) return true
if (isNaN(parseFloat(constantB))) return true
if (isNaN(parseFloat(constantA))) return true
if (isNaN(parseFloat(kgPerBushel))) return true
if (isNaN(parseFloat(bushelsPerTonne))) return true
return false
const validate = (name: string, group: string, constA: string, constB: string, constC: string, kgPerBushel: string, bushelsPerTonne: string) => {
if (name === "") return false
if (group === "") return false
if (isNaN(parseFloat(constA))) return false
if (isNaN(parseFloat(constB))) return false
if (isNaN(parseFloat(constC))) return false
if (isNaN(parseFloat(kgPerBushel))) return false
if (isNaN(parseFloat(bushelsPerTonne))) return false
return true
}
const settingsChanged = (newSettings: pond.GrainSettings) => {
setNewGrainSettings(newSettings)
onGrainSettingsChange(newSettings, !invalid())
onGrainSettingsChange(newSettings, valid.current)
}
const grainForm = () => {
@ -63,6 +64,7 @@ export default function CustomGrainForm(props: Props) {
setName(name)
let settings = cloneDeep(newGrainSettings)
settings.name = name
valid.current = validate(name, group, constantA, constantB, constantC, kgPerBushel, bushelsPerTonne)
settingsChanged(settings)
}}/>
<TextField
@ -75,6 +77,7 @@ export default function CustomGrainForm(props: Props) {
setGroup(group)
let settings = cloneDeep(newGrainSettings)
settings.group = group
valid.current = validate(name, group, constantA, constantB, constantC, kgPerBushel, bushelsPerTonne)
settingsChanged(settings)
}}/>
<TextField
@ -88,6 +91,7 @@ export default function CustomGrainForm(props: Props) {
setEquation(enumVal)
let settings = cloneDeep(newGrainSettings)
settings.equation = enumVal
valid.current = validate(name, group, constantA, constantB, constantC, kgPerBushel, bushelsPerTonne)
settingsChanged(settings)
}}
select>
@ -117,11 +121,12 @@ export default function CustomGrainForm(props: Props) {
onChange={(e) => {
let val = e.target.value
setConstantA(val)
if(!isNaN(parseFloat(val))){
valid.current = validate(name, group, val, constantB, constantC, kgPerBushel, bushelsPerTonne)
let settings = cloneDeep(newGrainSettings)
if(!isNaN(parseFloat(val))){
settings.a = parseFloat(val)
settingsChanged(settings)
}
settingsChanged(settings)
}}
label="Constant A"/>
<TextField
@ -134,11 +139,12 @@ export default function CustomGrainForm(props: Props) {
onChange={(e) => {
let val = e.target.value
setConstantB(val)
if(!isNaN(parseFloat(val))){
valid.current = validate(name, group, constantA, val, constantC, kgPerBushel, bushelsPerTonne)
let settings = cloneDeep(newGrainSettings)
if(!isNaN(parseFloat(val))){
settings.b = parseFloat(val)
settingsChanged(settings)
}
settingsChanged(settings)
}}
label="Constant B"/>
<TextField
@ -151,11 +157,12 @@ export default function CustomGrainForm(props: Props) {
onChange={(e) => {
let val = e.target.value
setConstantC(val)
if(!isNaN(parseFloat(val))){
valid.current = validate(name, group, constantA, constantB, val, kgPerBushel, bushelsPerTonne)
let settings = cloneDeep(newGrainSettings)
if(!isNaN(parseFloat(val))){
settings.c = parseFloat(val)
settingsChanged(settings)
}
settingsChanged(settings)
}}
label="Constant C"/>
<TextField
@ -168,11 +175,12 @@ export default function CustomGrainForm(props: Props) {
onChange={(e) => {
let val = e.target.value
setKgPerBushel(val)
if(!isNaN(parseFloat(val))){
valid.current = validate(name, group, constantA, constantB, constantC, val, bushelsPerTonne)
let settings = cloneDeep(newGrainSettings)
if(!isNaN(parseFloat(val))){
settings.kgPerBushel = parseFloat(val)
settingsChanged(settings)
}
settingsChanged(settings)
}}
label="kg per Bushel"/>
<TextField
@ -185,11 +193,12 @@ export default function CustomGrainForm(props: Props) {
onChange={(e) => {
let val = e.target.value
setBushelsPerTonne(val)
if(!isNaN(parseFloat(val))){
valid.current = validate(name, group, constantA, constantB, constantC, kgPerBushel, val)
let settings = cloneDeep(newGrainSettings)
if(!isNaN(parseFloat(val))){
settings.bushelsPerTonne = parseFloat(val)
settingsChanged(settings)
}
settingsChanged(settings)
}}
label="Bushels per Tonne"/>
</React.Fragment>

165
src/pages/Grains.tsx
View file

@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from "react";
import PageContainer from "./PageContainer";
import CustomGrainForm from "grain/CustomGrainForm";
import { Box, Button, DialogActions, DialogContent, DialogTitle, Grid2, Typography } from "@mui/material";
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, DialogActions, DialogContent, DialogTitle, Divider, Grid2, IconButton, Typography } from "@mui/material";
import { pond } from "protobuf-ts/pond";
import ButtonGroup from "common/ButtonGroup";
import { useMobile, useSnackbar, useUserAPI } from "hooks";
@ -11,6 +11,8 @@ import { GetGrainExtensionMap, GetValidGrainExtensions, GrainExtension } from "g
import ResponsiveDialog from "common/ResponsiveDialog";
import { useGlobalState } from "providers";
import { Scope } from "models";
import React from "react";
import { AddCircle, ExpandMore } from "@mui/icons-material";
export default function Grains() {
const [currentCustomGrain, setCurrentCustomGrain] = useState<pond.GrainSettings>()
@ -18,7 +20,7 @@ export default function Grains() {
const [selectedGrain, setSelectedGrain] = useState<pond.GrainObject | undefined>()
const [displayCustom, setDisplayCustom] = useState(false)
const { openSnack } = useSnackbar()
const [tableSize, setTableSize] = useState(5)
const [tableSize, setTableSize] = useState(10)
const [tablePage, setTablePage] = useState(0)
const [tableTotal, setTableTotal] = useState(0)
const grainAPI = useGrainAPI()
@ -29,7 +31,11 @@ export default function Grains() {
const [openUpdateConfirmation, setOpenUpdateConfirmation] = useState(false)
const [grainObjectTableData, setGrainObjectTableData] = useState<pond.GrainObject[]>([])
const [supportedGrainTableData, setSupportedGrainTableData] = useState<GrainExtension[]>([])
// const [selectedGrainExtension, setSelectedGrainExtension] = useState<GrainExtension | undefined>()
const [accordionKey, setAccordionKey] = useState("allClosed")
const [openNewGrainDialog, setOpenNewGrainDialog] = useState(false)
const isMobile = useMobile()
const extraLoad = 10 //the amount of more to load on the mobile view when load more is clicked
//function to load the first set of custom grains
const loadCustomGrain = useCallback(() => {
@ -92,8 +98,25 @@ export default function Grains() {
return (
<ResponsiveTable<pond.GrainObject>
rows={grainObjectTableData}
noDataMessage="No Grain Types Found. Add a new custom grain to see them here"
loadMore={() => {
setTableSize(tableSize + extraLoad)
}}
renderMobile={(row) => <Accordion expanded={accordionKey === row.key} onChange={() => {
//close it if it is already open
if(accordionKey === row.key){
setAccordionKey("allClosed")
}else{
setAccordionKey(row.key)
}
setCurrentCustomGrain(row.settings ?? pond.GrainSettings.create())
}}>
<AccordionSummary expandIcon={<ExpandMore />}>{row.name}</AccordionSummary>
<AccordionDetails>
{customGrainDisplay()}
</AccordionDetails>
</Accordion>}
onRowClick={(grainObj) => {
setCurrentCustomGrain(grainObj.settings ?? pond.GrainSettings.create())
setSelectedGrain(grainObj)
setFormValid(true)
/** if they are viewin as a team leave the permissions alone, if not then use the users permissions to the grain type,
@ -108,7 +131,7 @@ export default function Grains() {
columns={[
{
title: "Name",
render: row => <Box>
render: row => <Box padding={2}>
<Typography>
{row.name}
</Typography>
@ -116,7 +139,7 @@ export default function Grains() {
},
{
title: "Group",
render: row => <Box>
render: row => <Box padding={2}>
<Typography>
{row.settings?.group}
</Typography>
@ -124,7 +147,7 @@ export default function Grains() {
},
{
title: "Equation",
render: row => <Box>
render: row => <Box padding={2}>
<Typography>
{equationName(row.settings?.equation ?? 0)}
</Typography>
@ -150,11 +173,21 @@ export default function Grains() {
<ResponsiveTable<GrainExtension>
rows={supportedGrainTableData}
page={tablePage}
// onRowClick={(ext) => {setSelectedGrainExtension(ext)}}
loadMore={() => {
setTableSize(tableSize + extraLoad)
}}
renderMobile={(row) => <Accordion>
<AccordionSummary expandIcon={<ExpandMore />}>{row.name}</AccordionSummary>
<AccordionDetails>
{supportedDisplay(row)}
</AccordionDetails>
</Accordion>}
pageSize={tableSize}
columns={[
{
title: "Name",
render: row => <Box>
render: row => <Box padding={2}>
<Typography>
{row.name}
</Typography>
@ -162,7 +195,7 @@ export default function Grains() {
},
{
title: "Group",
render: row => <Box>
render: row => <Box padding={2}>
<Typography>
{row.group}
</Typography>
@ -170,11 +203,27 @@ export default function Grains() {
},
{
title: "Equation",
render: row => <Box>
render: row => <Box padding={2}>
<Typography>
{equationName(row.equation ?? 0)}
</Typography>
</Box>
},
{
title: "Kg Per Bushel",
render: row => <Box padding={2}>
<Typography>
{row.weightConversionKg.toFixed(2)}
</Typography>
</Box>
},
{
title: "Bushels Per Tonne",
render: row => <Box padding={2}>
<Typography>
{row.bushelsPerTonne.toFixed(2)}
</Typography>
</Box>
}
]}
handleRowsPerPageChange={(e) => {
@ -189,9 +238,42 @@ export default function Grains() {
}
//the grain display for supported grain type to show the rest of the data such as what constants are used in the formula
const supportedDisplay = () => {
const supportedDisplay = (grain?: GrainExtension) => {
return (
<Box></Box>
<Box>
{grain ?
<React.Fragment>
<Typography>
Info
</Typography>
<Divider />
<Box padding={2}>
<Typography>Name: {grain.name}</Typography>
<Typography>Group: {grain.group}</Typography>
</Box>
<Typography>
Formula
</Typography>
<Divider />
<Box padding={2}>
<Typography>Equation: {equationName(grain.equation)}</Typography>
{/* <Typography>Constant A: {grain.a}</Typography>
<Typography>Constant B: {grain.b}</Typography>
<Typography>Constant C: {grain.c}</Typography> */}
</Box>
<Typography>
Conversions
</Typography>
<Divider />
<Box padding={2}>
<Typography>Kg per Bushel: {grain.weightConversionKg.toFixed(2)}</Typography>
<Typography>Bushels per Tonne: {grain.bushelsPerTonne.toFixed(2)}</Typography>
</Box>
</React.Fragment>
:
<Typography>Select a Grain from the table to view its details</Typography>
}
</Box>
)
}
@ -201,6 +283,9 @@ export default function Grains() {
openSnack("Grain type updated")
}).catch(err => {
openSnack("There was an issue updating the selected grain type")
}).finally(() => {
setOpenUpdateConfirmation(false)
loadCustomGrain()
})
}
}
@ -221,6 +306,19 @@ export default function Grains() {
)
}
//because the form is embedded on desktop this dialog is specifically for mobile view
const newGrainDialog = () => {
return (
<ResponsiveDialog open={openNewGrainDialog} onClose={() => setOpenNewGrainDialog(false)}>
<DialogTitle>Add New Grain</DialogTitle>
<DialogActions>
{customGrainDisplay()}
</DialogActions>
</ResponsiveDialog>
)
}
const addNewGrain = () => {
if(currentCustomGrain){
grainAPI.addGrain(currentCustomGrain).then(resp => {
@ -228,6 +326,9 @@ export default function Grains() {
openSnack("New grain type added")
}).catch(err => {
openSnack("There was a problem creating the new grain type")
}).finally(() => {
loadCustomGrain()
setOpenNewGrainDialog(false)//only for the mobile view since the desktop has it embedded
})
}
}
@ -238,6 +339,9 @@ export default function Grains() {
openSnack("Grain type removed")
}).catch(err => {
openSnack("There was a problem removing the selected grain type")
}).finally(() => {
setOpenRemoveConfirmation(false)
loadCustomGrain()
})
}
}
@ -272,7 +376,8 @@ export default function Grains() {
{selectedGrain &&
<Button sx={{marginRight: 1}} onClick={() => setOpenUpdateConfirmation(true)} disabled={!formValid || !permissions.includes(pond.Permission.PERMISSION_WRITE)} variant="contained" color="primary">Update</Button>
}
<Button onClick={() => addNewGrain()} disabled={!formValid || !permissions.includes(pond.Permission.PERMISSION_WRITE)} variant="contained" color="primary">Save New</Button>
{isMobile && !selectedGrain && <Button onClick={() => {setOpenNewGrainDialog(false)}}>Cancel</Button>}
<Button onClick={() => addNewGrain()} disabled={!formValid || (as !== "" && !permissions.includes(pond.Permission.PERMISSION_WRITE))} variant="contained" color="primary">Save New</Button>
</Box>
</Box>
)
@ -283,7 +388,7 @@ export default function Grains() {
return (
<Box>
<CustomGrainForm
grainSettings={currentCustomGrain}
grainSettings={selectedGrain?.settings || undefined}
onGrainSettingsChange={(newSettings, formValid)=>{
setCurrentCustomGrain(newSettings)
setFormValid(formValid)
@ -295,30 +400,41 @@ export default function Grains() {
}
const desktopView = () => {
if(displayCustom){
return (
<Grid2 container>
<Grid2 size={7} padding={2}>
{displayCustom ? grainObjectTable() : supportedGrainTable()}
{grainObjectTable()}
</Grid2>
<Grid2 size={5} padding={2}>
{displayCustom ? customGrainDisplay() : supportedDisplay()}
{customGrainDisplay()}
</Grid2>
</Grid2>
)
}else{
return (
<Box marginTop={2}>
{supportedGrainTable()}
</Box>
)
}
}
const mobileView = () => {
return (
<Box></Box>
<Box>
{displayCustom ? grainObjectTable() : supportedGrainTable()}
</Box>
)
}
return (
<PageContainer>
<Typography>
GRAIN PAGE
<Box padding={2}>
<Typography variant="h4">
Adaptive Grains
</Typography>
<Box display="flex" margin={2}>
<Box display="flex" marginTop={2} justifyContent="space-between">
<ButtonGroup
toggle
buttons={[
@ -338,10 +454,21 @@ export default function Grains() {
}
]}
/>
{isMobile && displayCustom &&
<IconButton sx={{padding: 0}} color="primary" onClick={()=>{
setSelectedGrain(undefined)
setCurrentCustomGrain(undefined)
setOpenNewGrainDialog(true)
}}>
<AddCircle />
</IconButton>
}
</Box>
{!isMobile ? desktopView() : mobileView()}
</Box>
{updateGrainConfirmation()}
{removeConfirmation()}
{newGrainDialog()}
</PageContainer>
)
}