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

putting the grain form in the component form and adding a custom grain toggle, also tweaked the form to be just the form when no grains are saved and to use a search select and put the form in an accordion when there are saved custom grains

Browse source
This commit is contained in:
csawatzky 2025-12-15 16:29:54 -06:00
parent d6c670fb78
commit fb1434f817
3 changed files with 116 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/grain/CustomGrainForm.tsx
View file

@ -1,4 +1,5 @@
import { Box, Button, MenuItem, TextField, Typography } from "@mui/material"
import { ExpandMore } from "@mui/icons-material"
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, MenuItem, TextField, Typography } from "@mui/material"
import SearchSelect, { Option } from "common/SearchSelect"
import { cloneDeep } from "lodash"
import { pond } from "protobuf-ts/pond"
@ -45,9 +46,9 @@ export default function CustomGrainForm(props: Props) {
useEffect(()=>{
grainAPI.listGrains(0, 0, "asc", "name", undefined, undefined, undefined, as).then(resp => {
let options: Option[] = []
let map: Map<string, pond.GrainObject> = new Map()
if (resp.data.grains){
let map: Map<string, pond.GrainObject> = new Map()
let options: Option[] = []
resp.data.grains.forEach(grain => {
map.set(grain.key, grain)
options.push({
@ -56,9 +57,9 @@ export default function CustomGrainForm(props: Props) {
group: grain.settings?.group,
})
})
setGrainOptions(options)
setGrainMap(map)
}
setGrainOptions(options)
setGrainMap(map)
})
},[grainAPI])
@ -83,43 +84,13 @@ export default function CustomGrainForm(props: Props) {
}
const settingsChanged = (newSettings: pond.GrainSettings) => {
setSelectedOption(null)
setNewGrainSettings(newSettings)
onGrainSettingsChange(newSettings)
}
return (
<React.Fragment>
<Box sx={{marginBottom: 2}}>
<SearchSelect
label="My Grains"
selected={selectedOption}
changeSelection={option => {
setIsNew(false)
setSelectedOption(option)
//when an option is selected set all of the state variables controlling the form entries
let grain = grainMap.get(option?.value)
if(grain && grain.settings){
//set the form values
setName(grain.name)
setGroup(grain.settings.group)
setEquation(grain.settings.equation)
setConstantA(grain.settings.a.toString())
setConstantB(grain.settings.b.toString())
setConstantC(grain.settings.c.toString())
setKgPerBushel(grain.settings.kgPerBushel.toString())
setBushelsPerTonne(grain.settings.bushelsPerTonne.toString())
//the the new grain settings object
setNewGrainSettings(grain.settings)
//pass that settings object back up
settingsChanged(grain.settings)
}
}}
group
options={grainOptions}
/>
</Box>
<Typography sx={{marginBottom: 1}}>Custom Grain Properties</Typography>
const newGrain = () => {
return (
<React.Fragment>
<TextField
sx={{marginBottom: 2}}
fullWidth
@ -281,6 +252,63 @@ export default function CustomGrainForm(props: Props) {
</Button>
</Box>
}
</React.Fragment>
)
}
const grainAccordion = () => {
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMore />}>Custom Grain Properties</AccordionSummary>
<AccordionDetails>
{newGrain()}
</AccordionDetails>
</Accordion>
)
}
return (
<React.Fragment>
{grainOptions.length === 0 ?
<Box>
<Typography sx={{marginBottom: 1}}>Custom Grain Properties</Typography>
{newGrain()}
</Box>
:
<Box>
<Box sx={{marginBottom: 2}}>
<SearchSelect
label="My Grains"
selected={selectedOption}
changeSelection={option => {
setIsNew(false)
setSelectedOption(option)
//when an option is selected set all of the state variables controlling the form entries
let grain = grainMap.get(option?.value)
if(grain && grain.settings){
//set the form values
setName(grain.name)
setGroup(grain.settings.group)
setEquation(grain.settings.equation)
setConstantA(grain.settings.a.toString())
setConstantB(grain.settings.b.toString())
setConstantC(grain.settings.c.toString())
setKgPerBushel(grain.settings.kgPerBushel.toString())
setBushelsPerTonne(grain.settings.bushelsPerTonne.toString())
//the the new grain settings object
setNewGrainSettings(grain.settings)
//pass that settings object back up
settingsChanged(grain.settings)
}
}}
group
options={grainOptions}
/>
</Box>
{grainAccordion()}
</Box>
}
</React.Fragment>
)
}